/* Self-hosted video — cinematic frames, lazy sources, licence caption.
   Sources are attached by js/media/video.js only when scrolled into view. */

.video-section { background: var(--color-ink); color: #eaf1f0; }
.video-section h2 { color: #f7f3ea; }
.video-section .lede { color: #c3d4d3; }

.video-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-medium);
  background: #062126;
  box-shadow: var(--shadow-lift);
}
.video-frame--16x9 { aspect-ratio: 16 / 9; }
.video-frame--9x16 { aspect-ratio: 9 / 16; max-inline-size: min(320px, 78vw); }

.video-frame video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  object-fit: cover;
  display: block;
}

/* Custom play affordance layered over the poster; hidden once playing. */
.video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(6 33 38 / 0.55), transparent 42%),
    radial-gradient(circle at center, rgb(255 255 255 / 0.16) 0 3.2rem, transparent 3.3rem);
  background-repeat: no-repeat;
  background-position: center, center 38%;
  background-size: 100% 100%, 6.4rem 6.4rem;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.video-frame:not(.is-playing)::after { opacity: 1; }
.video-frame.is-playing::after { opacity: 0; }

.video-frame video { cursor: pointer; }

.video-caption {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: #a9bcba;
}
.video-caption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Portrait grid: one landscape feature + two portrait clips.
   The fr tracks are wrapped in minmax(0, …) on purpose. A bare `1fr` is
   `minmax(auto, 1fr)`, and the automatic minimum is the item's min-content
   size — for a frame holding a <video> with a 1200 px poster that floor is the
   video's intrinsic width, so the tracks refused to shrink, the middle column
   collapsed to 74 px and the grid pushed the page 1000 px wider than the
   viewport (a horizontal scrollbar on every page carrying this section). */
.video-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56em) {
  .video-grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  /* The landscape frame takes the row's height and its cell's width. Its
     16:9 ratio is dropped in this one layout on purpose: with a definite
     height *and* an aspect ratio the browser derives the width from the
     height (571 px tall → 1016 px wide, wider than the page). The <video>
     inside is cover-cropped, exactly as it is on the portrait frames. */
  .video-grid .video-frame--16x9 { aspect-ratio: auto; block-size: 100%; inline-size: 100%; }
}

/* Looping background clip variant (homepage band). */
.video-band .video-frame { border-radius: 0; box-shadow: none; }
.video-band .video-frame::after { background: none; }