/* ============================================================
   Sectiunea "Ce spun medicii dentisti despre noi" (testimoniale).
   Design preluat 1:1 din Figma (frame 8026:4932).
   Cardurile se deruleaza singure intr-o banda (marquee), pe desktop si pe mobil.
   Click pe un card -> deschide testimonialul complet intr-un modal si opreste
   derularea; la inchidere derularea continua.
   ============================================================ */

.testimonials {
    border-radius: var(--radius-lg);
    background-color: #F8FAFC;
    padding: var(--space-section) 100px;
}

.testimonials__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    padding-inline: var(--space-lg);
}

/* ─── Heading ────────────────────────────────────────────────── */
.testimonials__heading {
    text-align: center;
}

.testimonials__title {
    font-size: var(--font-size-h1);
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
    margin-bottom: var(--space-sm);
    white-space: nowrap;
}

.testimonials__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ─── Banda marquee (carduri care se deruleaza singure) ─────────────────
   Afisata pe toate ecranele (desktop + mobil). */
.testimonials__marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.testimonials__track {
    display: flex;
    width: max-content;
    gap: var(--space-lg);
    align-items: stretch;
    /* Continutul e dublat in HTML, deci -50% = un ciclu complet (derulare continua). */
    animation: testimonials-scroll 60s linear infinite;
}

    /* Cand banda e "pe pauza" (modal deschis) - oprim derularea. */
    .testimonials__track.is-paused {
        animation-play-state: paused;
    }

@keyframes testimonials-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Respectam preferinta de reducere a miscarii (accesibilitate): oprim derularea. */
@media (prefers-reduced-motion: reduce) {
    .testimonials__track {
        animation: none;
    }
}

/* ─── Card (buton clickabil in banda) ────────────────────────── */
.testimonial-card {
    /* Reset de buton: aratam si ne comportam ca un card, nu ca un buton nativ. */
    appearance: none;
    border: 1px solid #F3F4F6;
    background-color: var(--color-bg);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;

    /* Latime fixa in banda. */
    flex: 0 0 auto;
    width: 380px;
    max-width: 85vw;

    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 33px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 3px rgba(0, 0, 0, 0.1), 0 10px 7.5px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

    .testimonial-card:hover,
    .testimonial-card:focus-visible {
        transform: translateY(-4px);
        border-color: rgba(34, 173, 1, 0.35);
        box-shadow: 0 8px 6px rgba(0, 0, 0, 0.12), 0 16px 12px rgba(0, 0, 0, 0.12);
        outline: none;
    }

/* ─── Antet card: avatar + autor ─────────────────────────────── */
.testimonial-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.testimonial-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Fallback cand nu exista poza: initialele pe fundal verde discret. */
.testimonial-card__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(34, 173, 1, 0.1);
    color: var(--color-cta);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

.testimonial-card__author {
    display: flex;
    flex-direction: column;
}

.testimonial-card__name {
    font-size: 1.125rem; /* 18px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.testimonial-card__role {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* ─── Stele rating ───────────────────────────────────────────── */
.testimonial-card__stars {
    display: flex;
    gap: 0;
    color: #FACC15;
}

.testimonial-card__stars svg {
    width: 18px;
    height: 24px;
    padding-block: 4px;
}

/* ─── Citat (in card: trunchiat la cateva randuri, restul in modal) ──── */
.testimonial-card__quote {
    font-size: var(--font-size-base);
    line-height: 26px;
    color: #374151;

    /* Limitam la 4 randuri in card; textul complet apare in modal. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Modal testimonial (deschis la click pe un card).
   ============================================================ */
.testimonial-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background-color: rgba(15, 23, 42, 0.55);
}

    .testimonial-modal-overlay[hidden] {
        display: none;
    }

.testimonial-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px;
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

    .testimonial-modal[hidden] {
        display: none;
    }

.testimonial-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #F3F4F6;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
}

    .testimonial-modal__close:hover {
        background-color: #E5E7EB;
        color: var(--color-text-primary);
    }

.testimonial-modal__head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-right: 48px; /* loc pentru butonul de inchidere */
}

.testimonial-modal__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-modal__author {
    display: flex;
    flex-direction: column;
}

.testimonial-modal__name {
    font-size: 1.25rem; /* 20px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.testimonial-modal__role {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.testimonial-modal__stars {
    display: flex;
    gap: 0;
    color: #FACC15;
}

.testimonial-modal__stars svg {
    width: 20px;
    height: 26px;
    padding-block: 4px;
}

.testimonial-modal__quote {
    font-size: var(--font-size-lg);
    line-height: 30px;
    color: #374151;
}

/* Blocheaza scroll-ul paginii cat timp modalul e deschis. */
body.testimonial-modal-open {
    overflow: hidden;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 992px) {
    .testimonials {
        padding: var(--space-xl) var(--space-xl);
    }

    /* Pe ecrane mici titlul/subtitlul revin la mai multe randuri. */
    .testimonials__title,
    .testimonials__subtitle {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .testimonials {
        padding: var(--space-xl) 0;
    }

    /* Banda devine edge-to-edge; heading-ul primeste padding separat. */
    .testimonials__inner {
        padding-inline: 0;
    }

    .testimonials__heading {
        padding-inline: var(--space-md);
    }

    .testimonial-card {
        width: 300px;
        padding: var(--space-lg);
    }

    .testimonial-modal {
        padding: 28px;
    }
}