/* ==========================================================================
   COMPONENT — .c-hero
   Full-bleed cinematic hero. A real film from the channel plays as the bed;
   the editorial composition sits on top of it, weighted hard to the bottom
   left. The coordinate rail lives in the grid's LEFT MARGIN TRACK, so the
   type still starts at column 1. Nothing is centred, and the only button-
   shaped things on screen are the two playback controls.
   WP Phase 2 target: template-parts/hero/hero-home.php
   ========================================================================== */

.c-hero {
  --hero-title-size: clamp(3rem, 1.6935rem + 5.806vw, 7.5rem);

  min-block-size: 100svh;
  display: grid;
  background: var(--slate-950);
  color: var(--c-ink);
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
}

/* --------------------------------------------------------------------------
   The bed. Plate first, live film second. No thumbnail ever appears here.
   -------------------------------------------------------------------------- */

.c-hero .c-bed__plate { z-index: 0; }
.c-hero .c-bed__stage { z-index: 1; }
.c-hero .c-bed__scrim { z-index: 2; }

/* Two stacked players. The incoming one is loaded, given time to actually
   REPORT ITSELF AS PLAYING through the IFrame API — not merely loaded, and
   not after a hopeful fixed delay — before the fade begins. The outgoing
   video keeps playing underneath until that moment, so there is never a
   frame with nothing on it. This duration MUST match FADE_MS in site-ui.js,
   which waits it out before tearing the old player down. */
.c-hero .c-bed__stage {
  opacity: 0;
  transition: opacity 1.8s var(--ease-out);
}

.c-hero .c-bed__stage[data-visible] { opacity: 1; }

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.c-hero__shell {
  align-content: end;
  grid-template-rows:
    [top] auto
    [void] 1fr
    [main] auto
    [foot] auto;
  row-gap: 0;
}

/* --- Coordinate rail, set in the left margin track ----------------------- */

.c-hero__rail {
  grid-column: full-start / content-start;
  grid-row: top / foot;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.c-hero__rail-mark {
  inline-size: var(--bw-rule);
  block-size: clamp(2rem, 5vw, 4rem);
  background: var(--c-accent);
}

.c-hero__coords {
  writing-mode: vertical-rl;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  white-space: nowrap;
}

/* --- Top row ------------------------------------------------------------- */

.c-hero__eyebrow {
  grid-column: content-start / span 5;
  grid-row: top;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.c-hero__eyebrow::before {
  content: "";
  inline-size: clamp(1.5rem, 4vw, 3rem);
  block-size: var(--bw-hair);
  background: var(--c-accent);
}

/* Playback controls — the only chrome allowed over the footage. */
.c-hero__controls {
  grid-column: col 9 / content-end;
  grid-row: top;
  justify-self: end;
  display: flex;
  gap: var(--sp-2);
}

.c-hero__control {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: var(--bw-hair) solid var(--c-line);
  background: color-mix(in oklab, var(--slate-950) 42%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  line-height: 1.4;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.c-hero__control:hover { color: var(--c-ink); border-color: var(--c-line-strong); }
.c-hero__control svg { inline-size: 0.75rem; block-size: auto; }

/* Each control shows one glyph and one label at a time. */
.c-hero__control [data-when] { display: none; }
.c-hero__control[aria-pressed="false"] [data-when="off"],
.c-hero__control[aria-pressed="true"]  [data-when="on"] { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* --- Main row: headline + now-playing ------------------------------------ */

.c-hero__masthead {
  grid-column: content-start / span 8;
  grid-row: main;
  align-self: end;
}

.c-hero__title {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: var(--fw-light);
  font-size: var(--hero-title-size);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--stone-50);
}

/* Each line is a HARD break by design — the rag is composed, not accidental.
   nowrap guarantees the browser never adds a second, uncomposed break inside
   a line; the small-screen size step below keeps that promise affordable. */
.c-hero__title-line { display: block; white-space: nowrap; }
.c-hero__title-line--b { margin-inline-start: clamp(1.5rem, 6vw, 6.5rem); }
.c-hero__title-line--c { margin-inline-start: clamp(0.5rem, 2.2vw, 2.5rem); }

.c-hero__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  letter-spacing: -0.05em;
  color: var(--c-accent-text);
}

/* Now-playing — tells you what you are looking at, and lets you open it. */
.c-hero__now {
  grid-column: col 9 / content-end;
  grid-row: main;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--bw-hair) solid var(--c-line);
  background: color-mix(in oklab, var(--slate-950) 52%, transparent);
  backdrop-filter: blur(10px);
  text-align: left;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.c-hero__now:hover {
  border-color: var(--c-accent);
  background: color-mix(in oklab, var(--slate-950) 68%, transparent);
}

.c-hero__now-tag {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  line-height: 1;
}

.c-hero__now-tag::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  animation: hero-rec 2.4s var(--ease-inout) infinite;
}

@keyframes hero-rec {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}

.c-hero__now-title {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--stone-50);
  text-wrap: balance;
}

.c-hero__now-cue {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-accent-text);
  line-height: 1;
}

