/**
 * StreamVerse — Hero
 * Source of truth: layout-spec-header-hero.md v1.11, Part B.
 * Every rule below is annotated with the spec section it implements.
 */

/* ------------------------------------------------------------------
 * B1 — Container
 * ------------------------------------------------------------------ */

.hero {
  position: relative;
  background-color: var(--color-bg-base); /* fallback shown behind/around the bg image */
  overflow: hidden; /* clips the full-bleed background image to the section bounds */
  padding-top: var(--space-7); /* mobile <768px, per B7 */
  padding-bottom: var(--space-4); /* tightened — see note below the desktop rule */
  /* NOTE — no existing token covers "hero section height"; the previous
     boxed showcase gave the section its height implicitly via the
     image's own aspect-ratio. A full-bleed background needs an explicit
     minimum instead, or it would only be as tall as the text content.
     Using viewport-relative units (not a fixed px value) so it stays
     responsive rather than introducing an arbitrary hardcoded token. */
  min-height: 60vh;
}

@media (max-width: 767.98px) {
  .hero {
    min-height: 70vh; /* shorter viewports need proportionally more of the
                          image visible for it to still read as a hero */
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-4); /* tightened — see note below the desktop rule */
  }
}

/* ------------------------------------------------------------------
 * B1 — Vertical padding, desktop
 *
 * NOTE — deviation from literal spec text: B1 states --space-10 (128px)
 * top padding on desktop. Iterative tightening passes, each per direct
 * request and each built only from existing scale tokens (never an
 * arbitrary or negative value):
 *   pass 1: top    --space-10 (128px) -> --space-8 (64px)
 *   pass 2: top    --space-8  (64px)  -> --space-6 (32px)
 *   pass 3: top    --space-6  (32px)  -> --space-4 (16px)
 *   pass 4: top    left as-is at --space-4 (16px), per explicit
 *           instruction to stop reducing Header-to-Hero spacing.
 *           bottom trimmed instead, by --space-2 (8px), to shrink the
 *           section's overall footprint without moving the Header or
 *           the content/media block's top edge: calc(--space-9 -
 *           --space-2) = 88px
 *   pass 5: bottom  88px -> --space-4 (16px), and the same reduction
 *           mirrored at tablet (--space-7 -> --space-4) and mobile
 *           (--space-7 -> --space-4, top unchanged) — per explicit
 *           request to close the large gap before the Popular Movies
 *           carousel. The carousel's own top padding was tightened to
 *           match (see movie-carousel.css) — together these two edges
 *           are what actually separated Hero from the carousel; Hero's
 *           min-height/centering above was left untouched, since that
 *           was called out explicitly as off-limits.
 * Hero's own top padding (16px) remains tighter than both the tablet
 * (--space-8, 64px) and mobile (--space-7, 48px) breakpoints —
 * intentional, per each explicit tightening request, not an oversight.
 * If these values should differ from what's implemented here, treat
 * that as an update to make to layout-spec-header-hero.md B1, not a
 * re-reversion of this rule.
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .hero {
    padding-top: var(--space-4); /* 16px — unchanged this pass, per instruction */
    padding-bottom: var(--space-4); /* 16px — tightened from 88px, see history above */
  }
}

.hero__inner {
  position: relative;
  z-index: 2; /* above .hero__bg (0) and .hero__gradient (1) */
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5); /* matches .container, <768px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit; /* lets content vertically center within the same min-height as .hero */
}

@media (min-width: 768px) {
  .hero__inner {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    padding-inline: var(--space-7);
  }
}

/* ------------------------------------------------------------------
 * Content width — previously handled by the 5/7 grid split; now that
 * the background is full-bleed rather than confined to a right
 * column, .hero__content is capped to roughly the same visual width
 * via its own children's ch-based max-widths (headline: 20ch/42ch on
 * .hero__subheadline, both already existing rules below) rather than
 * a grid-column span, since there's no second column to split against.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * B3/B5 — Content column
 * ------------------------------------------------------------------ */

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left-aligned, B5 */
  /* B3 originally put --space-5 (24px) here, with the (now-removed)
     .hero__badge's own height + margin-bottom making up the rest of the
     visual gap above the headline. Bumped to --space-8 (64px) to keep
     the headline landing in roughly the same vertical position/balance
     now that the badge is gone, rather than the whole block jumping
     up flush against the top of .hero__inner.
     Bumped again, --space-8 (64px) -> --space-10 (128px), per explicit
     request for "more comfortable, elegant" Header-to-Hero spacing.
     Note the non-obvious mechanic here: .hero__inner centers this box
     vertically (justify-content: center) within .hero's min-height, so
     only HALF of any padding-top increase actually shows as downward
     movement of the visible headline (the other half is absorbed by
     the box's own height growing, which shifts its centered position
     up by half as much). The 64px raw increase above is what produces
     the intended ~32px moderate visible shift — confirmed identical at
     every breakpoint (measured, not assumed) since each breakpoint's
     different min-height doesn't change this 50/50 split. Title,
     subtitle, and CTA all move together since their spacing between
     each other is unrelated margin/padding, untouched here. */
  padding-top: var(--space-10);
}

