/* t4.css — секции шаблона 4 «готовый гостиничный продукт».
   Владеет только раскладкой своих блоков: классы .t4-*, и ни одного класса
   дизайн-системы в роли подлежащего селектора — общие классы появляются
   здесь исключительно как контекст (.on-light .t4-…).
   Значения только через var(--as-*): ни цвета, ни размера, ни гарнитуры
   литералом. Собственных @keyframes нет — появление одно, оно в motion.css.

   Композиционный акцент шаблона: деталь номера, комплектация, материалы.
   Крупные фрагменты продукта, перечни с раскрытием, разбор кадра
   на составляющие. */

/* ==========================================================================
   01 · HERO — продукт, а не проект
   ==========================================================================
   Слово стоит слоем ниже медиа и уходит за него по оси Z: --as-z-word под
   --as-z-media. Кадр надвинут снизу-справа отрицательным верхним отступом —
   единственный владелец сдвига, слово о перекрытии не знает. */
.t4-hero {
  padding-top: calc(var(--as-header-h) + var(--as-s8));
  padding-bottom: var(--as-rhythm-tight);
}

.t4-hero__grid {
  row-gap: 0;
  align-items: start;
}

.t4-hero__mark {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: var(--as-s6);
}

.t4-hero__word {
  grid-column: 1 / 10;
  grid-row: 2;
  position: relative;
  z-index: var(--as-z-word);
  pointer-events: none;
}

.t4-hero__text {
  grid-column: 1 / 6;
  grid-row: 3;
  position: relative;
  z-index: var(--as-z-media);
  display: flex;
  flex-direction: column;
  gap: var(--as-s5);
  margin-top: var(--as-s7);
  max-width: var(--as-measure);
}

.t4-hero__media {
  grid-column: 6 / -1;
  grid-row: 3;
  position: relative;
  z-index: var(--as-z-media);
  margin-top: calc(var(--as-s8) * -1);
}

/* Обещание объявления, названное одной строкой: не подзаголовок и не метка */
.t4-hero__usp {
  max-width: var(--as-measure);
  padding-inline-start: var(--as-s5);
  border-inline-start: var(--as-rule-weight) solid var(--as-accent-400);
  color: var(--as-accent-400);
  font-size: var(--as-fs-body);
  font-weight: var(--as-w-medium);
  line-height: var(--as-lh-body);
}

.t4-hero__headline {
  text-wrap: balance;
}

.t4-hero__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Три опорных факта: степень готовности, площадь, срок передачи */
.t4-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--as-measure) / 3)), 1fr));
  gap: var(--as-s5);
  margin: 0;
}

.t4-facts__item {
  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);
}

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

/* Подпись под кадром и имя документа набираются как предложение,
   а не как метка: капс и трекинг метки здесь мешают читать. */
.t4-slot__note,
.t4-status__name {
  text-transform: none;
  letter-spacing: var(--as-tr-body);
}

/* Строка статуса вне слота: чем подтверждено то, что стоит рядом */
.t4-status {
  margin-top: var(--as-s5);
}

/* ==========================================================================
   02 · INCLUDED — состав раньше всего остального
   ========================================================================== */
.t4-included__list {
  display: flex;
  flex-direction: column;
  gap: var(--as-block-gap);
}

.t4-included__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s7);
}

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

.t4-included__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--as-s5);
}

/* ==========================================================================
   03 · SPARED — сколько работы покупатель не делает
   ========================================================================== */
.t4-spared__count {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.t4-spared__tasks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.t4-spared__task {
  padding-block: var(--as-s4);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
  color: var(--as-text-on-dark-mute);
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-regular);
  letter-spacing: var(--as-tr-head);
  line-height: var(--as-lh-head);
}

/* Зачёркивание — единственное место акцента в перечне: задачи не будет */
.t4-spared__task s {
  text-decoration-line: line-through;
  text-decoration-color: var(--as-accent-400);
  text-decoration-thickness: var(--as-rule-weight);
}

/* ==========================================================================
   04 · INTERIOR — изображение как главный носитель аргумента
   ==========================================================================
   Кадр без подписи не ставится: подпись говорит, что кадр доказывает. */
