/* ==========================================================================
   parts/page-hero.css — page hero (parts/page-hero.php; blocks/page-hero wraps it).
   Live: /horses/ #brxe-vcohgz (≥479px) + #brxe-itjndz (≤478px), one section here.
   Spec: docs/R2-PLAN.md §1.4, docs/scout/r2/ARCHIVE.md §3 (measurements §3.1, styles §3.2);
   the optional .page-hero__text / .page-hero__images: docs/content/PREVIEW-DESIGN.md §2.2.
   Heights (live, forced final state): 509.84 / 614.39 / 591.69 at 390×844 / 768×1024 / 1440×900.
   ≥ 60vh: 2 × --section-space-m + crest + h1 + intro + button + note + 4 × --space-m; below that the
   section is 60vh and the container is centred (so the height depends on the viewport HEIGHT at 768).
   Mobile-first: the base rules are live's ≤478px copy; @media (min-width: 479px) is the desktop copy.
   Round 3 (docs/R3-PLAN.md §1.4.1, docs/scout/r3/TEAM.md §3): .page-hero--compact (the /the-monarch-team/ hero,
   live #brxe-tshlif: 381.39 / 424.03 / 483.61), .page-hero--overlay-secondary-70 and .page-hero--bg-m-{top|center}.
   The /horses/ hero sets none of them, so its rendering is unchanged.
   Round 4 (docs/R4-PLAN.md §1.2, docs/scout/r4/R4-ADDENDUM.md C2, docs/scout/r4/STORIES.md §3): .page-hero--offset
   (the /our-stories/ hero, live #brxe-pzkwap: 417.13 / 948.47 / 1019.36), .page-hero--overlay-slate-white,
   .page-hero--bg-custom and the image tiles (.page-hero--has-tiles, live .wlp-imgbox1). Nothing else sets them.
   ========================================================================== */

/* Section: .section gives the flex column (align-items centre), --container-gap, the padding and overflow-x clip.
   Paint order as live: background image → video (z -1 in this stacking context) → ::before overlay → content. */
.page-hero {
  z-index: var(--z-hero-bg);                         /* live .has-bg-video: position relative; z-index 1 */
  justify-content: center;                           /* live .justify-content--center */
  overflow: clip;                                    /* live's video wrapper: inset 0, overflow hidden */
  background-image: var(--page-hero-bg-m, var(--page-hero-bg, none));
  background-size: cover;
  background-position: 50% 0%;                       /* live "center top" */
  background-repeat: no-repeat;
}

.page-hero--bg-center { background-position: 50% 50%; }

/* background_position custom: 50% horizontally, --page-hero-bg-y (the root's inline style) vertically. Live
   /our-stories/ #brxe-pzkwap "center 43%". Before the phone rules, so background_position_mobile still wins ≤478. */
.page-hero--bg-custom { background-position: 50% var(--page-hero-bg-y, 50%); }

/* Phone background position (≤478; background_position_mobile). Live team #brxe-tshlif ≤478: "center center".
   ≥479 restores the desktop position (below). */
.page-hero--bg-m-top { background-position: 50% 0%; }
.page-hero--bg-m-center { background-position: 50% 50%; }

.page-hero--min-60vh { min-block-size: 60vh; }       /* live ACSS .height--60 */

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--page-hero-overlay);
  pointer-events: none;
}

.page-hero--overlay-secondary-20 {
  /* live #brxe-vcohgz::before; fallback = ACSS --secondary-trans-20 until tokens.css carries it */
  --page-hero-overlay: linear-gradient(var(--secondary-trans-20, rgba(15, 32, 45, .2)), var(--secondary));
}

.page-hero--overlay-secondary-70 {
  /* live team #brxe-tshlif::before; fallback = ACSS --secondary-trans-70 until tokens.css carries it */
  --page-hero-overlay: linear-gradient(var(--secondary-trans-70, rgba(15, 32, 45, .7)), var(--secondary));
}

.page-hero--overlay-base-ultra-dark-70 {
  /* /our-stable/ (local DB page 1539); fallback = ACSS --base-ultra-dark-trans-70 until tokens.css carries it */
  --page-hero-overlay: linear-gradient(var(--base-ultra-dark-trans-70, rgba(26, 26, 26, .7)), var(--secondary));
}

.page-hero--overlay-slate-white {
  /* live /our-stories/ #brxe-pzkwap::before ≤478: tertiary 70 % (to 30 %) → slate .98 → white (≥479: below) */
  --page-hero-overlay: var(--wfx-slate-white-overlay-m);
}

