/* ==========================================================================
   Video Snap Scroll - mobile only (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* Prevent horizontal scrollbar caused by the full-bleed technique. */
    html:has(.is-video-snap-item) {
        overflow-x: hidden;
    }

    /* Each snap item occupies the full dynamic viewport height.
       Full-bleed: break out of the theme content container. */
    .is-video-snap-item {
        height: 100dvh;
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    /* Videos and iframes fill the container. */
    .is-video-snap-item video,
    .is-video-snap-item iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Header: set up transition so the hide animation is smooth. */
    header {
        transition: transform 0.3s ease, opacity 0.2s ease;
        will-change: transform, opacity;
    }

    /* Hide header when a snap item is active (class toggled by JS). */
    body.video-snap-active header {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }

}