/* Depends on: tokens.css, nav.css -- linked as separate <link>
   tags by every template that uses this file, NOT @import-ed here.
   @import is a serialized waterfall: the browser cannot discover an
   imported file until it has downloaded and parsed the one importing
   it, so this site's deepest chain (tokens -> nav -> calendar ->
   event_detail) cost four sequential round trips before first paint.
   Separate links are all visible in the initial HTML and download in
   parallel. Templates list dependencies first, so the cascade is
   unchanged -- see core/tests/test_template_lint.py, which fails if
   an @import is reintroduced here. */
/* Landing page only (core/pilot_directory.html -- the `home` route).
   One full-bleed screen over a video-or-gradient background, so almost
   everything here is either the background stack or the few centred
   elements sitting on it. Type and spacing scale with clamp() rather than
   stepping at breakpoints, so it reads correctly at every width instead of
   only at the two or three a media query happens to name. */

body {
  margin: 0;
  /* Flex column + the hero's flex:1 below is what makes the hero fill
     exactly the leftover viewport, whatever height the topbar happens to
     be -- it wraps onto three rows on a phone, so a calc() against a fixed
     header height would be wrong on the device that matters most. The top
     bar itself is the shared sticky one from nav.css. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--text-primary);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; width: 100%; }

/* ---------- Background stack ----------
   The .hero-bg/.hero-video/.hero-scrim markup itself now lives in
   tokens.css (shared with login.css and any other page using the same
   background) -- these two rules are landing-page-specific because they
   target `.hero`, this page's own headline section. */
.hero-bg.has-media ~ .hero h1,
.hero-bg.has-media ~ .hero .counts { text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
:root[data-theme="light"] .hero-bg.has-media ~ .hero h1,
:root[data-theme="light"] .hero-bg.has-media ~ .hero .counts { text-shadow: 0 1px 12px rgba(255,255,255,0.65); }

/* ---------- Hero ---------- */
.hero {
  position: relative; z-index: 3;
  flex: 1 1 auto;
  display: grid; place-items: center;
  text-align: center;
  padding: 40px 0 max(40px, env(safe-area-inset-bottom));
}
/* Sits above the headline so it reads as scope-setting, not a fifth stat --
   the one place on this deliberately spare page that says which series the
   data actually covers, before the visitor invests in "Empezar". */
.series-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--text-secondary); font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.series-badge:hover { color: var(--text-primary); border-color: var(--accent-line); }
.series-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}

.hero h1 {
  margin: clamp(14px, 3vw, 20px) 0 0;
  font-size: clamp(40px, 9vw, 84px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.04;
  text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(90deg, var(--aurora-green), var(--aurora-teal), var(--aurora-cyan), var(--aurora-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The --aurora-* ramp is tuned for dark backgrounds -- tokens.css keeps it
   identical in light mode on purpose, since everywhere else it is only ever
   glow or data-viz, never text. Here it IS the headline, and #00e676 on a
   cream page is close to unreadable, so light mode draws the same idea from
   the accent/violet pair that theme already validates as body text. */
:root[data-theme="light"] .hero h1 .grad {
  background: linear-gradient(90deg, var(--accent), var(--violet), var(--purple));
  -webkit-background-clip: text; background-clip: text;
}

.btn-primary-lg {
  margin-top: clamp(28px, 5vw, 44px);
  padding: 16px 28px; border-radius: 12px; font-size: 15px; font-weight: 800;
  background: var(--accent); color: #04150c;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.btn-primary-lg:hover { background: var(--accent-strong); }

/* One thin line of live numbers -- the only "proof" left on the page, and
   the only place a label appears at all. */
.counts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 20px; margin: clamp(34px, 7vw, 60px) 0 0;
  /* --text-secondary rather than tertiary: at 12.5px over a photographic
     background, tertiary washed out completely. */
  font-size: 12.5px; color: var(--text-secondary);
}
.counts b { color: var(--text-primary); font-weight: 800; margin-right: 4px; }

@media (max-height: 560px) {
  /* Short viewport -- a phone held in landscape, or a very small laptop.
     Everything above is tuned to WIDTH, which on a 844x390 landscape phone
     leaves a page 60px taller than the screen; the point of this landing is
     that it is one screen, so tighten the vertical rhythm rather than let it
     scroll. Height-based, so it never affects a normal portrait phone. */
  .hero { padding: 18px 0; }
  .series-badge { padding: 4px 11px; font-size: 11.5px; }
  .hero h1 { margin-top: 12px; font-size: clamp(26px, 7.5vh, 46px); }
  .btn-primary-lg { margin-top: 18px; padding: 12px 22px; font-size: 14px; }
  .counts { margin-top: 20px; }
}

@media (max-width: 640px) {
  .counts { gap: 4px 14px; font-size: 12px; }
}

/* Under the call to action: the headline numbers in the outlined glow block the
   other pages use, and the next race weekend. */
.landing-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, auto); width: max-content; max-width: 100%; margin: 26px auto 0;
  border: 1px solid var(--accent-line); border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, var(--accent-soft), transparent 70%);
  box-shadow: 0 0 28px -10px var(--accent); backdrop-filter: blur(6px);
}
.landing-stats div { padding: 12px 22px; border-left: 1px solid var(--line); }
.landing-stats div:first-child { border-left: none; }
.landing-stats b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--text-primary); }
.landing-stats span { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.landing-next {
  display: flex; flex-direction: column; gap: 3px; align-items: center; margin: 14px auto 0; padding: 10px 20px; max-width: 460px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(10, 13, 16, 0.45); backdrop-filter: blur(6px);
  transition: border-color 0.15s ease;
}
.landing-next:hover { border-color: var(--accent-line); }
.ln-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.landing-next b { font-size: 14px; }
.ln-meta { font-size: 12px; color: var(--text-secondary); }
:root[data-theme="light"] .landing-next { background: rgba(255, 255, 255, 0.6); }
@media (max-width: 520px) {
  .landing-stats div { padding: 10px 14px; }
  .landing-stats b { font-size: 22px; }
}