/* full_page_hero block.
   The shared hero shell (.full-page-hero, __background, __overlay, __content,
   __badge, __title, __intro, __details, __ctas, .controls) lives in
   css/hero-page.css — this block emits those classes and inherits them.

   This file owns the MODIFIERS the template emits and hero-page.css does not
   implement (height, text alignment, overlay style), plus the countdown, scroll
   indicator and video control the template emits and nothing styled.

   No literal colour, no literal font family: every value is a token.
   The three height values come from the field's own labels — "Full viewport
   (95vh)", "Large (80vh)", "Medium (60vh)" — not from a judgement call. */

/* ------------------------------------------------------------ hero height
   hero-page.css sets min-height: 520px as the floor. These raise it to the
   chosen viewport share and keep a pixel floor as the lower bound, so a short
   viewport never crushes the content. */
.full-page-hero--full   { min-height: max(520px, 95vh); }
.full-page-hero--large  { min-height: max(520px, 80vh); }
.full-page-hero--medium { min-height: max(420px, 60vh); }

/* On a short landscape phone a 95vh hero is a full screen of scrim with the
   title below the fold. */
@media (max-height: 34em) {
  .full-page-hero--full,
  .full-page-hero--large { min-height: 420px; }
}

/* -------------------------------------------------------- text alignment
   --center is implemented in hero-page.css. --left is the natural flow of
   .full-page-hero__content, but it is stated explicitly so the modifier is real
   and so it wins if a page-level override has centred the content. */
.full-page-hero--left .full-page-hero__content {
  align-items: flex-start;
  text-align: left;
  margin-inline: 0;
}
.full-page-hero--left .full-page-hero__details,
.full-page-hero--left .full-page-hero__ctas { justify-content: flex-start; }

.full-page-hero--center .full-page-hero__details,
.full-page-hero--center .full-page-hero__ctas { justify-content: center; }
/* Centred content puts the badge back in the flow rather than hard left. */
.full-page-hero--center .full-page-hero__badge { align-self: center; }

/* ------------------------------------------------------------ overlay style
   The overlay is a SCRIM over photography, not a text colour, so a full-strength
   brand fill is legitimate here: the title is --white, which makes these the
   same contrast case as the .bg-blue / .bg-red grounds.

   --overlay-navy is the default and is already the hero-page.css rule. It is
   restated so the modifier is not silently inert and so the other three sit at
   the same specificity. */
.full-page-hero--overlay-navy .full-page-hero__overlay {
  background: radial-gradient(120% 90% at 12% 12%,
    rgba(var(--tint-rgb), .3) 0%,
    rgba(var(--tint-rgb), .94) 78%);
}

/* "Dark solid" — one flat scrim, no gradient. The densest of the four, for busy
   footage a gradient cannot hold down. */
.full-page-hero--overlay-dark .full-page-hero__overlay {
  background: rgba(var(--tint-rgb), .84);
}

/* Brand-fill gradients. Both run from the brand fill at the reading corner to
   the page tint at the far corner, so the title always sits on the denser end. */
.full-page-hero--overlay-magenta .full-page-hero__overlay {
  background: linear-gradient(115deg,
    rgba(var(--surface-brand-rgb), .94) 0%,
    rgba(var(--tint-rgb), .86) 100%);
}
.full-page-hero--overlay-blue .full-page-hero__overlay {
  background: linear-gradient(115deg,
    rgba(var(--surface-blue-rgb), .94) 0%,
    rgba(var(--tint-rgb), .86) 100%);
}

/* On the two brand-fill overlays the ground is a MID-TONE brand colour, not a
   deep one. css/bridge.css carries the measurement: an accent collapses on those
   (2.07:1 ucdon, 1.41:1 ucnl, 2.20:1 hesta) because the fill is sized to carry
   white with no headroom left. So emphasis and the detail figures ride the
   on-brand text colour and lean on weight rather than hue, and the badge inverts
   to a white chip so its own label keeps its contrast. */
.full-page-hero--overlay-magenta .full-page-hero__title em,
.full-page-hero--overlay-blue .full-page-hero__title em,
.full-page-hero--overlay-magenta .full-page-hero__detail strong,
.full-page-hero--overlay-blue .full-page-hero__detail strong {
  color: var(--text-on-brand);
}
.full-page-hero--overlay-magenta .full-page-hero__badge,
.full-page-hero--overlay-blue .full-page-hero__badge {
  background: var(--white);
  color: var(--text-heading);
}

/* ---------------------------------------------------------------- countdown
   The template emits __countdown > __countdown-label + __countdown-timer >
   __countdown-block (__countdown-number + __countdown-unit), separated by
   __countdown-separator. Nothing styled any of it. */
.full-page-hero__countdown { margin-bottom: 1.8rem; }
.full-page-hero__countdown-label {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark-rgb), .82);
  margin-bottom: .7rem;
}
.full-page-hero__countdown-timer {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-variant-numeric: tabular-nums;
}
.full-page-hero--center .full-page-hero__countdown-timer { justify-content: center; }
.full-page-hero__countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
  padding: .7rem .6rem .6rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--on-dark-rgb), .1);
  border: 1px solid rgba(var(--on-dark-rgb), .18);
}
.full-page-hero__countdown-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--white);
}
.full-page-hero__countdown-unit {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--on-dark-rgb), .78);
  margin-top: .3rem;
}
.full-page-hero__countdown-separator {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(var(--on-dark-rgb), .45);
  padding-top: .6rem;
}

/* ------------------------------------------------------- scroll indicator
   `bob` is the shared idle keyframe in css/base.css, paired here with its
   required prefers-reduced-motion reset. */
.full-page-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  width: 34px;
  height: 34px;
  color: rgba(var(--on-dark-rgb), .7);
  animation: bob 2.4s ease-in-out infinite;
}
.full-page-hero__scroll svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .full-page-hero__scroll { animation: none; }
}

/* ----------------------------------------------------------- video control
   The block emits its own control (__video-controls > __video-btn with an
   .icon-pause / .icon-play pair), not the shared .controls button.
   `.paused` is toggled by full_page_hero.js. */
.full-page-hero__video-controls { position: absolute; right: 24px; bottom: 24px; z-index: 2; }
.full-page-hero__video-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(var(--on-dark-rgb), .5);
  background: rgba(var(--tint-rgb), .45);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-page-hero__video-btn svg { width: 18px; height: 18px; }
.full-page-hero__video-btn .icon-play { display: none; }
.full-page-hero__video-btn.paused .icon-pause { display: none; }
.full-page-hero__video-btn.paused .icon-play { display: block; }

/* The still behind a video, so the video paints over it rather than under. */
.full-page-hero__image--fallback { z-index: 0; }

@media (max-width: 40em) {
  .full-page-hero__countdown-block { min-width: 3.6rem; padding: .55rem .45rem; }
  .full-page-hero__countdown-number,
  .full-page-hero__countdown-separator { font-size: 1.875rem; }
}