.c-hero__now-cue svg { inline-size: 0.55rem; block-size: auto; }

/* --- Foot row: lede + ledger --------------------------------------------- */

.c-hero__lede {
  grid-column: content-start / span 7;
  grid-row: foot;
  padding-block-start: var(--sp-6);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

.c-hero__lede .c-action { margin-block-start: var(--sp-5); }

.c-hero__ledger {
  grid-column: col 7 / content-end;
  grid-row: foot;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  padding-block-start: var(--sp-6);
}

.c-hero__figure {
  border-block-start: var(--bw-hair) solid var(--c-line);
  padding-block-start: var(--sp-3);
}

.c-hero__figure dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-block-end: var(--sp-2);
}

.c-hero__figure dd {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--c-ink);
}

.c-hero__figure dd sup {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  color: var(--c-accent-text);
  vertical-align: super;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .c-hero { padding-block-end: var(--sp-6); }
  .c-hero__rail { display: none; }

  .c-hero__eyebrow    { grid-column: content-start / span 8; }
  .c-hero__controls   { grid-column: col 9 / content-end; }
  .c-hero__masthead   { grid-column: content-start / content-end; }
  .c-hero__now        { grid-column: content-start / content-end; grid-row: foot; margin-block-start: var(--sp-6); }
  .c-hero__lede       { grid-column: content-start / content-end; grid-row: foot; }
  .c-hero__ledger     { grid-column: content-start / content-end; grid-row: foot; gap: var(--sp-3); }

  /* Restack the foot row explicitly so source order reads correctly. */
  .c-hero__shell { grid-template-rows: auto 1fr auto repeat(3, auto); }
  .c-hero__lede   { grid-row: 4; }
  .c-hero__now    { grid-row: 5; margin-block-start: var(--sp-5); }
  .c-hero__ledger { grid-row: 6; padding-block-start: var(--sp-6); }
}

@media (max-width: 46rem) {
  /* Below this width "as it actually" no longer fits on one line at the
     fluid size, so the scale steps down and the indent tightens rather than
     letting the line break mid-phrase. */
  .c-hero { --hero-title-size: clamp(2.4rem, 1.05rem + 6.2vw, 4rem); }
  .c-hero__title-line--b { margin-inline-start: clamp(0.5rem, 2.5vw, 1.75rem); }
  .c-hero__title-line--c { margin-inline-start: clamp(0.25rem, 1.2vw, 0.75rem); }
}