/* margin-block, а не margin: полотну ниже вернёт горизонтальные поля
   .bleed--out, и сокращённая запись их бы стёрла — t4.css идёт после
   layout.css и выиграл бы каскад. */
/* Полотно вырывается из колонки через .bleed--out, а тот считает вылет
   от 100vw — и попадает под классическую полосу прокрутки: она в 100vw
   входит, в ширину раскладки нет. Разница уезжает вправо и тащит страницу
   вбок. body { overflow-x: clip } из layout.css эту разницу не ловит:
   обрезка стоит на body, а прокрутку считает documentElement. Границу
   ставит секция, в которой полотно живёт, — clip не заводит своего
   контекста прокрутки и ничего больше не меняет. */
.t4-interior {
  overflow-x: clip;
}

.t4-frame {
  display: block;
  margin-block: 0;
}

.t4-frame__caption {
  margin-top: var(--as-s4);
  color: var(--as-text-on-dark-mute);
}

.on-light .t4-frame__caption {
  color: var(--as-text-on-light-mute);
}

/* Подпись полотна встаёт по левому краю колонки, а не по краю окна:
   у неё геометрия .shell, собранная из тех же токенов. Обернуть подпись
   контейнером нельзя — figcaption обязан оставаться прямым потомком figure. */
.t4-frame--bleed {
  margin-top: var(--as-block-gap);
}

.t4-frame--bleed .t4-frame__caption {
  max-width: calc(var(--as-shell) + var(--as-gutter) + var(--as-gutter));
  margin-inline: auto;
  padding-inline: var(--as-gutter);
}

.t4-interior__pair {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: var(--as-col-gap);
  row-gap: var(--as-block-gap);
  align-items: start;
  margin-top: var(--as-block-gap);
}

.t4-interior__extra {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: var(--as-col-gap);
  row-gap: var(--as-block-gap);
  align-items: start;
  margin-top: var(--as-block-gap);
}

.t4-interior__note {
  margin-top: var(--as-s6);
}

/* Интерактив 1 из двух: видео-обход раскрывается по нажатию.
   Механика родная, скрипта не требует; на телефоне это и есть отложенная
   загрузка тяжёлого материала. Стрелка нарисована границами, а не глифом. */
.t4-video__summary {
  display: flex;
  align-items: center;
  gap: var(--as-s3);
  min-height: var(--as-ctrl-h-sm);
  padding-block: var(--as-s3);
  border-block: var(--as-rule-weight) solid var(--as-line-on-dark);
  color: var(--as-accent-400);
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-micro);
  line-height: var(--as-lh-flat);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.t4-video__summary::-webkit-details-marker {
  display: none;
}

.t4-video__summary::after {
  content: "";
  flex: none;
  width: var(--as-s3);
  height: var(--as-s3);
  margin-inline-start: auto;
  border-inline-end: var(--as-rule-weight) solid currentColor;
  border-block-end: var(--as-rule-weight) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--as-dur-fast) var(--as-ease);
}

.t4-video[open] .t4-video__summary::after {
  transform: rotate(-135deg);
}

.t4-video__summary:focus-visible {
  outline: var(--as-focus-ring) solid var(--as-focus);
  outline-offset: var(--as-focus-offset);
}

.t4-video__box {
  margin-top: var(--as-s5);
}

/* ==========================================================================
   05 · KIT — «оснащение» превращается в поимённый перечень
   ==========================================================================
   Интерактив 2 из двух: зоны — переключатели разметки. Ни одна не нажата —
   список показан целиком; нажатые оставляют только свои позиции.
   Без поддержки :has() правила молчат, и список остаётся полным. */
.t4-kit__count {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.t4-kit__body {
  display: flex;
  flex-direction: column;
  gap: var(--as-s6);
}

.t4-kit__filter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-s3);
}

/* Переключатель остаётся в дереве доступности и под клавиатурой,
   но не занимает места: размер — та же волосяная линия системы. */
.t4-kit__toggle {
  position: absolute;
  width: var(--as-hairline);
  height: var(--as-hairline);
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.t4-kit__chip {
  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);
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-micro);
  line-height: var(--as-lh-flat);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--as-dur-fast) var(--as-ease),
    border-color var(--as-dur-fast) var(--as-ease);
}

