/* =============================================================
   HERO — Phase 2 redesign (home page)
   Dark-blue, data-textured hero: content + image, then a stats bar.
   Mobile-first. Uses design tokens from variables.css throughout.
   The section keeps class="hero" so it inherits the dark-zone token
   scope (white text, white button outlines) from components.css.
   ============================================================= */

#hero.hero {
  position: relative;
  background-color: var(--color-background-dark);
  /* Faint CSS-only "data grid" texture — no images, no JavaScript */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 80% 12%, rgba(27, 110, 243, 0.20), transparent 55%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  color: var(--color-white);
  /* The nav-height part must stay: the nav is fixed and the hero has to
     clear it. Only the breathing room below it flexes, so a phone is not
     handed the same 64px gap as a 1600px monitor. Desktop unchanged: the
     vw term reaches the 64px cap by ~1070px. */
  /* No nav-height here. The header is position:sticky, so it already
     occupies its own 72px in normal flow — adding it again put a second
     nav's worth of empty space above the hero on every screen. Only the
     breathing room below the nav belongs in this padding.
     (#programs keeps nav-height in scroll-margin-top: on an anchor jump
     the sticky bar DOES overlay the target, so that one is correct.) */
  padding: clamp(24px, 6vw, 64px) 0 clamp(32px, 6vw, 64px);
  overflow: hidden;
}

/* ── Layout ─────────────────────────────────────────────────── */
.hero__container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;   /* single column on mobile */
  gap: var(--space-10);
  align-items: center;
}

/* ── Content ────────────────────────────────────────────────── */
.hero__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.hero__headline {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  max-width: 18ch;
}
.hero__subtitle {
  font-size: 18px;               /* per brief: 18px subtitle */
  line-height: var(--line-height-normal);
  color: var(--color-white);
  max-width: 48ch;
  margin-bottom: var(--space-8);
}

/* ── Actions: 3 buttons — column (mobile) → row (desktop) ────── */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}
.hero__btn { justify-content: center; }
.hero__demo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  padding: var(--space-2) 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  transition: color 0.2s ease;
}
.hero__demo span { transition: transform 0.2s ease; }
.hero__demo:hover,
.hero__demo:focus-visible { color: var(--color-accent); }
.hero__demo:hover span { transform: translateX(4px); }

/* ── Image / placeholder ────────────────────────────────────── */
/* Shown on every screen. It used to be hidden below 1024px, from back
   when this was a "coming soon" box worth nothing on a small screen.
   A real cover photo earns its space on a phone too. */
.hero__image { display: block; }
.hero__photo,
.hero__placeholder {
  width: 100%;
  border-radius: var(--radius-lg);
}
/* The card is the picture. Height follows the file's own proportions
   rather than a fixed 4:3 box, so nothing is cropped and no letterbox
   gap appears — and a differently shaped photo still fits perfectly. */
.hero__photo {
  display: block;
  height: auto;
}
/* The placeholder has no natural shape of its own, so it keeps one. */
.hero__placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-background-mid));
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
}

/* ── Stats bar ───────────────────────────────────────────────
   auto-fit means the cards always share the row equally, whatever
   the count. Add or remove a stat in data/hero.json and the layout
   adjusts itself — no CSS change and never a gap where a card was. */
.hero__stats {
  width: 100%;
  max-width: 1280px;
  margin: var(--space-12) auto 0;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}
.hero-stat {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.hero-stat__value {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  color: var(--color-white);
}
.hero-stat__suffix { color: var(--color-accent); }
.hero-stat__num--todo { color: var(--color-text-light); }
.hero-stat__label {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
}

/* Fixed-nav offset for the "View Curriculum" anchor jump */
#programs { scroll-margin-top: calc(var(--nav-height, 72px) + var(--space-4)); }

/* ── Tablet ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
  /* .hero__stats intentionally omitted — the auto-fit rule above
     handles every width and every card count. */
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero__btn { flex: 0 0 auto; }
  .hero__demo { align-self: auto; }
}

/* ── Desktop ────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .hero__container { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); }
  .hero__headline { font-size: var(--font-size-5xl); }
}

/* ── Reduced motion: no transforms/transitions ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__demo,
  .hero__demo span { transition: none; }
  .hero__demo:hover span { transform: none; }
}