/* t2.css — секции шаблона 2 «Покупка для собственного отдыха».
   Владеет только раскладкой одиннадцати блоков этой страницы. Ни один класс
   дизайн-системы здесь не переопределяется: там, где блоку нужна своя
   геометрия, рядом с системным классом стоит собственный .t2-*, и правило
   висит на нём. Значения — только токены --as-*; литералы допущены в одном
   месте и по одной причине: CSS не пускает var() в прелюдию @media
   (DESIGN_SYSTEM.md §4), поэтому 900 и 600 стоят числами и повторяют
   --as-bp-md и --as-bp-sm.

   Композиционный акцент шаблона (DESIGN_SYSTEM.md §18): крупные визуалы,
   сценарии использования, пространство. Полотна выходят из .shell на всю
   ширину окна, между двумя кадрами всегда стоит аргумент, а текст входит
   в композицию сцены, а не подписывает её.

   Собственных @keyframes здесь нет и быть не может: появление на странице
   держит один движок — motion.js через [data-reveal].

   Порядок разделов файла = порядок блоков на странице.
   0. Общее       1. hero        2. own-season   3. arrival     4. vs-rent
   5. residence   6. service     7. slopes       8. off-season  9. evidence
   10. practical  11. lead       12. Телефон */

/* ==========================================================================
   0. Общее
   ========================================================================== */

/* Каждый прямой ребёнок .section__body несёт .t2-col рядом с .col-*:
   ниже 900px именно по нему двенадцатиколоночная сетка складывается
   в одну колонку. Сами .col-* дизайн-системы не схлопываются (§4),
   и трогать их шаблон не имеет права. */

/* Ряд «метка — значение» — единственный повторяемый узор страницы:
   волосяная линия сверху, метка микро-кеглем, значение крупным. Плиток,
   рамок и подложек под цифрами нет нигде: цифра стоит прямо на фоне. */
.t2-fact,
.t2-spec {
  display: flex;
  flex-direction: column;
  gap: var(--as-s2);
  padding-top: var(--as-s4);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t2-fact,
.on-light .t2-spec {
  border-top-color: var(--as-line-on-light);
}

.t2-fact__value,
.t2-spec__value,
.t2-point__dist {
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Номер блока стоит над меткой секции и обязан от неё отступить: своего
   нижнего поля у .marker нет, а .section__head отбивается только снизу. */
.t2-mark {
  margin-bottom: var(--as-s6);
}

/* ==========================================================================
   1. hero — первый экран владельца
   ==========================================================================
   Композиция собрана в центре (TEMPLATES.md, T2 §7), заголовок уходит ЗА
   медиа по оси Z — приём референса 2. Слово шире кадра, поэтому его края
   остаются видны слева и справа, а нижняя часть строки скрыта полотном. */
.t2-hero {
  padding-top: calc(var(--as-header-h) + var(--as-s7));
  padding-bottom: var(--as-rhythm-wide);
  overflow: hidden;
}

.t2-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t2-hero__marker {
  align-self: stretch;
  margin-bottom: var(--as-s7);
}

.t2-hero__kicker {
  text-align: center;
}

.t2-hero__word {
  position: relative;
  z-index: var(--as-z-word);
  margin-top: var(--as-s4);
  text-align: center;
  text-wrap: balance;
}

.t2-hero__media {
  position: relative;
  z-index: var(--as-z-media);
  width: 100%;
  /* Кадр уже колонки нарочно: строка заголовка шире его на треть с каждой
     стороны и выходит из-под кадра слева и справа — иначе перекрытие
     превращается в вычёркивание. Высота 16:9 при этой ширине оставляет
     действие на первом экране. */
  max-width: calc(var(--as-measure) + var(--as-s8));
  margin-top: calc(var(--as-s4) * -1);
}

.t2-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--as-s5);
  margin-top: var(--as-s6);
  text-align: center;
}

.t2-hero__act {
  margin-top: var(--as-s2);
}

/* Три опорных факта строкой, а не тремя плитками: значения разделены
   волосяной линейкой, и каждая цифра стоит рядом со своей подписью. */
.t2-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-s5) var(--as-col-gap);
  width: 100%;
  max-width: var(--as-shell-narrow);
  margin: var(--as-s8) 0 0;
}

/* Факт не сжимается ниже собственной ширины, а переносится на новую строку:
   три жёстких колонки клали незаполненное значение поверх соседнего. */
.t2-hero__facts .t2-fact {
  flex: 1 1 min(100%, calc(var(--as-measure) / 2));
}

.t2-hero__ad {
  margin-top: var(--as-s7);
  margin-inline: auto;
}

