.testimonials{
    padding: calc(var(--block-margin) / 2) 0;
}

.testimonials header h2{
    font: var(--font-headline-3);
    width: 100%;
    max-width: var(--wide-width);
}


.testimonials-carousel .swiper-wrapper .swiper-slide{
    height: unset;
    align-self: flex-start;
}

.testimonial-item{
    margin-left: 0;
    padding-left: calc(3.3rem + var(--item-row-gap));
}

.testimonials[data-display-quote="1"] .testimonial-item::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 3.3rem;
    height: 2.7rem;
    background-image: url('./img/quote.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.testimonial-item p{
    font: var(--font-elevated-1);
    color: var(--color-forest-floor);
}

:is([data-color-scheme="medium"], [data-color-scheme="dark"]) .testimonial-item p{
    color: var(--color-gray);
}

.testimonial-item cite strong{
    font: var(--font-body);
    font-weight: 500;
}

.testimonial-item cite span{
    font: var(--font-body-xsmall);
    font-weight: 500;
    color: var(--color-forest-floor);
    text-transform: uppercase;
}

:is([data-color-scheme="medium"], [data-color-scheme="dark"]) .testimonial-item cite span{
    color: var(--color-gray);
}

:is(.testimonials-carousel-navigation-prev, .testimonials-carousel-navigation-next) svg *{
    stroke: none;
}

:is(.testimonials-carousel-navigation-prev, .testimonials-carousel-navigation-next) svg rect{
    fill: var(--color-green-fresh);
}

:is(.testimonials-carousel-navigation-prev, .testimonials-carousel-navigation-next) svg path{
    stroke: var(--color-black);
}

:is(.testimonials-carousel-navigation-prev, .testimonials-carousel-navigation-next):is(:hover, :focus, :active) svg rect{
    fill: var(--color-green-vibrant);
    stroke: none;
}

:is(.testimonials-carousel-navigation-prev, .testimonials-carousel-navigation-next):is(:hover, :focus, :active) svg path{
    stroke: var(--color-black);
}

/* ── Grid only (all screen sizes) ── */
.testimonials:has(.testimonials-grid) > header {
    max-width: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.testimonials:has(.testimonials-grid) > header h2 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.testimonials:has(.testimonials-grid) .testimonial-item p {
    font: var(--font-body);
}

.testimonials:has(.testimonials-grid) .testimonial-item {
    position: relative;
    padding-left: calc(3.3rem + var(--item-row-gap));
}

.testimonials:has(.testimonials-grid) .testimonials-grid {
    row-gap: calc(var(--row-gap) * 2);
}

@media (min-width: 768px){
    /* ── Carousel only: 2-column heading-left / slides-right layout ── */
    .testimonials:has(.testimonials-carousel-container),
    .testimonials-carousel-container{
        display: grid;
        grid-template-columns: minmax(0, 2.7fr) minmax(0, 7.3fr);
        column-gap: var(--column-gap);
    }

    .testimonials:has(.testimonials-carousel-container) header{
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
    }

    .testimonials:has(.testimonials-carousel-container) header h2{
        max-width: 100%;
    }

    .testimonials-carousel-container{
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .testimonials-carousel{
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }

    .testimonials-carousel-navigation{
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        z-index: 2;
        column-gap: var(--item-row-gap);
    }

    /* ── Grid only: column-filling items ── */
    .testimonials-grid > .testimonial-item {
        max-width: none;
        margin: 0;
        width: 100%;
        align-self: stretch;
    }
}