/* ===== Video hero overrides =====
   Loaded AFTER style.css. Same grid, same proportions — the only change is
   that the four panes become transparent windows onto ONE continuous video
   sitting behind them, and the cream gutters are painted as borders on the
   panes instead of grid gaps.

   Why borders instead of `gap`: a grid gap would let the video show through
   the gutters. Painting the gutters as cream borders keeps a single video
   element (one decoder, zero sync drift) while the cream lines land exactly
   where they did before — half a gutter on each side of a shared edge adds
   back up to the full --gap between neighbours. */

.hero--video {
  position: relative;
  gap: 0;
  padding: calc(var(--gap) / 2);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Everything except the video layer sits above it. */
.hero--video > *:not(.hero__media) {
  position: relative;
  z-index: 1;
}

.hero--video .pane-4 { position: relative; }

.hero--video .hero__text,
.hero--video .pane {
  border: calc(var(--gap) / 2) solid var(--cream);
}

/* Transparent windows — the video behind shows through. */
.hero--video .pane {
  background: transparent;
  min-width: 0;
  min-height: 0;
}

/* Poster still, shown when the video can't or shouldn't play. */
.hero__fallback { display: none; }

.hero--video.is-static .hero__video { display: none; }
.hero--video.is-static .hero__fallback { display: block; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__fallback { display: block; }
}

/* The video layer fades up with everything else. It sits above the hero's
   cream background, so it resolves out of the cream rather than out of
   black — the panes read as windows opening. */
.js .hero__media { opacity: 0; }
.js .is-ready .hero__media { opacity: 1; }