/* video-orientation-fallback.css — import-compat shim for migrated video
 * ---------------------------------------------------------------------------
 * WHY: koi's detail-koi.css sizes PORTRAIT video only through
 * `.video-player--vertical` (aspect-ratio 9/16). The scraped/imported markup
 * marks portrait on the PARENT wrapper (`.multimedia-video--portrait`) and
 * `.multimedia-video--center` — but NEITHER of those classes has any rule in
 * koi CSS, and the `.video-player` itself carries no `--vertical` modifier.
 * On live, koi's own hydration added `--vertical` at runtime; our
 * brightcove-hydrate.js now does the same, but this file is the belt-and-braces
 * fallback so portrait renders correctly even if that class is never added.
 *
 * Self-contained: builds its own aspect-ratio box and overrides Brightcove's
 * vjs-fluid padding (`padding-top:178%`) so height is driven by the box, not by
 * the player's measured pixels. Harmless when `--vertical` IS present (these
 * rules just co-size the same element consistently).
 *
 * ENQUEUE AFTER detail-koi.css.
 * --------------------------------------------------------------------------- */

/* ---- PORTRAIT: real ratio 404/720 (~9/16), capped width, centered ---- */
.multimedia-video--portrait .video-player {
  position: relative;
  width: auto;
  max-width: min(100%, 405px);   /* portrait reels are ~400px wide, not full column */
  margin-inline: auto;
  aspect-ratio: 404 / 720;
  overflow: hidden;
}
.multimedia-video--portrait .video-player .video-js,
.multimedia-video--portrait .video-player video-js {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;      /* neutralize Brightcove vjs-fluid padding */
}
.multimedia-video--portrait .video-player .video-js .vjs-tech,
.multimedia-video--portrait .video-player .vjs-poster,
.multimedia-video--portrait .video-player .vjs-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- LANDSCAPE default (16:9) — only if a wrapper has no orientation class ---- */
.multimedia-video:not(.multimedia-video--portrait) .video-player {
  width: 100%;
  margin-inline: auto;
}

/* ---- centering the block (the inert `--center` class) ---- */
.multimedia-video--center {
  margin-inline: auto;
}