.t4-kit__chip:hover {
  border-color: var(--as-accent-400);
}

/* Объявленное состояние обязано быть видно на экране */
.t4-kit__toggle:checked + .t4-kit__chip {
  background: var(--as-accent-soft);
  border-color: var(--as-accent-400);
}

.t4-kit__toggle:focus-visible + .t4-kit__chip {
  outline: var(--as-focus-ring) solid var(--as-focus);
  outline-offset: var(--as-focus-offset);
}

.t4-kit__list,
.t4-kit__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.t4-kit__zone {
  margin-bottom: var(--as-s4);
}

.t4-kit__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
}

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

.t4-kit__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);
}

/* Ни одна зона не нажата — перечень показан целиком. Нажатые оставляют
   свои группы: и чип, и заголовок группы печатают один и тот же ключ,
   поэтому спрятать «Кухню», подписав её «Ванной», нечем. */
.t4-kit:has(.t4-kit__toggle:checked) .t4-kit__group {
  display: none;
}

.t4-kit:has(#t4-zone-1:checked) .t4-kit__group[data-kit-zone="1"],
.t4-kit:has(#t4-zone-2:checked) .t4-kit__group[data-kit-zone="2"],
.t4-kit:has(#t4-zone-3:checked) .t4-kit__group[data-kit-zone="3"],
.t4-kit:has(#t4-zone-4:checked) .t4-kit__group[data-kit-zone="4"] {
  display: block;
}

/* 2. Без :has() переключать нечем. Управляющий элемент, который ничего
   не делает, не остаётся на экране и в обходе с клавиатуры: чипы уходят
   целиком, перечень остаётся полным. */
@supports not selector(:has(*)) {
  .t4-kit__filter {
    display: none;
  }
}

/* ==========================================================================
   06 · MATERIALS — выбор объясняется эксплуатацией
   ========================================================================== */
.t4-materials__list {
  display: flex;
  flex-direction: column;
  gap: var(--as-s7);
}

.t4-materials__item {
  padding-top: var(--as-s5);
  border-top: var(--as-rule-weight) solid var(--as-line-on-light);
}

.t4-materials__head {
  display: flex;
  flex-direction: column;
  gap: var(--as-s2);
}

.t4-materials__name {
  display: block;
}

/* ==========================================================================
   07 · STANDARDS — у качества появляется ответственный
   ========================================================================== */
.t4-standards__list {
  display: flex;
  flex-direction: column;
  gap: var(--as-s5);
}

.t4-standards__item {
  gap: var(--as-s3);
}

.t4-standards__doc {
  margin-top: var(--as-s6);
}

/* ==========================================================================
   08 · STAY — продукт в работе
   ==========================================================================
   Пять моментов одного заезда идут по горизонтали: порядок моментов и есть
   аргумент, вертикальный столбик его теряет. */
.t4-stay__media {
  margin-top: var(--as-block-gap);
}

.t4-stay__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  margin: 0;
  margin-top: var(--as-block-gap);
  padding: 0;
  list-style: none;
}

.t4-stay__step {
  display: flex;
  flex-direction: column;
  gap: var(--as-s3);
  padding-top: var(--as-s5);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

.t4-stay__note {
  margin-top: var(--as-s6);
}

/* ==========================================================================
   09 · EVIDENCE — доказательства связки и процедура приёмки
   ========================================================================== */
.t4-evidence__media {
  margin-top: var(--as-block-gap);
}

.t4-evidence__proofs {
  margin-top: var(--as-block-gap);
}

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

.t4-handover {
  margin-top: var(--as-s9);
}

.t4-handover__steps {
  margin-top: var(--as-s5);
}

.t4-evidence__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--as-s6);
}

.t4-evidence__note {
  margin-top: var(--as-s6);
}

/* ==========================================================================
   10 · READY-VS-DIY — постатейное сравнение и крупный итог
   ==========================================================================
   Секция живёт только на светлом регистре: расчёт читают на светлом.
   Колонка «готовое» помечена акцентной линейкой и плотнее по начертанию,
   колонка «своими силами» приглушена — различие держится не подписью. */
.t4-vs {
  margin-top: var(--as-block-gap);
}

.t4-vs__row {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr;
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s3);
  align-items: baseline;
  padding-block: var(--as-s5);
  border-top: var(--as-rule-weight) solid var(--as-line-on-light);
}

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