/* ==========================================================================
   2. own-season — год владельца
   ==========================================================================
   Три поездки за год, каждая — полотно во всю ширину окна. Переключатель
   собран радиогруппой, а не скриптом: движка [data-filter] в этой сборке
   нет, а блок обязан листаться и там, где JS не поднялся. Инпуты стоят
   первыми детьми .t2-season, поэтому и метки, и панели достаются из
   :checked обычным соседним комбинатором. */
.t2-season {
  position: relative;
  margin-top: var(--as-block-gap);
}

.t2-season__tabs,
.t2-map__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-s3);
}

.t2-season__tab,
.t2-map__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--as-ctrl-h-sm);
  padding-inline: var(--as-ctrl-pad);
  border: var(--as-hairline) solid var(--as-line-on-dark);
  border-radius: var(--as-radius-control);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-btn);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-btn);
  line-height: var(--as-lh-flat);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--as-dur-fast) var(--as-ease),
    border-color var(--as-dur-fast) var(--as-ease),
    background-color var(--as-dur-fast) var(--as-ease);
}

.on-light .t2-season__tab,
.on-light .t2-map__tab {
  border-color: var(--as-line-on-light);
  color: var(--as-text-on-light-mute);
}

.t2-season__tab:hover,
.t2-map__tab:hover {
  border-color: var(--as-accent-400);
  color: var(--as-text-on-dark);
}

.on-light .t2-season__tab:hover,
.on-light .t2-map__tab:hover {
  border-color: var(--as-accent-500);
  color: var(--as-text-on-light);
}

/* Выбранный сезон и выбранный слой видны на экране, а не только в разметке.
   Переключатель стоит прямо перед своей меткой, поэтому состояние снимается
   соседним комбинатором с класса — ни одного селектора по id. */
.t2-season__pick:checked + .t2-season__tab {
  background: var(--as-accent-soft);
  border-color: var(--as-accent-400);
  color: var(--as-text-on-dark);
}

.t2-map__pick:checked + .t2-map__tab {
  background: var(--as-accent-soft);
  border-color: var(--as-accent-500);
  color: var(--as-text-on-light);
}

/* Сам переключатель спрятан от глаза, но не от клавиатуры: кольцо фокуса
   переезжает на его метку, иначе Tab уходит в невидимое место. */
.t2-season__pick:focus-visible + .t2-season__tab,
.t2-map__pick:focus-visible + .t2-map__tab {
  outline: var(--as-focus-ring) solid var(--as-focus);
  outline-offset: var(--as-focus-offset);
}

.t2-season__panels {
  margin-top: var(--as-s6);
}

/* Панель сезона и слой схемы стоят вне группы переключателей — состояние
   достаётся оттуда :has(), а порядковый номер считает :nth-of-type среди
   самих переключателей, поэтому id здесь тоже не нужен.

   Всё правило целиком стоит под @supports: движок без :has() не умеет
   вернуть спрятанное, значит и прятать не имеет права — он покажет все три
   сцены и все три слоя подряд. Это хуже, но читается целиком, и ровно так
   же ведёт себя страница без CSS. */
@supports selector(:has(*)) {
  .t2-season__panel,
  .t2-map__layer {
    display: none;
  }

  .t2-season:has(.t2-season__pick:nth-of-type(1):checked) .t2-season__panel:nth-child(1),
  .t2-season:has(.t2-season__pick:nth-of-type(2):checked) .t2-season__panel:nth-child(2),
  .t2-season:has(.t2-season__pick:nth-of-type(3):checked) .t2-season__panel:nth-child(3),
  .t2-map:has(.t2-map__pick:nth-of-type(1):checked) .t2-map__layer:nth-child(1),
  .t2-map:has(.t2-map__pick:nth-of-type(2):checked) .t2-map__layer:nth-child(2),
  .t2-map:has(.t2-map__pick:nth-of-type(3):checked) .t2-map__layer:nth-child(3) {
    display: block;
  }
}

/* Текст сцены входит в композицию: заголовок и рассказ стоят двумя
   колонками прямо под кадром, а не подписью под фотографией. */
.t2-season__say {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s5);
  align-items: start;
  margin-top: var(--as-s6);
}

.t2-season__note {
  margin-top: var(--as-s7);
}

/* ==========================================================================
   3. arrival — эмоциональная картина
   ==========================================================================
   Кадр во всю ширину, под ним три момента одного вечера и короткое видео
   рядом. Вокруг блока тишина: это единственный экран страницы, где
   аргумент уступает сцене. */
