/* ════════════════════════════════════════════════════════
   ЕДИНЫЕ ГРАНИЦЫ КОНТЕНТА (content rail)
   Подключается последним — перекрывает поля контейнеров,
   заданные в <style> на страницах.

   Стандарт взят из блока «Процесс работы» (#howwework):
   боковые поля clamp(24px, 5vw, 100px), ширина не ограничена.
   Любая правка границ делается здесь, в одном месте.
   ════════════════════════════════════════════════════════ */

:root {
  --rail: clamp(24px, 5vw, 100px);
  --pad:  clamp(24px, 5vw, 100px);
  /* На 8 страницах блоки используют переменную --text, которой нигде
     не объявлено: фон не применялся, и светлый текст оказывался
     на светлом фоне. Объявляем её как основной тёмный цвет. */
  --text: #1A2033;

  /* Приглушённый серый и фирменный красный были чуть светлее нормы
     для мелкого текста — делаем на пару тонов темнее. */
  --muted: #5F6775;
}

/* ── 1. Контейнеры секций: одна вертикаль на всех страницах ── */
.wrap,
.s-wrap,
.page-hero-inner,
.breadcrumb nav,
.article-wrap,
.art-wrap,
.doc {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--rail);
  padding-right: var(--rail);
}

/* ── 1б. Узкие центрированные блоки внутри контейнера:
   снимаем ограничение ширины, поля уже есть у контейнера ── */
.faq-wrap,
.faq-list,
.quiz-wrap,
.quiz-layout,
.cta-inner,
.cta-strip-inner,
.form-wrap,
.article-wrap > *,
.art-wrap > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.faq-wrap,
.quiz-wrap,
.quiz-layout,
.cta-inner,
.form-wrap { padding-left: 0; padding-right: 0; }

/* Вертикальные отступы этих контейнеров сохраняем */
.article-wrap { padding-top: 48px; padding-bottom: 80px; }
.doc          { padding-top: 48px; padding-bottom: 72px; }

/* Шапка — та же вертикаль.
   Стили шапки приходят из _header.html уже в <body>, то есть позже
   этого файла, поэтому селектор здесь специально более точный. */
header .hdr,
.hdr.hdr { padding-left: var(--rail); padding-right: var(--rail); }

/* Хлебные крошки: поля задаёт внутренний nav, у обёртки их быть не должно */
.breadcrumb { padding-left: 0; padding-right: 0; }

/* ── 2. Вложенные контейнеры: поля не суммируются ── */
.s-wrap .s-wrap,
.s-wrap .wrap,
.wrap .wrap,
.wrap .s-wrap,
.intlinks > .s-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* Секции, у которых поля заданы им самим, а не контейнеру внутри */
.intlinks { padding-left: var(--rail); padding-right: var(--rail); }

/* «Читайте также»: внутри статьи поля уже есть у статьи,
   отдельной секцией — поля несёт она сама, но не её контейнер */
.article-wrap .related-section,
.art-wrap .related-section,
.doc .related-section,
.related-section > .s-wrap { padding-left: 0; padding-right: 0; }

/* Подвал свёрстан по-разному: где есть внутренний контейнер —
   поля несёт он, где его нет — сам footer */
footer:has(> .s-wrap, > .wrap) { padding-left: 0; padding-right: 0; }
footer > .s-wrap,
footer > .wrap { padding-left: var(--rail); padding-right: var(--rail); }

/* ── 3. Блоки без контейнера — ставим их на ту же вертикаль ── */
#stats .stats-row,
.stats-row {
  padding-left: var(--rail);
  padding-right: var(--rail);
}
/* Заголовки секций были по центру — прижимаем к левой линии,
   как всё остальное содержимое */
.s-head { text-align: left; }

/* Полоса со статистикой: цифры были отцентрованы внутри ячеек,
   из-за чего первая («24 мес») стояла далеко от левой линии.
   Прижимаем к левому краю, первая ячейка — ровно на линии. */
#stats .stat-item,
.stats-row .stat-item {
  text-align: left;
  align-items: flex-start;
}
#stats .stat-item:first-child,
.stats-row .stat-item:first-child { padding-left: 0; }

#hero .hero-left {
  padding-left: var(--rail);
  padding-right: clamp(24px, 4vw, 72px);
}

/* Промо-баннер: красная плашка «Акция» была отдельной колонкой слева
   и сдвигала текст. Делаем её ярлыком над заголовком — тогда и заголовок,
   и текст начинаются на общей вертикали. */
#promo .promo-inner { display: block; }
#promo .promo-badge {
  display: inline-flex;
  padding: 5px 14px;
  border-radius: 4px;
  margin: 28px 0 14px;
}
#promo .promo-body {
  padding-left: 0;
  padding-right: 0;
  border-left: none;
}

/* ── Читаемость: красные подписи ──
   Фирменный красный #D23B43 мелким кеглем даёт недостаточный
   контраст: на тёмном фоне берём светлее, на светлом темнее. */
#howwework .how-meta,
#promo .promo-tag,
#booking .how-meta { color: #F2757C; }
.s-tag,
.to-card-tag       { color: #B92F36; }

/* Красный на красном фоне (акции) и прочие мелкие подписи */
.page-hero .ph-tag,
.page-hero .ph-desc { color: rgba(255, 255, 255, .95); }
.model-type         { color: rgba(255, 255, 255, .8); }
#models .model-type { color: #F2757C; }
.sec-label,
.hero-badge         { color: #B92F36; }
.to-card .to-card-tag          { color: #B92F36; }
.to-card.featured .to-card-tag { color: #F2757C; }
.price-note,
.ya-cnt             { color: #5F6775; }

/* Мелкие красные ссылки и подписи поверх светлого фона */
a[style*="color:var(--red)"],
a[style*="color: var(--red)"] { color: #B92F36 !important; }

/* Текст поверх красного фона — чистый белый */
.page-hero .ph-tag,
.page-hero .ph-desc { color: #fff; }

/* Иконки в карточках «Процесс работы»: красный контур на тёмном
   фоне читался плохо — делаем белым, подложку нейтральной. */
#howwework .how-ico {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
}
#howwework .how-ico svg { stroke: #fff; }
#howwework .how-step:hover .how-ico { background: rgba(255, 255, 255, .14); }

/* ── Кнопки на тёмном фоне ──
   Были полупрозрачными и терялись. Промо-кнопка становится
   сплошной красной, вторичная — с внятным белым контуром. */
.btn-promo {
  background: var(--red);
  border: 1px solid var(--red);
  color: #fff;
}
.btn-promo:hover {
  background: var(--red-h, #B83038);
  border-color: var(--red-h, #B83038);
}
.btn-outline-light {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
}
.btn-outline-light:hover {
  background: #fff;
  border-color: #fff;
  color: #1A2033;
}

/* ── Страховка для анимации появления ──
   Блоки с классом .rv/.reveal скрыты до тех пор, пока скрипт не
   добавит им класс .visible. Если скрипт не сработал или блок
   проскочил мимо наблюдателя при быстрой прокрутке, текст остаётся
   невидимым. Через 2,5 секунды после загрузки показываем его
   принудительно — контент не должен зависеть от анимации. */
@keyframes rail-reveal-fallback { to { opacity: 1; transform: none; } }
.rv:not(.visible),
.reveal:not(.visible) {
  animation: rail-reveal-fallback .3s ease 2.5s forwards;
}