/* Шапка сравнения — не строка данных: линии сверху у неё нет,
   имена колонок стоят метками над числами. */
.t4-vs__head {
  padding-block: 0 var(--as-s3);
  border-top: 0;
}

.t4-vs__diy {
  color: var(--as-text-on-light-mute);
}

.t4-vs__ready {
  padding-inline-start: var(--as-s5);
  border-inline-start: var(--as-rule-weight) solid var(--as-accent-500);
  color: var(--as-text-on-light);
  font-weight: var(--as-w-medium);
}

.t4-vs__total {
  display: grid;
  grid-template-columns: 8fr 4fr;
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s6);
  align-items: end;
  margin-top: var(--as-s7);
}

/* ==========================================================================
   11 · WHATS-NOT — граница комплектации названа продавцом
   ========================================================================== */
.t4-not__list {
  display: flex;
  flex-direction: column;
  gap: var(--as-s5);
  margin-top: var(--as-block-gap);
}

.t4-not__item {
  padding-block: var(--as-s2);
}

.t4-not__note {
  margin-top: var(--as-s6);
}

/* ==========================================================================
   12 · LEAD — оффер и заявка
   ========================================================================== */
.t4-offer {
  display: flex;
  flex-direction: column;
  gap: var(--as-s5);
}

.t4-terms {
  margin: 0;
  padding: 0;
  list-style: none;
}

.t4-terms__item {
  max-width: var(--as-measure);
  padding-block: var(--as-s4);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
}

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

.t4-offer__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Форма стоит плоскостью соседнего регистра: поля видно, коробки нет */
.t4-form {
  display: flex;
  flex-direction: column;
  gap: var(--as-s5);
  padding: var(--as-pad-plane);
  background: var(--as-base-800);
  border: var(--as-hairline) solid var(--as-line-on-dark);
  border-radius: var(--as-radius-flat);
}

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

.t4-form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

.t4-form__status:empty {
  display: none;
}

/* ==========================================================================
   Мобильная версия — восемь решений раздела 11 «TEMPLATE 4»
   ==========================================================================
   Решение 1 (порядок) и решение 8 (последовательность доказательств) живут
   в разметке: data-nav-order на секциях, перестановку делает nav.js.
   Здесь — остальные шесть. Брейкпоинты стоят литералами: CSS не пускает
   var() в прелюдию @media, единственный реестр значений — --as-bp-*. */
