/* Figma 1000-3853: one right-column stream, with a caption below each film.
   Keep the current shared sidebar, rather than copying the older Figma nav. */
#video-page[hidden] { display: none; }
.video-header {
  width: calc((100% - 20px) / 2);
  min-height: var(--navigation-offset, var(--masthead-height));
  padding-bottom: 20px;
}
.video-intro { margin: 0; }
.video-stream { display: grid; gap: 40px; }
.video-item { min-width: 0; margin: 0; }
.video-preview { position: relative; aspect-ratio: 1045 / 588; }
.video-cover,
.video-preview video {
  display: block;
  width: 100%;
  height: 100%;
}
.video-cover { position: relative; }
.video-preview img,
.video-preview video { width: 100%; height: 100%; object-fit: contain; }
.video-preview video { background: #000; }
.video-preview [hidden],
.video-status[hidden] { display: none; }
.video-play-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--ink);
  background: var(--blue);
  border: 1px solid var(--line);
  pointer-events: none;
  transition: background-color 320ms cubic-bezier(.25, .1, .25, 1),
    color 320ms cubic-bezier(.25, .1, .25, 1);
}
.video-play-icon svg { width: 24px; height: 24px; }
/* Change only the control's colors; the cover and play glyph stay in place.
   Mouse hover and keyboard focus share the same high-contrast treatment. */
@media (hover: hover) {
  .video-cover:hover .video-play-icon { color: #fff; background-color: var(--ink); }
}
.video-cover:focus-visible .video-play-icon { color: #fff; background-color: var(--ink); }
.video-cover:focus-visible,
.video-preview video:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.video-status { margin: 8px 0 0; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.video-title {
  margin: 0;
  padding-top: 8px;
  font: 500 14px/normal var(--font-sans);
  color: var(--ink);
}

@media (min-width: 761px) {
  /* Direct #video loads still measure the same masthead as all other pages.
     The new header consumes its offset, not a guessed fixed pixel spacer.
     min-height allows long translations/narrow screens to grow safely. */
  .is-video-page .introduction[hidden] {
    display: grid;
    position: absolute;
    inset: 0 0 auto;
    opacity: 0;
    pointer-events: none;
  }
}
@media (max-width: 760px) {
  .video-header { width: 100%; min-height: 0; padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-play-icon { transition: none; }
}