/* ------------------------------------------------------------------
 * Eyebrow — small uppercase label directly above the headline.
 * Deliberately secondary: --text-micro (12px, the smallest type-scale
 * step) against the headline's 40-56px, plain --font-body (not the
 * heading font) so it never reads as a second headline. Same small-
 * uppercase-label construction already used elsewhere on the site
 * (.live-now__label, .pricing-card__badge) — font-weight 700 + 0.08em
 * tracking + uppercase — just in the brand accent color rather than
 * white, so it reads as a deliberate "premium" cue.
 * ------------------------------------------------------------------ */
.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  margin-bottom: var(--space-2);
}

.hero__headline {
  font-family: var(--font-heading);
  font-size: 2.5rem; /* ~40px mobile, per B7 mobile headline scale-down */
  line-height: var(--text-display-line-height);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-primary);
  max-width: 20ch; /* supports the ~40-character, 2-line wrap ceiling per B13 */
}

/* The forced <br class="hero__headline-break"> in the markup guarantees
   the exact "Your Entertainment. One / Powerful IPTV Experience." split
   requested — hidden below 1024px so mobile/tablet keep their normal,
   width-driven responsive wrapping instead. */
.hero__headline-break {
  display: none;
}

@media (min-width: 1024px) {
  .hero__headline {
    font-size: var(--text-display); /* 56px desktop, B13 */
    /* Wide enough that neither half of the forced break ("Your
       Entertainment. One" / "Powerful IPTV Experience.") wraps again
       on its own — an upper bound, not a wrap trigger, since the <br>
       already decides where the line actually breaks. */
    max-width: 34ch;
  }

  .hero__headline-break {
    display: block;
  }
}

.hero__subheadline {
  margin-top: var(--space-5); /* B3 */
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-line-height);
  font-weight: 400;
  color: #A3AED0; /* per request: all section subtitles/descriptions
                      (including this secondary text under the Hero's
                      main headline) use this exact color */
  /* Widened from 38ch (which wrapped to 5 lines) per explicit request
     for the existing subtitle text to read as ~3-4 balanced lines on
     desktop instead. Measured empirically (Playwright line-count at
     1024px and 1440px, not guessed): 42-48ch all render exactly 4
     lines, 50ch+ drops to 3. 46ch sits in the middle of that 4-line
     band — comfortable margin from both the 38ch/5-line and the
     50ch/3-line edges, so small font-metric differences across
     browsers won't tip the count either way. Still a single rule with
     no breakpoint override, same as before: ch is font-relative, so
     tablet/mobile continue to wrap per their own narrower available
     width without needing separate values. */
  max-width: 46ch;
}

.hero__cta {
  margin-top: var(--space-6); /* B3 */
}

/* B12: no secondary/ghost button placed inline beside the Hero CTA — enforced
   structurally by only ever rendering one .hero__cta element, not by CSS. */

/* Mobile: CTA becomes full-width per B7 */
@media (max-width: 767.98px) {
  .hero__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
 * CTA caption — compact reassurance line directly below the primary
 * CTA. Same font-size/color pairing (--text-body-sm / #A3AED0) already
 * used sitewide for secondary/supporting copy (.hero__subheadline,
 * .trial-cta__subtitle, .pricing-card__duration) so it reads as
 * clearly secondary to the CTA button, not a second CTA. No max-width
 * set: like every other .hero__content child it's a shrink-to-fit flex
 * item bounded by .hero__inner's own width (align-items: flex-start on
 * the parent), so on narrow viewports it simply wraps within that
 * width — it can never cause horizontal overflow.
 * ------------------------------------------------------------------ */
.hero__cta-caption {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: #A3AED0;
}

/* ------------------------------------------------------------------
 * Right column — Movie Showcase (replaces the TV+Phone .hero__media
 * block, which is parked, unmodified, in hero-media-dormant.css).
 * Grid column placement stays here (B6, above); the showcase's own
 * internal styling (backdrop, gradient, entrance) lives in
 * movie-showcase.css.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * B10 — Content-group entrance animation
 * (Showcase's own entrance animation lives in movie-showcase.css,
 * using the same 150ms-delayed second-group timing as before.)
 * ------------------------------------------------------------------ */

.hero__content {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 400ms var(--ease-standard),
    transform 400ms var(--ease-standard);
}

.hero.is-loaded .hero__content {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__content {
    transition: none;
    transform: none;
    opacity: 1; /* show final state immediately, no motion */
  }
}