/* ============================================================
   ОТЕЛЬ «РОМАНТИК» — СТРАНИЦА «ОТЗЫВЫ» (полная пересборка)
   Повторяет структуру оригинала romantikarkhyz.ru/reviews
   в фирменном стиле шаблона 2. Только стили этой страницы —
   токены и компоненты берутся из tokens.css / main.css.
   Блоки оригинала по порядку:
     1) slider       → первый экран с фоновым фото (.rv-hero)
     2) zeroBlock    → интро «текст + фото» в две колонки (.rv-intro)
     3) testimonial  → «оцените отдых» + отзывы гостей (.rv-rate)
     4) gallery      → фотогалерея с лайтбоксом (.rv-photos, .gallery)
   ============================================================ */

/* ============================================================
   1. ПЕРВЫЙ ЭКРАН — ФОНОВОЕ ФОТО (блок slider)
   ============================================================ */
.rv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--sp-7));
  padding-bottom: var(--sp-8);
  color: #fff;
  background: var(--pine-900);
}
@media (min-width: 1024px) {
  .rv-hero { padding-bottom: var(--sp-9); }
}
.rv-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Затемнение: сверху — чтобы читались крошки, снизу — под заголовок/текст */
.rv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 31, 25, 0.62) 0%, rgba(14, 31, 25, 0.12) 26%, rgba(14, 31, 25, 0.20) 52%, rgba(14, 31, 25, 0.82) 100%);
}
.rv-hero > .container { position: relative; width: 100%; }
.rv-hero__inner { max-width: 60ch; }
.rv-hero .eyebrow { color: var(--coral-500); }
.rv-hero__title {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(2.4rem, 1.2rem + 5.2vw, 5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: #fff;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.rv-hero__lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: rgba(247, 243, 237, 0.9);
  max-width: 52ch;
  text-wrap: pretty;
}
.rv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* Хлебные крошки поверх фото — светлые */
.rv-hero .breadcrumbs { margin-bottom: var(--sp-5); }
.rv-hero .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: rgba(247, 243, 237, 0.78);
}
.rv-hero .breadcrumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.rv-hero .breadcrumbs a { color: rgba(247, 243, 237, 0.78); transition: color var(--dur-fast) var(--ease-out); }
.rv-hero .breadcrumbs a:hover { color: var(--coral-500); }
.rv-hero .breadcrumbs [aria-current="page"] { color: #fff; font-weight: var(--fw-medium); }
.rv-hero .breadcrumbs__sep {
  width: 0.62em;
  height: 0.62em;
  flex-shrink: 0;
  background-color: var(--coral-500);
  -webkit-mask: var(--star-src) center / contain no-repeat;
          mask: var(--star-src) center / contain no-repeat;
  opacity: 0.85;
}

/* ============================================================
   2. ИНТРО «ТЕКСТ + ФОТО» (блок zeroBlock)
   ============================================================ */
.rv-intro { background: var(--bg); }
.rv-intro__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 900px) {
  .rv-intro__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); }
}
.rv-intro__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--fg);
  text-wrap: pretty;
}
.rv-intro__note { margin-top: var(--sp-4); color: var(--fg-muted); }
.rv-intro__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  aspect-ratio: 4 / 3;
  background: var(--bg-muted);
}
.rv-intro__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   3. «ОЦЕНИТЕ ОТДЫХ» + ОТЗЫВЫ ГОСТЕЙ (блок testimonial)
   ============================================================ */
.rv-rate { background: var(--bg-soft); }
.rv-rate__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 900px) {
  .rv-rate__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
.rv-rate__text .h2 { margin-top: var(--sp-1); }
.rv-rate__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--fg);
  text-wrap: pretty;
}
.rv-rate__note { margin-top: var(--sp-3); color: var(--fg-muted); }
.rv-rate__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.rv-rate__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  aspect-ratio: 3 / 2;
  background: var(--bg-muted);
}
.rv-rate__media img { width: 100%; height: 100%; object-fit: cover; }

/* Скриншоты отзывов гостей */
.rv-frames { margin-top: var(--sp-8); }
.rv-frames__head { margin-bottom: var(--sp-5); }
.rv-frames__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--fg);
}
.rv-frames__sub { margin-top: var(--sp-2); color: var(--fg-muted); font-size: var(--fs-sm); }
.rv-frames__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 640px)  { .rv-frames__grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }

/* Скриншот отзыва = стандартная плитка галереи (.gallery__item),
   переопределяем только пропорцию под вертикальный кадр и кадрирование
   от верхнего края, чтобы не срезать начало текста отзыва. */
.rv-frame { aspect-ratio: 3 / 4; border: 1px solid var(--line); }
.rv-frame img { object-position: top center; }

/* ============================================================
   4. ФОТОГАЛЕРЕЯ (блок gallery) — сетка из main.css (.gallery)
   ============================================================ */
.rv-photos { background: var(--bg); }

/* ============================================================
   5. МОДАЛЬНОЕ ОКНО ВИДЖЕТА ОЦЕНКИ (foquz)
   Повторяет поведение оригинала: клик по .hatimaki-widget
   открывает форму оценки во всплывающем окне (iframe).
   ============================================================ */
.foquz-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(14, 31, 25, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.foquz-modal.is-open { opacity: 1; visibility: visible; }
.foquz-modal__frame {
  width: min(920px, 92vw);
  height: min(88vh, 900px);
  border: 0;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.foquz-modal__close {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 1.5rem);
  right: clamp(0.75rem, 2.5vw, 1.5rem);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.foquz-modal__close:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.foquz-modal__close svg { width: 22px; height: 22px; }

/* ============================================================
   6. Активный пункт мобильного меню (как в offers.css/rooms.css)
   ============================================================ */
.drawer__link[aria-current="page"] { color: var(--coral-500); }

/* ============================================================
   7. Уважение к prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .foquz-modal { transition: none; }
}


/* ONE-LINE-HERO: заголовок в одну строку + hero 70vh */
.rv-hero__title{white-space:nowrap;font-size:clamp(1.55rem,6.4vw,4rem);line-height:1.06;max-width:none}
.rv-hero__title span{display:inline;white-space:nowrap}