/* =====================================================================
   Echoes of Kintamani — Fix pack (Claude)
   Scope: desktop responsiveness of hero video (start/end) + anti-flicker
          of section-1 background image during horizontal loop.
   Safe: CSS only here; behaviour logic is in eok-fixes.js.
   Reversible: remove this block from Additional CSS to fully revert.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Every background image (.bg-full) must COVER its box and sit on its
      own compositor layer so the horizontal-loop teleport does not force
      a repaint that blanks the image for a frame (Issue 2).
   --------------------------------------------------------------------- */
.pt-hscroller-element .bg-full,
.sc-slider .bg-full {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform;
}

/* ---------------------------------------------------------------------
   2) Clones that eok-fixes.js has restored: guarantee the poster/image is
      visible and any leftover dead video layer is hidden (Issue 1 "end"
      video + Issue 2 loop blank).
   --------------------------------------------------------------------- */
.pt-hs-clone .pt-video-container,
.pt-hs-clone iframe,
.pt-hs-clone video {
    display: none !important;
}
.pt-hs-clone .bg-full.eok-clone-fixed {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2b) THE reason the end hero renders black: it is a `mode-fade` slider whose
   slides default to opacity:0/visibility:hidden and are only revealed by the
   slider JS via a `.current` class. Clones are never driven by that JS, so the
   slide stays hidden. Reveal the first slide of every clone (single-slide
   heroes need exactly this; multi-slide sliders are not among the cloned
   panels, and scoping to :first-child keeps them from overlapping if they were). */
.pt-hs-clone .item:first-child {
    opacity: 1 !important;
    visibility: visible !important;
}
.pt-hs-clone .item:first-child .img,
.pt-hs-clone .img {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---------------------------------------------------------------------
   3) Desktop hero video (Issue 1 "start"): keep the YouTube/video layer
      covering the full panel even after the window is resized (the theme
      only sizes it once on load). Uses viewport-ratio cover so it stays
      full-bleed without JS. Desktop only; mobile uses .mobile-hero-section.
   --------------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
    .sc-slider.mobile-list .item .img,
    .sc-slider.mobile-list .item .bg-full {
        height: 100% !important;
    }
    .sc-slider.mobile-list .bg-full {
        overflow: hidden !important;
    }
    .sc-slider.mobile-list .bg-full .pt-video-container {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
    }
    /* YouTube iframe can't use object-fit; scale to 16:9 cover both ways */
    .sc-slider.mobile-list .bg-full .pt-video-container iframe {
        position: absolute !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 177.7778vh !important;   /* cover when limited by height */
        min-width: 100% !important;
        height: 56.25vw !important;     /* cover when limited by width  */
        min-height: 100% !important;
    }
    /* self-hosted <video> (if ever used) covers cleanly */
    .sc-slider.mobile-list .bg-full video {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
    }
}