@media (max-width: 900px) {

  /* .col-* сами не схлопываются: раскладку своих колонок шаблон делает у себя */
  .t4-included__list,
  .t4-included__media,
  .t4-included__act,
  .t4-spared__count,
  .t4-spared__tasks,
  .t4-kit__count,
  .t4-kit__body,
  .t4-materials__media,
  .t4-materials__list,
  .t4-standards__lede,
  .t4-standards__list,
  .t4-proof,
  .t4-offer,
  .t4-form__col {
    grid-column: 1 / -1;
  }

  /* Hero: та же сетка в одну дорожку, порядок дорожек повторяет разметку */
  .t4-hero {
    padding-top: calc(var(--as-header-h-sm) + var(--as-rhythm-tight-sm));
    padding-bottom: var(--as-rhythm-wide-sm);
  }

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

  .t4-hero__word,
  .t4-hero__text,
  .t4-hero__media {
    grid-column: 1;
  }

  .t4-hero__text {
    grid-row: 3;
    margin-top: var(--as-s6);
  }

  .t4-hero__media {
    grid-row: 4;
    margin-top: var(--as-s7);
  }

  /* Решение 3 · композиция: двухколонник состава становится одной колонкой */
  .t4-included__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--as-s6);
  }

  /* Решение 2 · приоритет визуалов: кадр состава уходит, кадры номера,
     макро материала и сцена заезда остаются. */
  .t4-included__media {
    display: none;
  }

  /* Решение 2 · три кадра номера разворачиваются во всю ширину без полей */
  .t4-interior__pair,
  .t4-interior__extra {
    grid-template-columns: minmax(0, 1fr);
  }

  .t4-frame--tall,
  .t4-frame--square {
    margin-inline: calc(var(--as-gutter-sm) * -1);
  }

  .t4-frame--tall .t4-frame__caption,
  .t4-frame--square .t4-frame__caption,
  .t4-frame--bleed .t4-frame__caption {
    padding-inline: var(--as-gutter-sm);
  }

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

  /* Решение 6 · упрощение интерактива: зоны становятся лентой чипов,
     список при этом не сворачивается — он и есть аргумент блока. */
  .t4-kit__filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--as-gutter-sm) * -1);
    padding-inline: var(--as-gutter-sm);
    padding-bottom: var(--as-s2);
  }

  .t4-kit__filter::-webkit-scrollbar {
    display: none;
  }

  /* Чип ленты не шире кадра: длинная подпись зоны переносится внутри
     чипа, а не уезжает за край экрана целиком. */
  .t4-kit__chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    max-width: var(--as-frame-sm);
    padding-block: var(--as-s3);
    padding-inline: var(--as-s5);
  }

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

  /* Решение 4 · типографика: счётчики остаются крупными — число несёт
     аргумент; названия позиций переходят в микро-метку. */
  .t4-kit__name {
    font-size: var(--as-fs-micro);
    font-weight: var(--as-w-medium);
    letter-spacing: var(--as-tr-micro);
    line-height: var(--as-lh-flat);
    text-transform: uppercase;
  }

  /* Пять моментов заезда идут лентой: край следующего виден и сообщает
     о продолжении без стрелок и точек. */
  .t4-stay__steps {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--as-col-gap-sm);
    margin-inline: calc(var(--as-gutter-sm) * -1);
    padding-inline: var(--as-gutter-sm);
  }

  .t4-stay__steps::-webkit-scrollbar {
    display: none;
  }

  .t4-stay__step {
    flex: 0 0 var(--as-frame-sm);
    scroll-snap-align: start;
  }

  /* Решение 3 · композиция: сравнение превращается в пары строк
     «статья → две суммы». */
  .t4-vs__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--as-col-gap-sm);
  }

  .t4-vs__criterion {
    grid-column: 1 / -1;
  }

  /* Шапка остаётся: пара «статья → две суммы» держит колонки на местах,
     и метки — единственное, чем эти две суммы различаются. Пустая ячейка
     статьи в шапке уходит, чтобы не занимать целую строку. */
  .t4-vs__head .t4-vs__criterion {
    display: none;
  }

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

  .t4-interior__pair,
  .t4-interior__extra,
  .t4-frame--bleed,
  .t4-evidence__media,
  .t4-stay__media,
  .t4-stay__steps,
  .t4-evidence__proofs,
  .t4-vs,
  .t4-not__list {
    margin-top: var(--as-s7);
  }

  .t4-handover {
    margin-top: var(--as-s8);
  }

  .t4-form {
    padding: var(--as-s5);
  }

  /* Решение 5 · закреплённая панель держится до формы и не перекрывает её */
  #lead {
    padding-bottom: calc(var(--as-rhythm-wide-sm) + var(--as-sticky-h));
  }
}

/* ---------- Ниже --as-bp-sm (600px): узкий телефон ---------- */
@media (max-width: 600px) {

  /* Действие на узком экране занимает всю строку. Ширину задаёт обёртка:
     .btn остаётся классом дизайн-системы и здесь не переопределяется. */
  .t4-hero__act,
  .t4-included__act,
  .t4-evidence__act,
  .t4-offer__act,
  .t4-form__actions {
    align-items: stretch;
  }

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

  /* Две суммы и на узком экране стоят рядом: столбиком они теряют связь
     с метками шапки, а сами суммы коротки и в половину экрана влезают. */
  .t4-vs__ready {
    padding-inline-start: var(--as-s4);
  }
}

