/* ============================================================
   Visitech — the video library's film dialog

   ONE EXCEPTION TO THE CONTAINER-QUERY RULE, and it is structural rather than
   a preference: this element lives in the browser's TOP LAYER, appended to
   <body>, outside every .vt-section. It has no container to query, so it sizes
   itself against the viewport. blocks/mosaic-tile/style.css takes the same
   exception for the same reason.

   THE FILM IS CAPPED ON BOTH AXES. A dialog capped only by width overflows a
   phone held sideways; one capped only by height leaves a hairline film on a
   desktop. So the WIDTH is the smallest of: the viewport's width, a sensible
   maximum, and the width a 16:9 film may be if it is to fit the height that is
   left after the title bar. The film then fills that box exactly and the
   layout re-flows on rotation with no JavaScript at all.

   svh, never vh: on iOS Safari `vh` is the tallest the viewport ever gets, so
   a 100vh dialog is clipped by the toolbar the moment the toolbar is showing.
   ============================================================ */

:root {
  --vt-film-bar: 76px;   /* the title bar's height, in the width sum below */
  --vt-film-max: 1200px;
}

.vt-video-dialog {
  width: min(94vw, var(--vt-film-max), calc((92svh - var(--vt-film-bar)) * 16 / 9));
  max-width: 94vw;
  max-height: 92svh;
  padding: 0;
  margin: auto;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}

.vt-video-dialog::backdrop {
  background: rgba(8, 6, 16, 0.88);
}

.vt-video-dialog__inner {
  position: relative;
}

.vt-video-dialog__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* a film that is not 16:9 letterboxes inside the box rather than stretching */
  object-fit: contain;
  background: #000;
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.vt-video-dialog__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 4px 0;
  min-height: var(--vt-film-bar);
}

.vt-video-dialog__title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display, inherit);
  font-weight: var(--fw-light, 300);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.3;
  color: #fff;
}

.vt-video-dialog__close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  transition: background var(--dur-base, 0.2s) var(--ease-standard, ease);
}

.vt-video-dialog__close:hover { background: rgba(255, 255, 255, 0.26); }

/* ---- the subtitles control ------------------------------------------------
   Ours rather than the browser's: Chrome hides its CC button inside the
   overflow menu and native controls cannot be restyled, so a viewer looking
   for Japanese subtitles has to go hunting. This sits in the player's own bar,
   always visible, and wears the flag of whatever language is on. */

.vt-video-dialog__cc { position: relative; flex: 0 0 auto; }

.vt-video-dialog__ccbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.14);
  font: inherit;
  font-size: 13px;
  transition: background var(--dur-base, 0.2s) var(--ease-standard, ease),
              color var(--dur-base, 0.2s) var(--ease-standard, ease);
}

