/* ==========================================================================
   hero.css — landing hero (dark photo bg, search-block, helper, aside)
   Markup: <section class="hero"><div class="hero-grid">
            <div>... h1, subhead, .search-block, .helper</div>
            <div class="hero-aside">... live-card + recent-bookings</div>
   The .search-block and .hero-aside live in their own component files.
   ========================================================================== */

section.hero {
  position: relative;
  isolation: isolate;
  color: white;
  background: var(--bg-dark); /* fallback if video + poster both fail to load */
  padding: var(--space-180) 0 var(--space-145);
  overflow: hidden;
}

/* Compact hero — used on trainer landing where the right column is a phone-
   mock that already has its own visual weight; we don't need the marquee
   client-landing height. Tightened by ~20% from the prior 110/72 rhythm. */
section.hero.is-compact {
  padding: var(--space-88) 0 var(--space-56);
}

/* Looping background video (or poster image fallback). The <video> element
   carries the poster, so when the MP4 is missing or hasn't decoded yet, the
   poster image still renders — the section never goes blank. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* anchor to top so faces aren't cropped */
  z-index: -2;
  pointer-events: none;
}

/* Dark gradient overlay — keeps text readable over bright video frames */
section.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--bg-dark-rgb), .35) 0%,
    rgba(var(--bg-dark-rgb), .60) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Film-grain texture — adds subtle organic noise on top of the video */
section.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../../noise.svg');
  background-size: 220px 220px;
  opacity: .55;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-56);
  align-items: center;
  position: relative;
}
/* Without this, a wide flex child (e.g. horizontal recent-bookings carousel)
   expands its grid cell past the viewport on mobile. */
.hero-grid > * { min-width: 0; }

/* Dark-surface variant of the section eyebrow chip — same fill rule used
   inside .trainer-cta. Lives here because the hero is the only other
   dark-bg consumer of .kicker. */
.hero .kicker {
  background: rgba(var(--white-rgb), .12);
  color: white;
}

.hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-display);
  margin: 0 0 var(--space-20);
  text-wrap: balance;
}
.hero p.subhead {
  font-size: var(--fs-subhead);
  color: rgba(var(--white-rgb), .85);
  margin: 0 0 var(--space-32);
  max-width: 54ch;
  font-weight: var(--fw-regular);
}

/* Action row under hero subhead — pair of CTAs (primary + ghost/link) used
   on trainer landing in place of the .search-block form. */
.hero-actions {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-8);
}
/* Hero is a dark surface — buttons inside are styled by `.on-dark` on the
   <section class="hero"> element (rules live in buttons.css). No local
   button overrides here. */

/* Helper row under search-block (location pill + popular categories) */
.hero .helper {
  margin-top: var(--space-18);
  font-size: var(--fs-sm);
  color: rgba(var(--white-rgb), .85);
  display: flex;
  gap: var(--space-14);
  flex-wrap: wrap;
  align-items: center;
}
.hero .helper .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-6) var(--space-13);
  background: rgba(var(--white-rgb), .1);
  border: 1px solid rgba(var(--white-rgb), .22);
  border-radius: var(--pill);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: white;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.hero .helper .pill:hover {
  background: rgba(var(--white-rgb), .18);
  border-color: rgba(var(--white-rgb), .4);
}
.hero .helper .pill svg.lucide,
.hero .helper .pill [data-lucide] { width: 14px; height: 14px; }
.hero .helper .popular { color: rgba(var(--white-rgb), .7); }
.hero .helper .popular a { color: white; font-weight: var(--fw-medium); }
.hero .helper .popular a:hover { color: var(--brand-soft); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-36); }
  section.hero { padding: var(--space-110) 0 var(--space-72); }
  section.hero.is-compact { padding: var(--space-72) 0 var(--space-44); }
  .hero h1 { font-size: var(--fs-h1-md); }
}
@media (max-width: 720px) {
  /* Mobile hero: tighter vertical rhythm, content centered. The search-block
     resets text-align to left at the component level, so its labels/inputs
     stay flush-left even inside this centered context. */
  section.hero {
    padding: var(--space-88) 0 var(--space-36);
    text-align: center;
  }
  section.hero.is-compact { padding: var(--space-72) 0 var(--space-32); }
  .hero-grid { gap: var(--space-22); }
  .hero h1 {
    font-size: var(--fs-metric);
    line-height: 1.12;
    margin-bottom: var(--space-14);
  }
  .hero h1 .h1-break { display: none; }
  .hero p.subhead {
    font-size: var(--fs-sm);
    margin: 0 auto var(--space-20);
  }
  .hero .helper { justify-content: center; }
  /* CTA pair stacks full-width — same rule as auth/trainer-cta actions. */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-10);
  }
  .hero-actions .btn { width: 100%; }
}