/* Background video: no src until page-hero.js sets one (never under ?nomotion=1 / reduced motion / no JS), so the
   section background shows. Cover-fitted over the section box, as live's wrapper (inset 0) + object-fit cover. */
.page-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;
}

/* Container: live .brxe-container.center--all (flex column, everything centred, gap --space-m). */
.page-hero__container {
  position: relative;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
}

/* Crest: ≤478px the raster crest_mobile_image (live #brxe-feungn: width 100%, max 20rem → 200 × 142.19),
   ≥479px the inline SVG (live #brxe-irlexx: 20rem → 200 × 128.67). Without a mobile image the SVG shows everywhere. */
.page-hero__crest {
  display: block;
  height: auto;                                      /* live :where(.brxe-svg){height:auto}: height from the viewBox */
}

.page-hero__crest--desktop { display: none; }

.page-hero__crest-m {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
}

.page-hero__title {
  font-size: var(--h1);                              /* the <h1> size by class: a second hero on a page prints an <h2> */
  color: var(--white);
  text-transform: uppercase;                         /* live .text--uppercase; the DOM text keeps its case */
}

/* intro and note: Inter 16 / 27.25, white, centred, no max-width (live). */

/* Long copy (preview): the home hero's intro box (max 60rem); paragraphs 1em apart. */
.page-hero__text {
  width: 100%;
  max-width: 60rem;                                  /* live #brxe-msagie (measured one-off) */
}

.page-hero__text > * + * { margin-top: var(--paragraph-spacing); }

/* CTA: v2 primary lg + glow (docs/design/BUTTONS.md §3.1 A1). Buttons v2 lock: live's fluid btn--l box
   (text-l + 2 × 16px padding + the 2px outline border: 55.27 / 56.06 / 57.33 at 390 / 768 / 1440). The
   min-block-size pins that box to the layout unit (1/64 px): live's line box rounds text-l to the nearest unit,
   while two equal paddings around the 14px label (and a plain min-height) floor it, 0.016px short (the page hero
   and everything below would sit 0.02px higher). */
.page-hero__button {
  --btn-h: calc(var(--text-l) + 3.6rem);
  min-block-size: round(nearest, var(--btn-h), 0.015625px);
}

/* Round 5 (R5-PLAN §1.2, OD-R5-3). Buttons v2 lock: /our-stable/'s CTA is live's FILLED btn--l (no border): text-l +
   2 × 16px = 51.27 / 52.06 / 53.33 at 390 / 768 / 1440, 4px shorter than the outline box above. Without it the centred
   column moves the crest, h1 and note by 2px. 0,2,0 beats the default lock (0,1,0); the compact lock is never combined. */
.page-hero--btn-filled .page-hero__button {
  --btn-h: calc(var(--text-l) + 3.2rem);
  min-block-size: round(nearest, var(--btn-h), 0.015625px);
}

/* Two images side by side at every width: live /womens-ownership/ gallery row #brxe-gqwvib. */
.page-hero__images {
  display: grid;
  grid-template-columns: var(--grid-2);
  gap: 1.5rem;                                       /* live #brxe-gqwvib --gutter (literal) */
  width: var(--width-l);
  max-width: 100%;
}

.page-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1.6;                             /* live gallery ratio (COMPONENTS §4.3) */
  object-fit: cover;
  border-radius: var(--radius-l);
}

/* ---- Compact variant (the team page; R3-PLAN §1.4.1, TEAM §3.1–§3.4) ---------------------------------------
   Live #brxe-tshlif: a content-height hero. Its page CSS (min-height 30vw, 40vw ≤991) overrides the section's
   .height--60, so the height is content-driven below ≈1613px (504 at 1680, 576 at 1920) and never depends on the
   viewport height. Height = padding-top + crest + h1 + button + note + 3 × --space-xs + padding-bottom:
     390: 49.25 + 128.67 + 83.72 (38px, 2 lines) + 52 + 27.25 + 40.5 + 0 = 381.39
     768: 65.03 + 128.67 + 41.55 + 56 + 27.25 + 40.5 + 65.03 = 424.03 · 1440: 90 + 128.67 + 51.19 + 56 + 27.25 + 40.5 + 90 = 483.61
   Base = ≤478 (live's mobile_portrait rules): no bottom padding, a 3.8rem h1, a 52px button box. */
