/* ==========================================================
   СЕКЦИЯ ОТЗЫВОВ (#reviews)
   Фон, заголовок, общие отступы
   ========================================================== */

#reviews {
  background: var(--paper-200, #D9B37A);
}




#reviews .reviews-title {
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
  text-align: center !important;
  margin: 0 0 1.5rem 0;   /* от заголовка до карусели */
}

/* ==========================================================
   КАРУСЕЛЬ ОТЗЫВОВ: viewport, лента, карточки
   ========================================================== */

/* Обёртка с каруселью + место под стрелки снизу */
#reviews .reviews-viewport {
  position: relative;
  padding-bottom: 4rem;   /* пространство под стрелки */
  margin-top: 1.5rem;     /* отступ между заголовком и карточками */
}

/* Маска, обрезает лишнее при прокрутке */
#reviews .reviews-mask {
  overflow: hidden;
}

/* Лента с отзывами (едет по оси X) */
#reviews .reviews-track {
  display: flex;
  gap: 1rem;
  transition: transform .35s ease;
  align-items: stretch;           /* карточки одной высоты */
}

/* Одна карточка отзыва */
#reviews .review-card {
  flex: 0 0 calc((100% - 2rem) / 3);   /* 3 карточки в ряд */
  background: var(--paper-100, #E6C78F);
  border: 1px solid var(--paper-300, #C79E62);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;      /* кнопка прижата к низу */
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  min-height: 260px;
}

/* ==========================================================
   Аватар и текст превью
   ========================================================== */

/* Кружок с инициалами */
#reviews .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F3D2A2;
  color: var(--terracotta, #C65A2E);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Краткий текст отзыва (обрезаем по 5 строк) */
#reviews .review-text {
  color: var(--ink, #1F1E16);
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================
   Фирменная кнопка "Смотреть полный отзыв"
   ========================================================== */

.btn-terracotta {
  background: var(--terracotta, #C65A2E);
  color: #fff;
  border: 1px solid var(--terracotta-hover, #A64522);
  border-radius: 9999px;
  padding: .55rem 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: all .15s ease;
  text-align: center;
}

.btn-terracotta:hover {
  background: var(--terracotta-hover, #A64522);
  color: #fff;
}

/* ==========================================================
   Стрелки карусели: снизу по центру, продолговатые
   ========================================================== */

#reviews .reviews-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  pointer-events: none;      /* кликабельны только кнопки */
}

/* Кнопка-стрелка */
#reviews .reviews-arrow {
  pointer-events: auto;
  min-width: 75px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9999px;     /* форма "пилюля" */
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--paper-100, #E6C78F);
  border: 1px solid var(--paper-300, #C79E62);
  color: var(--ink, #1F1E16);
  font-weight: 700;

  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  transition: all .15s ease;
  font-size: 1rem;
}


/* Сам символ стрелки (если нужен отдельно) */
#reviews .reviews-arrow span {
  font-size: 1.1rem;
  line-height: 1;
}

/* Hover по стрелке */
#reviews .reviews-arrow:hover {
  background: var(--terracotta, #C65A2E);
  border-color: var(--terracotta-hover, #A64522);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Неактивное состояние (если будем использовать) */
#reviews .reviews-arrow:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ==========================================================
   Адаптив: количество карточек в ряд
   ========================================================== */

@media (max-width: 991.98px) {
  #reviews .review-card {
    flex: 0 0 calc((100% - 1rem) / 2);  /* 2 карточки */
  }
}

@media (max-width: 575.98px) {
  #reviews .review-card {
    flex: 0 0 100%;                     /* 1 карточка */
  }
}

/* ==========================================================
   Модалка с отзывом (#reviewModal)
   ========================================================== */

/* Заголовок модалки */
#reviewModal .modal-title {
  color: var(--ink);
  font-weight: 700;
}

/* Шапка модалки */
#reviewModal .modal-header {
  background: var(--paper-200);
  border-bottom: 1px solid var(--paper-300);
}

/* Тело модалки */
#reviewModal .modal-body {
  background: var(--paper-100);
  color: var(--ink);
}

/* Строка с именем/городом/датой */
#reviewModal #modalReviewMeta {
  color: var(--ink-60);
}

/* Обёртка модалки с авто-подбором ширины под видео */
#reviewModal .modal-dialog.modal-autosize {
  margin: 1.25rem auto;
  width: var(--modal-w, auto);
  max-width: min(98vw, 1100px);
}

/* Блок под iframe с видео */
#reviewModal .video-box {
  width: 100%;
  aspect-ratio: var(--video-ratio, 16/9);
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  max-height: 60vh;
}

/* Сам iframe */
#reviewModal .video-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================
   Квадратное превью видео в карточке (мини-плеер)
   НЕ ВЛИЯЕТ НА ДРУГИЕ БЛОКИ (жёсткий скоуп по #reviews)
   ========================================================== */

/* Контейнер под превью: квадрат, немного меньше ширины карточки */
#reviews .review-card .review-video-preview {
  width: 85%;                  /* уменьшенный размер превью */
  margin: 0 auto 1rem;         /* центрируем внутри карточки */
  aspect-ratio: 1 / 1;         /* квадрат */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);

  /* Центровка play-кнопки */
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}

/* Тёмная подложка + картинка-превью */
#reviews .review-video-preview .rvp-thumb {
  position: absolute;
  inset: 0;

  /* фон по умолчанию, если превью не загрузится */
  background-color: #000;

  /* реальная превьюшка */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 1;
}

/* Кнопка Play (круг), треугольник рисуем псевдо-элементом */
#reviews .review-video-preview .rvp-play {
  pointer-events: none;        /* клики идут по .review-video-preview */
  z-index: 2;
  background: #fff;
  border-radius: 50%;
  width: 65px;
  height: 65px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 3px solid var(--paper-300);
  transition: .2s ease;
  position: relative;
}

/* Сам треугольник по центру круга */
#reviews .review-video-preview .rvp-play::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 18px solid var(--terracotta); /* цвет стрелки */
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%); /* чуть смещаем, чтобы визуально центрировать */
}

/* Небольшое увеличение при наведении */
#reviews .review-video-preview:hover .rvp-play {
  transform: scale(1.08);
}







/* Кнопка Play в большой модалке */
#reviewModal .video-overlay-play{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--paper-300, #C79E62);
  background: #fff;
  color: var(--terracotta, #C65A2E);
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}

#reviewModal .video-overlay-play:hover{
  transform: scale(1.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

#reviewModal .video-overlay-play:focus{
  outline: none;
}