/* ===== Reviews Block (отзывы клиентов) ===== */

.reviews{
    padding: var(--spacing-24) var(--spacing-20);
    background: var(--color-neutral-0)
}
@media (min-width: 768px) and (max-width: 1023px){.reviews{
        padding: var(--spacing-20) var(--spacing-10)
    }}
@media (max-width: 767px){.reviews{
        padding: var(--spacing-15) var(--spacing-4)
    }}
.reviews__inner{
    max-width: var(--container-large);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12)
}
@media (max-width: 767px){.reviews__inner{
        gap: var(--spacing-8)
    }}

/* --- Шапка: заголовок слева, кнопка справа --- */
.reviews__head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-6)
}
@media (max-width: 767px){.reviews__head{
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-5)
    }}
.reviews__heading{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    max-width: 760px
}
/* Перебиваем глобальные стили h1/h2 сайта */
.reviews__title{
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-xl);
    color: var(--color-brand-850);
    text-align: left;
    padding: 0;
    margin: 0
}
@media (max-width: 767px){.reviews__title{
        font-size: var(--font-size-l);
        line-height: 40px
    }}
.reviews__subtitle{
    font-family: var(--font-base);
    font-size: var(--font-size-m);
    line-height: 28px;
    color: var(--color-neutral-700);
    margin: 0
}
@media (max-width: 767px){.reviews__subtitle{
        font-size: var(--font-size-s);
        line-height: var(--line-height-s)
    }}
.reviews__btn{
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--spacing-3);
    padding: 1rem 2rem;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-neutral-0);
    box-shadow: var(--shadow-light);
    font-family: var(--font-base);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-semi);
    line-height: 24px;
    color: var(--color-brand-800);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)
}
.reviews__btn:hover{
    background: var(--color-brand-50);
    color: var(--color-brand-800);
    text-decoration: none;
    box-shadow: var(--shadow-brand);
    transform: translateY(-1px)
}
.reviews__btn svg{
    color: var(--color-brand-500)
}
@media (max-width: 767px){.reviews__btn{
        width: 100%;
        justify-content: center
    }}

/* --- Карточки --- */
.reviews__list{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6)
}
.review-card{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: var(--spacing-10);
    padding: var(--spacing-10) var(--spacing-12);
    border-radius: var(--radius-2xl);
    background: var(--color-neutral-0);
    border: var(--border-s) solid var(--color-transparent-brand-10);
    box-shadow: var(--shadow-light)
}
.review-card[hidden]{
    display: none
}
.review-card--single{
    grid-template-columns: minmax(0, 1fr)
}
@media (max-width: 1023px){.review-card{
        padding: var(--spacing-8);
        gap: var(--spacing-6)
    }}
@media (max-width: 767px){.review-card{
        grid-template-columns: minmax(0, 1fr);
        padding: var(--spacing-6);
        gap: var(--spacing-5);
        border-radius: var(--radius-xl)
    }}
.review-card__main{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
    min-width: 0
}
.review-card__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3) var(--spacing-6)
}
.review-card__stars{
    display: inline-flex;
    gap: 2px
}
.review-card__star{
    fill: var(--color-brand-100)
}
.review-card__star.is-on{
    fill: var(--color-brand-500)
}
.review-card__date{
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    line-height: 20px;
    color: var(--color-neutral-500)
}
.review-card__title{
    font-family: var(--font-heading);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    line-height: 26px;
    color: var(--color-brand-850);
    text-align: left;
    padding: 0;
    margin: 0
}
.review-card__text{
    font-family: var(--font-base);
    font-size: var(--font-size-s);
    line-height: var(--line-height-s);
    color: var(--color-neutral-700)
}
/* Длинный отзыв свернут до четырех строк, reviews.js показывает кнопку «Читать полностью» */
.review-card__text.is-clamped{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}
.review-card__toggle{
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    color: var(--color-brand-600);
    cursor: pointer
}
.review-card__toggle:hover{
    color: var(--color-brand-800)
}
.review-card__author{
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    line-height: 20px;
    color: var(--color-brand-850)
}
.review-card__aside{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-left: var(--spacing-8);
    border-left: var(--border-s) solid var(--color-transparent-brand-10)
}
@media (max-width: 767px){.review-card__aside{
        padding: var(--spacing-4) 0 0;
        border-left: 0;
        border-top: var(--border-s) solid var(--color-transparent-brand-10)
    }}
.review-card__aside-label{
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    line-height: 20px;
    color: var(--color-neutral-500)
}
.review-card__aside-value{
    font-family: var(--font-heading);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-semi);
    line-height: 26px;
    color: var(--color-brand-600)
}

.reviews__more{
    align-self: center;
    padding: var(--spacing-3) var(--spacing-8);
    border: var(--border-s) solid var(--color-transparent-brand-30);
    border-radius: var(--radius-full);
    background: var(--color-neutral-0);
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    color: var(--color-brand-800);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast)
}
.reviews__more:hover{
    background: var(--color-brand-50);
    border-color: var(--color-brand-500)
}