@media (max-width: 40rem) {
  .c-hero__eyebrow  { grid-column: content-start / content-end; }
  .c-hero__controls { grid-column: content-start / content-end; grid-row: 2; justify-self: start; margin-block-start: var(--sp-4); }
  .c-hero__shell    { grid-template-rows: auto auto 1fr auto repeat(3, auto); }
  .c-hero__masthead { grid-row: 4; }
  .c-hero__lede     { grid-row: 5; }
  .c-hero__now      { grid-row: 6; }
  .c-hero__ledger   { grid-row: 7; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-hero__figure:last-child { grid-column: span 2; }
}


/* --------------------------------------------------------------------------
   ROTATION REEL
   The indicator lives inside the now-playing plate: a hairline that fills
   across the dwell time, so the rotation is legible rather than something
   that just happens to you.
   -------------------------------------------------------------------------- */

.c-hero__now-bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: var(--bw-rule);
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--c-accent);
}

.c-hero__now { position: relative; overflow: hidden; }

.c-hero[data-reel-running] .c-hero__now-bar {
  animation: reel-dwell var(--reel-dwell, 12s) linear forwards;
}

@keyframes reel-dwell {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .c-hero__now-bar { display: none; }
}


/* --------------------------------------------------------------------------
   MOBILE: the masthead

   The eyebrow was landing BELOW the statistics. The narrow layout names its
   rows explicitly, and the eyebrow was still asking for the `top` row, which
   does not exist there — so it auto-placed itself at the end of the grid.

   The ledger was two columns with the third figure spanning both, which left
   an orphan sitting under a pair. Three figures on a phone read better as
   three lines, label and number sharing a baseline.
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .c-hero__eyebrow { grid-row: 1; }

  .c-hero__ledger { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .c-hero__figure {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-3);
  }

  .c-hero__figure:last-child { grid-column: auto; }
  .c-hero__figure dt { margin-block-end: 0; }
}

/* --------------------------------------------------------------------------
   PHONE: the now-playing title wraps rather than truncates
   Same reasoning as the timeline; see the note there.
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  .c-hero__now .c-hero__now-title {
  white-space: normal;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  }
}


/* --------------------------------------------------------------------------
   PHONE: how much of the picture survives

   A 16:9 frame covering a 375x812 box is cropped to about a quarter of its
   width — whatever was either side of the middle is gone, and on a walking
   shot that is most of the street. Two things pull it back:

   1. The bed no longer fills the whole screen. At 78svh the box is closer to
      square, so covering it costs far less of the frame's width. The section
      is still taller than the video area, because the masthead sits below it
      on the plate.

   2. The extra zoom goes. It exists on a wide screen to push the player's
      own furniture out of view, and there is room to spare for that there.
      Here every percent of zoom is another slice of the picture, and the
      furniture is off-frame anyway once the box is this narrow.
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  .c-hero { min-block-size: 78svh; }
}

/* --------------------------------------------------------------------------
   THE FIRST THING ON SCREEN

   The hero used to be a dark gradient under a scrim until the player arrived.
   Correct as a base, but for the two or three seconds before the video it
   read as a black screen.

   This is a real photograph of the Sliema seafront reduced to 32x18 pixels —
   399 bytes — and inlined. At that size it holds nothing but colour and the
   direction the light comes from, which is all a 64px blur was ever going to
   show anyway. It costs NO network request: it is part of the stylesheet, so
   it is painted in the same frame as the gradient underneath it.

   It is a touch stronger than the washes on the other sections, because here
   it is carrying the whole picture on its own until the video takes over.
   -------------------------------------------------------------------------- */

.c-hero__wash {
  --wash: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAASACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIFAwT/xAAnEAACAQMCBAcBAAAAAAAAAAABAgADBBESIQUUMUETJDJCUXFygf/EABYBAQEBAAAAAAAAAAAAAAAAAAMEAf/EABwRAAMAAQUAAAAAAAAAAAAAAAABAkEDBBEhMf/aAAwDAQACEQMRAD8A6DQ32im2+pINwxONRjqzkZ14/svVED4RT5YxTb4+JPau4Vn8RVVAOgzvN6NyK2ko9ID3dcwK3Dn1Dxoq+0zPhqq1yoZQRjuJSuERfSqjbsIQk6EySaqry4OBk5zt1nJw0ebb8GEJlZEk/9k=");
  opacity: 0.55;
  filter: blur(64px) saturate(0.85) brightness(0.62);
}