.t2-arrival__scene {
  margin-top: var(--as-block-gap);
}

.t2-arrival__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s7);
  align-items: start;
  margin-top: var(--as-s8);
}

.t2-arrival__say {
  display: flex;
  flex-direction: column;
  gap: var(--as-s7);
}

.t2-moments {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t2-moment {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--as-s6);
  row-gap: var(--as-s2);
  padding-block: var(--as-s5);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.t2-moment:last-child {
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.t2-moment__time {
  flex: 0 0 auto;
  padding-top: var(--as-s2);
}

.t2-moment__text {
  flex: 1 1 min(100%, calc(var(--as-measure) / 2));
}

/* ==========================================================================
   4. vs-rent — своё против аренды
   ==========================================================================
   Светлый регистр включается здесь: разговор становится расчётливым.
   Проигрывающая сторона не карикатурится — она просто набрана приглушённым
   тоном, а выигрывающая отбита той же волосяной линейкой акцента, что и
   вводный абзац системы. */
.t2-vs__band {
  margin-bottom: var(--as-s8);
}

.t2-vs {
  display: grid;
  gap: 0;
}

/* Шапка и строка живут по одной сетке: подпись стороны обязана стоять ровно
   над своей колонкой, иначе она подписывает не то. */
.t2-vs__head,
.t2-vs__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s3);
  align-items: start;
}

.t2-vs__head {
  padding-bottom: var(--as-s4);
}

.t2-vs__head-rent {
  grid-column: 2;
}

.t2-vs__head-own {
  grid-column: 3;
}

/* Подпись внутри карточки — для телефона, где шапки уже нет. */
.t2-vs__side-name {
  display: none;
}

.t2-vs__side {
  color: var(--as-text-on-dark-mute);
}

.on-light .t2-vs__side {
  color: var(--as-text-on-light-mute);
}

.t2-vs__side--own {
  padding-inline-start: var(--as-s5);
  border-inline-start: var(--as-rule-weight) solid var(--as-accent-400);
  color: var(--as-text-on-dark);
}

.on-light .t2-vs__side--own {
  border-inline-start-color: var(--as-accent-500);
  color: var(--as-text-on-light);
}

.t2-vs__row {
  padding-block: var(--as-s6);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t2-vs__row {
  border-top-color: var(--as-line-on-light);
}

.t2-vs__row:last-child {
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t2-vs__row:last-child {
  border-bottom-color: var(--as-line-on-light);
}

.t2-vs__verdict {
  max-width: var(--as-title-measure);
  margin-top: var(--as-s7);
}

.t2-vs__note {
  grid-column-end: -1;
  align-self: end;
}

/* ==========================================================================
   5. residence — номер, в который приезжают
   ==========================================================================
   План и кадр стоят рядом и одного роста: план объясняет сценарий,
   кадр показывает то же пространство глазами приехавшего. План первый —
   и в вёрстке, и на телефоне. */
.t2-res__media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--as-col-gap);
  /* Уже колонки: пропорция 3:4 на половине сетки даёт кадр под тысячу
     пикселей высотой, и блок перестаёт читаться за один взгляд. */
  max-width: var(--as-shell-narrow);
}

.t2-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-s5) var(--as-col-gap);
  margin: 0;
}

.t2-specs .t2-spec {
  flex: 1 1 min(100%, calc(var(--as-measure) / 2));
}

.t2-res__act {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  grid-column-end: -1;
}

/* ==========================================================================
   6. service — что снимается с владельца
   ==========================================================================
   Список-разворот: слева снятая задача, справа кто её забирает. Карточек
   и иконок здесь нет — их отсутствие и есть форма блока. */
.t2-service {
  display: grid;
  gap: 0;
  margin-top: var(--as-block-gap);
}

