/* Блок отзывов на обычной странице: вид один на все четыре оформления.

   🔴 Как и у галереи, здесь только раскладка, а цвета и скругления берутся
   из переменных темы: --muted и --line есть у всех шести палитр,
   а --review-radius тема объявляет у себя из своего же скругления.
   Хардкода цвета в этом файле нет ни одного.

   Заголовок блока и ссылка «Все отзывы» остаются на классах темы: у каждой
   свой язык заголовков, и сводить их к общему значило бы потерять оформление.

   🔴 Пустого блока не бывает: список приходит пустым, и шаблон не рисует
   ни заголовка, ни полосы (site/content.py, правило одно с разделами). */

.reviews-teaser__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* min-width: 0 обязателен: без него длинное слово в отзыве растягивает
   колонку и уносит страницу в горизонтальную прокрутку */
.review-teaser { min-width: 0; }

/* Фотография клиента необязательна и стоит ПОСЛЕ текста, а не до него:
   иначе отзыв со снимком опускает своё имя ниже соседних, и три карточки
   перестают читаться как один ряд. Рамка постоянная — снимки приносят
   и вертикальные, и горизонтальные, а блок не должен от этого прыгать */
.review-teaser__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-top: 16px;
  border-radius: var(--review-radius, 0);
  background: var(--line);
}

.review-teaser > p { margin-top: 8px; overflow-wrap: anywhere; }
.review-teaser__meta { color: var(--muted); }

@media (max-width: 1080px) {
  .reviews-teaser__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Третий отзыв на две колонки не влезает ровно — прячем его, а не оставляем
     половину строки: людям видно два, и это законченная картина */
  .review-teaser:nth-child(3) { display: none; }
}

@media (max-width: 720px) {
  .reviews-teaser__list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .review-teaser:nth-child(3) { display: block; }
}