.page-hero.page-hero--compact {
  min-block-size: 40vw;                              /* replaces .page-hero--min-60vh (0,2,0 > 0,1,0) */
  padding-block-end: 0;                              /* live ≤478: the note touches the section bottom (quirk 10) */
}

.page-hero--compact .page-hero__container { gap: var(--space-xs); }   /* live .gap--xs */

.page-hero--compact .page-hero__title { font-size: 3.8rem; }          /* live #brxe-foxdcn ≤478 */

/* CTA: v2 primary lg + glow. Buttons v2 lock: live's btn--l box is 52px at ≤478 (16px label) and 56px above
   (20px label); replaces the default page-hero lock (0,2,0 > 0,1,0). The width does not drive layout. */
.page-hero--compact .page-hero__button {
  --btn-h: 5.2rem;
  min-block-size: 5.2rem;
}

/* ≥479px: live's desktop copy. */
@media (min-width: 479px) {
  .page-hero {
    background-image: var(--page-hero-bg, none);
  }

  .page-hero--bg-m-top,
  .page-hero--bg-m-center { background-position: 50% 0%; }

  .page-hero--bg-center:is(.page-hero--bg-m-top, .page-hero--bg-m-center) { background-position: 50% 50%; }

  .page-hero--bg-custom:is(.page-hero--bg-m-top, .page-hero--bg-m-center) { background-position: 50% var(--page-hero-bg-y, 50%); }

  .page-hero--overlay-slate-white { --page-hero-overlay: var(--wfx-slate-white-overlay); }   /* live ≥479 */

  .page-hero__crest--desktop { display: block; }

  .page-hero__crest-m { display: none; }

  .page-hero.page-hero--compact { padding-block-end: var(--section-padding-block); }

  .page-hero--compact .page-hero__title { font-size: var(--h1); }

  .page-hero--compact .page-hero__button {
    --btn-h: 5.6rem;
    min-block-size: 5.6rem;
  }
}

/* ≥992px: live #brxe-tshlif min-height 30vw (40vw ≤991). Binds only above ≈1613px. */
@media (min-width: 992px) {
  .page-hero.page-hero--compact { min-block-size: 30vw; }
}

/* ---- Offset variant + image tiles (round 4: /our-stories/, live #brxe-pzkwap; R4-PLAN §1.2, R4-ADDENDUM C2) ----
   A content-height hero (min_height none). The crest → note stack sits in .page-hero__head (live #brxe-calcmb:
   10px apart, --width-m wide), pushed 25rem down from 479px; the tiles row (live #brxe-tpxbyf) follows it after the
   container's --content-gap. Height = padding + head (+ push) + gap + tiles margin + tiles + padding:
     390: 49.25 + (128.67 + 10 + 35.45 + 10 + 54.5 + 80 bottom padding) + 49.25 = 417.13   (tiles out of flow, below)
     768: 65.03 + 250 + 244.72 + 26.43 + 37.27 + 260 + 65.03 = 948.47
     1440: 90 + 250 + 254.36 + 30 + 45 + 260 + 90 = 1019.36
   Base = ≤478 (live's mobile_portrait rules), as above. */
.page-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 10px;                                     /* live #brxe-calcmb (literal) */
  width: var(--width-m);
  max-width: 100%;
  padding-bottom: 8rem;                              /* live ≤478: room above the hanging tiles */
}

.page-hero--offset .page-hero__intro {
  width: 100%;
  max-width: 30rem;                                  /* live #brxe-uhkxvi: two lines at every width */
  text-transform: capitalize;                        /* live .text--capitalize; the DOM text keeps its case */
}

/* The ≤478 hang must not be clipped: keep the section's overflow-x clip (DI-D7), let it overflow downwards. */
.page-hero--has-tiles { overflow-y: visible; }

/* Tiles row. ≤478 (base): taken out of flow and hung 32rem below the container (position: relative), full width
   (R4-ADDENDUM C2: 347.63 at x 21.19 at 390), stacked; it paints over the next section (the hero's z-index 1). */
.page-hero__tiles {
  position: absolute;
  left: 0;
  bottom: -32rem;                                    /* live #brxe-tpxbyf ≤478 (DI-R4-11) */
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  width: 100%;
  max-width: 100rem;                                 /* live #brxe-tpxbyf */
}

