/* Layout spacing */
.blog-featured { padding: calc(7rem + var(--navH)) 0 1.25rem; }
.blog-recent-strip { padding: .75rem 0 1.25rem; }
.posts-grid.section { padding-top: .25rem; }

/* Featured */
.featured-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: var(--panel);
}
.featured-media { display:block; position:relative; min-height: 420px; }
.featured-media img { width:100%; height:520px; object-fit:cover; display:block; }
.featured-overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 20%, rgba(0,0,0,.55) 100%);
}
.featured-text {
  position:absolute; left:0; right:0; bottom:0; padding: 1.25rem 1.25rem 1.35rem;
}
.featured-text .badge {
  display:inline-block; background: rgba(var(--primary-rgb), .1);
  border: 1px solid rgba(var(--primary-rgb), .25); color: var(--primary-light);
  padding: .45rem .85rem; border-radius: 999px; font-size: .85rem; margin-bottom: .65rem;
}
.featured-text h1 { color:#fff; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height:1.15; margin-bottom:.35rem; }
.featured-text p { color: var(--text-light); max-width: 820px; }
.featured-text .f-meta { color: var(--text-gray); margin-top: .25rem; }

/* Recent strip */
.strip-head { display:flex; align-items:flex-end; gap:.75rem; margin: .25rem 0 1rem; }
.recent-strip {
  display:grid; gap:.75rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .recent-strip { grid-template-columns: 1fr; } }
.recent-item {
  display:grid; grid-template-columns: 120px 1fr; gap:.75rem;
  background: var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:12px;
  text-decoration:none; color: var(--text-light); padding:.6rem;
}
.ri-thumb img { width:100%; height:100%; min-height:72px; object-fit:cover; border-radius:8px; display:block; }
.ri-date { color: var(--text-gray); font-size:.9rem; }
.ri-title { color:#fff; font-weight:600; line-height:1.3; margin:.1rem 0; }
.ri-excerpt { color: var(--text-gray); font-size:.95rem; }

/* Blog grid (matches your HTML: <div id="blogGrid" class="container grid">) */
#blogGrid{
  display:grid;
  gap:1.5rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:1100px){ #blogGrid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){  #blogGrid{ grid-template-columns: 1fr; } }


/* Blog: make dynamically-rendered cards visible even if IO didn't re-attach */
#blogGrid .animate-on-scroll { 
  opacity: 1; 
  transform: none; 
}

/* Clear fixed header neatly (uses same spacing as case-studies) */
.cs-hero { padding-top: calc(var(--navH) + 24px); }
.cs-hero { scroll-margin-top: calc(var(--navH) + 24px); }

/* Grid: keep responsive behavior identical to case-studies */
#blog-grid .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2rem;
}

/* Make whole card tappable, keep colors/typography from index.css */
.post-card a,
.blog-card a{ display:block; color:inherit; text-decoration:none; }

/* Kill global underline-on-hover effect *inside* cards */
#blog-grid .grid a::after{ content:none !important; }

/* Pagination: consistent spacing + disabled state */
.pagination{ display:flex; align-items:center; justify-content:center; gap:1rem; padding-top:2rem; }
.page-link[disabled]{ opacity:.5; pointer-events:none; }

/* Mobile gutters match site */
@media (max-width:480px){
  .cs-hero .container,
  #blog-grid .container,
  .pagination.container{ padding-inline:1.25rem; }
}

/* Load more */
.load-more-wrap{
  display:flex;
  justify-content:center;
  padding-top:2rem;
}
#loadMoreBtn{
  min-width: 180px;
}
#loadMoreBtn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* Center the Load more button and its text */
#loadMoreBtn.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Desktop: sticky aside */
@media (min-width: 1025px){
  .post-aside{
    position: sticky;
    top: calc(var(--navH, 72px) + 16px);
  }
}

/* Mobile & tablet: NOT sticky + stacked layout */
@media (max-width: 1024px){
  /* kill stickiness */
  .post-aside{
    position: static !important;
    top: auto !important;
    z-index: auto;
    /* optional niceties */
    margin-top: 1rem;
  }

  /* if your layout is a grid with two columns, stack it */
  .post-layout{
    display: grid;                 /* keep your existing display if already set */
    grid-template-columns: 1fr;    /* single column */
    gap: 1.25rem;
  }

  /* ensure main content appears before aside */
  .post-main{ order: 1; }
  .post-aside{ order: 2; }
}

/* ---------- Post layout & sticky behavior ---------- */

/* Desktop: two-column grid + sticky aside */
@media (min-width: 1025px){
  .post-wrap{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;  /* main | aside */
    gap: 2rem;
    align-items: start;
  }
  .post-wrap .post-aside{
    position: sticky;
    top: calc(var(--navH, 72px) + 16px); /* clear your fixed header */
    align-self: start;
    height: fit-content;
    max-height: calc(100svh - var(--navH, 72px) - 32px);
    overflow: auto;           /* avoid covering content if tall */
    z-index: 1;               /* below header, above background */
  }
}

/* Mobile & tablet: stack, non-sticky, no overlap */
@media (max-width: 1024px){
  .post-wrap{
    display: grid;            /* keep gaps consistent */
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .post-wrap .post-main{ order: 1; min-width: 0; }
  .post-wrap .post-aside{
    order: 2;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    margin-top: .5rem;        /* subtle spacing under content */
  }
}