/* Once the video is up the wash steps back, so it is a floor under the
   picture rather than a haze over it. */
.c-hero[data-video-ready] .c-hero__wash {
  opacity: 0.3;
  transition: opacity 1.2s var(--ease-out);
}

/* --------------------------------------------------------------------------
   THE HOLDING PICTURE AND THE MARK

   Three layers that resolve into each other, so the hero is never empty and
   never jumps:

     1. the inline 32x18 blur   painted with this stylesheet, no request
     2. this photograph          ~220KB, preloaded at high priority
     3. the video                when it is actually playing

   Each fades into the next. The poster sits at the stage's own level, so the
   player rises through it rather than appearing beside it.

   The mark is the site's logo, centred, and it belongs to the holding state
   only: once the reel is running the masthead below is doing that job and a
   second wordmark in the middle of the picture would be one too many.
   -------------------------------------------------------------------------- */

.c-hero__poster {
  position: absolute;
  inset: 0;
  /* ABOVE the stage, not level with it. The bed's order is plate 0, stage 1,
     scrim 2, content 3 — and at z-index 1 the poster tied with the stage and
     lost on DOM order, so the player showed through the picture that was
     supposed to be covering it. At 2 it sits over the video and under the
     scrim, which means it is graded exactly as the video will be. */
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 1;
  transition: opacity 1.4s var(--ease-out);
  pointer-events: none;
}

.c-hero__mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  opacity: 1;
  transition: opacity 0.7s var(--ease-out);
  pointer-events: none;
}

.c-hero__mark-face {
  inline-size: clamp(4.5rem, 2.5rem + 5vw, 7.5rem);
  block-size: auto;
  border-radius: var(--radius-pill);
  /* No border. The PNG already carries its own rim — sampled, it is solid
     rgb(31,111,168) from 93% of the radius out to the edge — so a light
     border on top of it read as a second, white ring around the blue one.
     The shadow alone lifts it off the water, which is all the edge was for. */
  box-shadow: 0 0.5rem 2.5rem color-mix(in oklab, var(--slate-950) 55%, transparent);
}

.c-hero__mark-word {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 0.7rem + 2.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--stone-50);
  white-space: nowrap;
  text-shadow: 0 0.15rem 1.75rem color-mix(in oklab, var(--slate-950) 78%, transparent);
}

.c-hero__mark-word em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

/* The video is up: both step aside. The poster takes longer so the picture
   dissolves rather than cutting. */
/* A slow push in while it is on screen, so the holding state is not a
   photograph of a thing but a shot of it. Twenty seconds for six percent —
   below the rate at which a movement announces itself, which is the point.
   It costs nothing: no file, no request, one transform. */
@media (prefers-reduced-motion: no-preference) {
  .c-hero__poster { animation: hero-poster-push 20s var(--ease-out) forwards; }
}

@keyframes hero-poster-push {
  from { scale: 1; }
  to   { scale: 1.06; }
}

.c-hero[data-video-ready] .c-hero__poster { opacity: 0; }
.c-hero[data-video-ready] .c-hero__mark   { opacity: 0; }

/* On a phone the hero is already full — masthead, lede, the watch link, the
   now-playing plate and three figures — and the centre of it is where the
   watch link and the plate are. The mark landed straight on top of both.

   It is dropped there rather than squeezed in. The header carries the same
   logo about ninety pixels away, so a second one in the middle of a 375px
   screen is not a brand, it is clutter. The poster stays: it is the part
   that was actually doing the work. */
@media (max-width: 48rem) {
  .c-hero__mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .c-hero__poster,
  .c-hero__mark { transition: none; }
}