/* ============================================================
   Video Modal
   Hand-authored (not a build output) — mirrors inc/external-interstitial/.
   Tokens come from assets/css/theme-tokens.css; nothing redefined here.

   Shell values (backdrop, padding, transitions, close button) are kept in step
   with the interstitial on purpose: two overlays that open the same way and
   close from the same spot read as one component. Only the panel differs —
   a video wants black and 16:9, not a blue gradient card.
   ============================================================ */

.gs-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Extra top padding reserves room for the close button, which sits above
     the panel rather than on a white surround. */
  padding: clamp(52px, 9vh, 88px) clamp(16px, 4vw, 48px) clamp(16px, 4vw, 48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.gs-video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

/* [hidden] is removed by JS on first open. Until then it keeps the dialog out
   of the a11y tree and out of the tab order even though it is in the DOM. */
.gs-video-modal[hidden] { display: none; }

.gs-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}

.gs-video-modal__dialog {
  position: relative;
  width: 100%;
  /* Wider than the interstitial: that one holds a sentence, this holds a
     16:9 frame, and a 760px cap would waste most of a desktop viewport. */
  max-width: 1100px;
  border-radius: var(--gs-radius-sm);
  box-shadow: var(--gs-shadow);
  transform: translateY(12px) scale(.98);
  transition: transform .25s ease;
}
.gs-video-modal.is-open .gs-video-modal__dialog {
  transform: translateY(0) scale(1);
}

/* Close sits outside the panel, clear of its top-right corner, in white so it
   reads against the page backdrop rather than the video. */
.gs-video-modal__close {
  position: absolute;
  top: -36px;
  right: -36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: 0;
  color: var(--gs-white);
  cursor: pointer;
  line-height: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.gs-video-modal__close:hover {
  opacity: .75;
  transform: scale(1.08);
}
.gs-video-modal__close:focus-visible {
  outline: 3px solid var(--gs-orange);
  outline-offset: 3px;
  border-radius: var(--gs-radius-sm);
}

/* aspect-ratio rather than the padding-top trick: the frame must letterbox
   inside the viewport on short screens, which a padding hack cannot do. */
.gs-video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - clamp(120px, 18vh, 180px));
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--gs-radius-sm);
  background: #000;
}
.gs-video-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 600px) {
  /* The container only has 16px of side padding down here, so the desktop
     -36px offset would hang the button past the viewport edge. */
  .gs-video-modal__close {
    top: -41px;
    right: -9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-video-modal,
  .gs-video-modal__dialog,
  .gs-video-modal__close { transition: none; }
  .gs-video-modal__dialog { transform: none; }
}