/* RPA · Hero. Tokens come from the theme (tokens.css); shared atoms (.rpa-band, .rpa-shell,
   .rpa-display, .rpa-eyebrow, .rpa-lede, .rpa-btn, .rpa-plate, .rpa-caption) are styled in the
   theme — this file only sets the hero's own layout and sizes.

   Composition (plate-right, ≥ 1000px): a 12-column sheet. Headline, intro and buttons hold the
   left eight columns and sit on a hairline "fold bar" that lands on the bottom of the first
   viewport; a PORTRAIT 2:3 plate stands in the right four columns, anchored low, and runs past
   that bar by --_overhang, so it crosses the fold. 640–999px: headline full width, then intro
   beside the plate. Below 640px: one column in reading order, plate 4:5. */

.rpa-hero {
  --_rule: var(--rpa-c-rule, var(--rpa-rule));
  --_rule-strong: var(--rpa-c-rule-strong, var(--rpa-rule-strong));
  --_muted: var(--rpa-c-muted, var(--rpa-slate));
  --_overhang: clamp(4rem, 9vw, 8.5rem);
  --_cap: 58rem;
  /* one-line plate caption: its top padding + one line of .rpa-caption (step--1 × 1.5) */
  --_cap-h: calc(clamp(0.5rem, 0.35rem + 0.5vw, 0.75rem) + var(--rpa-step--1) * 1.5);
  /* fold bar, outer height: rule + paddings + the taller of its two contents, plus its top margin
     (≥ 1000px values; only used there) */
  --_foot-h: 0px;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: 0;
}

/* The contour-field canvas: behind everything, never in the way. */
.rpa-hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

.rpa-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(1.75rem, 1.4rem + 1vw, 2.25rem) clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

/* ---------- Top rule: eyebrow … note ---------- */

.rpa-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 2rem;
  padding-block-end: 0.9rem;
  border-block-end: 1px solid var(--_rule-strong);
}
.rpa-hero__note { color: var(--_muted); }

/* ---------- Headline ---------- */

.rpa-hero .rpa-hero__title {
  margin: clamp(2rem, 1rem + 4.5vw, 4.25rem) 0 0;
  max-width: 17ch;
  /* PAGE-HEAD SCALE (one rule for the site): every inner page head — plate-below, text-only, and a
     section-head set as h1 — is --rpa-step-5. Only the Home opener (plate-right) is larger. */
  font-size: var(--rpa-step-5);
  text-wrap: balance;
}
.rpa-hero.rpa-hero--plate-right .rpa-hero__title { font-size: calc(var(--rpa-step-5) * 1.22); }

/* ---------- Intro + buttons ---------- */

.rpa-hero__body { margin-block-start: clamp(1.75rem, 1rem + 3vw, 3rem); }

.rpa-hero .rpa-hero__lede {
  max-width: 34em;
  margin: 0;
  text-wrap: pretty;
}

.rpa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/* ---------- Plate: a mounted print with a mono caption ---------- */

.rpa-hero__figure {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

.rpa-hero__plate {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0 0;
  padding: clamp(0.5rem, 0.35rem + 0.5vw, 0.75rem);
  border: 1px solid var(--_rule-strong);
  border-radius: var(--rpa-radius);
  background: color-mix(in srgb, var(--rpa-bone) 70%, transparent);
}
.rpa-hero.is-tone-ink .rpa-hero__plate,
.rpa-hero.is-tone-petrol .rpa-hero__plate { background: transparent; }

/* Registration ticks off two corners of the frame — the survey-sheet detail. */
.rpa-hero__plate::before,
.rpa-hero__plate::after {
  content: "";
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
}
.rpa-hero__plate::before {
  inset-block-start: -0.5rem;
  inset-inline-start: -0.5rem;
  border-block-start: 1px solid var(--_rule-strong);
  border-inline-start: 1px solid var(--_rule-strong);
}
.rpa-hero__plate::after {
  inset-block-end: -0.5rem;
  inset-inline-end: -0.5rem;
  border-block-end: 1px solid var(--_rule-strong);
  border-inline-end: 1px solid var(--_rule-strong);
}

.rpa-hero__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--rpa-petrol) 18%, var(--rpa-bone));
  border-radius: calc(var(--rpa-radius) / 2);
}

/* `.elementor img { height:auto }` ties on specificity and loads later: chain the parent. */
.rpa-hero .rpa-hero__media .rpa-hero__poster,
.rpa-hero .rpa-hero__media .rpa-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.rpa-hero .rpa-hero__media--focus-top > * { object-position: center top; }
.rpa-hero .rpa-hero__media--focus-bottom > * { object-position: center bottom; }

