/**
 * Elementor Slides — per-slide self-hosted video overlay.
 * Paired with assets/js/modules/elementor-slides-video.js and
 * mu-plugins/site-core/elementor/widgets/slides-video.php.
 *
 * The JS appends <video> INTO .swiper-slide-bg. `isolation: isolate` on the
 * bg contains the video's stacking so the Elementor Background Overlay and
 * .swiper-slide-inner (heading/description/button) stay above the video.
 *
 * Only self-hosted video (MP4/WebM) is supported in v1.
 */

.swiper-slide-bg.has-miv-video {
    /* Disable Ken Burns / slide-bg transforms while a video is present —
       video has its own motion; compounded zoom looks broken. */
    animation: none !important;
    transform: none !important;
    /* Contain the media's stacking context inside the bg layer. Without this
       the <video>'s z-index escapes and floats above .swiper-slide-inner,
       hiding the slide heading/description/button and the Elementor
       Background Overlay. */
    isolation: isolate;
}

.miv-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
    /* Let clicks pass through to the slide link / navigation, if present. */
    pointer-events: none;
    /* Fade in once playback starts; JS toggles .miv-slide-video--active. */
    transition: opacity 400ms ease;
    background: #000;
    z-index: 0;
}

.miv-slide-video--active {
    opacity: 1;
}

/* When the user prefers reduced motion, keep the poster (slide background
   image) visible and suppress the video overlay entirely. */
@media (prefers-reduced-motion: reduce) {
    .miv-slide-video {
        display: none;
    }
}

/* Per-slide opt-out: hide the custom overlay image painted on
   `.section-slider-carousel .swiper-wrapper .swiper-slide::before`.
   Applies to original slides and Swiper loop duplicates (JS mirrors the
   class onto clones). `!important` beats the source selector's specificity. */
.swiper-slide.miv-no-overlay::before {
    background-image: none !important;
}

/* ===== YouTube variant =====
   The wrapper is a <div> built by buildYouTubeVideo() containing:
     <img class="miv-slide-video__poster"> — covers iframe until --active fades it
     <iframe>                              — created in-place by YT.Player, overscan-cropped
   The base `.miv-slide-video` rule already provides position/opacity/z-index. */

.miv-slide-video--youtube {
    overflow: hidden;
}

/* Iframe overscan: hides YouTube's top/bottom chrome (title, progress bar
   ghosts) by extending the iframe past the wrapper edges. `pointer-events: none`
   on the iframe also blocks YT's native tap-to-show controls overlay. */
.miv-slide-video--youtube iframe {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    border: 0;
    pointer-events: none;
}

.miv-slide-video--youtube .miv-slide-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 400ms ease;
}

/* Reveal the iframe once the slide is active. `--active` is added by JS to
   the wrapper at the same time the slide becomes the Swiper realIndex; B3
   triggers playVideo() on YT onReady so the player should already be playing
   (or about to) by the time the poster finishes fading out. */
.miv-slide-video--youtube.miv-slide-video--active .miv-slide-video__poster {
    opacity: 0;
    pointer-events: none;
}

/* YT.Player onError fallback — keep the poster visible so the slide doesn't
   show a black hole if the player can't initialise (embed restrictions,
   aggressive adblocker stripping the player JS, etc.). */
.miv-slide-video--youtube.miv-slide-video--blocked .miv-slide-video__poster {
    opacity: 1 !important;
    pointer-events: none;
}

@media (max-width: 768px) {
    .miv-slide-video--youtube iframe {
        top: -80px;
        height: calc(100% + 160px);
    }
}