/* =========================================================
   Blog page styles (template-blog.php)
   FIXED: 2 columns on desktop/tablet, no shadows, sticky bottom meta,
          remove ALM "done" button gap, Featured vs All layouts
   ========================================================= */

/* Container only for this template */
.page-template-template-blog .ch-container{
  max-width: 1470px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.ch-support__text{
	display:flex;
	flex-direction:column;
	gap:30px;
}
/* Reset only inside blog template */
.page-template-template-blog .ch-blog a{
  color: inherit;
  text-decoration: none;
}
.page-template-template-blog .ch-blog a:hover{ text-decoration: none; }
.page-template-template-blog .ch-blog img{
  max-width: 100%;
  height: auto;
  display: block;
}
.page-template-template-blog .ch-blog h2,
.page-template-template-blog .ch-blog h3,
.page-template-template-blog .ch-blog p{ margin: 0; }

/* ================= HERO ================= */
.page-template-template-blog .ch-blog-hero{
  position: relative;
  overflow: hidden;
}
.page-template-template-blog .ch-blog-hero__media img{
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}
.page-template-template-blog .ch-container--hero{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.page-template-template-blog .ch-blog-hero__inner{
  max-width: 54%;
  padding-bottom:16px;
  pointer-events: auto;
}
.page-template-template-blog .ch-blog-hero__title{
  color: #fff;
  font-size: 50px;
  line-height: normal;
  font-weight:700;
  margin-bottom: 25px;
}
.page-template-template-blog .ch-blog-hero__subtitle{
  color: rgba(255,255,255,.92);
  font-size: 30px;
  line-height: normal;
  font-weight:500;
}

/* ================= SECTIONS ================= */
.page-template-template-blog .ch-blog-section{ padding: 96px 0 0 0; }
.page-template-template-blog .ch-blog-section__title{
  font-size: 50px;
  line-height: 1.1;
	font-weight:700;
  margin-bottom: 22px;
}

/* ================= SECTION HEAD + SORT ================= */
.page-template-template-blog .ch-blog-section__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.page-template-template-blog .ch-blog-section__head .ch-blog-section__title{ margin: 0; }
h2.ch-blog-section__title {margin-bottom:0;padding-bottom:0; }
/* Desktop dropdown */
.page-template-template-blog .ch-sort{
  position: relative;
  display: inline-block;
}
.page-template-template-blog .ch-sort__toggle{
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-template-template-blog .ch-sort__list{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 260px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  list-style: none;
  margin: 0;
  padding: 10px;
  display: none;
  z-index: 50;
}
.page-template-template-blog .ch-sort.open .ch-sort__list{ display: block; }
.page-template-template-blog .ch-sort__list a{
  display: block;
  padding: 14px 14px;
  border-radius: 12px;
  color: #0e1116;
  font-weight: 700;
}
.page-template-template-blog .ch-sort__list a:hover{ background: rgba(31,136,201,.10); }

/* Mobile trigger button */
.page-template-template-blog .ch-sort-btn{
  display: none;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
}

/* =========================================================
   ALM GRID (hard enforce 2 columns on desktop/tablet)
   Works both when cards are direct children of .alm-listing
   and when .alm-reveal exists.
   ========================================================= */
.page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing,
.page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing .alm-reveal{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 32px !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing > .ch-postcard,
.page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing .alm-reveal > .ch-postcard{
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* =========================================================
   POST CARD (base)
   - NO SHADOW (per your screenshots)
   ========================================================= */
.page-template-template-blog .ch-postcard{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none !important; /* remove shadow */
}
.page-template-template-blog .ch-postcard__link{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* image base */
.page-template-template-blog .ch-postcard__img{
  width: 100%;
  background: #e6e6e6;
  border-radius:20px;
}
.page-template-template-blog .ch-postcard__img img{
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.page-template-template-blog .ch-postcard__img--ph .ch-postcard__img-ph{
  height: 240px;
  background: #dcdcdc;
}

/* body base */
.page-template-template-blog .ch-postcard__body{
  padding: 30px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;            /* let body stretch */
  min-height: 0;
}

/* title + arrow */
.page-template-template-blog .ch-postcard__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.page-template-template-blog .ch-postcard__title{
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  color: #0e1116;
}
.page-template-template-blog .ch-postcard__arrow{
  flex: 0 0 auto;
  margin-top: 2px;
}

/* excerpt: clamp to keep cards same height */
.page-template-template-blog .ch-postcard__excerpt{
  color: #3b4856;
  font-size: 18px;
  font-weight:400;
  line-height: 1.4;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* IMPORTANT: allow pushing divider/meta down */
  flex: 1 1 auto;
  min-height: calc(1.55em * 3);
}

/* divider + meta always at the bottom */
.page-template-template-blog .ch-postcard__divider{
  height: 1px;
  background: rgba(0,0,0,.10);
  margin-top: auto;          /* stick to bottom */
  width: 100%;
}
.page-template-template-blog .ch-postcard__meta{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #1f88c9;
  font-size: 14px;
  font-weight: 500;
line-height:20px;
  width: 100%;
}
.page-template-template-blog .ch-postcard__date{ color: #1f88c9; }
.page-template-template-blog .ch-postcard__read{
  color: #1f88c9;
  text-align: right;
}

/* =========================================================
   FEATURED POSTS (2 big cards) — vertical layout
   Add this class on the section wrapper: .ch-blog-featured
   ========================================================= */
.page-template-template-blog .ch-blog-featured .alm-listing,
.page-template-template-blog .ch-blog-featured .alm-listing .alm-reveal{
  gap: 32px !important;
}

.page-template-template-blog .ch-blog-featured .ch-postcard__link{
  flex-direction: column;
}

.page-template-template-blog .ch-blog-featured .ch-postcard__img img,
.page-template-template-blog .ch-blog-featured .ch-postcard__img--ph .ch-postcard__img-ph{
  height: 320px;
  border-radius:20px;
}

/* Featured: hide ALM button wrapper completely (no gap) */
.page-template-template-blog .ch-blog-featured .alm-btn-wrap{
  display: none !important;
}

/* =========================================================
   ALL POSTS — horizontal layout (image left + text right)
   Add this class on the section wrapper: .ch-blog-all
   ========================================================= */
.page-template-template-blog .ch-blog-all .alm-listing,
.page-template-template-blog .ch-blog-all .alm-listing .alm-reveal{
  gap: 32px !important;
}

.page-template-template-blog .ch-blog-all .ch-postcard__link{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  height: 100%;
}

/* Image box fixed (your spec) */
.page-template-template-blog .ch-blog-all .ch-postcard__img{
  width: 325px;
  height: 260px;
  flex: 0 0 325px;
  border-radius: 20px;
  overflow: hidden;
}
.page-template-template-blog .ch-blog-all .ch-postcard__img img,
.page-template-template-blog .ch-blog-all .ch-postcard__img--ph .ch-postcard__img-ph{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text block spec */
.page-template-template-blog .ch-blog-all .ch-postcard__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Make head take full width */
.page-template-template-blog .ch-blog-all .ch-postcard__head{
  width: 100%;
  gap: 16px;
}
.page-template-template-blog .ch-blog-all .ch-postcard__divider,
.page-template-template-blog .ch-blog-all .ch-postcard__meta{
  width: 100%;
}

/* =========================================================
   LOAD MORE BUTTON
   - keep it for All posts
   - hide when "done/disabled" to avoid big empty space
   ========================================================= */
.page-template-template-blog .ch-blog-all .alm-btn-wrap{
  grid-column: 1 / -1;
  text-align: left;
  margin-top: 20px;
  padding: 0 !important;
}
.page-template-template-blog .ch-blog-all .alm-load-more-btn{
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  background: #1f88c9;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
/* when ALM says "done" => hide button AND collapse wrapper spacing */
.page-template-template-blog .alm-load-more-btn.done,
.page-template-template-blog .alm-load-more-btn[disabled]{
  display: none !important;
}
.page-template-template-blog .alm-btn-wrap{
  min-height: 0 !important;
}

/* =========================================================
   SPACING between Featured and All posts
   You wanted 96px from end of featured cards to All posts section.
   So: featured section bottom padding smaller + all section top padding.
   ========================================================= */
.page-template-template-blog .ch-blog-featured.ch-blog-section{ padding-bottom:0; }
.page-template-template-blog .ch-blog-all.ch-blog-section{ padding-top: 96px; }
/* 48 + 48 = 96px */

/* ================= SUPPORT BLOCK ================= */
.page-template-template-blog .ch-support{
  background-color:#E7F5FC;
	margin-top:96px;
}
.page-template-template-blog .ch-support__card{
  
  padding: 50px 0 50px 0;
}
.page-template-template-blog .ch-support__text h3{
  font-size: 50px;
	font-weight:700;
 
}
.page-template-template-blog .ch-support__text p{
  max-width: 94%;
  color: #2d3a47;
  padding-bottom:0;
  line-height: 1.5;
}
.page-template-template-blog .ch-support__btn{
  display: inline-flex;
  padding: 15px 20px;
  border-radius: 999px;
  background: #ffe205;
  color: #111;
  font-size:24px;
  font-weight: 600;
  line-height:1.25;
  align-items: center;
  gap:14px;
  width:min-content;
}

/* ================= NEWSLETTER BLOCK ================= */
.page-template-template-blog .ch-newsletter{
  padding: 70px 0 70px;
}
.page-template-template-blog .ch-newsletter__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: baseline;
}
.page-template-template-blog .ch-newsletter__inner h3{
  	font-size: 50px;
	line-height:normal;
	font-weight:700;
	
}
.page-template-template-blog .ch-newsletter__form{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap:0;
}
.page-template-template-blog .ch-newsletter__form input[type="email"]{
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  padding: 0 14px;
}
.page-template-template-blog .ch-newsletter__form button{
 
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 30px; 
  border-radius: 999px;
  border: 1px solid rgba(31,136,201,.35);
  background: #fff;
  padding: 13px 20px;
  cursor: pointer;
}
.page-template-template-blog .ch-newsletter__agree{
  grid-column: 1 / -1;
  display: flex;
  gap:10px;
  align-items: center;
  font-size: 14px;
  font-weight:400;
  line-height:24px;
  color: #516272;
}

/* ================= MOBILE BOTTOM SHEET ================= */
.page-template-template-blog .ch-sort-sheet{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 9999;
}
.page-template-template-blog .ch-sort-sheet__inner{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: #fff;
  border-radius: 22px;
  padding: 12px;
  transform: translateY(12px);
  transition: transform .2s ease;
}
.page-template-template-blog .ch-sort-sheet.open{
  opacity: 1;
  pointer-events: auto;
}
.page-template-template-blog .ch-sort-sheet.open .ch-sort-sheet__inner{
  transform: translateY(0);
}
.page-template-template-blog .ch-sort-sheet__inner a{
  display: block;
  padding: 16px 14px;
  border-radius: 14px;
  font-weight: 800;
}
.page-template-template-blog .ch-sort-sheet__inner a:hover{
  background: rgba(31,136,201,.10);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px){
	.page-template-template-blog .ch-newsletter__inner h3{
		font-size: 40px;}
  .page-template-template-blog .ch-blog-hero__media img{ height: 537px; }
	.page-template-template-blog .ch-support__text h3 {font-size:40px;}
  .page-template-template-blog .ch-blog-hero__title{ font-size: 50px; }
  .page-template-template-blog .ch-blog-section__title{ font-size: 40px; }

  /* Keep 2 columns but slightly smaller gaps */
  .page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing,
  .page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing .alm-reveal{
    gap: 24px !important;
  }

  /* All posts image smaller on tablet */
  .page-template-template-blog .ch-blog-all .ch-postcard__img{
    width: 260px;
    flex-basis: 260px;
    height: 220px;
  }
.page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing, .page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing .alm-reveal {
    display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;}	
	
	.page-template-template-blog .ch-newsletter__agree {
		width:68%;
		align-items:baseline;
		
	}	
	
}

@media (max-width: 768px){
	.page-template-template-blog .ch-support__text h3 {font-size:32px;}
	.page-template-template-blog .ch-newsletter__inner h3{
		font-size: 32px;}
  .page-template-template-blog .ch-blog-hero__media img{ height: 528px; }
  .page-template-template-blog .ch-blog-hero__title{ font-size: 50px;font-weight:700; }
  .page-template-template-blog .ch-blog-hero__subtitle{ font-size: 18px; font-weight:500; }

  /* Force 1 column on mobile */
  .page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing,
  .page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing .alm-reveal{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Show mobile sort button, hide desktop dropdown */
  .page-template-template-blog .ch-sort{ display: none; }
  .page-template-template-blog .ch-sort-btn{ display: inline-flex; }

  /* All posts becomes vertical on mobile 
  .page-template-template-blog .ch-blog-all .ch-postcard__link{
    flex-direction: column;
    gap: 16px;
  }
  .page-template-template-blog .ch-blog-all .ch-postcard__img{
    width: 100%;
    flex: 0 0 auto;
    height: 220px;
  }*/
	
	

  .page-template-template-blog .ch-newsletter__inner{ grid-template-columns: 1fr; }
  .page-template-template-blog .ch-newsletter__form{ grid-template-columns: 3fr 1fr; column-gap:30px; }

	.page-template-template-blog .ch-container--hero {
		align-items:end;
	}
	.page-template-template-blog .ch-support__text p {width:100%;}
	.page-template-template-blog .ch-support__btn {
		padding: 14px 20px;
		font-size: 18px;
	}
	.page-template-template-blog .ch-newsletter__form button {
		font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
	padding: 9px 20px;	
	}
/* All posts: 1 column list, BUT horizontal card (like your screenshot) */
  .page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing,
  .page-template-template-blog .ch-blog .ajax-load-more-wrap .alm-listing .alm-reveal{
    grid-template-columns: 1fr !important; /* одна колонка */
    gap: 24px !important;
  }

  .page-template-template-blog .ch-blog-all .ch-postcard__link{
    flex-direction: row;       /* горизонтально */
    align-items: stretch;
    gap: 24px;
  }

  .page-template-template-blog .ch-blog-all .ch-postcard__img{
    width: 260px;              /* як у тебе для <=1024, підходить і для 768 */
    flex: 0 0 260px;
    height: 220px;
  }

  .page-template-template-blog .ch-blog-all .ch-postcard__body{
    padding: 24px 0 0;         /* щоб не було “завеликої” внутрішньої рамки справа */
    min-width: 0;
  }
	.page-template-template-blog .ch-postcard {
		border-radius:0;
	}	

}	

@media (max-width: 560px){
	.page-template-template-blog .ch-newsletter__inner h3{
		font-size: 32px;}
  .page-template-template-blog .ch-blog-hero__media img{ height: 537px; }
	
  .page-template-template-blog .ch-blog-all .ch-postcard__link{
    flex-direction: column;
    gap: 16px;
  }
  .page-template-template-blog .ch-blog-all .ch-postcard__img{
    width: 100%;
    flex: 0 0 auto;
	  height: 220px;}

	
	    .page-template-template-blog .ch-newsletter__form button {
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
		color:#1F88C9;
        line-height: 30px;
        padding: 9px 20px;
        width: min-content;
        margin-top: 30px;
        order: 2;}
	.page-template-template-blog .ch-newsletter__agree {
		padding-top:10px;
	}
}

div#ajax-load-more {
	padding-top:30px;
}

.page-template-template-blog .breadcrumb{
  max-width: 1470px;
  margin-left: auto;
  margin-right: auto;
  padding-top:15px;
  padding-bottom:15px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}