.vt-video-dialog__ccbtn:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.vt-video-dialog__ccbtn:focus-visible {
  outline: 2px solid var(--color-light-purple, #b39ddb);
  outline-offset: 2px;
}
.vt-video-dialog__ccbtn svg { width: 22px; height: 22px; display: block; }

/* ON reads as on at a glance — the icon lights up and the flag appears. */
.vt-video-dialog__cc.is-on .vt-video-dialog__ccbtn { color: #fff; background: rgba(255, 255, 255, 0.3); }

.vt-video-dialog__ccflag {
  display: block;
  width: 20px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.vt-video-dialog__cccode { font-weight: var(--fw-medium, 500); letter-spacing: 0.04em; }

.vt-video-dialog__ccmenu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--radius-lg, 10px);
  background: rgba(20, 16, 30, 0.97);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.vt-video-dialog__ccmenu li { margin: 0; }

.vt-video-dialog__ccmenu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  font: inherit;
  font-size: 14px;
}

.vt-video-dialog__ccmenu button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vt-video-dialog__ccmenu button:focus-visible {
  outline: 2px solid var(--color-light-purple, #b39ddb);
  outline-offset: -2px;
}
.vt-video-dialog__ccmenu button[aria-checked="true"] { color: #fff; background: rgba(255, 255, 255, 0.16); }

.vt-video-dialog__ccmenu img {
  width: 20px;
  height: auto;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* keeps "Off" and any flagless language on the same text column as the rest */
.vt-video-dialog__ccnoflag { width: 20px; flex: 0 0 auto; }
.vt-video-dialog__close:focus-visible {
  outline: 2px solid var(--color-light-purple, #b39ddb);
  outline-offset: 2px;
}
.vt-video-dialog__close svg { width: 20px; height: 20px; }

/* The page must not scroll behind the film. showModal() makes the rest of the
   document inert, which is not the same thing. */
html.vt-film-open { overflow: hidden; }

/* ------------------------------------------------------------------
   THE PLAY GLYPH — the mockup's `.vplay` (news.css:90-100)

   It lives HERE rather than in either block's stylesheet, and that is not the
   "two blocks must not depend on each other's stylesheet" rule being bent: it
   is the same reasoning as the dialog itself. The glyph is the film player's
   affordance — the thing that says this picture opens a film — both blocks
   already declare this handle for the player, and one copy is why the lead and
   the grid cannot drift apart about what a film looks like before it plays.
   ------------------------------------------------------------------ */

.vt-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(18, 14, 30, 0.30);
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #fff;
  transition: transform var(--dur-base, 0.2s) var(--ease-standard, ease),
              background var(--dur-base, 0.2s) var(--ease-standard, ease);
}

.vt-video__play svg { width: 34px; height: 34px; display: block; margin-left: 3px; }

a:hover > .vt-video__media > .vt-video__play,
a:hover > .vt-video-lead__media > .vt-video__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(18, 14, 30, 0.45);
}

/* A film whose poster is missing still has to read as a film. */
.vt-video__card--no-poster .vt-video__media,
.vt-video-lead--no-poster .vt-video-lead__media {
  background: var(--gradient-cinematic, #1b1526);
}

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

/* ---- phone, upright ------------------------------------------------------
   Edge to edge, because 94vw of a 390px screen wastes the only width there
   is. The title stays under the film where it is readable. */
@media (max-width: 600px) {
  :root { --vt-film-bar: 68px; }
  .vt-video-dialog {
    width: 100vw;
    max-width: 100vw;
  }
  .vt-video-dialog__video { border-radius: 0; }
  .vt-video-dialog__bar { padding: 14px 16px 0; }
}

/* ---- phone, sideways -----------------------------------------------------
   The reason this file exists. Turning a phone to watch a film is a request
   for the film to be BIGGER, so it goes full-bleed and the title bar stops
   taking height from it: it lies over the foot of the frame on a gradient,
   and the close button floats in the corner. Keyed on the orientation AND a
   short viewport, so a landscape tablet keeps the roomier layout. */
@media (orientation: landscape) and (max-height: 500px) {
  .vt-video-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    max-height: 100svh;
  }
  .vt-video-dialog__inner { height: 100%; }
  .vt-video-dialog__video {
    height: 100svh;
    max-height: 100svh;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  /* The bar goes to the TOP, not the bottom. The foot of a full-bleed film is
     where the browser draws its own controls — measured at 844x390, the title
     landed on the scrubber — and those controls are the one thing that must
     never be fought for. The top edge is free apart from the close button,
     which the title now shares a line with. */
  .vt-video-dialog__bar {
    position: absolute;
    inset: 0 0 auto 0;
    min-height: 0;
    padding: 10px 16px 30px;
    background: linear-gradient(to bottom, rgba(8, 6, 16, 0.8), rgba(8, 6, 16, 0));
    /* clicks fall through to the film (play/pause on tap) except on the
       controls that are really there */
    pointer-events: none;
  }
  .vt-video-dialog__title {
    font-size: 14px;
    /* clear of the close button, and never more than two lines over the film */
    padding-right: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .vt-video-dialog__close,
  .vt-video-dialog__cc {
    pointer-events: auto;
  }
  .vt-video-dialog__close {
    width: 38px;
    height: 38px;
    background: rgba(8, 6, 16, 0.6);
  }
  .vt-video-dialog__ccbtn { height: 38px; background: rgba(8, 6, 16, 0.6); }
  /* the bar is at the TOP here, so the menu drops DOWN from it */
  .vt-video-dialog__ccmenu { bottom: auto; top: calc(100% + 8px); }
}

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