/*
 * OLEA manual image carousel.
 *
 * Smartphone: one centred card with adjacent content visible.
 * Tablet: two complete cards when more than two images exist.
 * Desktop: three complete cards when more than three images exist.
 */

/* JavaScript clones remain hidden whenever the Columns block is static. */
.wp-block-columns.olea-image-carousel > .olea-image-carousel-clone {
    display: none;
}

@media (max-width: 599px) {
    .wp-block-columns.olea-image-carousel {
        /*
         * Values retained from the mobile design:
         * 68vw card width, 8vw gap and centred side spacing.
         */
        --olea-image-card-width: 68vw;
        --olea-image-gap: 8vw;
        --olea-image-side-space: calc((100vw - var(--olea-image-card-width)) / 2);
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: var(--olea-image-gap) !important;
        width: 100vw;
        max-width: none !important;
        margin-right: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50vw) !important;
        padding-right: var(--olea-image-side-space) !important;
        padding-left: var(--olea-image-side-space) !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--olea-image-side-space);
        scroll-behavior: smooth;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        box-sizing: border-box;
    }

    .wp-block-columns.olea-image-carousel::-webkit-scrollbar {
        display: none;
    }

    .wp-block-columns.olea-image-carousel > .wp-block-column {
        flex: 0 0 var(--olea-image-card-width) !important;
        width: var(--olea-image-card-width) !important;
        min-width: var(--olea-image-card-width) !important;
        margin: 0;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .wp-block-columns.olea-image-carousel > .olea-image-carousel-clone {
        display: block;
    }

    .wp-block-columns.olea-image-carousel .wp-block-image {
        width: 100%;
        margin: 0;
    }

    .wp-block-columns.olea-image-carousel .wp-block-image img {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (min-width: 600px) and (max-width: 1199px) {
    .wp-block-columns.olea-image-carousel.olea-image-carousel--tablet-enabled {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        box-sizing: border-box;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--tablet-enabled::-webkit-scrollbar {
        display: none;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--tablet-enabled > .wp-block-column {
        flex: 0 0 var(--olea-image-active-card-width, calc((100% - 1.5rem) / 2)) !important;
        width: var(--olea-image-active-card-width, calc((100% - 1.5rem) / 2)) !important;
        min-width: var(--olea-image-active-card-width, calc((100% - 1.5rem) / 2)) !important;
        margin: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--tablet-enabled > .olea-image-carousel-clone {
        display: block;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--tablet-enabled .wp-block-image {
        width: 100%;
        margin: 0;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--tablet-enabled .wp-block-image img {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (min-width: 1200px) {
    .wp-block-columns.olea-image-carousel.olea-image-carousel--desktop-enabled {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        box-sizing: border-box;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--desktop-enabled::-webkit-scrollbar {
        display: none;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--desktop-enabled > .wp-block-column {
        flex: 0 0 var(--olea-image-active-card-width, 33.333333%) !important;
        width: var(--olea-image-active-card-width, 33.333333%) !important;
        min-width: var(--olea-image-active-card-width, 33.333333%) !important;
        margin: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--desktop-enabled > .olea-image-carousel-clone {
        display: block;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--desktop-enabled .wp-block-image {
        width: 100%;
        margin: 0;
    }

    .wp-block-columns.olea-image-carousel.olea-image-carousel--desktop-enabled .wp-block-image img {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-columns.olea-image-carousel {
        scroll-behavior: auto;
    }
}