/* ============================================================
   LegalAtoms — Blog INDEX (/blog) landing page.
   Loaded ONLY on the blog index (is_page('blog')), AFTER
   tokens.css + legalatoms-gutenberg.css + legalatoms-blog-single.css,
   so it shares the blog's Foreign-Affairs type system (Libre Caslon),
   the retinted glass site-header, and full dark-mode support — then
   adds the index-only masthead / latest-guides / state-directory / CTA
   layout on top. All color/space/radius via tokens; theme-aware.
   ============================================================ */

/* Body owns the page (mirrors body.la-blog in blog-single.css). The
   la-blog class already gives us: 68px top pad for the fixed header,
   Public Sans base, the header retint, and dark-mode. la-blog-index just
   drops the article-only frame/measure concerns. */
body.la-blog-index{ background:var(--surface-page); }

/* Header + frame are OPAQUE and equal to the "Most read" band on the index, so
   the chrome and the band read as one flat periwinkle. The shared blog header
   and .la-frame strips are normally translucent glass (--glass-bg +
   backdrop-filter: saturate(1.4)); over the periwinkle band that composites
   DEEPER than the band, so a solid band could never match a glass header where
   they overlap on scroll. Post singles keep the glass (there the header sits
   over article content, where frost reads well). Same specificity as
   `body.la-blog .la-site-header` (0,2,1) — wins by later source order. Values
   mirror .la-bx-popular (light #CED8ED / dark --surface-tint). */
body.la-blog-index .la-site-header,
body.la-blog-index .la-frame__l,
body.la-blog-index .la-frame__r,
body.la-blog-index .la-frame__b{
  background:#CED8ED;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
:root[data-theme="dark"] body.la-blog-index .la-site-header,
:root[data-theme="dark"] body.la-blog-index .la-frame__l,
:root[data-theme="dark"] body.la-blog-index .la-frame__r,
:root[data-theme="dark"] body.la-blog-index .la-frame__b{ background:var(--surface-tint); }
/* The glass header carries a white edge (border-bottom + inset top highlight)
   that reads as a frosted rim over content — but on the opaque index header it
   shows as a stray white line where the header meets the band. Neutralize both
   so the header blends seamlessly into the band (border-color, not `none`, to
   avoid a 1px reflow). */
body.la-blog-index .la-site-header{ border-bottom-color:transparent; box-shadow:none; }

/* Shared inner container for every section. */
.la-bx-wrap{ max-width:1120px; margin:0 auto; padding-left:clamp(20px,5vw,48px); padding-right:clamp(20px,5vw,48px); }

/* Card/section text links must not inherit the body.la-blog blue — but scope
   this to the page body only, NOT the shared header/footer chrome, so the
   site-header nav keeps the same link treatment as the blog single (otherwise
   `body.la-blog-index a` would beat `body.la-blog a` and the nav renders black). */
body.la-blog-index main a{ color:inherit; }

/* Shared coral mono eyebrow (cards + masthead). */
.la-bx-eyebrow{ color:var(--text-accent); font:500 .75rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin:0; }

/* Shared section heading — Libre Caslon italic, coral accent (FA "Current Issue"
   vibe). Two-class selector (0,2,1) to beat the theme's `.la-page h2` (0,1,1),
   which otherwise forces --text-h1 (upright, --font-display) + navy. */
body.la-blog-index .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 — state selector (left) + curated guides (right).
   Foreign-Affairs layout: text + selector left, article list right.
   ============================================================ */
.la-bx-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(40px,5vw,60px); padding-bottom:clamp(40px,5vw,60px);
}
.la-bx-hero__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,72px); align-items:center; }
.la-bx-hero__left{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.la-bx-hero__left .la-bx-chooser{ margin-top:6px; }
.la-bx-mast__title{ color:var(--text-heading); font:400 clamp(2.1rem,3.6vw,3rem)/1.07 var(--font-display); letter-spacing:-.01em; margin:0; }
.la-bx-mast__lede{ color:var(--text-secondary); font:400 clamp(1.1rem,1.5vw,1.28rem)/1.6 var(--font-sans); margin:0; max-width:34ch; }

/* Top hairline caps the curated list (previously carried by the removed
   "Featured guides" eyebrow). Only in the hero — Popular has its own h2. */
.la-bx-hero__right{ display:flex; flex-direction:column; }
.la-bx-hero__right .la-fa-list{ border-top:1px solid var(--border-strong); }

/* ============================================================
   FA-STYLE ARTICLE LIST — shared by curated (hero) + popular.
   Thumbnail only when the post has a real feature image (no placeholder).
   ============================================================ */
.la-fa-list{ display:flex; flex-direction:column; }
/* Card anchors never underline as a whole — the theme's `a:hover{underline}`
   would drag one line through eyebrow, title, dek, and date. Hover affordance =
   the title color shift plus a thin underline on the TITLE ONLY (editorial
   pattern). Covers the FA cards and the Latest-guides feature/grid cards. */
.la-fa-item, .la-fa-item:hover,
.la-bx-feature, .la-bx-feature:hover,
.la-bx-item, .la-bx-item:hover{ text-decoration:none; }
.la-fa-item:hover .la-fa-item__title,
.la-bx-feature:hover .la-bx-feature__title,
.la-bx-item:hover .la-bx-item__title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
.la-fa-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:17px 0; border-bottom:1px solid var(--border-default); }
.la-fa-item__body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.la-fa-item__eyebrow{ color:var(--text-accent); font:500 .6875rem/1.3 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; }
.la-fa-item__title{ color:var(--text-heading); font:400 1.3rem/1.24 var(--font-heading); letter-spacing:-.005em; text-wrap:balance; transition:color var(--duration-base) var(--ease-out); }
.la-fa-item:hover .la-fa-item__title{ color:var(--text-link); }
.la-fa-item__dek{ color:var(--text-secondary); font:400 1rem/1.5 var(--font-sans); }
.la-fa-item__thumb{ position:relative; flex:none; width:96px; height:96px; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-subtle); box-shadow:var(--shadow-sm); }
.la-fa-item__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* State chooser */
.la-bx-chooser{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; margin-top:0; }
.la-bx-chooser__field{ position:relative; }
.la-bx-chooser__select{
  appearance:none; -webkit-appearance:none;
  width:320px; max-width:100%; box-sizing:border-box;
  background:var(--surface-card); color:var(--text-body);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  font:400 1.0625rem/1.2 var(--font-sans);
  padding:14px 44px 14px 16px; cursor:pointer;
  transition:border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.la-bx-chooser__select:hover{ border-color:var(--la-navy-400); }
.la-bx-chooser__select:focus-visible{ outline:none; border-color:var(--la-navy-500); box-shadow:0 0 0 3px rgba(68,100,158,.25); }
.la-bx-chooser__field::after{
  content:""; position:absolute; right:16px; top:50%; width:11px; height:11px; margin-top:-3px;
  border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg); pointer-events:none;
}
.la-bx-chooser__go{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--la-ink); color:var(--la-white);
  border:0; border-radius:var(--radius-md); cursor:pointer;
  font:600 1.0625rem/1 var(--font-sans); padding:0 26px;
  transition:filter var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.la-bx-chooser__go:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.la-bx-chooser__go:active{ transform:translateY(0); }