/* ==========================================================================
   Страница 3 «Продукт и своё место в Шерегеше» — собственный слой поверх T4.

   Почему здесь, а не в тринадцатом файле: t4.css — приватная копия шаблона
   этой папки (R06), и он же владеет композицией T4. Отдельный файл добавил бы
   странице зависимость, которой нет у трёх соседних сайтов, и сломал бы
   документированный состав из двенадцати css.

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

/* Слот со снимком. Штриховка гаснет: она — язык отсутствия, и поверх
   реального кадра читалась бы как дефект печати, а не как приём. */
.slot--photo {
  padding: 0;
}

.slot--photo::before {
  content: none;
}

.slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Слот с планировкой. Чертёж из фида — чёрная графика на белом листе,
   и обрезать его по кадру нельзя: обрезанный план перестаёт быть планом.
   Поэтому лист вписывается целиком, а подложка всегда светлая — в тёмном
   регистре секции белый лист обязан выглядеть листом, а не засветкой. */
.slot--plan {
  padding: 0;
  background: var(--as-cream-50);
  border-color: var(--as-line-on-light);
}

.slot--plan::before {
  content: none;
}

.slot--plan .slot__img {
  /* Размер считается явно, а не через растяжение по inset: у растянутого
     абсолюта scrollWidth оказывается на два отступа шире клиентской ширины,
     и правый край чертежа уходит под обрезку. */
  inset: var(--as-s3);
  width: calc(100% - var(--as-s3) * 2);
  height: calc(100% - var(--as-s3) * 2);
  object-fit: contain;
}

/* Подпись кадра. Она несёт две вещи разного веса — что на кадре и откуда он, —
   и потому набирается в две строки, а не в одну через точку. */
.p3-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--as-s2);
}

/* Ряд кадров. Число колонок задаётся модификатором, а не инлайном:
   раскладка обязана быть в стилях, иначе её нельзя починить на 360 px. */
.p3-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--as-col-gap);
}

.p3-shots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p3-shots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Шесть критериев выбора. Список пронумерован: у критериев нет старшинства,
   но есть порядок проверки, и человек должен видеть, сколько их всего. */
.p3-crit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--as-s5) var(--as-col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: p3crit;
}

.p3-crit__item {
  display: flex;
  align-items: baseline;
  gap: var(--as-s3);
  padding-top: var(--as-s3);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
  counter-increment: p3crit;
  font-family: var(--as-font-display);
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-semibold);
  line-height: var(--as-lh-head);
  letter-spacing: var(--as-tr-head);
}

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

.p3-crit__item::before {
  content: counter(p3crit, decimal-leading-zero);
  flex: none;
  font-family: var(--as-font-display);
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-micro);
  color: var(--as-accent-400);
}

.on-light .p3-crit__item::before {
  color: var(--as-accent-500);
}

/* Схема «корпус — этаж — номер». Три ступени, а не картинка: схема, набранная
   текстом, читается скринридером и переживает любой экран. */
.p3-scheme {
  display: grid;
  gap: var(--as-s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.p3-scheme__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--as-s2) var(--as-s4);
  padding-top: var(--as-s3);
  border-top: var(--as-rule-weight) solid var(--as-line-on-dark);
}

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

.p3-scheme__key {
  grid-row: span 2;
  align-self: start;
  font-family: var(--as-font-display);
  font-size: var(--as-fs-num);
  font-weight: var(--as-w-semibold);
  line-height: var(--as-lh-flat);
  color: var(--as-accent-400);
}

.on-light .p3-scheme__key {
  color: var(--as-accent-500);
}

.p3-scheme__name {
  margin: 0;
  font-family: var(--as-font-display);
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-semibold);
  line-height: var(--as-lh-head);
}

.p3-scheme__text {
  margin: 0;
  color: var(--as-text-on-dark-mute);
}

.on-light .p3-scheme__text {
  color: var(--as-text-on-light-mute);
}

/* Вопросы. Раскрытие — родное <details>: оно работает без js, ищется
   поиском по странице и открывается с клавиатуры без единой строки кода. */
.p3-faq {
  display: grid;
  gap: 0;
}

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

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

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

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

