/**
 * video-scroll.css
 * ---------------------------------------------------------------------------
 * Scroll-scrubbed panoramic video section between Services and Packages.
 *
 *   - Section is 250vh tall (≈2.5 viewports of scroll budget for scrubbing).
 *   - .video-scroll-pin is position: sticky; height: 70vh (NOT full viewport)
 *     so the surrounding sections breathe at the edges.
 *   - .video-scroll-inner is the visible frame: full viewport width
 *     (panoramic), 70vh tall, no rounded corners — full bleed.
 *   - Poster image as CSS background guarantees something visible.
 */

.video-scroll {
    position: relative;
    width: 100%;
    height: 250vh;
    background: #000;
    z-index: 5;
}

.video-scroll-pin {
    position: sticky;
    top: 15vh; /* center the 70vh frame in the viewport */
    height: 70vh;
    width: 100%;
    display: block;
    overflow: hidden;
}

.video-scroll-inner {
    position: relative;
    width: 100vw;
    height: 70vh;
    overflow: hidden;
    background-color: #000;
    background-image: var(--vs-poster, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.video-scroll-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-scroll-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 1;
}

/* Mobile: collapse to natural flow, no sticky. */
@media (max-width: 820px) {
    .video-scroll {
        height: auto;
        padding: 40px 0;
    }
    .video-scroll-pin {
        position: static;
        height: auto;
    }
    .video-scroll-inner {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}