/* =========================================================
   Reviews (Flex-based, scrollable list with exactly 3 visible на десктопе)
   + Clickable + Active state
   ========================================================= */

.section__reviews {
    /*background: var(--gray-50);*/
    background: rgba(249, 249, 249, 0.4) !important;
    --review-card-h: 128px;
    --review-gap: 20px;
    padding: 20px 0 20px 0;
}

.reviews__grid {
    display: flex;
    flex-direction: column;  /* мобайл: две строки (верх/низ) */
    align-items: stretch;
    gap: 30px;
}

/* СТЕК КАРТОЧЕК (левая колонка на десктопе / верхняя полоса на мобайле) */
.testimonial--stack {
    display: flex;
    flex-direction: column;
    gap: var(--review-gap);
    max-height: calc(3 * var(--review-card-h) + 2 * var(--review-gap)); /* десктоп: видно три карточки по вертикали */
    overflow-y: auto;
    padding-right: 8px;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;

    /* кастом скроллбар */
    scrollbar-width: thin;
    scrollbar-color: var(--green-200) rgba(0,0,0,.08);
}
.testimonial--stack::-webkit-scrollbar { width: 8px; height: 8px; }
.testimonial--stack::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: 8px; }
.testimonial--stack::-webkit-scrollbar-thumb { background: var(--green-200); border-radius: 8px; }

/* Карточка */
.testimonial {
    border-radius: 8px;
    background: var(--green-900);
    color: #fff;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    min-height: var(--review-card-h);
    scroll-snap-align: start;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
}
.testimonial:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.testimonial:focus-visible { outline: 2px solid var(--green-900); outline-offset: 2px; }

/* Светлый вид */
.testimonial--light { background: #fff; color: #506349; }

/* Активная карточка */
.testimonial.is-active { background: var(--green-900) !important; color: #fff !important; }
.testimonial.is-active .testimonial__loc { color: #D5E4D0 !important; }

/* Внутренности */
.testimonial__line { border-top: 1px solid #000000; }
.testimonial__line-active { border-top: 1px solid #fff; }
.testimonial__meta { margin-top: auto; }
.testimonial__job { font-size: 18px; }
.testimonial__loc { font: 500 12px/1 "Work Sans", system-ui, sans-serif; color: #D5E4D0; }
.testimonial--light .testimonial__loc { color: #506349; }

/* заголовки ограничим по строкам */
.testimonial__title,
.testimonial__title-active {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
}

/* ПРАВАЯ КОЛОНКА (на десктопе) / НИЖНИЙ БЛОК (на мобайле) */
.testimonial__review {
    border-left: 1px solid #000000;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    transition: opacity .22s ease;  /* для плавной смены текста */
}
.testimonial__review.is-fade { opacity: 0; }

.testimonial__quote { font-size: 35px; letter-spacing: -0.01em; }
.testimonial__person { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.avatar { width: 100px; height: 100x; border-radius: 12px; object-fit: cover; }

.testimonial__person{
    font-size: 20px;
}
@media (min-width: 960px) {
    .reviews__grid {
        flex-direction: row;
        align-items: flex-start;
        gap: 30px;
    }
    .reviews__grid > :first-child { flex: 0 0 310px; }
    .reviews__grid > :nth-child(2) { flex: 1 1 auto; }

    .testimonial__review {
        align-self: stretch;
        border-left: 1px solid #000;
        padding-left: 30px;
        border-top: none;
        padding-top: 0;
    }
}

@media (max-width: 959px) {
    .testimonial--stack {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding-right: 0;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        scroll-padding: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .testimonial {
        flex: 0 0 clamp(100px, 35vw, 140px);
        scroll-snap-align: center;
        padding: 16px 18px;
    }

    .testimonial__review {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #000;
        padding-top: 16px;
    }
    .testimonial__quote { font-size: 25px; letter-spacing: -0.01em; }
    .testimonial__person { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
    .avatar { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .testimonial__review { transition: none; }
}