/* Testimonials block */

.block-testimonials {
    --testimonials-gap: 30px;
    --testimonials-ratio: 3 / 4;

    /* The slider overflows its column on purpose; this keeps it off the page */
    overflow: hidden;
}

.block-testimonials__inner {
    width: 83%;
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    box-sizing: content-box;
}

/* Image — stays put while the slider moves beside it */

.block-testimonials__media {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 0;
    aspect-ratio: var(--testimonials-ratio);
    border-radius: var(--radius-06);
    overflow: visible;
    /* Mobile: under the slides, and inset by the page padding — the slider it
       sits under keeps that padding, so the image would otherwise run wider.
       The markup keeps the image first, so only the visual order moves. */
    max-width: calc(100% - 2 * var(--wp--style--root--padding-right));
    order: 1;
}

/* Bleeds the band out to the left edge of the viewport */
.block-testimonials__media::before {
    content: "";
    position: absolute;
    left: -99vw;
    width: 100vw;
    height: 100%;
    background: var(--wp--preset--color--base);
    z-index: -1;
}

/* Stays solid while the images cross-fade, so what is behind never shows
   through. The frame's colour, so a switch reads as one dark frame opening.
   A layer rather than the box's own background: the band above reaches under
   the image's left edge, and would otherwise paint a light strip over it. */
.block-testimonials__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-06);
    background-color: var(--wp--preset--color--warm-zwart);
    z-index: -1;
}

/* The image and the slides sit in a flex row so the image can take the row's
   height — set by the square slides — and derive its width from the ratio. */
.block-testimonials__row {
    display: flex;
    flex-direction: column;
    gap: var(--testimonials-gap);
    min-width: 0;
    width: 100%;
}

.block-testimonials__media img {
    display: block;
    width: 100%;
    height: 100%;
    /* The wrapper no longer clips, so the image carries the radius itself */
    border-radius: var(--radius-06);
    object-fit: cover;
}

/* Every testimonial's image is stacked in the media box; only the current one
   shows. Each clips itself, since the box has to let the band above bleed out. */
.block-testimonials__media-item {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-06);
    overflow: hidden;
    background-color: var(--wp--preset--color--base);
    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-testimonials__media-item[data-status="active"] {
    opacity: 1;
    visibility: visible;
}

/* Same frame as the cases block: the element is the hole and the box-shadow
   paints the band, which closes outwards as the testimonial becomes current. */
.block-testimonials__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 image 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 image is fading out. */
.block-testimonials__media-item[data-status="active"] .block-testimonials__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);
}

/* Slider — the global padding belongs to full width sliders, not this column */

.gsap-slider.block-testimonials__slider {
    /* Slides per view for this block only — the global defaults stay put */
    --slider-spv-desktop: 1.5;
    --slider-spv-tablet: 1.5;
    --slider-spv-mobile: 1.1;
    /* This slider sits in a column rather than across the page, so it uses the
       full width of that column — at 83% the square slides would no longer
       reach the height of the image beside them. */
    --slider-measure: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--testimonials-gap);
    padding-inline: 0;
    min-width: 0;
    overflow: visible;
}

.block-testimonials__slider .gsap-slider__collection,
.block-testimonials__slider .gsap-slider__header {
    max-width: none;
}

/* Card */

.block-testimonials__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: var(--testimonials-gap);
    border-radius: var(--radius-06);
    background-color: var(--wp--preset--color--white);
    text-align: center;
}

.block-testimonials__quote {
    margin: 0;
    text-wrap: balance;
}

/* Pinned to the foot of the card, so the quote centres in the whole square */
.block-testimonials__name {
    position: absolute;
    bottom: 3rem;
    width: 100%;
    max-width: 80%;
    color: var(--wp--preset--color--warm-grijs-04);
}

/* Title, level with the arrows */

.block-testimonials__title {
    margin: 0;
}

/* Desktop */

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

    /* Two columns. At 1.5 slides per view a square slide is about two thirds
       of the slider column, which is the same height a 3:4 image reaches at
       half that width — so the two line up without either being forced. */
    .block-testimonials__row {
        display: grid;
        grid-template-columns: 0.985fr 2fr;
        align-items: start;
        column-gap: var(--slider-gap);
    }

    .block-testimonials__media {
        order: 0;
        width: 100%;
        max-width: none;
    }

    .block-testimonials__slider .gsap-slider__collection {
        min-width: 0;
    }
}

/* Same breakpoint as the alignwide utility */
@media (max-width: 1049px) {
    .block-testimonials__inner {
        width: 100%;
    }

    /* The inner is content-box, so its side padding sits on top of that 100%
       and the slides bleed past the page edge on purpose. The header carries
       the title and the arrows, so it stays within the page — inset by the
       same padding as the image below it. */
    .block-testimonials__slider .gsap-slider__header {
        max-width: calc(100% - 2 * var(--wp--style--root--padding-right));
        /* Left edge shared with the image, rather than centred in the bleed */
        margin-left: 0;
    }
}