:root[data-theme="dark"] .la-bx-chooser__go{ background:var(--la-navy-100); color:var(--la-navy-950); }

/* ============================================================
   LATEST GUIDES
   ============================================================ */
.la-bx-latest{ padding-top:clamp(40px,5vw,56px); padding-bottom:clamp(40px,5vw,56px); }
.la-bx-latest__inner{ display:flex; flex-direction:column; gap:28px; }

/* Featured (most recent) */
.la-bx-feature{ display:flex; flex-direction:column; gap:12px; max-width:60ch; padding-bottom:30px; border-bottom:1px solid var(--border-default); }
.la-bx-feature__kicker{ display:flex; align-items:center; gap:11px; }
.la-bx-feature__dot{ width:3px; height:3px; border-radius:50%; background:var(--border-strong); }
.la-bx-feature__topic{ color:var(--text-muted); font:500 .75rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.la-bx-feature__title{ color:var(--text-heading); font:400 clamp(1.7rem,3vw,2.15rem)/1.16 var(--font-display); letter-spacing:-.01em; margin:0; text-wrap:balance; transition:color var(--duration-base) var(--ease-out); }
.la-bx-feature:hover .la-bx-feature__title{ color:var(--text-link); }
.la-bx-feature__dek{ color:var(--text-body); font:400 1.1875rem/1.6 var(--font-sans); margin:0; }
/* Date matches the kicker/eyebrow treatment (mono, letterspaced, uppercase) but
   in muted color — publish date, no "Updated" prefix in list context. */
.la-bx-feature__date{ color:var(--text-muted); font:500 .75rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }

/* Grid of recent */
.la-bx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 64px; }
.la-bx-item{ display:flex; flex-direction:column; gap:7px; padding:18px 0; border-bottom:1px solid var(--border-default); }
.la-bx-item__kicker{ display:flex; align-items:center; gap:10px; }
.la-bx-item__cat{ color:var(--text-accent); font:500 .75rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.la-bx-item__date{ color:var(--text-muted); font:500 .75rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.la-bx-item__title{ color:var(--text-heading); font:400 1.2rem/1.32 var(--font-heading); margin:0; text-wrap:balance; transition:color var(--duration-base) var(--ease-out); }
.la-bx-item:hover .la-bx-item__title{ color:var(--text-link); }

/* ============================================================
   MOST READ — GA4-driven ranked list (NYT "most read" style).
   Soft-blue Foreign-Affairs band + a numbered single-column list: a
   deliberately different SHAPE from the hero's FA cards (coral Libre Caslon
   numeral, no eyebrow/thumb) so the section reads as its own ranked module.
   ============================================================ */
/* Band background = the OPAQUE render of the header/frame glass. The header and
   frame use --glass-bg + backdrop-filter saturate(1.4) composited over page
   content, which renders as a deeper periwinkle; the band has no colored backdrop
   to saturate, so the translucent token alone renders too pale (visibly lighter
   than the header). #CED8ED is that rendered periwinkle, tuned to match the
   header; dark mode uses --surface-tint, which matches the dark header. */
.la-bx-popular{
  background:#CED8ED;
  border-top:1px solid var(--border-strong);
  border-bottom:1px solid var(--border-strong);
  padding-top:clamp(40px,4vw,56px); padding-bottom:clamp(40px,4vw,56px);
}
:root[data-theme="dark"] .la-bx-popular{ background:var(--surface-tint); border-color:var(--border-default); }
.la-bx-popular__inner{ display:flex; flex-direction:column; gap:clamp(14px,2vw,22px); }

/* Ranked list: coral Libre Caslon numeral + title only, single column.
   Constrained measure keeps titles readable on the wide band. */
.la-rank-list{ list-style:none; margin:0; padding:0; max-width:48rem; }
/* No row underline on hover — it would drag through the numeral. The title's
   color shift (below) is the affordance, matching the FA/feature lists. */
/* Divider is a translucent navy, not --border-strong (#CBD5DA) — that grey-blue
   is too close to the periwinkle band to read. */
.la-rank-item__link{ display:flex; align-items:baseline; gap:clamp(16px,2.2vw,28px); padding:15px 0; border-bottom:1px solid rgba(43,63,102,.22); text-decoration:none; }
.la-rank-item__link:hover{ text-decoration:none; }
.la-rank-item:first-child .la-rank-item__link{ border-top:1px solid rgba(43,63,102,.22); }
.la-rank-item__num{ flex:none; min-width:1.7em; color:var(--text-accent); font:400 clamp(1.4rem,2.3vw,1.9rem)/1 var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.la-rank-item__title{ color:var(--text-heading); font:400 clamp(1.15rem,1.7vw,1.4rem)/1.28 var(--font-heading); letter-spacing:-.005em; text-wrap:balance; transition:color var(--duration-base) var(--ease-out); }
.la-rank-item__link:hover .la-rank-item__title{ color:var(--text-link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
:root[data-theme="dark"] .la-rank-item__link{ border-color:var(--border-default); }

/* ============================================================
   CTA — light navy-tint panel (NOT the dark cta-band)
   ============================================================ */
.la-bx-cta{ padding-top:clamp(44px,5vw,64px); padding-bottom:clamp(52px,6vw,80px); }
.la-bx-cta__panel{
  background:var(--surface-tint); border:1px solid var(--border-default);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
  padding:clamp(32px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(32px,5vw,56px); flex-wrap:wrap;
}
.la-bx-cta__copy{ display:flex; flex-direction:column; gap:14px; max-width:34rem; }
.la-bx-cta__title{ color:var(--text-heading); font:400 clamp(1.7rem,3vw,2.15rem)/1.18 var(--font-heading); letter-spacing:-.01em; margin:0; }
.la-bx-cta__sub{ color:var(--text-body); font:400 1.1875rem/1.6 var(--font-sans); margin:0; }
.la-bx-cta__btn{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  background:var(--gradient-cta); color:#fff !important;
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  font:600 1.0625rem/1 var(--font-sans); padding:15px 26px; text-decoration:none;
  transition:box-shadow var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.la-bx-cta__btn:hover{ box-shadow:var(--shadow-md); filter:brightness(1.09); transform:translateY(-1px); color:#fff; text-decoration:none; }
.la-bx-cta__btn:active{ filter:brightness(.98); transform:translateY(0); }
.la-bx-cta__btn span{ opacity:.85; }
/* Reuse .la-cta-card__caption (blog-single.css) for the 4-item checklist; only
   widen the gap for the roomier landing layout. */
.la-bx-cta__panel .la-cta-card__caption{ gap:13px; min-width:240px; }
.la-bx-cta__panel .la-cta-card__caption li{ font-size:.9375rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .la-bx-hero__grid{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); }
  .la-bx-grid{ grid-template-columns:1fr; gap:0; }
  .la-bx-cta__panel{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .la-bx-chooser__go{ flex:1 1 100%; padding:14px; }
  .la-fa-item__thumb{ width:76px; height:76px; }
}