.t2-service__item {
  padding-block: var(--as-s6);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.t2-service__item:last-child {
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.t2-service__note {
  margin-top: var(--as-s6);
}

/* ==========================================================================
   7. slopes — дорога и что в шаге
   ==========================================================================
   Единственная графика страницы. Работает слоями, а не легендой: слой
   выбирается той же радиогруппой, что и сезон, и на схеме остаётся ровно
   одно объяснение. Расстояния идут отдельным перечнем — их читают
   и без схемы. */
.t2-map {
  position: relative;
  margin-top: var(--as-block-gap);
}

.t2-map__canvas {
  margin-top: var(--as-s6);
}

.t2-map__layers {
  margin-top: var(--as-s6);
}

.t2-map__layer {
  max-width: var(--as-measure);
}

.t2-slopes__foot {
  margin-top: var(--as-s8);
}

.t2-points {
  grid-column-end: -1;
  margin: 0;
}

.t2-point {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--as-s5);
  padding-block: var(--as-s4);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t2-point {
  border-top-color: var(--as-line-on-light);
}

.t2-point:last-child {
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t2-point:last-child {
  border-bottom-color: var(--as-line-on-light);
}

.t2-point__name {
  font-weight: var(--as-w-medium);
}

.t2-point__dist {
  color: var(--as-text-on-dark-mute);
}

.on-light .t2-point__dist {
  color: var(--as-text-on-light-mute);
}

/* ==========================================================================
   8. off-season — когда владельца нет
   ========================================================================== */
.t2-off {
  margin-top: var(--as-block-gap);
}

.t2-off__option {
  display: flex;
  flex-direction: column;
  gap: var(--as-s3);
  max-width: var(--as-measure);
}

.t2-off__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--as-s6);
  margin-top: var(--as-s8);
}

.t2-off__note {
  flex: 1 1 min(100%, var(--as-measure));
}

/* ==========================================================================
   9. evidence — чем это подтверждено
   ==========================================================================
   Порядок в разметке он же порядок на телефоне: сначала кадр, затем
   документ, затем остальные доказательства. Ни одного перемещения через
   order — обход с клавиатуры обязан совпадать с видимым. */
.t2-ev {
  margin-top: var(--as-block-gap);
}

/* Кадр 16:9 и документ 3:4 разной высоты; выравниваем по нижнему краю,
   чтобы ряд читался строкой, а не лесенкой. */
.t2-ev__shot,
.t2-ev__doc {
  align-self: end;
}

.t2-ev__doc {
  grid-column-end: -1;
}

.t2-proofs {
  display: grid;
  grid-column-end: -1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--as-measure) / 2)), 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s6);
}

.t2-proof {
  padding-top: var(--as-s5);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t2-proof {
  border-top-color: var(--as-line-on-light);
}

.t2-proof__text {
  color: var(--as-text-on-dark-mute);
}

.on-light .t2-proof__text {
  color: var(--as-text-on-light-mute);
}

/* ==========================================================================
   10. practical — практика владения
   ==========================================================================
   Обычный перечень «вопрос — ответ»: раскрытий здесь нет, весь бюджет
   интерактивов ушёл в сезоны и в схему, где механика несёт аргумент. */
.t2-qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  margin-top: var(--as-block-gap);
}

.t2-qa__item {
  display: grid;
  gap: var(--as-s3);
  align-content: start;
  padding-block: var(--as-s6);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .t2-qa__item {
  border-top-color: var(--as-line-on-light);
}

.t2-qa__a {
  color: var(--as-text-on-dark-mute);
}

.on-light .t2-qa__a {
  color: var(--as-text-on-light-mute);
}

/* ==========================================================================
   11. lead — оффер и заявка
   ==========================================================================
   Форма живёт в своей колонке. Раскладка .lead__form в системе привязана
   к странице прошлого прогона, поэтому геометрия формы здесь висит на
   собственном .t2-form, стоящем рядом с системным классом. */
.t2-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--as-s5);
}

.t2-offer__price {
  margin-top: var(--as-s5);
}