/* Monochrome treatment: black-and-white with a faint petrol cast in the shadows. */
.rpa-hero .rpa-hero__media--mono .rpa-hero__poster,
.rpa-hero .rpa-hero__media--mono .rpa-hero__video { filter: grayscale(1) contrast(1.06); }
.rpa-hero__media--mono::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--rpa-petrol);
  mix-blend-mode: screen;
  opacity: 0.35;
  pointer-events: none;
}

/* No film, no image: a drawn graticule, so an empty plate still looks intended. */
.rpa-hero__media--empty {
  background-color: transparent;
  background-image:
    linear-gradient(var(--_rule-strong), var(--_rule-strong)),
    linear-gradient(var(--_rule-strong), var(--_rule-strong)),
    repeating-linear-gradient(to right, var(--_rule) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(to bottom, var(--_rule) 0 1px, transparent 1px 100%);
  background-size: 1px 1.75rem, 1.75rem 1px, 12.5% 100%, 100% 12.5%;
  background-position: center, center, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  box-shadow: inset 0 0 0 1px var(--_rule);
}

.rpa-hero__plate-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-block-start: clamp(0.5rem, 0.35rem + 0.5vw, 0.75rem);
  padding-inline: 0.125rem;
}
.rpa-hero__plate-caption > .rpa-plate { flex: none; white-space: nowrap; } /* "Pl. 03" never breaks */

/* FIRST-PAINT GEOMETRY (P3-07). The caption is the last thing in the plate and the fold bar the last
   thing in the hero, and both push what is above them upward (the plate and the intro are anchored
   low). On a slow connection the first paint can land while the HTML is still arriving, before
   either exists — then they arrive and the plate and intro jump. The root carries --captioned /
   --foot / --foot-cue (it is parsed first), and the space is held from those:
   · caption: an empty line of exactly a one-line caption's height closes the figure, and the real
     caption sits on top of it (negative margin). Present or not, the figure is the same height;
     a caption that wraps simply grows the figure as before.
   · fold bar: see the row reservation in the ≥ 1000px grid below. */
.rpa-hero--captioned .rpa-hero__figure::after {
  content: "";
  flex: none;
  order: 2;
  height: var(--_cap-h);
}
.rpa-hero--captioned .rpa-hero__plate-caption {
  order: 1;
  min-height: var(--_cap-h);
  margin-block-end: calc(var(--_cap-h) * -1);
  box-sizing: border-box;
}
.rpa-hero__plate-text { text-align: end; min-width: 0; }

/* ---------- Fold bar: coordinates … scroll cue ---------- */

.rpa-hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-start: clamp(2rem, 1.25rem + 3vw, 3rem);
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--_rule);
}

.rpa-hero .rpa-hero__coords,
.rpa-hero .rpa-hero__cue {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--_muted);
}
.rpa-hero__coords-text { white-space: nowrap; } /* coordinates never break mid-pair */
.rpa-hero .rpa-hero__cue {
  flex: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The one signal colour: a small "live" survey mark before the coordinates. */
.rpa-hero__mark {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--rpa-verdigris);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rpa-verdigris) 22%, transparent);
}

.rpa-hero__cue-line {
  display: block;
  width: 1px;
  height: 2.25rem;
  background: var(--_rule-strong);
}

/* Phones: the coordinates stay on one line (under ~360px they give a little in size rather than
   break); the scroll cue, which no longer fits beside them, drops to its own line at the right. */
@media (max-width: 479.98px) {
  .rpa-hero__foot { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .rpa-hero .rpa-hero__coords { gap: 0.6rem; font-size: min(var(--rpa-step--1), 3.55vw); }
  .rpa-hero .rpa-hero__cue { margin-inline-start: auto; }
}

/* ---------- 640–999px: headline full width; intro left, portrait plate right ---------- */

@media (min-width: 640px) and (max-width: 999.98px) {
  .rpa-hero--plate-right .rpa-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(1.5rem, 5vw, 3rem);
  }
  .rpa-hero--plate-right .rpa-hero__meta,
  .rpa-hero--plate-right .rpa-hero__title,
  .rpa-hero--plate-right .rpa-hero__foot { grid-column: 1 / -1; }
  .rpa-hero--plate-right .rpa-hero__body { grid-column: 1; align-self: end; }
  .rpa-hero--plate-right .rpa-hero__plate { grid-column: 2; align-self: end; }
  .rpa-hero--plate-right .rpa-hero__media { aspect-ratio: 2 / 3; }
  .rpa-hero--plate-below .rpa-hero__media { aspect-ratio: 16 / 9; }
}

/* ---------- ≥ 1000px ---------- */

