/*
 * Graduate testimonials (sections/home-testimonials.php). Names, roles,
 * quotes and avatars are invented demo copy (CLAUDE.md registry), rendered
 * with the chrome the real quotes will use later.
 *
 * Written against the sections above it: centered 1.88vw heading from
 * .advantages / .audience, card is the same white shadow card as
 * .course-card (resting shadow, lift on hover), and the quote mark repeats
 * the round accent-tinted icon of the hero trust strip and the "what you
 * get" benefits.
 *
 * Cards past the first row are Bootstrap Collapse targets
 * (`.collapse.testimonials-collapse-item`); `.collapse:not(.show)` has
 * higher specificity than `.testimonial-card`'s own `display: flex` below,
 * so Bootstrap's hide/show wins without any extra override here, and its
 * height animation already respects `prefers-reduced-motion` on its own.
 *
 * The mobile breakpoint shows one card against the desktop row of three;
 * the two in between carry --mobile-extra and open with the same button,
 * via `is-expanded` on the grid (public/js/testimonials-collapse.js) -
 * these two are never Collapse targets themselves, since on desktop they
 * must stay visible regardless of collapse state.
 */

.testimonials {
    padding: 3vw 0 4.5vw;
}

.testimonials__title {
    font-size: 1.88vw;
    margin: 0 0 2.08vw;
}

.testimonials-grid {
    --bs-gutter-x: 1.67vw;
    --bs-gutter-y: 1.67vw;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.67vw;
    background: var(--color-surface);
}

.testimonial-card__mark {
    flex: 0 0 auto;
    width: 1.98vw;
    height: 1.98vw;
    padding: 0.42vw;
    margin: 0 0 1.04vw;
    border-radius: 50%;
    background: rgba(47, 111, 237, 0.1);
    color: var(--color-accent);
}

.testimonial-card__quote {
    color: var(--color-text-muted);
    margin: 0 0 1.46vw;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 0.83vw;
    margin-top: auto;
    padding-top: 1.04vw;
    border-top: 1px solid var(--color-border);
}

.testimonial-card__avatar {
    width: 3.13vw;
    height: 3.13vw;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-card__name {
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.testimonial-card__role {
    font-size: 0.78vw;
    color: var(--color-text-muted);
    margin: 0;
}

.testimonials__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.63vw;
    margin: 2.08vw auto 0;
    padding: 0.83vw 2.19vw;
    background: none;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    font: inherit;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.testimonials__more:hover,
.testimonials__more:focus-visible {
    background: var(--color-primary);
    color: #fff;
}

.testimonials__more-icon {
    width: 0.63vw;
    transition: transform 0.2s ease;
}

/*
 * Bootstrap's Collapse toggles `.collapsed` on the button itself (present
 * while the extra cards are hidden), not an `is-open` class - the icon and
 * label pair below both key off its absence/presence instead.
 */
.testimonials__more:not(.collapsed) .testimonials__more-icon {
    transform: rotate(180deg);
}

.testimonials__more.collapsed .testimonials__more-label--expanded,
.testimonials__more:not(.collapsed) .testimonials__more-label--collapsed {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .testimonials__more-icon {
        transition: none;
    }
}

@media only screen and (max-width: 767.98px) {
    .testimonials__title {
        font-size: 6.4vw;
        margin: 0 0 5.33vw;
    }

    .testimonials {
        padding: 6vw 0 9vw;
    }

    .testimonials-grid {
        --bs-gutter-x: 5.33vw;
        --bs-gutter-y: 5.33vw;
    }

    /* One card on mobile against the desktop row of three - the rest of
       that row opens with the same "show more" button
       (public/js/testimonials-collapse.js). */
    .testimonials-grid:not(.is-expanded) .testimonial-card--mobile-extra {
        display: none;
    }

    .testimonial-card {
        padding: 5.33vw;
    }

    .testimonial-card__mark {
        width: 10.13vw;
        height: 10.13vw;
        padding: 2.13vw;
        margin: 0 0 4vw;
    }

    .testimonial-card__quote {
        margin: 0 0 5.33vw;
    }

    .testimonial-card__author {
        gap: 4vw;
        padding-top: 4vw;
    }

    .testimonial-card__avatar {
        width: 13.33vw;
        height: 13.33vw;
    }

    .testimonial-card__role {
        font-size: 3.2vw;
    }

    .testimonials__more {
        gap: 2.13vw;
        margin: 6.4vw auto 0;
        padding: 3.2vw 6.4vw;
        font-size: 3.73vw;
    }

    .testimonials__more-icon {
        width: 2.67vw;
    }
}