/* ============================================================
   ОТЕЛЬ «РОМАНТИК» — СТРАНИЦА «СПЕЦПРЕДЛОЖЕНИЯ» (полная пересборка)
   Повторяет структуру оригинала romantikarkhyz.ru/offers в фирменном
   стиле шаблона 2. Порядок блоков — строго по спеке:
   1) slider  → hero с фоновым фото
   2) textBlock «Инфраструктура»
   3) gallery (11 фото + лайтбокс)
   4) sliderSlider «Акции» (карусель карточек-акций)
   5) sliderSpo (карусель инфраструктуры с раскрытием descriptionMore)
   6) sliderSlider «Размещения» (карусель номеров)

   Токены и общие компоненты (.section, .container, .slider, .rail,
   .card, .gallery, .lightbox, .cta-band, .prose, .btn, .eyebrow, .h2,
   .lead, .reveal, боковой паттерн .has-pattern) берём из tokens.css /
   main.css — здесь только СВОИ блоки этой страницы.
   ============================================================ */

/* Мелкие отступы-хелперы (в main.css есть только mt-6/mt-7) */
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }

/* ============================================================
   1. ХЛЕБНЫЕ КРОШКИ (1-в-1 с rooms/spa)
   Разделитель — коралловая звезда (маска star.svg из tokens.css).
   ============================================================ */
.breadcrumbs { margin-bottom: var(--sp-5); }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs a { color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-out); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] { color: var(--fg); font-weight: var(--fw-medium); }
.breadcrumbs__sep {
  width: 0.62em;
  height: 0.62em;
  flex-shrink: 0;
  background-color: var(--accent);
  -webkit-mask-image: var(--star-src);
          mask-image: var(--star-src);
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: 0.85;
}

/* ============================================================
   2. ПЕРВЫЙ ЭКРАН — ФОНОВОЕ ФОТО (блок slider оригинала)
   Полэкрана: min-height clamp(400px,50vh,600px), БЕЗ фиксированной
   высоты. Фон-фото (page-hero__bg, object-fit:cover) + затемняющий
   градиент снизу, поверх — крошки, надзаголовок, крупный H1, лид.
   Два кадра из спеки крест-фейдят (hero-slider) — второй лежит
   слоем ниже и проявляется по классу is-active (см. скрипт внизу
   offers.html); без JS виден первый кадр.
   ============================================================ */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 70vh;
  padding-top: calc(var(--header-h) + var(--sp-7));
  padding-bottom: var(--sp-8);
  color: var(--fg);
}
@media (min-width: 1024px) {
  .page-hero { padding-top: calc(var(--header-h) + var(--sp-8)); padding-bottom: var(--sp-9); }
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-slow) var(--ease-out);
}
/* Второй кадр слайдера-героя (крест-фейд) */
.page-hero__bg--2 { opacity: 0; }
.page-hero.is-active .page-hero__bg--1 { opacity: 0; }
.page-hero.is-active .page-hero__bg--2 { opacity: 1; }
/* Затемнение — чтобы текст читался на любом кадре (контраст ≥ AA) */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(14, 31, 25, 0.88) 0%, rgba(14, 31, 25, 0.44) 48%, rgba(14, 31, 25, 0.24) 100%),
    linear-gradient(105deg, rgba(14, 31, 25, 0.55) 0%, transparent 62%);
}
.page-hero > .container { position: relative; z-index: 1; width: 100%; }
.page-hero__inner { max-width: 62ch; }
.page-hero .eyebrow { color: var(--accent); }
.page-hero__title {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(2.6rem, 1.35rem + 5.2vw, 5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.page-hero__lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--fg-muted);
  max-width: 54ch;
  text-wrap: pretty;
}
.page-hero__actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
/* Крошки внутри фото-героя — светлые */
.page-hero .breadcrumbs a,
.page-hero .breadcrumbs { color: var(--fg-muted); }
.page-hero .breadcrumbs [aria-current="page"] { color: var(--fg); }

/* ============================================================
   3. ИНФРАСТРУКТУРА (блок textBlock оригинала)
   Простой вводный блок: надзаголовок, H2, абзац по центру.
   ============================================================ */
.intro-block { text-align: center; }
.intro-block .section-head { margin-inline: auto; margin-bottom: 0; }
.intro-block .prose { max-width: 62ch; margin-inline: auto; margin-top: var(--sp-5); }

/* ============================================================
   4. КАРУСЕЛИ (общий каркас .slider/.rail/.card из main.css)
   Здесь — только надстройки под контент этой страницы. Движок
   [data-slider] (стрелки, счётчик, клавиатура) живёт в app.js.
   ============================================================ */

/* Карточка-акция: бейдж со скидкой, крупный заголовок, текст, кнопка.
   Базовые .card/.card__media/.card__badge/.card__body — из main.css. */
.offer-card .card__media { aspect-ratio: 3 / 4; }
.offer-card .card__title { font-size: var(--fs-h4); }
.offer-card__lead {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* ---------- Карточка инфраструктуры (sliderSpo) ----------
   description (список/текст) виден всегда, descriptionMore прячется в
   нативный <details> с триггером «Подробнее», внизу — CTA-кнопка. */
.spo-card .card__media { aspect-ratio: 4 / 3; }
.spo-card .card__body { gap: var(--sp-4); }
.spo-card .prose ul { margin-bottom: 0; }
.spo-more { margin-top: var(--sp-1); }
.spo-more__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease-out);
}
.spo-more__summary::-webkit-details-marker { display: none; }
.spo-more__summary:hover { color: var(--accent-hover); }
.spo-more__summary .icon {
  width: 18px; height: 18px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.spo-more[open] .spo-more__summary .icon { transform: rotate(180deg); }
.spo-more__body { margin-top: var(--sp-3); }
.spo-more__summary:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-focus);
}

/* ---------- Карточка номера (Размещения) ----------
   Плитка со спец-иконками (площадь/места). Иконка «площадь» — это
   area-*.svg из спеки (грузим как <img>), «места» — инлайновый svg. */
.room-card .card__media { aspect-ratio: 4 / 3; }
.room-card .card__specs { color: var(--fg-muted); }
.room-card__spec-ico {
  width: 16px; height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ============================================================
   5. НИЖНИЙ БЛОК-ПОДСКАЗКА (перед CTA)
   ============================================================ */
.offers-note {
  margin-top: var(--sp-7);
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--accent-soft-strong);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  align-items: center;
}
@media (min-width: 760px) {
  .offers-note { grid-template-columns: 1fr auto; gap: var(--sp-6); }
}
.offers-note__text { color: var(--fg-muted); max-width: 60ch; }
.offers-note__text strong { color: var(--fg); }

/* ============================================================
   6. prefers-reduced-motion — гасим крест-фейд героя
   (reveal и общие переходы уже гасятся в main.css).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .page-hero__bg { transition: none; }
}


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