/* Video lightbox: a modal <dialog> covering the viewport. The frame follows the video's ratio
   (--lb-r, 16/9 by default, set from data-ratio) and never exceeds the viewport. */
.lightbox {
  --lb-r: 1.7778;
  position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; color: var(--white);
  background: rgb(16 16 45 / .9);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__frame {
  width: min(calc(100vw - 2 * max(4vw, env(safe-area-inset-left), env(safe-area-inset-right))),
             calc((100dvh - 8rem) * var(--lb-r)));
  aspect-ratio: var(--lb-r);
  overflow: hidden; border-radius: var(--radius-md); background: #000;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8);
}
.lightbox__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.lightbox__close {
  position: absolute;
  top: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-top));
  right: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-right));
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0;
  border: 2px solid var(--lime); border-radius: 50%; background: var(--navy); color: var(--white);
  font-size: 1.5rem; cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) { .lightbox__close:hover { background: var(--lime); color: var(--navy-900); } }
html:has(.lightbox[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lb-in .35s var(--ease-out); }
  .lightbox[open] .lightbox__frame { animation: lb-frame .5s var(--ease-out); }
  @keyframes lb-in { from { opacity: 0; } }
  @keyframes lb-frame { from { opacity: 0; transform: translateY(1.5rem) scale(.96); } }
}