.t2-terms {
  display: grid;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t2-term {
  padding-block: var(--as-s4);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.t2-term:last-child {
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.t2-offer__act {
  margin-top: var(--as-s4);
}

.t2-lead {
  display: flex;
  flex-direction: column;
  gap: var(--as-s6);
  grid-column-end: -1;
}

.t2-form {
  display: flex;
  flex-direction: column;
  gap: var(--as-s6);
  margin-top: var(--as-s3);
}

.t2-form__area {
  min-height: calc(var(--as-ctrl-h) * 2);
  resize: vertical;
}

.t2-form__act {
  margin-top: var(--as-s3);
}

.t2-lead__legal {
  margin-top: calc(var(--as-s5) * -1);
}

/* ==========================================================================
   12. Телефон — ниже --as-bp-md
   ==========================================================================
   Восемь решений из раздела «Мобильная логика» TEMPLATES.md, T2 §11.
   Порядок блоков (slopes сразу после residence) держит nav.js по
   data-nav-order в разметке — здесь только раскладка.
   Числа в прелюдии повторяют --as-bp-md и --as-bp-sm: var() сюда не пускают. */
@media (max-width: 900px) {
  /* Двенадцать колонок складываются в одну. Сдвиги и края, назначенные
     на десктопе, снимаются вместе с ними. */
  .t2-col {
    grid-column: 1 / -1;
  }

  /* 1. hero: композиция остаётся центральной, но слово больше не уходит
     за кадр — на узком экране перекрытие съедает строку целиком. */
  .t2-hero {
    padding-top: calc(var(--as-header-h-sm) + var(--as-s7));
    padding-bottom: var(--as-rhythm-wide-sm);
  }

  .t2-hero__marker {
    margin-bottom: var(--as-s7);
  }

  .t2-hero__media {
    margin-top: var(--as-s6);
  }

  .t2-hero__facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--as-s4);
    margin-top: var(--as-s7);
  }

  /* 2. Кадры сцен разворачиваются на всю ширину без полей и остаются
     все три. Пропорцию 3:4 задаёт responsive.css. */
  .t2-season__say,
  .t2-arrival__body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 6. Переключатель сезона — основная навигация по блоку на телефоне:
     он остаётся, но становится лентой, а не переносится в три строки. */
  .t2-season__tabs,
  .t2-map__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--as-gutter-sm) * -1);
    padding-inline: var(--as-gutter-sm);
  }

  .t2-season__tabs::-webkit-scrollbar,
  .t2-map__tabs::-webkit-scrollbar {
    display: none;
  }

  .t2-season__tab,
  .t2-map__tab {
    flex: 0 0 auto;
  }

  /* 4. Типографика сцен не уменьшается. Системная шкала сжимает .d3 с 72
     до 30px, и три сцены — год владельца, приезд, номер — теряют вес
     ровно там, где держат страницу. Здесь они возвращаются на ступень .d2,
     то есть на 40px: уменьшается количество текста, а не его кегль.
     Остальные восемь заголовков уезжают по системной шкале, как везде. */
  .t2-scene__title {
    font-size: var(--as-fs-d2);
    line-height: var(--as-lh-display);
  }

  /* 7. arrival: остаются три момента, вводный абзац уходит — на телефоне
     сцену держат сами моменты, а не подводка к ним.

     Вторая половина решения 7 — «SERVICE_ITEM_01..05_TEXT до одной строки» —
     снята. Короткий мобильный текст — это другое значение ключа, а его
     в реестре нет: одного SERVICE_ITEM_NN_TEXT хватает на обе ширины.
     Стояла обрезка -webkit-line-clamp: 1, и она резала аргумент посреди
     слова — это не короткий текст, а испорченный длинный. Вернуть решение
     можно ключом SERVICE_ITEM_NN_TEXT_SHORT, тогда на телефоне печатается
     он, а не многоточие. */
  .t2-arrival__lede {
    display: none;
  }

  /* 3. vs-rent: каждая пара «аренда / своё» становится отдельной
     карточкой сравнения — критерий сверху, стороны под ним. Строка-шапка
     с подписями колонок больше не над чем стоять: подпись переезжает
     внутрь карточки, к своей стороне. */
  .t2-vs__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--as-s4);
  }

  .t2-vs__head {
    display: none;
  }

  .t2-vs__side-name {
    display: block;
    margin-bottom: var(--as-s2);
  }

  .t2-vs__side--own {
    padding-inline-start: var(--as-s4);
  }

  .t2-vs__verdict {
    margin-top: var(--as-s6);
  }

  /* 2. residence: план первым, кадр вторым. */
  .t2-res__media,
  .t2-qa {
    grid-template-columns: minmax(0, 1fr);
  }

  .t2-res__act {
    justify-content: flex-start;
  }

  /* 6. slopes: схема сворачивается. Полотно со слоями на 390px нечитаемо —
     от блока остаётся то, ради чего он стоит: выбранный слой словами и
     расстояния перечнем. Полотно уходит; ни одного числа и ни одной строки
     при этом не теряется, потому что схемы всё равно ещё нет — на её месте
     слот, и он ничего не доказывает без материала.

     Механика выбора слоя остаётся однозначной на обеих ширинах: слой всегда
     ровно один. Схема, показывающая два слоя разом, требует движка, которого
     в этой сборке нет, и радиогруппой не собирается. */
  .t2-map__canvas {
    display: none;
  }

  .t2-map__layers {
    margin-top: var(--as-s5);
  }

  .t2-slopes__foot {
    margin-top: var(--as-s7);
    row-gap: var(--as-s6);
  }

  /* 5. Закреплённая панель не должна перекрывать форму и оффер. */
  .t2-lead-sec {
    padding-bottom: calc(var(--as-rhythm-wide-sm) + var(--as-sticky-h));
  }

  .t2-lead__legal {
    margin-top: 0;
  }
}

