/* =====================================================
   ОТЗЫВЫ (assets/modules/reviews/reviews.php)
   Архитектура — по образцу модуля отзывов cabinet legal: текст в
   карточке обрезается по высоте, полный текст — в модалке по клику;
   сводка рейтинга — боксированная плашка, а не голый текст; сетка
   auto-fill вместо фиксированных брейкпоинтов. Только в собственных
   цветах сайта — тёплый тёмный + янтарный акцент.
   ===================================================== */

.reviews {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.25rem 6% 5rem;
}

/* Один компактный блок вместо отдельной шапки: слева — сводка рейтинга,
   справа — кнопка отправки отзыва. btn--secondary — приглушённая
   (прозрачный фон, тонкая рамка), а не яркий градиент btn--primary,
   которым выделяют куда более значимые действия по сайту. */
.reviews__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.1rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
}
.reviews__summary--empty {
    justify-content: space-between;
}
.reviews__summary-info {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.reviews__summary-score {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.6rem;
    color: #fff;
}
.reviews__summary-stars {
    display: flex;
    gap: 0.15rem;
    font-size: 0.9rem;
    color: var(--color-accent);
}
.reviews__summary-stars .is-empty { color: rgba(255, 255, 255, 0.15); }
.reviews__summary-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.reviews__summary-btn {
    flex-shrink: 0;
    padding: 0.65rem 1.5rem;
    font-size: 10px;
}

/* --- Сетка: общий .card-grid (components/styles.css), но именно на этой
   странице — 4 колонки на десктопе, а не 5: текста в карточке (имя,
   город, отзыв) заметно больше, чем в карточке галереи/выпуска, и при
   пяти в ряд карточки становились слишком узкими и переставали читаться
   нормально. --- */
#reviewsGrid.card-grid {
    grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
    #reviewsGrid.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    #reviewsGrid.card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Карточка — по образцу .video-card (episodes.css): обычная тонкая
   рамка без цветных полосок, спокойная типографика (белым — только имя,
   остальное приглушено), лёгкий подъём при наведении. Город — на самой
   карточке, не только в модалке деталей. --- */
.review-card {
    display: flex;
    flex-direction: column;
    padding: 1.35rem;
    border-radius: 1.25rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    cursor: pointer;
    animation: fade-in-up 0.4s ease both;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
/* display:flex выше по специфичности равен встроенному браузерному
   [hidden]{display:none}, и как класс, идущий позже в каскаде,
   перебивает его — атрибут hidden при этом продолжает физически стоять
   на элементе, но визуально ничего не скрывается. Та же ловушка уже
   встречалась у review-card__more и review-card__town. */
.review-card[hidden] {
    display: none;
}
.review-card:hover,
.review-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(217, 119, 6, 0.5);
    box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6);
    outline: none;
}

.review-card__stars {
    display: flex;
    gap: 0.15rem;
    font-size: 0.7rem;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}
.review-card__stars .is-empty { color: rgba(255, 255, 255, 0.12); }

.review-card__text {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0 0 0.5rem;

    /* Обрезаем длинный текст многоточием после 5 строк — полный текст
       остаётся в data-атрибуте карточки, читается в модалке по клику.
       Раньше здесь ещё был flex:1 1 auto — сочетание с
       display:-webkit-box (нужен для самого line-clamp) ненадёжно
       считает scrollHeight/clientHeight в JS (см. ниже), из-за чего
       "Читать полностью" срабатывал на всех карточках подряд, даже там,
       где текст и так весь помещался. Подвал теперь прижимается к низу
       через margin-top:auto на самом подвале, а не растяжением текста. */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-card__more {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    transition: color var(--transition-base);
}
/* Без этого явного правила display:inline-block выше перебивает
   встроенное браузерное [hidden]{display:none} — специфичность у них
   одинаковая, а класс в каскаде идёт позже и выигрывает. Атрибут hidden
   при этом продолжает физически стоять на элементе (и JS его видит
   верно), но визуально ничего не скрывается — из-за этого "Читать
   полностью" показывался на всех карточках подряд, даже когда JS уже
   правильно определил, что скрывать его не нужно. */
.review-card__more[hidden] {
    display: none;
}
.review-card:hover .review-card__more { color: var(--color-accent); }

.review-card__footer {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.review-card__who {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.review-card__name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
}
.review-card__town {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-style: italic;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.review-card__town[hidden] {
    display: none;
}
.review-card__date {
    font-style: italic;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    opacity: 0.7;
}

.reviews__actions {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* =====================================================
   МОДАЛКА С ПОЛНЫМ ТЕКСТОМ ОТЗЫВА
   Общая на все карточки — JS переносит в неё данные кликнутой карточки
   (см. reviews.php). Шире обычных модалок сайта — читается как статья.
   ===================================================== */

/* =====================================================
   МОДАЛКА С ПОЛНЫМ ТЕКСТОМ ОТЗЫВА
   Структура — те же классы review-card__*, что и у самой карточки (см.
   разметку в reviews.php): это увеличенная версия карточки, а не
   отдельный дизайн. Из отличий — только снятие line-clamp у текста
   (полный текст должен быть виден целиком) и своя ширина/отступы.
   ===================================================== */

.modal-card--review-detail {
    max-width: 34rem;
}
/* У этой модалки нет .modal-card__header (только плавающий крестик) —
   без него общий верхний отступ тела мал, контент упирается в край
   рядом с кнопкой закрытия. */
.modal-card--review-detail .modal-card__body {
    padding: 2.75rem 1.75rem 1.75rem;
}

.review-card__text--full {
    /* Снимаем ограничение по высоте — тут должен быть виден весь текст
       целиком, а не первые 5 строк, как в самой карточке. */
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    font-size: 0.9rem;
    line-height: 1.75;
    /* Текст сюда попадает через JS (textContent с настоящими \n), а не
       через nl2br/<br>, как в самой карточке — без pre-line переносы
       строк потеряются. */
    white-space: pre-line;
}