/**
 * Serialized (Flickity) carousels: the theme sets .serialized-no-auto-scroll .flickity-viewport { overflow: scroll }
 * which shows horizontal + vertical scrollbars on desktop when few slides fit. Mobile uses touch drag without
 * those scrollbars. Match that by clipping the viewport and hiding any residual scrollbars.
 */
.serialized .serialized-no-auto-scroll .flickity-viewport {
    overflow: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.serialized .serialized-no-auto-scroll .flickity-viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Below 1728px the theme sets .serialized .flickity-viewport { overflow: unset }, which can expose scrollbars. */
@media screen and (max-width: 1728px) {
    .serialized .flickity-viewport {
        overflow: hidden !important;
    }
}

/**
 * Home video section: edge-to-edge slides, no horizontal gutter; keep drag/freeScroll usable.
 */
[data-home-video-serialized] {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

[data-home-video-serialized] .flickity-viewport {
    overflow: hidden !important;
    cursor: grab;
}

[data-home-video-serialized] .flickity-viewport.is-pointer-down {
    cursor: grabbing;
}

[data-home-video-serialized] [data-carouselSerialized-slide] {
    margin-left: 0 !important;
}

[data-home-video-serialized].flickity-enabled .flickity-slider {
    margin-left: 0;
}

/*
 * Flickity sets cell width from content; margin on .flickity-cell often does not show as a gap.
 * Padding on the slide (pr-3 / pr-4 in Blade) widens each cell so the next slide starts after the gap.
 */
[data-home-video-serialized] .flickity-cell > a.home-video-serialized__slide-link {
    display: block;
    box-sizing: border-box;
    /* Fallback if utility classes are purged from this partial */
    padding-right: 0.75rem;
}

@media (min-width: 768px) {
    [data-home-video-serialized] .flickity-cell > a.home-video-serialized__slide-link {
        padding-right: 1rem;
    }
}