/* ---------- Узкий телефон, ниже --as-bp-sm ---------- */
@media (max-width: 600px) {
  /* 4. Типографика сцен не уменьшается — уменьшается количество текста.
     Единственное, что меняется здесь, — действие занимает всю строку:
     цель по касанию важнее ширины кнопки. Ширину задаёт не .btn, а его
     обёртка: кнопка растягивается сама, как ребёнок флекс-колонки, и класс
     дизайн-системы остаётся нетронутым. */
  .t2-hero__act,
  .t2-res__act,
  .t2-off__act,
  .t2-offer__act,
  .t2-form__act {
    display: flex;
    flex-direction: column;
  }
}

/* ==========================================================================
   12. Страница 4 «Почему Алтын Шор» — блоки, которых нет в шаблоне
   ==========================================================================
   Шаблон T2 рассчитан на связку с заглушками .slot: кадра нет, есть место
   под кадр. Здесь кадры настоящие — официальные рендеры проекта, — поэтому
   у страницы появляется свой тип медиа. Всё остальное (сетка, ритм, регистры,
   линии) остаётся шаблонным: ниже нет ни одного нового цвета и ни одного
   размера мимо шкалы токенов.

   Имена с префиксом p4-: это блоки одной страницы, а не дизайн-системы.
   Уедут в систему — переименуются там, а не здесь. */

/* ---------- Кадр ----------
   Официальный рендер вместо заглушки. Подпись стоит под кадром, а не поверх:
   у T2 текст всегда рядом с образом, и статус утверждения обязан читаться
   без наведения, без цвета и без картинки — на случай, если она не дошла. */
.p4-shot {
  display: flex;
  flex-direction: column;
  gap: var(--as-s3);
  margin: 0;
  min-width: 0;
}

.p4-shot__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--as-radius-flat);
  background: var(--as-base-700);
}

.on-light .p4-shot__frame {
  background: var(--as-cream-100);
}

.p4-shot__frame img {
  width: 100%;
  aspect-ratio: var(--as-ratio-wide);
  object-fit: cover;
  /* Единственный авторский момент движения на странице. Смещения почти нет:
     кадр держится приглушённым и доходит до полного тона только под курсором
     и под фокусом с клавиатуры. Смысл ровно тот же, что у всей страницы:
     план — не то же самое, что существующий объект. */
  filter: saturate(0.86) brightness(0.94);
  transition:
    filter 480ms var(--as-ease),
    transform 480ms var(--as-ease);
}

.p4-shot:hover .p4-shot__frame img,
.p4-shot:focus-within .p4-shot__frame img {
  filter: saturate(1) brightness(1);
  transform: scale(1.03);
}

.p4-shot--tall .p4-shot__frame img {
  aspect-ratio: var(--as-ratio-tall);
}

.p4-shot--square .p4-shot__frame img {
  aspect-ratio: var(--as-ratio-square);
}

/* Чертёж — не фотография: его нельзя обрезать по краям и нельзя приглушать,
   иначе размеры перестают читаться. Планировка ложится целиком на светлую
   плоскость и не отзывается на наведение. */
.p4-shot--plan .p4-shot__frame {
  background: var(--as-cream-50);
}

.p4-shot--plan .p4-shot__frame img {
  aspect-ratio: var(--as-ratio-tall);
  object-fit: contain;
  padding: var(--as-s4);
  filter: none;
}

.p4-shot--plan:hover .p4-shot__frame img,
.p4-shot--plan:focus-within .p4-shot__frame img {
  filter: none;
  transform: none;
}

.p4-shot__cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--as-s2);
}

.p4-shot__name {
  font-size: var(--as-fs-body);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

.p4-shot__text {
  max-width: var(--as-measure);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-micro);
  line-height: var(--as-lh-body);
  letter-spacing: var(--as-tr-body);
  text-transform: none;
}

.on-light .p4-shot__text {
  color: var(--as-text-on-light-mute);
}

/* ---------- Опорные числа первого экрана ----------
   Не плитки: строка чисел под волоском, как .t2-fact в шаблоне. */
.p4-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-s5) var(--as-s8);
  margin: 0;
  padding-top: var(--as-s6);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.p4-fact {
  flex: 1 1 min(100%, 220px);
  max-width: 360px;
}

.p4-fact__value {
  margin: 0;
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-regular);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

.p4-fact__what {
  margin-top: var(--as-s2);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-micro);
  line-height: var(--as-lh-body);
}

/* ---------- Регион вокруг проекта ----------
   Два кадра общей инфраструктуры Шерегеша. Стоят под собственной оговоркой
   и не притворяются частью проекта: расстояния на странице не заявляются. */
