@charset "utf-8";
/* Общая карусель отзывов с фото пар — php_fns/review_carousel.php + js/review-carousel.js.
   Не в бандле: страница подключает через review_carousel_head().
   Цвета — палитра сайта; страница может переопределить переменные на .rv.

   Две раскладки:
   - шире 1000px — крупная цитата с фото + маленькие рядом, клик поднимает маленькую
     на место крупной (порядок меняет скрипт через CSS order);
   - до 1000px (телефоны, планшеты — владелец, 2026-09-16) — горизонтальная лента:
     текущий отзыв по центру, по краям видны обрезки соседних, листается свайпом.
     Все карточки коричневые, у каждой своё фото. */

.rv { --rv-brown: #4B1E00; --rv-ink: #2b2016; --rv-muted: #8a7157; --rv-line: rgba(75,30,0,.14); --rv-cream: #e8cfa8; }
.rv *, .rv *::before, .rv *::after { box-sizing: border-box; }

.rv-grid { position: relative; }
.rv-quote { margin: 0; background: #fff; border: 1px solid var(--rv-line); padding: 36px 36px 30px; display: flex; flex-direction: column; }
.rv-quote__body { display: flex; flex-direction: column; flex: 1; }
.rv-quote blockquote { margin: 0; font: 400 16px/1.6 'PT Serif Caption', serif; color: var(--rv-ink); }
.rv-quote cite { margin-top: auto; padding-top: 22px; font: 700 12px/1.3 'Roboto', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--rv-muted); font-style: normal; }
.rv-quote__pic { overflow: hidden; background: #1c130b; }
.rv-quote__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-quote:focus-visible { outline: 2px solid var(--rv-brown); outline-offset: 3px; }

/* ---------- десктоп: крупная + маленькие ---------- */
@media (min-width: 1001px) {
  /* высоту сетки закрепляет скрипт (самая высокая из раскладок); лишнее место уходит вниз */
  .rv-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-content: start; }
  .rv-quote--big { background: var(--rv-brown); border-color: var(--rv-brown); grid-row: span 2; padding: 48px; }
  .rv-quote--big::before { content: "\201C"; font: 400 110px/.6 'PT Serif Caption', serif; color: var(--rv-cream); height: 50px; }
  .rv-quote--big blockquote { font-size: 22px; line-height: 1.5; color: #fff; }
  .rv-quote--big cite { color: var(--rv-cream); }
  .rv-quote--photo { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: center; }
  .rv-quote--photo::before { display: none; }
  .rv-quote--photo .rv-quote__pic { aspect-ratio: 3 / 4; }
  .rv-quote--photo blockquote::before { content: "\201C"; font: 400 64px/.6 'PT Serif Caption', serif; color: var(--rv-cream); display: block; margin-bottom: 14px; }
  .rv-quote:not(.rv-quote--big) { cursor: pointer; }
  .rv-quote:not(.rv-quote--big):hover { border-color: rgba(75,30,0,.35); }
  .rv-quote:not(.rv-quote--big) .rv-quote__pic { display: none; }
}

/* ---------- телефон и планшет: горизонтальная лента ---------- */
@media (max-width: 1000px) {
  /* --rv-bleed: страница задаёт свои боковые поля — лента выходит до краёв экрана,
     и обрезки соседних отзывов видны у самого края, а не прячутся за полями */
  .rv-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 0 calc(var(--rv-bleed, 0px) * -1); }
  .rv-grid::-webkit-scrollbar { display: none; }
  /* пустые поля по краям — чтобы первый и последний отзыв тоже вставали по центру */
  .rv-grid::before, .rv-grid::after { content: ""; flex: 0 0 calc(10% - 12px); }
  /* зацикленная лента (копии по краям ставит скрипт) — пустые поля не нужны:
     у первого отзыва слева край последнего */
  .rv-grid--loop::before, .rv-grid--loop::after { display: none; }
  /* все карточки ленты коричневые. Пробовали «текущая коричневая, соседние белые»
     (как на десктопе) — владелец вернул все коричневые, 2026-09-16. Фото видно у
     всех: иначе при листании карточки меняли бы высоту. */
  .rv-quote { flex: 0 0 80%; scroll-snap-align: center; scroll-snap-stop: always; background: var(--rv-brown); border-color: var(--rv-brown); padding: 26px 22px 24px; gap: 18px; order: 0 !important; }
  .rv-quote__pic { aspect-ratio: 4 / 3; margin: -26px -22px 0; }
  .rv-quote blockquote { color: #fff; font-size: 17px; line-height: 1.55; }
  .rv-quote blockquote::before { content: "\201C"; font: 400 56px/.6 'PT Serif Caption', serif; color: var(--rv-cream); display: block; margin-bottom: 12px; }
  .rv-quote cite { color: var(--rv-cream); padding-top: 18px; }
}
@media (min-width: 621px) and (max-width: 1000px) {
  .rv-quote { flex-basis: 66%; }
  .rv-grid::before, .rv-grid::after { flex-basis: calc(17% - 12px); }
}

/* ---------- стрелки и точки ---------- */
.rv-nav { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.rv-nav[hidden] { display: none !important; }
.rv-nav__btn { width: 40px; height: 40px; border: 1px solid var(--rv-line); background: #fff; color: var(--rv-brown); font: 400 24px/1 'Roboto', sans-serif; cursor: pointer; border-radius: 0; }
.rv-nav__btn:hover { background: var(--rv-brown); color: #fff; border-color: var(--rv-brown); }
.rv-nav__btn:focus-visible, .rv-dot:focus-visible { outline: 2px solid var(--rv-brown); outline-offset: 2px; }
.rv-dots { display: flex; gap: 8px; }
.rv-dot { width: 9px; height: 9px; padding: 0; border: 1px solid var(--rv-brown); background: transparent; cursor: pointer; border-radius: 0; }
.rv-dot.is-on { background: var(--rv-brown); }
@media (max-width: 1000px) { .rv-nav { justify-content: center; } }

@media (prefers-reduced-motion: reduce) {
  .rv * { transition: none !important; }
  .rv-grid { scroll-behavior: auto; }
}