#testimonials-slider {
    padding-top: var(--spacing-md);
    width: 100%;
    overflow: hidden;
    position: relative;
}

.testimonial-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    position: relative;
    min-height: auto;
    width: 100%;
    scrollbar-width: none;
    /* List resets */
    list-style: none;
    padding: 0;
    margin: 0;
}



/* Hide scrollbar */
.testimonial-slider::-webkit-scrollbar {
    display: none;
}

/* 
 * Pure CSS slider animation strategy.
 * By animating the margin-left of the first slide, we drag the entire track left.
 * To support many testimonials (there are over 100), we make a generic 10-slide 
 * loop so the page feels alive. 
 * Wait 10s -> Slide -> Wait 10s...
 */
@keyframes autoSlideTrack {

    0%,
    9% {
        margin-left: 0;
    }

    10%,
    19% {
        margin-left: -100%;
    }

    20%,
    29% {
        margin-left: -200%;
    }

    30%,
    39% {
        margin-left: -300%;
    }

    40%,
    49% {
        margin-left: -400%;
    }

    50%,
    59% {
        margin-left: -500%;
    }

    60%,
    69% {
        margin-left: -600%;
    }

    70%,
    79% {
        margin-left: -700%;
    }

    80%,
    89% {
        margin-left: -800%;
    }

    90%,
    99% {
        margin-left: -900%;
    }

    100% {
        margin-left: 0;
    }
}

/* Slide Styling */
.testimonial-slider .slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;

    display: grid;
    grid-template-columns: min-content 1fr min-content;
    grid-template-rows: auto auto;
    gap: 0 var(--spacing-sm);
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 100s total for 10 slides = 10s each. Apply ONLY to first child */
.testimonial-slider .slide:first-child {
    animation: autoSlideTrack 100s infinite ease-in-out;
}

/* Pause animation on hover or focus so user can read/click */
.testimonial-slider:hover .slide:first-child,
.testimonial-slider:focus-within .slide:first-child {
    animation-play-state: paused;
}


/* Children Grid Assignment */
.testimonial-slider .slide .prev-quote {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.testimonial-slider .slide .next-quote {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.testimonial-slider .slide .testimonial-content {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.testimonial-slider .slide blockquote {
    margin-bottom: 0;
    /* Reset default blockquote margins */
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

.testimonial-content cite {
    color: var(--color-primary);
    text-align: center;
    font-weight: bold;
    font-family: var(--font-heading);
}

/* Base Headings Style */
.testimonial-content blockquote {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    color: var(--color-secondary);
    font-style: italic;
    font-weight: bold;
    font-family: var(--font-heading);
    opacity: 0.9;
    padding: 0;
    max-height: 120px;
    text-align: center;
    /* Limit height */
    overflow-y: auto;
    /* Internal scroll */
    scrollbar-width: thin;
    /* Firefox thin scrollbar */
}

/* Custom Scrollbar for Testimonials */
.testimonial-content blockquote::-webkit-scrollbar {
    width: 4px;
}

.testimonial-content blockquote::-webkit-scrollbar-track {
    background: transparent;
}

.testimonial-content blockquote::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary);
    border-radius: 4px;
}

/* Quote Buttons */
.quote-btn {
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-accent);
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
    padding: 0 var(--spacing-sm);
    height: auto;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    border-bottom: none !important;
}

.quote-btn:visited {
    color: var(--color-accent);
}

.quote-btn:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.prev-quote::before {
    content: "\275D";
    /* Heavy Double Turned Comma Quotation Mark Ornament */
}

.next-quote::before {
    content: "\275E";
    /* Heavy Double Comma Quotation Mark Ornament */
}

/* Responsive */
@media (max-width: 768px) {
    .testimonial-slider .slide {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .testimonial-slider .slide .testimonial-content {
        grid-column: 1;
    }

    .quote-btn {
        display: none;
    }

    .testimonial-text {
        font-size: 1rem;
    }
}