.p3-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--as-s4);
  padding-block: var(--as-s4);
  cursor: pointer;
  list-style: none;
  font-family: var(--as-font-display);
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-semibold);
  line-height: var(--as-lh-head);
  letter-spacing: var(--as-tr-head);
  transition: color var(--as-dur-fast) var(--as-ease);
}

.p3-faq__q::-webkit-details-marker {
  display: none;
}

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

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

/* Знак раскрытия рисуется здесь, а не берётся у браузера: у стрелки
   <details> нет ни цвета из палитры, ни размера из шкалы. */
.p3-faq__q::after {
  content: "+";
  flex: none;
  font-size: var(--as-fs-lead);
  font-weight: var(--as-w-regular);
  line-height: 1;
  color: var(--as-accent-400);
  transition: transform var(--as-dur-fast) var(--as-ease);
}

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

.p3-faq__item[open] .p3-faq__q::after {
  transform: rotate(45deg);
}

.p3-faq__a {
  margin: 0;
  padding-bottom: var(--as-s5);
  max-width: var(--as-measure);
  color: var(--as-text-on-dark-mute);
}

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

/* Первый экран: четыре опоры под подзаголовком. Разметка t4-facts рассчитана
   на три колонки, четвёртая уезжала бы в новую строку одна. */
.p3-hero__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Тихий переход между блоками. Блок без CTA в матрице не получает кнопку:
   .btn на экране — это обещание конверсии, а здесь всего лишь ссылка
   на следующий раздел. Отсюда текст, подчёркивание и никакого фона. */
.p3-jump {
  margin: 0;
  font-size: var(--as-fs-body);
}

.p3-jump a {
  color: var(--as-text-on-dark-mute);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: color var(--as-dur-fast) var(--as-ease);
}

.p3-jump a:hover {
  color: var(--as-text-on-dark);
}

.on-light .p3-jump a {
  color: var(--as-text-on-light-mute);
}

.on-light .p3-jump a:hover {
  color: var(--as-text-on-light);
}

/* ---------- Ниже 900 px ---------- */
@media (max-width: 899px) {
  .p3-shots,
  .p3-shots--3,
  .p3-shots--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--as-col-gap-sm);
  }

  .p3-crit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--as-s4) var(--as-col-gap-sm);
  }
}

/* ---------- Ниже 600 px: узкий телефон ----------
   Кадры остаются в два столбца только там, где это пара «до / после».
   Всё остальное разворачивается в колонку: на 360 px половина ширины —
   это 150 px, и планировка в ней перестаёт читаться. */
@media (max-width: 599px) {
  .p3-shots--3,
  .p3-shots--4 {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

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

/* ---------- Колонки контентных секций на узком экране ----------
   Диагноз, а не перестраховка: в .section__body лежит двенадцатиколоночная
   сетка, и .col-5 на 360 px — это 150 px, в которых чертёж перестаёт быть
   чертежом, а колонка .col-8 .col-offset-2 схлопывается до пяти пикселей.
   Шаблоны site/ обходят это тем, что у каждого их блока есть собственный
   класс с мобильным правилом; секции этой страницы собраны из общих .col-*,
   и правило для них должно быть здесь.

   Область действия — только [data-content]: секция лотов и форма собраны
   каркасом, свои мобильные правила у них уже есть, и трогать их нечем. */
@media (max-width: 899px) {
  [data-content] .col-3,
  [data-content] .col-4,
  [data-content] .col-5,
  [data-content] .col-6,
  [data-content] .col-7,
  [data-content] .col-8,
  [data-content] .col-9 {
    grid-column: 1 / -1;
  }
}

/* ---------- Заголовок первого экрана на узком экране ----------
   «ПРЕДУСМОТРЕННЫМИ» — шестнадцать букв, которые в дисплейном кегле не
   помещаются в 320 px и уводят весь документ в горизонтальную прокрутку.
   Кегль сжимается по ширине окна, а overflow-wrap остаётся страховкой:
   заголовок связки придёт из xlsx, и длина его слов заранее неизвестна. */
@media (max-width: 599px) {
  #hero .d2 {
    font-size: clamp(1.75rem, 8.4vw, 2.5rem);
    overflow-wrap: anywhere;
  }
}