/* ==========================================================================
   Core Chiro Rehab — Blog Listing Page Redesign
   Namespaced under `.chc-landing` (loaded together with home-redesign.css).
   Reuses .chc-blog-card (defined in home-redesign.css) for the card look,
   just laid out in a static paginated grid instead of the home page's slider.
   ========================================================================== */

/* ---------- hero ---------- */
.blog-hero{
  position:relative; overflow:hidden; background:var(--c-mint);
  min-height:calc(100vh - var(--chc-total-header-h, 133px));
  min-height:calc(100svh - var(--chc-total-header-h, 133px));
  display:flex; align-items:center; padding:56px 0;
}
.blog-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; position:relative; z-index:1; }
.blog-hero__crumbs{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--c-ink-soft); margin-bottom:20px; }
.blog-hero__crumbs a{ color:var(--c-ink-soft); text-decoration:none; }
.blog-hero__crumbs a:hover{ color:var(--c-orange-dark); }
.blog-hero__crumbs i{ font-size:10px; color:var(--c-border); }
.blog-hero__crumbs span{ color:var(--c-ink); font-weight:700; }
.blog-hero h1{ font-size:clamp(30px, 3.6vw, 44px); font-weight:800; line-height:1.2; letter-spacing:-.01em; margin-bottom:18px; }
.blog-hero p.chc-lead{ color:var(--c-ink-soft); font-size:16.5px; line-height:1.8; max-width:540px; }
.blog-hero__media{ position:relative; }
.blog-hero__media .chc-dotgrid{ width:200px; height:200px; top:-36px; right:-36px; border-radius:20px; }
.blog-hero__frame{ position:relative; border-radius:28px; overflow:hidden; box-shadow:var(--c-shadow-md); }
.blog-hero__frame img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }

/* ---------- grid ---------- */
.blog-listing{ padding:100px 0 110px; background:#fff; }
.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.blog-grid .chc-blog-card{ flex:none; }
.blog-empty{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--c-ink-soft); font-size:15.5px; }

/* ---------- pagination ---------- */
.blog-pagination{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin-top:56px; }
.blog-pagination__link,
.blog-pagination__current,
.blog-pagination__disabled{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px;
  border-radius:10px; font-family:var(--f-head); font-weight:700; font-size:14px; text-decoration:none;
  border:1.5px solid var(--c-border); color:var(--c-ink); transition:.25s ease;
}
.blog-pagination__link:hover{ background:var(--c-orange); border-color:var(--c-orange); color:#fff; }
.blog-pagination__current{ background:var(--c-orange); border-color:var(--c-orange); color:#fff; }
.blog-pagination__disabled{ opacity:.4; cursor:not-allowed; }

@media (max-width:1199px){
  .blog-hero__grid{ grid-template-columns:1fr; }
  .blog-hero__media{ order:-1; max-width:420px; margin:0 auto; }
  .blog-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:767px){
  .blog-hero{
    min-height:calc(100vh - var(--chc-total-header-h, 74px));
    min-height:calc(100svh - var(--chc-total-header-h, 74px));
    padding:56px 0;
  }
  .blog-listing{ padding:70px 0; }
  .blog-grid{ grid-template-columns:1fr; }
}