/* Site-owned overrides — carried theme CSS (dst-*.css) is left untouched for fidelity.
   Loaded last (after the theme stylesheets) by lib/page-factory.tsx so these win. */

/* ---------------------------------------------------------------------------
   Video popup collapses to a thin horizontal strip on iOS / WebKit.

   The theme sizes the popup video with `aspect-ratio: 16/9` + `min-height` on a
   replaced <iframe> inside a top-layer flex <dialog>. WebKit fails to resolve the
   auto height from aspect-ratio in that context AND drops the min-height floor, so
   the iframe computes to ~0 height — leaving just the absolutely-positioned close
   button (the "sliver"). Chromium/Android resolve it fine, so this is WebKit-only.

   Fix: drive the height from the .ds-popup__content wrapper — a block box WebKit
   sizes reliably from a definite width + aspect-ratio — and let the iframe fill it.
   The theme's open animation still plays where it works; the static end-state below
   is a fallback so the popup is never stuck invisible if the animation doesn't land.
   --------------------------------------------------------------------------- */
.ds-popup--video .ds-popup__content {
  aspect-ratio: 16 / 9;
  min-height: 220px;
  height: auto;
}

.ds-popup--video .ds-popup__content iframe,
.ds-popup--video .ds-popup__content video {
  width: 100%;
  height: 100%;
  min-height: 220px;
}

/* Static end-state fallback: if the open keyframe animation doesn't run (WebKit is
   flaky animating a just-shown <dialog> with no @starting-style), the popup still
   shows at full size/opacity instead of holding the collapsed start frame. A running
   animation still overrides these while it plays. */
.ds-popup[open] {
  opacity: 1;
  transform: none;
}