.testimonial-slider {
    /* Background gradient applied separately in the builder */
    padding: 4rem 2.25rem;
    background-image: url("/wp-content/uploads/2026/06/bk-grat.svg");
    background-size: cover;
    background-position: center;

    @media (min-width: 768px) {
        padding: 4rem 2.25rem 4rem 2.25rem;
    }

    /* Bricks' container styles (flex-row, no auto margins) don't suit
       hand-rendered markup: own layout, centered. */
    .brxe-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 87.5rem;
        margin-inline: auto;
    }

    .t-splide {
        visibility: visible; /* override Splide's pre-init hiding */
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .pretitle {
        display: block;
        color: var(--color-blue-two);
    }

    .quote {
        color: var(--color-white);
        font-family: var(--font-heading);
        font-size: clamp(1.125rem, 0.46rem + 2.82vw, 3rem);
        font-weight: 500;
        line-height: 1.3;
        /* Equal spacing above and below the quote. The quote box always
           reserves the full 7-line height, so the bottom gap is measured
           from the longest possible quote and the names row never shifts
           between slides. */
        margin: 14rem 0;
        min-height: calc(7 * 1.3em);
        padding: 0;
        border: 0;
        /* Cap quotes at 7 lines; overflow is truncated with an ellipsis */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
        line-clamp: 7;
        overflow: hidden;
    }

    /* Footer row: names + progress bars, arrows */
    .t-meta {
        position: relative;

        @media (min-width: 768px) {
            display: flex;
            align-items: flex-end;
            gap: 2.5rem;
        }
    }

    .t-nav {
        @media (min-width: 768px) {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem;
        }
    }

    .t-item {
        display: none;
        width: 100%;
        padding: 0;
        background: none;
        border: 0;
        text-align: left;
        cursor: pointer;

        /* Mobile: only the active testimonial's name + bar is shown */
        &.is-active {
            display: block;
        }

        @media (min-width: 768px) {
            display: block;
        }
    }

    .name {
        display: block;
        color: rgba(255, 255, 255, 0.5);
        font-family: var(--font-heading);
        font-size: 1.25rem;
        line-height: 1.2;
        padding-bottom: 0.875rem;
        /* Mobile: keep clear of the absolutely-positioned arrows */
        padding-right: 5rem;
        transition: color 0.3s ease;

        @media (min-width: 768px) {
            padding-right: 0;
        }
    }

    .t-item.is-active .name {
        color: var(--color-blue-two);
    }

    .bar {
        display: block;
        width: 100%;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.25);
        overflow: hidden;
    }

    .bar-fill {
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--color-blue);
        transform: scaleX(0);
        transform-origin: left center;
    }

    /* Arrows: static at the right of the row on desktop,
       pinned to the name row on mobile */
    .splide__arrows {
        position: absolute;
        top: -0.25rem;
        right: 0;
        display: flex;
        align-items: center;
        gap: 1rem;

        @media (min-width: 768px) {
            position: static;
        }
    }

    .splide__arrow {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        padding: 0.25rem;
        background: none;
        border: 0;
        border-radius: 0;
        color: var(--color-white);
        opacity: 1;
        cursor: pointer;

        svg {
            fill: var(--color-blue);
            width: 1rem;
            height: 1rem;
        }

        &:hover {
            svg {
                fill: var(--color-blue-two);
            }
        }
    }

    .splide__arrow--prev {
        svg {
            transform: scale(1);
        }
    }
}