@media (min-width: 1000px) {
  .rpa-hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--rpa-gap);
  }
  .rpa-hero__meta { grid-column: 1 / -1; }
  .rpa-hero__title { grid-column: 1 / -1; }

  /* — plate-right: the full-height opener. Headline and intro hold the left eight columns;
       the portrait plate stands in the right four, anchored low so it runs past the fold bar. — */
  .rpa-hero--plate-right .rpa-hero__inner {
    /* Row 4 is the fold bar. It is given its finished height up front (--_foot-h: exactly what the
       bar measures, margin included), so the intro above it stands where it will stand even while
       the bar itself has not been parsed yet. A bar that needs more (a caption that wraps) still
       gets it: the row is a minimum, not a fixed size. */
    grid-template-rows: auto auto minmax(0, 1fr) minmax(var(--_foot-h), auto) var(--_overhang);
    /* Full first screen, but never taller than the composition can fill: past ~58rem of viewport
       height the opener stops stretching (no dead paper between headline and intro on tall or
       very large screens); the plate, which follows the shell width, then sets the height. */
    min-height: calc(min(100vh, var(--_cap)) - var(--rpa-header-h) + var(--_overhang));
    min-height: calc(min(100svh, var(--_cap)) - var(--rpa-header-h) + var(--_overhang));
    padding-block-end: 0;
  }
  .rpa-hero.rpa-hero--plate-right .rpa-hero__title {
    grid-column: 1 / span 8;
    grid-row: 2;
    /* ~17 characters a line at every shell width: the headline keeps its three-line stack on wide
       shells instead of running two long lines into the plate and leaving a hole above the intro */
    max-width: 8.4em;
    margin-block-start: clamp(2rem, 0.5rem + 2.4vw, 3rem);
    font-size: calc(var(--rpa-step-5) * 1.12);
  }
  .rpa-hero--plate-right .rpa-hero__body {
    grid-column: 1 / span 5;
    grid-row: 3;
    align-self: end;
    margin-block-start: 2rem;
  }
  .rpa-hero--plate-right .rpa-hero__foot { margin-block-start: 2.25rem; }
  /* margin 2.25 + rule 1px + padding .9 + content + padding 1.125; content = the cue's 2.25rem line,
     or one line of coordinates (step--1 × 1.4) when there is no cue */
  .rpa-hero--plate-right.rpa-hero--foot { --_foot-h: calc(4.275rem + 1px + var(--rpa-step--1) * 1.4); }
  .rpa-hero--plate-right.rpa-hero--foot-cue { --_foot-h: calc(6.525rem + 1px); }
  .rpa-hero--plate-right .rpa-hero__plate {
    grid-column: 9 / -1;
    grid-row: 2 / -1;
    align-self: end;
    margin-block: clamp(2rem, 1rem + 3vw, 4.25rem) clamp(1.5rem, 0.5rem + 2vw, 2.5rem);
  }
  .rpa-hero--plate-right .rpa-hero__media { aspect-ratio: 2 / 3; }
  .rpa-hero--plate-right .rpa-hero__foot {
    grid-column: 1 / span 7;
    grid-row: 4;
    padding-block-end: 1.125rem;
  }

  /* — plate-below and text-only: intro left, buttons right — */
  .rpa-hero--plate-below .rpa-hero__body,
  .rpa-hero--text-only .rpa-hero__body {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
  }
  .rpa-hero--plate-below .rpa-hero__lede,
  .rpa-hero--text-only .rpa-hero__lede { grid-column: 1 / span 6; }
  .rpa-hero--plate-below .rpa-hero__actions,
  .rpa-hero--text-only .rpa-hero__actions {
    grid-column: 8 / -1;
    justify-content: flex-end;
    margin: 0;
  }
  .rpa-hero--plate-below .rpa-hero__plate,
  .rpa-hero--plate-below .rpa-hero__foot,
  .rpa-hero--text-only .rpa-hero__foot { grid-column: 1 / -1; }
  .rpa-hero--plate-below .rpa-hero__media { aspect-ratio: 21 / 9; }
}

/* Short, wide screens: let the opener be as tall as it needs, not the viewport. */
@media (min-width: 1000px) and (max-height: 640px) {
  .rpa-hero--plate-right .rpa-hero__inner { min-height: 0; }
}

/* text-only runs a little wider; its size is the shared inner page-head size (see Headline). */
.rpa-hero.rpa-hero--text-only .rpa-hero__title { max-width: 20ch; }

/* Long headlines (over ~56 characters) step down and run wider. */
.rpa-hero.rpa-hero--long.rpa-hero--long .rpa-hero__title {
  max-width: 24ch;
  font-size: var(--rpa-step-5);
}
.rpa-hero.rpa-hero--long.rpa-hero--text-only .rpa-hero__title,
.rpa-hero.rpa-hero--long.rpa-hero--plate-below .rpa-hero__title { font-size: var(--rpa-step-4); }

/* With scripting off, browsers force native controls onto every <video>. The film is decoration
   and the still underneath is the fallback, so the film only appears once the motion layer is
   running (html.rpa-motion, set by the theme's JS — which is also what starts playback). */
.rpa-hero .rpa-hero__media .rpa-hero__video { display: none; }
html.rpa-motion .rpa-hero .rpa-hero__media .rpa-hero__video { display: block; }