/* ==========================================================================
   blocks/hero/style.css — acf/hero (S1). Live: #brxe-uwuvmx (≥479px) + #brxe-jukygp (≤478px), one block here.
   Spec: docs/scout/SECTIONS-A.md §1 (measurements §1.3, layout §1.5), docs/BLOCKS.md §4.1, DI-D3 to DI-D6.
   Mobile-first: the base rules are live's ≤478px variant; @media (min-width: 479px) is the desktop variant.
   Heights are content-driven (no min-height/100vh): 630.23 / 790.19 / 893.98px at 390 / 768 / 1440.
   ========================================================================== */

/* Section: .section gives the flex column, gap (--container-gap), padding and overflow-x clip.
   Paint order as live: background image → video (z -1 inside this stacking context) → ::before overlay →
   content (position: relative). */
.block-hero {
  z-index: var(--z-hero-bg);                         /* live .has-bg-video: its own stacking context */
  overflow: clip;                                    /* both axes: live's video wrapper (inset:0; overflow:hidden).
                                                        Clips the ≥479 16:9 video box, which sticks out above and
                                                        below once the section is wider than 16:9 */
  background-image: var(--hero-bg, none);            /* set inline from background_image */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.block-hero::before {                                /* rgba(0,0,0,.6) to 50 %, #0F202D from 90 %: melts into S2 */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wfx-hero-overlay);
  pointer-events: none;
}

/* Background video (DI-D4). Phones: the video box is the section box, cover-fitted, which draws the same pixels as
   live's width:100%/height:auto box (the same scale as cover). ≥479px: Bricks' 16:9 box, see the media query below.
   No src until view.js sets one. */
.block-hero__video {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

.block-hero__container {
  position: relative;
  align-items: center;                               /* live .align-items--center */
}

/* Text block: live .brxe-block.center--all.text--white.width--l (819.6px, max 100%). */
.block-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--content-gap);
  width: var(--width-l);
  max-width: 100%;
  color: var(--white);
  text-align: center;
}

.block-hero__crest {
  height: auto;                                      /* live :where(.brxe-svg){height:auto}: 200 × 128.67 from the viewBox */
}

.block-hero__title {
  color: var(--white);
}

.block-hero__intro {
  width: 100%;
  max-width: 60rem;                                  /* live #brxe-msagie (measured one-off) */
}

/* Optional `content` paragraphs (content previews; PREVIEW-DESIGN §2.1): the intro's box, Inter 16/27.25 white. */
.block-hero__text {
  width: 100%;
  max-width: 60rem;                                  /* same box as .block-hero__intro (live #brxe-msagie) */
}
.block-hero__text > * + * { margin-top: var(--paragraph-spacing); }

/* Buttons column: live .flex--col.gap--s. Phones: full width. ≥479: shrink-to-fit (the widest button, 375.28px). */
.block-hero__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
}

/* Buttons v2 locks (docs/design/BUTTONS.md §4.3). The pair is 46 + 46 = live's 44 + 48, so the column and
   the hero keep live's height; the card button keeps live's 48 box and its line count in the narrow card
   (the uppercase bold label is ~27px wider than live's capitalize 400, so the side padding pays for it). */
.block-hero__button--primary,
.block-hero__button--secondary { --btn-h: 4.6rem; }
.block-hero__button--secondary { --btn-padding-inline: 2rem; }       /* ≤478: live #brxe-iwwiiu, one line down to 360 */
.block-hero__card-button {
  --btn-h: 4.8rem;
  --btn-padding-inline: 1rem;
}

/* Card: live #brxe-fshejr .grid--2.grid--s-1.gap--none. Phones: its children are hidden, but the empty 0-px grid
   stays in the flow and takes one container gap (live's .grid--2{display:grid!important} wins over display:none). */
.block-hero__card {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-image: var(--wfx-panel-grad);
}

.block-hero__card-media,
.block-hero__card-body {
  display: none;
}

.block-hero__card-image {
  object-fit: cover;
}

.block-hero__card-title {
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
}

/* ≥479px: live's desktop variant. */
@media (min-width: 479px) {
  /* Bricks sizes the desktop <video> to a 16:9 box that covers the section, centred (inline px from its JS:
     1589.33×894 at 1440, 1920×1080 at 1920). Here: full width, height max(section, width×9/16), centred. Frames
     (object-fit: cover) land the same either way; the box matters for the static image below. */
  .block-hero__video {
    inset: 50% auto auto 0;
    height: auto;
    min-height: 100%;
    aspect-ratio: 16 / 9;
    transform: translateY(-50%);
  }

  /* Live's desktop poster (monarch-1.webp = background_image, object-fit: cover in that box): shown whenever no frame
     is decoded (nomotion, reduced motion, no JS, before the first frame). While the section is at most 16:9 wide
     (≤1589px at the 894px hero) it is the section background pixel for pixel; wider, it is height-driven by
     width×9/16 (scale 1080/996 at 1920), not by the section. Only when a desktop video exists, as on live. */
  .block-hero__video[data-src-desktop] {
    background-image: var(--hero-bg, none);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

  .block-hero__buttons {
    width: auto;
  }

  .block-hero__button--secondary {
    --btn-padding-inline: var(--btn-md-pad-x);       /* Buttons v2: md (live #brxe-szvrmt had 5rem; the column is 36px narrower) */
  }

  .block-hero__card {
    max-width: 70rem;                                /* live #brxe-fshejr */
  }

  .block-hero__card-media {
    display: flex;
    width: 100%;
    align-self: stretch;
  }

  .block-hero__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    gap: var(--content-gap);
    width: 100%;
    padding: 3rem;                                   /* live #brxe-irpfog */
  }
}

/* ≥481px: two columns (live ACSS .grid--s-1 is max-width 480px, so at 479–480px the card is one column). */
@media (min-width: 481px) {
  .block-hero__card {
    grid-template-columns: var(--grid-2);
  }
}