/* ============================================================================
   VIDEO PLAYBACK — two surfaces. Behaviour is youtube.js.

     .vembed    the TRAILER, in place — it replaces the thumbnail it previews
     .vtheatre  the FEATURE, in a large centred box on a scrim

   The theatre is deliberately NOT fullscreen. Fullscreen takes over the
   display; this leaves the page visible around the edges, so the reader can
   see what they are still on. YouTube's own fullscreen control is inside the
   player for anyone who wants the whole screen.

   The DS draws neither surface, so nothing here is transcribed. Both are
   composed from what the system does specify: `Modal / Default`'s geometry
   (`shape/radius/modal`, `surface/raised`) and the elevation CSS in DESIGN.md
   §8.1 — one of the unconsumed styles the root CLAUDE.md asks to be used.

   TODO(tokens): every bare px is a SIZE — DESIGN.md §12.4.
   ========================================================================== */

/* --- The trailer, in place ---------------------------------------------- */
/* Fills the stage the launcher occupied, so the header card does not change
   shape when the picture starts moving. */
.vembed {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: clip;
  background: var(--color-surface-media);
}

.vembed__iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}

/* The TRAILER badge carries over from the launcher — it is the only thing on
   screen that says this is a preview, and that matters more once something is
   actually playing. Above the iframe, and out of the way of YouTube's own
   title bar, which sits centre-top on hover. */
.vembed__badge {
  z-index: 1;
}

/* --- The feature, in a theatre ------------------------------------------ */
/* Rides modal.css's layer for the scrim, the centring and the z-index, and
   only changes the box. */
.vtheatre-layer {
  padding: var(--space-lg);
}

.vtheatre {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  /* TODO(tokens): size not built. 960 is the width at which a 16:9 frame is
     comfortably larger than the 576 header player without reaching the edges
     of a 1440 display — "large, not fullscreen". */
  max-inline-size: 960px;
  overflow: clip;
  border-radius: var(--shape-radius-modal);
  background: var(--color-surface-raised);
  /* DESIGN.md §8.1's raised elevation — unconsumed by any DS component (a
     CLAUDE.md known gap) and correct here. */
  box-shadow:
    0 12px 32px -8px color-mix(in srgb, var(--color-surface-media) 24%, transparent),
    0 2px 8px -2px color-mix(in srgb, var(--color-surface-media) 16%, transparent);
}

.vtheatre__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  min-inline-size: 0;
}

.vtheatre__title {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  color: var(--color-content-headline);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vtheatre__close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* TODO(tokens): size not built. 32 is the DS's small control height. */
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: none;
  border-radius: var(--shape-radius-button);
  background: transparent;
  color: var(--color-content-primary);
  cursor: pointer;
  transition: background-color 100ms ease; /* TODO(tokens): motion not built */
}

.vtheatre__close:hover {
  background: var(--color-soft-neutral-default);
  color: var(--color-on-soft-neutral);
}

.vtheatre__close:focus-visible {
  outline: var(--shape-focus-width) solid var(--color-border-focus);
  outline-offset: var(--shape-focus-offset);
}

.vtheatre__frame {
  position: relative;
  /* 16:9, so the box follows the width instead of being told a height. */
  aspect-ratio: 16 / 9;
  background: var(--color-surface-media);
}

.vtheatre__frame .vembed__iframe {
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .vtheatre__close {
    transition: none;
  }
}

@media (max-width: 479px) {
  /* TODO(tokens): breakpoints not built — DESIGN.md §12.4. */
  .vtheatre-layer {
    padding: var(--space-sm);
  }
}