/* Testimonials block (templates/components/testimonials_section.html, assets/js/testimonials.js).
   Every colour comes from the theme variables so the block follows whatever palette a site picks.
   Controls stay hidden until the script marks the block .is-ready; without it the row scrolls sideways. */
.testimonials {
    --tm-per-view: var(--tm-per-view-wide, 3);
    --tm-gap: 20px;
    --tm-hairline: color-mix(in srgb, var(--color-primary, #FFB3C6) 35%, transparent);
    --tm-text: var(--color-text, #000);
    --tm-muted: var(--color-text-secondary, color-mix(in srgb, var(--color-text, #000) 62%, transparent));
    padding: 64px 40px;
    color: var(--tm-text);
}

/* On an Accent background, the words, arrows and dots off the cards take the accent's text colour. */
.testimonials[data-block-bg="accent"] {
    --tm-text: var(--block-accent-text, var(--color-cta-text, #fff));
    --tm-muted: color-mix(in srgb, var(--block-accent-text, var(--color-cta-text, #fff)) 75%, transparent);
    --tm-hairline: color-mix(in srgb, var(--block-accent-text, var(--color-cta-text, #fff)) 50%, transparent);
}

.testimonials[data-block-bg="accent"] .testimonials-btn:hover {
    background: var(--tm-text);
    border-color: var(--tm-text);
    color: var(--block-accent, var(--color-cta));
}

.testimonials[data-block-bg="accent"] :is(.testimonials-btn, .testimonials-dot):focus-visible {
    outline-color: var(--tm-text);
}

.testimonials[data-block-bg="accent"] .testimonials-pill {
    background: color-mix(in srgb, var(--tm-text) 40%, transparent);
}

.testimonials[data-block-bg="accent"] .testimonials-fill {
    background: var(--tm-text);
}

/* Without a heading the block usually follows text that introduces it, so it sits closer. */
.testimonials:not(.has-head) {
    padding-top: 24px;
    padding-bottom: 32px;
}

/* Transparent so the block sits on whatever is behind it, including as a page's last section
   (layout.css paints .item:last-of-type in the primary colour). */
.item.testimonials {
    background: transparent;
}

.testimonials-inner {
    width: 100%;
    max-width: var(--block-width, 1200px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
    container-type: inline-size;
}

/* Fewer cards at once as the block narrows, so quotes never get squeezed (about 260px a card). */
@container (max-width: 1079px) {
    .testimonials-viewport { --tm-per-view: min(var(--tm-per-view-wide, 3), 3); }
}

@container (max-width: 819px) {
    .testimonials-viewport { --tm-per-view: min(var(--tm-per-view-wide, 3), 2); }
}

@container (max-width: 539px) {
    .testimonials-viewport { --tm-per-view: 1; }
}

.testimonials-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.testimonials.align-center .testimonials-head {
    justify-content: center;
    text-align: center;
}

.testimonials-eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-bold);
    font-size: 0.68rem;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-action, var(--color-accent));
}

.testimonials-heading {
    margin: 0;
    font-family: var(--font-bold);
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.2;
    color: var(--tm-text);
}

.testimonials-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-y;
}

.testimonials-viewport::-webkit-scrollbar {
    display: none;
}

.testimonials.is-ready .testimonials-viewport {
    overflow: hidden;
}

.testimonials-track {
    display: flex;
    align-items: stretch;
    will-change: transform;
}

.testimonials.is-step .testimonials-track {
    transition: transform 0.7s var(--easing, cubic-bezier(0.25, 1, 0.5, 1));
}

.testimonials.is-dragging .testimonials-track,
.testimonials.is-resizing .testimonials-track {
    transition: none;
}

.testimonials.is-glide .testimonials-track {
    animation: testimonials-glide var(--tm-glide-duration, 25s) linear infinite;
}

.testimonials.is-glide.is-halted .testimonials-track {
    animation-play-state: paused;
}

@keyframes testimonials-glide {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--tm-glide-distance, 0px))); }
}

.testimonial-card {
    box-sizing: border-box;
    flex: 0 0 calc((100% - (var(--tm-per-view) - 1) * var(--tm-gap)) / var(--tm-per-view));
    margin: 0 var(--tm-gap) 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    scroll-snap-align: start;
    text-align: left;
}

/* The card keeps the page's text colours, so its quote stays readable on an Accent background. */
.testimonials.card-style-card .testimonial-card {
    --tm-text: var(--color-text, #000);
    --tm-muted: var(--color-text-secondary, color-mix(in srgb, var(--color-text, #000) 62%, transparent));
    color: var(--tm-text);
    background: var(--color-accordion-bg, var(--color-background));
    border: 1px solid var(--tm-hairline);
    border-radius: var(--border-radius-card, 14px);
}

.testimonials.card-style-plain .testimonial-card {
    background: transparent;
    border-top: 1px solid var(--tm-hairline);
    padding: 28px 4px 4px;
}

.testimonials.align-center .testimonial-card {
    align-items: center;
    text-align: center;
}

.testimonial-mark {
    display: block;
    height: 30px;
    font-family: var(--font-bold);
    font-size: 72px;
    line-height: 0.85;
    color: var(--color-accent);
}

.testimonial-quote {
    margin: 0;
    flex-grow: 1;
    font-size: 1.375rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
    text-wrap: pretty;
    color: var(--tm-text);
}

.testimonials.per-view-1 .testimonial-quote { font-size: 2.125rem; line-height: 1.3; }
.testimonials.per-view-2 .testimonial-quote { font-size: 1.625rem; line-height: 1.35; }
.testimonials.per-view-4 .testimonial-quote { font-size: 1.1875rem; line-height: 1.45; }

.testimonial-cite {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-style: normal;
}

.testimonials.align-center .testimonial-cite {
    align-items: center;
}

.testimonial-name {
    font-family: var(--font-bold);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--tm-text);
}

.testimonial-detail {
    font-family: var(--font-bold);
    font-size: 0.68rem;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tm-muted);
}

.testimonial-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: 2px;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-links, var(--color-primary));
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.testimonial-source:hover,
.testimonial-source:focus-visible {
    text-decoration-thickness: 2px;
}

.testimonial-source svg {
    flex: none;
}

/* Controls: arrows beside the heading on wide screens when left-aligned, otherwise under the cards. */
.testimonials-controls,
.testimonials-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}

.testimonials-foot {
    justify-content: center;
    gap: 12px;
}

.testimonials-head-controls,
.testimonials-foot > *,
.testimonials-foot > .testimonials-dots {
    display: none;
}

.testimonials.is-ready.is-step .testimonials-foot > .testimonials-arrow,
.testimonials.is-ready.is-autoplay .testimonials-foot > .testimonials-pause {
    display: inline-flex;
}

.testimonials.is-ready.is-step .testimonials-foot > .testimonials-dots:not([hidden]) {
    display: flex;
    align-items: center;
}

@media (min-width: 600px) {
    .testimonials.is-ready.is-step.align-left.has-head .testimonials-head-controls {
        display: flex;
    }

    .testimonials-head-controls > .testimonials-arrow {
        display: inline-flex;
    }

    .testimonials.is-ready.is-step.align-left.has-head .testimonials-foot > .testimonials-arrow,
    .testimonials.is-ready.is-step.align-left.has-head .testimonials-foot > .testimonials-pause,
    .testimonials-head-controls > .testimonials-pause {
        display: none;
    }

    .testimonials.is-autoplay .testimonials-head-controls > .testimonials-pause {
        display: inline-flex;
    }
}

.testimonials-btn {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--tm-hairline);
    background: transparent;
    color: var(--tm-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s var(--easing, ease), color 0.25s var(--easing, ease), border-color 0.25s var(--easing, ease);
}

.testimonials-btn:hover {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-cta-text, #fff);
}

.testimonials-btn:focus-visible,
.testimonials-dot:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.testimonials-icon-play,
.testimonials.is-paused .testimonials-icon-pause {
    display: none;
}

.testimonials.is-paused .testimonials-icon-play {
    display: block;
}

.testimonials-dot {
    width: 32px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.testimonials-pill {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-text, #000) 18%, transparent);
    transition: width 0.4s var(--easing, ease);
}

.testimonials-dot.is-active .testimonials-pill {
    width: 28px;
}

.testimonials-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--color-cta);
}

@media (max-width: 599px) {
    .testimonials {
        --tm-gap: 12px;
        padding: 40px 20px;
    }

    .testimonials:not(.has-head) {
        padding-top: 16px;
        padding-bottom: 24px;
    }

    .testimonials .testimonial-quote {
        font-size: 1.5rem;
        line-height: 1.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonials .testimonials-track {
        transition: none;
        animation: none;
    }

    .testimonials-pill {
        transition: none;
    }
}