/**
 * Foto slider — static (non-slider) state
 *
 * A gallery with fewer images than `data-min-slides` (4) has nothing to slide
 * through on a wide screen, so from the `lg` breakpoint upwards the images are
 * laid out as plain equal-width columns instead of a slider.
 *
 * The rules below apply while Swiper is NOT running on the section:
 * assets/js/gallery-slider-init.js adds `--slider-active` when it initialises
 * Swiper and removes it (destroying with cleanStyles, so no inline transforms
 * or widths survive) when it hands back to this layout. Keying on the absence
 * of that class means the static layout is also correct before the script runs
 * and when JavaScript is unavailable.
 *
 * NOTE: the breakpoints here mirror `$static_breakpoint` in
 * template-parts/sections/slider.php and the theme's `.container` steps —
 * keep them in step.
 */

@media (min-width: 1024px) {

    .programma-slider--can-be-static:not(.programma-slider--slider-active) .swiper {
        overflow: visible;
    }

    /* The full-bleed margin only makes sense for an actual slider */
    .programma-slider--can-be-static:not(.programma-slider--slider-active) .programma-slider__slider-wrapper {
        margin-inline: 0;
    }

    .programma-slider--can-be-static:not(.programma-slider--slider-active) .swiper-wrapper {
        box-sizing: border-box;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        gap: 2rem;

        /* Line the images up with the section header, which sits in .container */
        max-width: 1024px;
        margin-inline: auto;
        padding-inline: 4rem;

        /* Swiper's base stylesheet animates transform; nothing to animate here */
        transition-property: none;
        transform: none;
    }

    /*
     * Equal-width columns for any image count.
     *
     * `flex: 1 1 0` is deliberate: a zero flex-basis can never overflow the
     * line, so the slides can't wrap onto a second row the way a fixed or
     * clamp() basis would. `max-width` stops a single image from becoming
     * comically wide. Swiper's base stylesheet forces width:100% and
     * flex-shrink:0, both of which have to be undone here.
     */
    .programma-slider--can-be-static:not(.programma-slider--slider-active) .swiper-slide {
        flex: 1 1 0;
        min-width: 0;
        max-width: 24rem;
        width: auto;
        height: auto;
    }

    /* Nothing to navigate to when everything is already on screen */
    .programma-slider--can-be-static:not(.programma-slider--slider-active) .programma-slider__navigation,
    .programma-slider--can-be-static:not(.programma-slider--slider-active) .swiper-pagination {
        display: none;
    }
}

@media (min-width: 1280px) {
    .programma-slider--can-be-static:not(.programma-slider--slider-active) .swiper-wrapper {
        max-width: 1280px;
        padding-inline: 5rem;
    }
}

@media (min-width: 1536px) {
    .programma-slider--can-be-static:not(.programma-slider--slider-active) .swiper-wrapper {
        max-width: 1536px;
        padding-inline: 6rem;
    }
}