.p4-region {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--as-col-gap);
  margin-top: var(--as-s6);
}

/* ---------- Легенда статусов ----------
   Главный блок страницы стоит перед сеткой рендеров, а не после неё:
   человек обязан узнать правило чтения до того, как посмотрит на кадры,
   а не после. Три ключа, у каждого своя метка — та же самая, что стоит
   под каждым кадром ниже. */
.p4-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--as-col-gap);
  margin: var(--as-block-gap) 0 0;
  padding-block: var(--as-s6);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .p4-legend {
  border-color: var(--as-line-on-light);
}

.p4-legend__key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--as-s3);
  margin: 0;
  min-width: 0;
}

.p4-legend__what {
  margin: 0;
  max-width: var(--as-measure);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-micro);
  line-height: var(--as-lh-body);
}

.on-light .p4-legend__what {
  color: var(--as-text-on-light-mute);
}

/* ---------- Сетка мастер-плана ----------
   Десять официальных рендеров среды. Карточек нет: у кадра нет ни рамки,
   ни фона, ни тени — только сам кадр, имя элемента и его статус. */
.p4-mp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--as-s7) var(--as-col-gap);
  margin-top: var(--as-block-gap);
}

/* ---------- Реестр статусов ----------
   Три состояния тремя колонками. Позиция стоит под волоском, а не в карточке:
   это перечень, и он обязан читаться как перечень. */
.p4-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--as-col-gap);
  margin: 0;
}

.p4-ledger__col {
  display: flex;
  flex-direction: column;
  gap: var(--as-s5);
  min-width: 0;
}

.p4-ledger__head {
  padding-bottom: var(--as-s4);
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-light);
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

.p4-ledger__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--as-s3);
  max-width: var(--as-measure);
}

/* ---------- Три уровня ----------
   Схема «номер - корпус - курортная среда». Уровень — кадр и текст под ним,
   ординал вынесен акцентом: последовательность здесь и есть аргумент. */
.p4-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--as-col-gap);
  margin-top: var(--as-block-gap);
}

.p4-level__num {
  color: var(--as-accent-400);
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-micro);
  text-transform: uppercase;
}

.on-light .p4-level__num {
  color: var(--as-accent-500);
}

/* ---------- Два формата ----------
   У формата два кадра: чертёж объясняет сценарий, интерьер показывает
   то же пространство глазами приехавшего. Чертёж первый — и на телефоне тоже. */
.p4-formats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--as-s8) var(--as-col-gap);
  margin-top: var(--as-block-gap);
}

.p4-format {
  display: flex;
  flex-direction: column;
  gap: var(--as-s5);
  min-width: 0;
}

.p4-format__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--as-col-gap-sm);
}

