/* ─────────────────────────────────────────────────────────────────────────────────────────────
   HOME BANNER (2026-10-21) — editable text over the hero photo; replaced the picture sticker.
   Shared by the public site (_Layout) and the Admin → Banners preview, so every var() has a fallback.

   It rides on .hero-sticker for position:fixed/absolute, the 5×4 cell classes and "hidden when
   .home-collapsed". This file adds what makes it a BANNER: it sizes to its text, carries its own type,
   and has its own vertical placement.

   VERTICAL PLACEMENT (2026-10-21, Robin): the banner moves inside a BAND, not the whole viewport.
     row 1 → the banner's top edge touches the bottom of the title bar
     row 4 → the banner's bottom edge touches the top of the (normal-height) slider cards
     rows 2 and 3 → evenly between.
   custom.js publishes the band's edges per banner as --banner-top and --banner-bottom (px, in the
   banner's own positioning context, measured with the page at the top). Then
       top       = band-top + t × band-height
       translate = −t × (the banner's own height)
   puts the banner at fraction t of the room that is LEFT once its own height is taken out, whatever
   its height — so rows 1 and 4 touch exactly and nothing needs to know how tall the text is.
   Without the script the fallbacks give a sensible position.

   ⚠️ width: max-content is load-bearing. The inner columns anchor with `left: 75%` plus a matching
   translate, which leaves a positioned box only the REMAINING 25% to shrink-wrap into — without it the
   headline wraps one word per line. Sizes take the smaller of a width-based and a height-based figure,
   because the photo area is only about the viewport height less the title bar and the slider cards. */
.hero-banner {
  --by: 0;                          /* vertical fraction, set per row below */
  --btx: 0%;                        /* horizontal pull-back, set per column below */
  isolation: isolate;               /* keeps the shade (z-index -1) inside this box in the admin preview too */
  width: max-content;
  max-width: min(92vw, 760px);
  filter: none;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-family: var(--font-display, 'Barlow Condensed', 'Segoe UI', system-ui, sans-serif);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ── Placement. (0,2,0) specificity beats the old sticker's (0,1,0) top/transform rules. ── */
.hero-banner.hero-sticker {
  top: calc(var(--banner-top, var(--sticky-menu-h, 72px)) + var(--by) * (var(--banner-bottom, calc(100vh - 11rem)) - var(--banner-top, var(--sticky-menu-h, 72px))));
  transform: translate(var(--btx), calc(var(--by) * -100%));
}
.hero-banner:is(.hero-sticker--r1c1, .hero-sticker--r1c2, .hero-sticker--r1c3, .hero-sticker--r1c4, .hero-sticker--r1c5) { --by: 0; }
.hero-banner:is(.hero-sticker--r2c1, .hero-sticker--r2c2, .hero-sticker--r2c3, .hero-sticker--r2c4, .hero-sticker--r2c5) { --by: 0.3333; }
.hero-banner:is(.hero-sticker--r3c1, .hero-sticker--r3c2, .hero-sticker--r3c3, .hero-sticker--r3c4, .hero-sticker--r3c5) { --by: 0.6667; }
.hero-banner:is(.hero-sticker--r4c1, .hero-sticker--r4c2, .hero-sticker--r4c3, .hero-sticker--r4c4, .hero-sticker--r4c5) { --by: 1; }

/* Columns. 1 and 5 sit flush with the edge of the band (the shade bleeds off the screen edge); 2–4 use the
   percentage-plus-pull-back trick so the point a quarter / half / three quarters along the banner sits that
   far along the photo. */
.hero-banner:is(.hero-sticker--r1c1, .hero-sticker--r2c1, .hero-sticker--r3c1, .hero-sticker--r4c1) { left: var(--band-inset, 0px); right: auto; --btx: 0%; }
.hero-banner:is(.hero-sticker--r1c2, .hero-sticker--r2c2, .hero-sticker--r3c2, .hero-sticker--r4c2) { left: 25%; right: auto; --btx: -25%; }
.hero-banner:is(.hero-sticker--r1c3, .hero-sticker--r2c3, .hero-sticker--r3c3, .hero-sticker--r4c3) { left: 50%; right: auto; --btx: -50%; }
.hero-banner:is(.hero-sticker--r1c4, .hero-sticker--r2c4, .hero-sticker--r3c4, .hero-sticker--r4c4) { left: 75%; right: auto; --btx: -75%; }
.hero-banner:is(.hero-sticker--r1c5, .hero-sticker--r2c5, .hero-sticker--r3c5, .hero-sticker--r4c5) { left: auto; right: var(--band-inset, 0px); --btx: 0%; }

/* ── The shade: a little taller and wider than the text (the padding), with the top and bottom edges
   left SHARP so row 1 can touch the title bar and row 4 the cards. Only the left and right ends are
   feathered, so it tapers into the photo instead of ending in a hard line — except on the edge that
   sits against the side of the screen, where there is nothing to fade into. */
.hero-banner--shade { padding: 1.1rem 2.25rem 1.1rem 1.6rem; }
.hero-banner--shade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 38, 79, 0.78);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 74%, transparent 100%);
  pointer-events: none;
}
.hero-banner--shade:is(.hero-sticker--r1c1, .hero-sticker--r2c1, .hero-sticker--r3c1, .hero-sticker--r4c1)::before {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 74%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 74%, transparent 100%);
}
.hero-banner--shade:is(.hero-sticker--r1c5, .hero-sticker--r2c5, .hero-sticker--r3c5, .hero-sticker--r4c5)::before {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 100%);
}

