/* ============================================================
   TESTIMONIALS
   Instituto Tecnológico CEPRO
   Depends on: tokens.css + global.css + animations.css
   ============================================================ */

.testimonials {
    padding-block: var(--space-20);
    background-color: var(--color-gray-50);
    margin-top: var(--space-20);
    position: relative;
    overflow: visible;
}

.testimonials__container {
    max-width: 900px;
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ============================================
   HEADER
   ============================================ */
.testimonials__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.testimonials__header .title__two {
    color: var(--color-primary);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 var(--space-4);
    position: relative;
    display: inline-block;
    padding-bottom: var(--space-3);
}

.testimonials__header .title__two::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
}

.testimonial__description {
    color: var(--color-gray-700);
    max-width: 640px;
    margin: 0 auto;
    line-height: var(--line-height-relaxed);
}

/* ============================================
   CAROUSEL
   ============================================ */
.testimonials__carousel {
    position: relative;
    width: 100%;
    border-radius: var(--radius-xl);
}

.testimonials__viewport {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    position: relative;
}

.testimonials__track {
    display: flex;
    transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
    width: 100%;
    will-change: transform;
}

/* ============================================
   TESTIMONIAL CARD
   ============================================ */
.testimonial {
    flex: 0 0 100%;
    width: 100%;
    background-color: var(--color-white);
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-xl);
    text-align: center;
    box-sizing: border-box;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

/* Decorative quote icon (top-left) */
.testimonial::before {
    content: '';
    position: absolute;
    top: var(--space-6);
    left: var(--space-6);
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e07e01' opacity='0.18'><path d='M9.583 17.321C8.553 16.227 8 15 8 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm-8 0C.553 16.227 0 15 0 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    pointer-events: none;
}

.testi-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.testi-meta img {
    width: 90px;
    height: 90px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 4px solid var(--color-white);
    box-shadow:
        0 0 0 3px var(--color-accent),
        0 8px 20px rgba(0, 0, 0, 0.1);
}

.testimonial .title__four {
    color: var(--color-accent);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.desc {
    margin-top: var(--space-4);
}

.desc .title__three {
    color: var(--color-primary);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3);
}

.desc .lead {
    color: var(--color-gray-700);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    max-width: 620px;
    margin: 0 auto;
}

/* ============================================
   NAV BUTTONS
   ============================================ */
.testimonials__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow-md);
    transition:
        background-color var(--transition-base),
        transform var(--transition-fast),
        box-shadow var(--transition-base);
}

.testimonials__nav:hover {
    background-color: var(--color-accent-light);
    transform: translateY(-50%) scale(1.08);
    box-shadow: var(--shadow-accent);
}

.testimonials__nav svg {
    width: 18px;
    height: 18px;
    fill: var(--color-white);
}

/* Place arrows just outside the card, but still visible */
.testimonials__nav--prev {
    left: -22px;
}

.testimonials__nav--next {
    right: -22px;
}

/* ============================================
   DOTS
   ============================================ */
.testimonials__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.testimonials__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-300);
    border: none;
    cursor: pointer;
    padding: 0;
    transition:
        background-color var(--transition-base),
        width var(--transition-base),
        transform var(--transition-base);
}

.testimonials__dot:hover {
    background-color: var(--color-gray-400);
    transform: scale(1.15);
}

.testimonials__dot.is-active {
    background-color: var(--color-accent);
    width: 28px;
    box-shadow: 0 4px 12px rgba(224, 126, 1, 0.4);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media screen and (max-width: 900px) {
    .testimonials {
        padding-block: var(--space-16);
    }

    .testimonial {
        padding: var(--space-8) var(--space-6);
    }

    .testimonials__nav {
        width: 38px;
        height: 38px;
    }

    .testimonials__nav svg {
        width: 16px;
        height: 16px;
    }

    .testimonials__nav--prev {
        left: -14px;
    }

    .testimonials__nav--next {
        right: -14px;
    }
}

@media screen and (max-width: 640px) {
    .testimonials {
        padding-block: var(--space-12);
    }

    .testimonial {
        padding: var(--space-6) var(--space-5);
    }

    .testi-meta img {
        width: 72px;
        height: 72px;
    }

    .testimonials__nav {
        display: none;
    }

    .testimonial::before {
        width: 36px;
        height: 36px;
        top: var(--space-4);
        left: var(--space-4);
    }
}

/* ============================================
   ACCESSIBILITY — reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .testimonials__track {
        transition: none;
    }
}