/* ---------------------------------------------------------------------------
 * nvision-fixes.css — DELIBERATE deviations from live. Loaded last, after every
 * mirrored Roya stylesheet. Keep our changes here; never hand-edit the vendored
 * sheets in /css and /styles, so mirror drift stays greppable.
 *
 * 1. Hero video must cover the hero (client request, 2026-08-14).
 *
 *    Live's markup is:  div.hero > div.hero-video__container > div.hero-video > video
 *
 *    styles/main.css   .hero-video { padding-bottom: 56.25%; padding-top: 25px; height: 0 }
 *    site-overrides    div.hero    { height: 100vh; overflow: hidden }
 *
 *    So the hero is a full viewport tall while the video box is only
 *    (width x 0.5625 + 25px) tall. Whenever 100vh exceeds that, the remainder
 *    paints as a white strip beneath the video — and .hero-copy is pinned to
 *    the hero's BOTTOM (bottom:10px), so the white headline drops into the
 *    white strip and gets sliced in half.
 *
 *    Affected band: ~992px-1555px viewport width at a 900px-tall window, i.e.
 *    every common laptop (1280 / 1366 / 1440). Below 992px the video is
 *    display:none and a background image takes over, so mobile is unaffected.
 *
 *    Roya attempted this exact fix themselves and put `object-fit: cover` on
 *    `div.hero` under a REVISION comment. object-fit only applies to replaced
 *    elements, so it did nothing on a div. It belongs on the video.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {
  /* fill the hero instead of reserving a 16:9 box in flow */
  .hero .hero-video__container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
  }

  /* drop the aspect-ratio padding hack; take the container's real height */
  .hero .hero-video {
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
  }

  /* main.css already absolutely positions this at 100%x100% — object-fit stops
     it stretching now that the box is no longer 16:9 */
  .hero .hero-video video {
    object-fit: cover;
    object-position: center;
  }
}