/* ============================================================
   LegalAtoms — Blog SEARCH results (?s=…) and AUTHOR archives
   (/author/…, via the shared la-blog-search body class).
   Loaded ONLY on those surfaces, AFTER tokens.css +
   legalatoms-gutenberg.css + legalatoms-blog-single.css +
   legalatoms-blog-index.css — so it inherits the blog type system
   (Libre Caslon), the glass site-header, dark mode, and reuses the
   index's shared pieces (.la-bx-wrap, .la-bx-eyebrow, .la-bx-h2,
   .la-bx-chooser__*, .la-bx-cta, .la-fa-list). This sheet adds only
   the search masthead, result list, and pager. All color/space via
   tokens; theme-aware.
   ============================================================ */

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

/* Result cards and empty-state 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). */
body.la-blog-search main a{ color:inherit; }

/* ============================================================
   MASTHEAD — query, count, state filter, on the hero wash.
   ============================================================ */
.la-bx-srch__mast{
  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(32px,4.5vw,52px); padding-bottom:clamp(28px,4vw,40px);
}
.la-bx-srch__mast-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.la-bx-srch__title{ color:var(--text-heading); font:400 clamp(1.9rem,3.4vw,2.7rem)/1.1 var(--font-display); letter-spacing:-.01em; margin:0; text-wrap:balance; }
.la-bx-srch__count{ color:var(--text-secondary); font:400 1.0625rem/1.5 var(--font-sans); margin:0; }
/* Author-archive masthead bio (between the name and the count). */
.la-bx-author__bio{ color:var(--text-body); font:400 clamp(1.05rem,1.4vw,1.2rem)/1.6 var(--font-sans); margin:0; max-width:46rem; }
.la-bx-srch__filters{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; margin-top:8px; }
.la-bx-srch__state{ width:260px; padding-top:11px; padding-bottom:11px; }

/* ============================================================
   RESULT LIST — bordered rows: state · topic kicker, title,
   dek (only when a real editorial excerpt exists), date.
   ============================================================ */
.la-bx-srch__results{ padding-top:clamp(28px,4vw,44px); padding-bottom:clamp(12px,2vw,20px); }
.la-bx-srch__list{ display:flex; flex-direction:column; max-width:62rem; }
/* The theme's `a:hover{underline}` would drag one line through kicker, title,
   and date (the whole card is one anchor). Hover affordance = color shift plus
   a thin underline on the TITLE ONLY (editorial pattern, matching the other
   blog card lists). */
.la-bx-result, .la-bx-result:hover{ text-decoration:none; }
.la-bx-result:hover .la-bx-result__title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
.la-bx-result{ display:flex; flex-direction:column; gap:9px; padding:24px 0; border-bottom:1px solid var(--border-default); }
.la-bx-result:first-child{ padding-top:8px; }
.la-bx-result__kicker{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.la-bx-result__dot{ width:3px; height:3px; border-radius:50%; background:var(--border-strong); }
.la-bx-result__topic{ color:var(--text-muted); font:500 .75rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.la-bx-result__title{ color:var(--text-heading); font:400 clamp(1.3rem,2vw,1.55rem)/1.26 var(--font-heading); letter-spacing:-.005em; margin:0; text-wrap:balance; transition:color var(--duration-base) var(--ease-out); }
.la-bx-result:hover .la-bx-result__title{ color:var(--text-link); }
.la-bx-result__dek{ color:var(--text-secondary); font:400 1.0625rem/1.6 var(--font-sans); max-width:56rem; }
.la-bx-result__date{ color:var(--text-muted); font:500 .75rem/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }

/* Empty state */
.la-bx-srch__results--empty .la-bx-wrap{ display:flex; flex-direction:column; gap:22px; }
.la-bx-srch__empty-lede{ color:var(--text-body); font:400 clamp(1.15rem,1.7vw,1.3rem)/1.6 var(--font-sans); margin:0; max-width:46rem; }
.la-bx-srch__empty-list{ max-width:46rem; }
.la-bx-srch__empty-list .la-fa-list{ border-top:1px solid var(--border-strong); }
/* The theme's `.la-page h2` would force the display face — same fight the index
   won with (0,2,1); mirror it here for the empty state's section heading. */
body.la-blog-search .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; }

/* ============================================================
   PAGER — pill buttons; current page = solid ink (design ref).
   paginate_links() emits .page-numbers (a/span), .current, .dots,
   .prev/.next.
   ============================================================ */
.la-bx-pager{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:28px; }
.la-bx-pager .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 14px;
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  color:var(--text-body); font:500 .9375rem/1 var(--font-sans); text-decoration:none;
  transition:border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.la-bx-pager a.page-numbers:hover{ border-color:var(--la-navy-400); color:var(--text-link); text-decoration:none; }
.la-bx-pager .page-numbers.current{ background:var(--la-ink); border-color:var(--la-ink); color:var(--la-white); font-weight:600; }
.la-bx-pager .page-numbers.dots{ border:0; min-width:auto; padding:0 4px; color:var(--text-muted); }
:root[data-theme="dark"] .la-bx-pager .page-numbers.current{ background:var(--la-navy-100); border-color:var(--la-navy-100); color:var(--la-navy-950); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:560px){
  .la-bx-srch__state{ width:100%; }
  .la-bx-srch__filters{ width:100%; }
  .la-bx-srch__filters .la-bx-chooser__field{ flex:1 1 100%; }
}