.p4-format__name {
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

/* ---------- Критерии сравнения ----------
   Победителя нет — значит, нет и колонки победителя. Слева критерий,
   справа вопрос, который задают любому проекту, включая этот. */
.p4-crit {
  display: grid;
  gap: 0;
  margin: var(--as-block-gap) 0 0;
}

.p4-crit__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s3);
  padding-block: var(--as-s6);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.p4-crit__row:last-child {
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .p4-crit__row {
  border-top-color: var(--as-line-on-light);
}

.on-light .p4-crit__row:last-child {
  border-bottom-color: var(--as-line-on-light);
}

.p4-crit__name {
  margin: 0;
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-regular);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

.p4-crit__ask {
  margin: 0;
  max-width: var(--as-measure);
}

/* ---------- Раскрывающиеся вопросы ----------
   <details> вместо своего аккордеона: вопрос обязан раскрываться и тогда,
   когда js не поднялся. Указатель нарисован тем же волоском, что и в
   components.css, — второго типа стрелки на странице не заводится. */
.p4-faq {
  display: grid;
  gap: 0;
  margin-top: var(--as-block-gap);
}

.p4-faq__item {
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.p4-faq__item:last-child {
  border-bottom: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.on-light .p4-faq__item {
  border-top-color: var(--as-line-on-light);
}

.on-light .p4-faq__item:last-child {
  border-bottom-color: var(--as-line-on-light);
}

.p4-faq__q {
  display: flex;
  align-items: baseline;
  gap: var(--as-s5);
  padding-block: var(--as-s6);
  cursor: pointer;
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
  list-style: none;
  transition: color 180ms var(--as-ease);
}

/* Штатный треугольник снимается в обоих движках. */
.p4-faq__q::-webkit-details-marker { display: none; }
.p4-faq__q::marker { content: ""; }

.p4-faq__q:hover {
  color: var(--as-accent-400);
}

.on-light .p4-faq__q:hover {
  color: var(--as-accent-500);
}

.p4-faq__q::after {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: auto;
  width: var(--as-s3);
  height: var(--as-s3);
  border-right: var(--as-hairline) solid currentColor;
  border-bottom: var(--as-hairline) solid currentColor;
  transform: rotate(45deg);
}

.p4-faq__item[open] > .p4-faq__q::after {
  transform: rotate(-135deg);
  border-color: var(--as-accent-400);
}

.on-light .p4-faq__item[open] > .p4-faq__q::after {
  border-color: var(--as-accent-500);
}

.p4-faq__a {
  max-width: var(--as-measure);
  padding-bottom: var(--as-s6);
  color: var(--as-text-on-dark-mute);
}

.on-light .p4-faq__a {
  color: var(--as-text-on-light-mute);
}

/* Оговорка блока стоит рядом с обещанием, а не в подвале (R27).
   Собственного вида у неё нет — .tpl-note дизайн-системы, только место. */
.p4-note {
  margin-top: var(--as-s6);
}

/* ---------- Поверхности браузера ----------
   Полоса прокрутки — часть страницы, которую рисует не она. На тёмном фоне
   системная светлая полоса читается как чужая деталь. */
:root {
  scrollbar-color: var(--as-base-600) var(--as-base-900);
  scrollbar-width: thin;
}

/* ---------- Планшет, ниже --as-bp-md ---------- */
@media (max-width: 900px) {
  .p4-legend,
  .p4-ledger,
  .p4-levels,
  .p4-formats {
    grid-template-columns: minmax(0, 1fr);
  }

  .p4-legend {
    gap: var(--as-s6);
  }

  .p4-ledger,
  .p4-levels,
  .p4-formats {
    gap: var(--as-s8);
  }

  .p4-crit__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Узкий телефон, ниже --as-bp-sm ----------
   Проверено на 360px: сетка рендеров становится одной колонкой, подпись
   и статус остаются под своим кадром, оговорки не уезжают за край. */
@media (max-width: 600px) {
  .p4-mp {
    grid-template-columns: minmax(0, 1fr);
  }

  .p4-region,
  .p4-format__media {
    gap: var(--as-col-gap-sm);
  }

  .p4-facts {
    gap: var(--as-s5);
  }

  .p4-faq__q {
    font-size: var(--as-fs-lead);
  }
}

/* Укачивание: кадр перестаёт отзываться движением, тон остаётся. */
@media (prefers-reduced-motion: reduce) {
  .p4-shot__frame img,
  .p4-shot:hover .p4-shot__frame img,
  .p4-shot:focus-within .p4-shot__frame img {
    transform: none;
    transition: filter 180ms var(--as-ease);
  }
}

/* ---------- Строка действий ----------
   Основное и дополнительное действие стоят в одной строке и переносятся
   вместе с ней. Ширину кнопки задаёт .btn, обёртке принадлежит только шаг —
   иначе на 360px два действия слипаются в одно пятно. */
.p4-act {
  /* Строка действий — не текстовая колонка: общий предел p в 620px
     сталкивал бы второе действие на следующую строку. */
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--as-s4);
}

/* Крупный образ среды во всю колонку: композиционный ритм T2 держится
   на том, что текст стоит рядом с кадром, а не поверх него. */
.p4-wide {
  margin-top: var(--as-block-gap);
}

@media (max-width: 600px) {
  /* Цель по касанию важнее ширины кнопки: действие занимает всю строку. */
  .p4-act {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Подъёмники и трассы — два элемента, которыми текст блока меряет масштаб.
   Каждый занимает по две колонки: последний ряд перестаёт быть обрывком
   сетки, а крупный образ среды возвращает блоку композиционный ритм T2. */
@media (min-width: 901px) {
  .p4-mp > :nth-last-child(-n+2) {
    grid-column: span 2;
  }
}

/* ---------- Составной статус в две строки ----------
   .claim из components.css собран под однострочную метку и держит
   line-height: 1. Легенда этой страницы составная — «Ответы блока ·
   ПОДТВЕРЖДЁННЫЙ ФАКТ · ПЛАНИРУЕТСЯ · ТРЕБУЕТ ПОДТВЕРЖДЕНИЯ ДОКУМЕНТОМ», —
   и на второй строке прописные буквы наезжали на первую. Междустрочие
   возвращается всем меткам сразу: разной высоты у одинаковых пилюль быть
   не должно, а лишние четыре пикселя заодно увеличивают цель по касанию. */
.claim {
  line-height: var(--as-lh-lead);
}