/* Tile (live .wlp-imgbox1 + #brxe-xiobzp / #brxe-pvxjxp): the photo is a CSS background (no <img>, live parity);
   ≤767 the phone image from the top, ≥768 the desktop image centred (the tiles' own breakpoint).
   ≤392 heading above the button (column), 393–767 heading left and button right (row), ≥768 column, centred. */
.page-hero__tile {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 5px;                                      /* live (literal) */
  column-gap: var(--content-gap);                    /* live .brxe-block default: in the 393–767 row it sets the
                                                        heading's width (tile − button − gap), so the centred
                                                        heading lines sit where live's do (integration 2026-09-29:
                                                        without it they were ≈ 12 px right of live's) */
  min-height: 15rem;                                 /* live ≤478 */
  padding: 2rem;
  border-radius: var(--radius-xl);
  background-image: var(--tile-bg-m, var(--tile-bg, none));
  background-size: cover;
  background-position: 50% 0%;                       /* live "top center" */
}

.page-hero__tile-title {
  color: var(--white);
  line-height: 1em;                                  /* live .wlp-imgbox1__heading */
  text-align: center;
}

.page-hero__tile-title--narrow {
  width: 100%;
  max-width: 20rem;                                  /* live #brxe-owoqtj: "Stories & / Reels" */
}

/* Buttons v2 lock (secondary sm on the photo): live's "Click & view" is 140 × 38 at ≤767 (its 1px white border, retired:
   every secondary has the #1263FF outline) and 140 × 40 from 768. The ≥768 column tile centres heading + button, so
   sm's 32px would move both headings 4px (the link-tiles lesson); 393–767 the row tile's height is its min-height. */
.page-hero__tile-button {
  --btn-h: 3.8rem;
  --btn-min-width: 14rem;
}

/* The hang's room (the only cross-block rule, DI-R4-11): at ≤478 whatever section follows a hero with tiles starts
   its content 36rem down (live #from-humble-beginnings padding-top 36rem). 0,2,0 beats .section and a block's own
   padding. It needs that section to be the hero's next element sibling (R4-ADDENDUM C12).
   Any other place (the hero is the last block of the page, sits inside a Section block, or is followed by something
   that is not a section): nothing would make that room and the tiles would cover whatever comes next, so there the
   tiles stay in the flow under the text (the hero grows by their height instead of hanging). */
@media (max-width: 478px) {
  .page-hero--has-tiles + .section { padding-top: 36rem; }
  .page-hero--has-tiles:not(:has(+ .section)) .page-hero__tiles { position: static; }
  .page-hero--has-tiles:not(:has(+ .section)) .page-hero__head { padding-bottom: 0; }   /* no hang to leave room for */
}

@media (min-width: 393px) {
  .page-hero__tile { flex-direction: row; }          /* live: the ≤392 column rule ends here */

  /* Buttons v2 lock (row layout only): here the button's width sets the heading's (tile − button − gap), so it keeps
     live's 140 px. 12px sides fit "CLICK & VIEW" (115.77 px) on one line inside the 14rem min-width; with sm's 24px
     the 163.77 box was squeezed back to 140 on tile 1 and wrapped its label to two lines ("CLICK & / VIEW"). */
  .page-hero__tile-button { --btn-padding-inline: 1.2rem; }
}

@media (min-width: 479px) {
  .page-hero__head {
    margin-top: 25rem;                               /* live #brxe-calcmb */
    padding-bottom: 0;
  }

  .page-hero__tiles {
    position: static;                                /* in flow, stacked, 6rem under the head (live ≤767) */
    margin-top: 6rem;
  }

  .page-hero__tile { min-height: 20rem; }            /* live ≤767 */
}

@media (min-width: 768px) {
  .page-hero__tiles {
    flex-direction: row;                             /* side by side: 334.58 / 485 each at 768 / 1440 */
    margin-top: var(--space-l);                      /* live .margin-top--l */
  }

  .page-hero__tile {
    flex: 0 1 100%;                                  /* live .brxe-block width 100%, shrunk: 334.58 + 334.56 at 768 */
    flex-direction: column;
    justify-content: center;
    min-height: 26rem;                               /* live .wlp-imgbox1 */
    background-image: var(--tile-bg, var(--tile-bg-m, none));
    background-position: 50% 50%;                    /* live "center center" */
  }

  .page-hero__tile-button {
    --btn-h: 4rem;                                   /* Buttons v2 lock: live 40 */
    --btn-padding-inline: var(--btn-sm-pad-x);       /* the column tile again: sm's own sides */
  }
}