/* ============================================================
   LegalAtoms — Blog CATEGORY archive (/category/{state}/).
   Loaded ONLY on state category archives, AFTER tokens.css +
   legalatoms-gutenberg.css + legalatoms-blog-single.css +
   legalatoms-blog-index.css + legalatoms-blog-search.css — so it
   inherits the blog type system (Libre Caslon), the glass
   site-header, dark mode, and reuses the index's modules
   (.la-bx-wrap, .la-bx-eyebrow, .la-bx-h2, .la-bx-mast__*,
   .la-fa-list, .la-bx-latest, .la-bx-popular, .la-bx-cta) and the
   search pager (.la-bx-pager). This sheet adds only the category
   hero grid, breadcrumb, topic pills, curated-rail label, and the
   CTA state eyebrow. All color/space via tokens; theme-aware.
   ============================================================ */

body.la-blog-category{ background:var(--surface-page); }

/* Card/section links must not inherit the body.la-blog blue — scoped to main
   so the shared header/footer chrome keeps its link treatment (same lesson as
   body.la-blog-index). The breadcrumb re-links its anchors below. */
body.la-blog-category main a{ color:inherit; }

/* The theme's `.la-page h2` would force the display face — mirror the (0,2,1)
   italic-coral section heading the index and search pages use. */
body.la-blog-category .la-bx-h2{ color:var(--text-accent); font:italic 400 clamp(1.7rem,3vw,2.15rem)/1.1 var(--font-heading); letter-spacing:-.01em; margin:0; }

/* ============================================================
   SPLIT HERO — breadcrumb + state heading + topic pills (left),
   curated "Featured {State} guides" rail (right). Same wash and
   grid proportions as the /blog hero.
   ============================================================ */
.la-bxc-hero{
  background:
    radial-gradient(42rem 24rem at 12% -25%, rgba(68,100,158,.12), transparent 60%),
    radial-gradient(34rem 22rem at 96% -12%, rgba(220,99,48,.08), transparent 55%),
    var(--surface-page);
  border-bottom:1px solid var(--border-default);
  padding-top:clamp(36px,4.5vw,52px); padding-bottom:clamp(36px,4.5vw,52px);
}
.la-bxc-hero__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,72px); align-items:center; }
.la-bxc-hero__left{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }

/* Breadcrumb (.la-bxc-crumb) styles moved to legalatoms-blog-single.css —
   the trail now also renders on blog singles, and that sheet loads on both
   surfaces (single source). */

/* Topic pills — render only once the state › topic child categories exist.
   Active pill = solid ink (dark mode flips to navy-100), matching the pager's
   current-page treatment. */
.la-bxc-pills{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
body.la-blog-category .la-bxc-pill{
  display:inline-flex; align-items:center;
  background:var(--surface-card); color:var(--text-body);
  border:1px solid var(--border-strong); border-radius:999px;
  font:500 .9375rem/1 var(--font-sans); padding:10px 18px; text-decoration:none;
  transition:border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
body.la-blog-category .la-bxc-pill:hover{ border-color:var(--la-navy-400); color:var(--text-link); text-decoration:none; }
body.la-blog-category .la-bxc-pill.is-active{ background:var(--la-ink); border-color:var(--la-ink); color:var(--la-white); font-weight:600; }
:root[data-theme="dark"] body.la-blog-category .la-bxc-pill.is-active{ background:var(--la-navy-100); border-color:var(--la-navy-100); color:var(--la-navy-950); }

/* Curated rail label — mono kicker capped by a strong rule, standing in for
   the hero hairline the /blog rail uses. */
.la-bxc-hero__right{ display:flex; flex-direction:column; }
.la-bxc-hero__label{
  color:var(--text-secondary); font:500 .75rem/1.3 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase; margin:0;
  padding-bottom:12px; border-bottom:2px solid var(--text-heading);
}

/* ============================================================
   CTA — state eyebrow above the shared panel heading.
   ============================================================ */
.la-bx-cta__eyebrow{ color:var(--text-muted); font:500 .75rem/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; margin:0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .la-bxc-hero__grid{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); }
}