/* =========================================================================
   hero.css — Hero surface + A/B/C directions (DESIGN.md v2 §9) + toolbar chrome
   The sticky control toolbar is page-top chrome adjacent to the hero; its
   *controls* are primitives (primitives.css) — only its LAYOUT lives here.
   Dependency: tokens.css
   ========================================================================= */

/* ============================ HERO ============================ */
.hero {
  position: relative;
  padding-block: clamp(var(--sp-12), 9vw, var(--sp-20));
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; }
.hero__title {
  font-size: clamp(28px, 6vw, var(--fs-display));
  line-height: var(--lh-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
}
.hero__title .kw { color: var(--foreground); }
.hero__subtitle {
  margin-top: var(--sp-4);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--muted-foreground);
  max-width: 56ch;
}
.hero__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.hero__tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
}
.hero__tag svg, .hero__tag iconify-icon { font-size: var(--icon-fs-md); }

/* Hero is locked to direction A (pure tool register: plain --background, no
   dotted grid, no indigo accent). The B (dotted grid) / C (indigo accent)
   directions and their footer switcher were removed per DESIGN.md §9 once
   direction A was chosen as the final, single direction. */

/* ============================ TOOLBAR (layout chrome) ============================ */
.toolbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--background) 85%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.toolbar__row {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--toolbar-h);
  padding-block: var(--sp-2);
  flex-wrap: wrap;
}
.toolbar__group { display: flex; align-items: center; gap: var(--sp-2); }
/* §8E search group = THIS project's .toolbar__group--grow (spec text names it
   .toolbar__group--search; actual class here is --grow — implemented against the
   real class). flex-basis:100% in the wrap container makes search occupy its own
   row at 640-1299 (dual-row); --search-min-w is the per-breakpoint min-width floor
   so it never collapses to 0-4px. >=1300 single-row override lives in responsive.css. */
.toolbar__group--grow { flex: 1 1 100%; min-width: var(--search-min-w); }
.toolbar__sep { width: 1px; align-self: stretch; background: var(--border); margin-block: var(--sp-1); }
.toolbar__hamburger { display: none; }