.hero-banner__small    { font-weight: 600; letter-spacing: 0.16em; line-height: 1.2; }
.hero-banner__headline { font-weight: 700; line-height: 1; display: flex; flex-direction: column; }
.hero-banner__tagline  { font-weight: 600; letter-spacing: 0.14em; line-height: 1.2; }

/* Four size bands: 0 small · 1 medium · 2 large · 3 extra large. */
.hero-banner__small.hero-banner__s0 { font-size: clamp(0.7rem, min(1.4vw, 2.4vh), 0.85rem); }
.hero-banner__small.hero-banner__s1 { font-size: clamp(0.8rem, min(1.8vw, 3vh), 1.05rem); }
.hero-banner__small.hero-banner__s2 { font-size: clamp(0.95rem, min(2.2vw, 3.6vh), 1.3rem); }
.hero-banner__small.hero-banner__s3 { font-size: clamp(1.05rem, min(2.6vw, 4.2vh), 1.55rem); }
.hero-banner__headline.hero-banner__s0 { font-size: clamp(1.5rem, min(3.6vw, 6vh), 2.6rem); }
.hero-banner__headline.hero-banner__s1 { font-size: clamp(2rem, min(4.8vw, 8vh), 3.6rem); }
.hero-banner__headline.hero-banner__s2 { font-size: clamp(2.4rem, min(6vw, 10vh), 4.8rem); }
.hero-banner__headline.hero-banner__s3 { font-size: clamp(2.8rem, min(7.4vw, 12vh), 6rem); }
.hero-banner__tagline.hero-banner__s0 { font-size: clamp(0.85rem, min(1.8vw, 3vh), 1.1rem); }
.hero-banner__tagline.hero-banner__s1 { font-size: clamp(1rem, min(2.4vw, 4vh), 1.5rem); }
.hero-banner__tagline.hero-banner__s2 { font-size: clamp(1.2rem, min(3vw, 5vh), 1.9rem); }
.hero-banner__tagline.hero-banner__s3 { font-size: clamp(1.4rem, min(3.6vw, 6vh), 2.3rem); }

.hero-banner__c-white  { color: #fff; }
.hero-banner__c-yellow { color: var(--colour-gold, #EAC41C); }
.hero-banner__c-navy   { color: var(--colour-navy, #24376F); text-shadow: none; }