/* ============================================================================
   RAVIX — MOBILE BANNER FIX
   Only change: banner video rotated 90deg on mobile for cinematic illusion.
   Everything else is untouched.
   TO REVERT COMPLETELY: remove the two enqueue lines from functions.php
   ============================================================================ */

@media (max-width: 767px) {

  /* Rotate the hero section 90deg CW so the widescreen video fills the screen */
  section.hero.project-hero {
    overflow: hidden !important;
  }

  .hero__video-wrapper iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* Swap width/height to fill a rotated landscape frame */
    width: 100vh !important;
    height: 56.25vh !important;
    min-width: 177.77vw !important;
    min-height: 100vw !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center !important;
    border: none !important;
  }

}