/* Cases block */

.block-cases {
    --cases-gap: 30px;
    --cases-ratio: 3 / 2;

    /* The slider bleeds past its column on purpose */
    overflow: hidden;
}

/* Slider — one case at a time */

.gsap-slider.block-cases__slider {
    --slider-spv-desktop: 1;
    --slider-spv-tablet: 1;
    --slider-spv-mobile: 1;
    /* In a column, so it fills that column rather than the 83% a full width
       slider uses — otherwise it no longer matches the image beside it. */
    --slider-measure: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cases-gap);
    padding-inline: 0;
    min-width: 0;
    /* One slide at a time, so neighbours must not show beside it */
    overflow: hidden;
}

.block-cases__slider .gsap-slider__collection,
.block-cases__slider .gsap-slider__header {
    width: 100%;
    max-width: none;
}

/* A single case: the script switches the slider off and the global fallback
   lays the items out in two columns, which would leave one quote at half
   width. This block shows one at a time either way. */
.block-cases__slider[data-gsap-slider-status="not-active"] .gsap-slider__list {
    grid-template-columns: 1fr;
}

.block-cases__title {
    margin: 0;
}

/* Image left, slider right */

/* The block is alignwide, so everything inside it fills that width.
   minmax(0, 1fr) rather than 1fr: the slider inside is wider than the column,
   and a plain fr track refuses to shrink below its content. */
.block-cases__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cases-gap);
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/* Every case's image is stacked here; only the current one shows */
.block-cases__media {
    position: relative;
    z-index: 2;
    min-height: 0;
    min-width: 0;
    aspect-ratio: var(--cases-ratio);
    border-radius: var(--radius-06);
    overflow: hidden;
    background-color: var(--wp--preset--color--base);
}

.block-cases__media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.block-cases__media-item[data-status="active"] {
    opacity: 1;
    visibility: visible;
}

.block-cases__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Same frame as the hero carousel: the element is the hole and the box-shadow
   paints the band, which closes outwards as the case becomes current. */
.block-cases__media-inset {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border-radius: var(--radius-06);
    box-shadow: 0 0 0 100vmax var(--wp--preset--color--warm-zwart);
    pointer-events: none;
    /* Reset to the closed position with no duration, after the fade out has
       finished — so the outgoing case never shows its band closing. */
    transition: top 0s 0.4s, right 0s 0.4s, bottom 0s 0.4s, left 0s 0.4s;
}

/* The transition lives on the active state only, so the band opens outwards on
   the way in and snaps back while the old case is fading out — otherwise both
   frames animate at once and read as a crossfade. */
.block-cases__media-item[data-status="active"] .block-cases__media-inset {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1), right 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                bottom 0.6s cubic-bezier(0.4, 0, 0.2, 1), left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.block-cases__case {
    height: 100%;
}

.block-cases__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
    text-align: center;
}

.block-cases__quote {
    margin: 0;
    text-wrap: balance;
    font-size: var(--wp--preset--font-size--x-large);
    line-height: 1;
}

.block-cases__name {
    color: var(--wp--preset--color--warm-grijs-04);
}

.block-cases__button {
    margin-top: 14px;
}

/* Desktop */

@media (min-width: 782px) {
    .block-cases {
        --cases-gap: 50px;
    }

    /* minmax(0, 1fr) rather than 1fr: the slider's own content is wider than
       half the row, and a plain fr track refuses to shrink below that. */
    .block-cases__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}