/* ==========================================================================
   css/pages/home.css
   страничные стили
   ========================================================================== */
/* ===========================================================================
   Главная «/». Владелец файла — tools/gen_home.py (и js/modules/home.js,
   который лишь пересчитывает цифры в уже готовой разметке).

   Общее — кнопки, поля, карточки, образцы RAL, значки — берётся из
   css/components.css и здесь не переопределяется без нужды. Всё страничное
   названо с префиксом `home-`: главная не должна ронять вёрстку каталога,
   если два файла склеятся в неудачном порядке.

   Про специфичность. tools/build_css.py склеивает css/pages/*.css по имени, и
   home.css попадает в общий файл ДО scene.css и product.css. Поэтому там, где
   мы правим чужой компонент (`.scene`, `.select`, `.swatch`), селектор берётся
   двойной — `.home-scene .home-scene__stage`, а не `.home-scene__stage`:
   иначе спор двух правил равной силы решает порядок склейки, то есть случай.

   Цвета — только var(--…) из tokens.css. Единственная внешняя зависимость —
   карта --ral-*, объявленная сейчас в css/pages/catalog.css: на ней держится
   перекраска превью образцами. У каждого обращения есть запасной токен, так
   что без catalog.css страница остаётся рабочей, а не бесцветной.
   =========================================================================== */

/* ====================== ОБЩЕЕ ДЛЯ СЕКЦИЙ ГЛАВНОЙ ====================== */

/* Заголовки секций в макете заметно мельче общего --fs-h2 (30 px): там 20 px
   при ширине 1536, то есть ~19 у нас. Ставим 22 — компромисс: разница с
   макетом в 3 px незаметна, а полный уход на 19 отвязал бы главную от
   остальных страниц сайта, где --fs-h2 менять не наше дело. */
[data-page="home"] .section__title { font-size: clamp(19px, 1.55vw, 22px); }

/* ============================== HERO ============================== */

.home-hero {
  /* Шапка сайта тоже navy — hero продолжает её одним полотном, без шва. */
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  /* В макете сцена доходит до правого края экрана, а текст стоит по
     контейнеру. Поэтому поле слева считаем сами — и от 100% ШИРИНЫ СЕКЦИИ,
     а не от 100vw: 100vw шире клиентской области на полосу прокрутки, и
     правый край сцены вылезал бы за экран горизонтальной прокруткой. */
  padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}

/* Контейнер на hero отменяем: ширину слева уже задал padding секции, а справа
   колонка со сценой обязана дойти до края экрана. */
.home-hero .home-hero__inner {
  max-width: none;
  padding: 0;
  display: grid;
  /* Пропорция из макета: текстовая колонка ≈ треть первого экрана. */
  grid-template-columns: minmax(0, .55fr) minmax(0, 1fr);
  align-items: stretch;
}

.home-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Вертикальные поля hero живут здесь, а не на секции: сцена справа обязана
     идти от шапки до низа блока без полей. */
  padding: var(--s-8) var(--s-6) var(--s-8) 0;
}

.home-hero__eyebrow {
  color: var(--gold);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.home-hero__title {
  /* В макете заголовок 41 px при ширине 1536 — это 38–39 px на наших 1440.
     Общий --fs-hero (до 48 px) делал строку заметно крупнее макета и не давал
     ей уложиться в две строки. */
  font-size: clamp(28px, 2.65vw, 38px);
  line-height: 1.21;
  letter-spacing: -.02em;
  margin-bottom: var(--s-6);
  /* h1 в base.css покрашен в --ink: на тёмном hero это чёрным по тёмному. */
  color: var(--white);
  /* Ширину строки задаёт колонка: в макете заголовок ломается ровно на две
     строки, «Забор, который» и «подходит вашему дому». Своего max-width тут
     быть не должно — он ломал заголовок на третью строку. */
}

.home-hero__points {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
  list-style: none;
}

.home-hero__point {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* В макете обе строки набраны одним кеглем: это не «заголовок + подпись»,
   а одна фраза, разбитая на две строки. Вес отличает только первую. */
.home-hero__point-text {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--line-2);
}
.home-hero__point-text b {
  display: block;
  font-weight: 600;
  color: var(--bg-2);
}

/* Значок в макете — просто золотая линия, без плашки и рамки. */
.home-hero__point-ic {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--gold);
}
.home-hero__point-ic svg { width: 34px; height: 34px; stroke-width: 1.4; }

.home-hero__cta {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

/* Кнопка из макета: 203×47, стрелка в собственном светлом кружке справа.
   Текст оставлен тёмным, а не белым, как в макете: белым по золоту выходит
   2,1:1 — ниже порога WCAG AA, и это единственная кнопка первого экрана. */
.home-hero .home-hero__go {
  /* Высоту кнопки задаёт кружок со стрелкой (26 px), а не строка, — поля
     считаем от него: 9 + 26 + 9 + рамка = 47, ровно как в макете. */
  padding: 9px 14px 9px 22px;
  gap: var(--s-5);
  font-size: 16px;
}
.home-hero__go-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 45%, transparent);
}
.home-hero .home-hero__go-ic svg { width: 17px; height: 17px; }

/* .btn--link по умолчанию navy — на тёмном hero это невидимая кнопка.
   min-height — цель нажатия: у .btn--link нет полей, строка выходит 26 px. */
.home-hero .home-hero__how {
  color: var(--white);
  text-decoration: none;
  gap: var(--s-3);
  min-height: 44px;
  font-size: var(--fs-base);
}
.home-hero .home-hero__how:hover { color: var(--gold); }
.home-hero .home-hero__how svg { width: 26px; height: 26px; color: var(--white); }

/* ============================== СЦЕНА ============================== */

.home-scene {
  position: relative;
  /* Нижняя граница на случай очень короткой текстовой колонки. */
  min-height: 300px;
  /* Скругление и обрезка живут на колонке, а не только на сцене: плашка
     материала прижата к левому краю, и без обрезки её угол торчал бы поверх
     скруглённого угла картинки. */
  border-radius: calc(var(--radius) * 2) 0 0 calc(var(--radius) * 2);
  overflow: hidden;
  /* Цвет полотна на статичном превью. Значение подставляют образцы RAL ниже —
     каскадом, без JavaScript. Запасной токен нужен на случай, если карта
     --ral-* ещё не переехала из catalog.css в tokens.css. */
  --fz-hero-fill: var(--ral-7024, var(--navy-700));
}

/* Сцена в макете занимает hero во всю высоту и уходит за правый край экрана,
   скруглены только левые углы. Поэтому 16:10 из scene.css здесь отменяем:
   высоту задаёт текстовая колонка слева, а не пропорция картинки. */
.home-scene .home-scene__stage {
  /* Абсолютом, а не height: 100%. У колонки высота берётся из соседней
     текстовой, то есть для процентов она «неопределённая», и height: 100%
     схлопывался в auto. Тогда холст 3D-сцены (.scene__canvas, тоже height:
     100%) оставался со своей пиксельной высотой из атрибута и растягивал
     hero на полсотни пикселей при каждой перерисовке. */
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-color: transparent;
  box-shadow: none;
  background: var(--bg-2);
  /* Отдельного токена под такой радиус нет; удвоенный --radius = 28 px и есть
     скругление из макета (28 px при ширине 1536). */
  border-radius: calc(var(--radius) * 2) 0 0 calc(var(--radius) * 2);
}

/* Постер сцены — фотография участка. scene.css знает про `.scene > svg` и
   `.scene > img`, но снимок приходит завёрнутым в <picture> (WebP + запасной
   JPEG), и до <img> внутри те правила не достают. Поэтому раскладку задаём
   здесь: обёртка растянута на весь кадр, картинка кроется по нему. */
.home-scene .home-scene__stage > picture {
  position: absolute;
  inset: 0;
  display: block;
}
.home-scene .home-scene__stage > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Забор на снимке стоит в нижних двух третях: при обрезке высокого кадра
     жертвуем небом, а не оградой. */
  object-position: 50% 60%;
}
/* 3D-сцена не стирает постер — она дописывает холст и ставит контейнеру класс
   is-3d. Для `> svg` и `> img` это предусмотрено в scene.css, для <picture>
   правила там нет: без этой строки фотография осталась бы поверх модели. */
.home-scene .home-scene__stage.is-3d > picture { display: none; }

/* Мягкое затемнение снизу. Плашки «Материал» и «Стоимость за 1 пог. м» лежат
   прямо на снимке, и на светлом участке кадра (щебень, снег, засветка неба)
   их полупрозрачная подложка теряла контраст. Градиент включается только под
   фотографией: у собранной 3D-сцены свой фон, там он не нужен. Указателем
   мыши не ловится — иначе съел бы вращение модели. */
.home-scene .home-scene__stage:has(> picture):not(.is-3d)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(to top,
              color-mix(in srgb, var(--navy-900) 62%, transparent), transparent);
}

/* Подсказка про 3D. Живёт этажом выше контейнера сцены: configurator-3d.js
   переписывает его содержимое целиком и стёр бы её вместе с превью. */
.home-scene__msg {
  position: absolute;
  top: var(--s-6);
  /* Смещена от левого края сцены, как в макете: у самого края она читается
     как часть интерфейса страницы, а не как подпись к картинке. */
  left: 22%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: min(40ch, calc(100% - 24%));
  margin: 0;
  padding: 10px 16px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--line-2);
  background: var(--navy-900);
  background: color-mix(in srgb, var(--navy-900) 82%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  pointer-events: none;
}
/* Собственная подсказка сцены (scene.css, .scene__hint) на главной лишняя:
   она говорит то же самое, но стоит слева внизу — ровно там, где в макете
   плашка материала, и они наезжали друг на друга. */
.home-scene .scene__hint { display: none; }

.home-scene__msg b { display: block; font-size: var(--fs-sm); color: var(--white); }
.home-scene__msg-ic { display: grid; place-items: center; flex: none; color: var(--white); }
.home-scene__msg-ic svg { width: 22px; height: 22px; }

/* Плашка материала и цена лежат на сцене, как в макете. Обе — в одной
   абсолютной полосе: два независимых absolute'а наезжали друг на друга, как
   только у системы появлялось длинное название или лишний образец.

   Слева полоса прижата к самому краю сцены (так в макете), справа отступает
   на --s-8: это та же величина, на которой от края экрана стоит контейнер
   страницы, — плашка цены встаёт в одну линию с карточкой расчёта под hero. */
.home-scene__bar {
  position: absolute;
  left: 0;
  /* Правый край плашки цены встаёт по правому краю контейнера страницы —
     в одну линию с карточкой расчёта под hero, как в макете. 100vw здесь
     безопасен: увеличение отступа справа сужает полосу, а не расширяет её. */
  right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  bottom: var(--s-3);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.home-scene__panel,
.home-scene__price {
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  background: var(--navy-900);
  background: color-mix(in srgb, var(--navy-900) 84%, transparent);
  box-shadow: var(--shadow);
  min-width: 0;
}

.home-scene__panel {
  display: flex;
  align-items: center;
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  gap: var(--s-5);
  flex-wrap: wrap;
  /* Левый край уходит под срез сцены — как в макете, где плашка «выезжает»
     за картинку. Скругление остаётся только справа. */
  border-radius: 0 var(--radius) var(--radius) 0;
}

.home-scene__panel-head {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--line-2);
  line-height: 1.3;
}
.home-scene__panel-head b {
  display: block;
  font-size: var(--fs-sm);
  color: var(--white);
}

.home-scene .home-scene__swatches { gap: 8px; }
.home-scene .home-scene__swatches .swatch {
  width: 36px;
  height: 36px;
  /* На тёмной плашке образцы разделяет светлый кант, как в макете: без него
     чёрный RAL 9005 сливается с подложкой в одно пятно. */
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--white) 65%, transparent);
}
/* «Ещё цвета» в макете — не цветовое колесо, а спокойная плашка с плюсом:
   на тёмной полосе радужный кружок перетягивает внимание с самих образцов. */
.home-scene .home-scene__swatches .swatch--more {
  background: color-mix(in srgb, var(--white) 16%, transparent);
  color: var(--white);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.home-scene .home-scene__swatches .swatch--more::after { content: "+"; }

.home-scene .home-scene__swatches .swatch-box input:checked + .swatch {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}

.home-scene__price {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0;
  color: var(--line-2);
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.home-scene__price b {
  display: block;
  font-size: 21px;
  color: var(--white);
  white-space: nowrap;
}
.home-scene__price-info { color: var(--line-2); display: inline-flex; }
.home-scene__price-info:hover { color: var(--gold); }
.home-scene__price-info svg { width: 20px; height: 20px; }

/* Образцы RAL перекрашивают превью каскадом: :has() ловит выбранную
   радиокнопку и подменяет --fz-hero-fill. Это единственный способ дать
   рабочий выбор цвета посетителю с выключенным JavaScript. */
.home-scene:has(input[name="ral"][value="7024"]:checked) { --fz-hero-fill: var(--ral-7024, var(--navy-700)); }
.home-scene:has(input[name="ral"][value="9005"]:checked) { --fz-hero-fill: var(--ral-9005, var(--navy-900)); }
.home-scene:has(input[name="ral"][value="7016"]:checked) { --fz-hero-fill: var(--ral-7016, var(--navy-700)); }
.home-scene:has(input[name="ral"][value="8017"]:checked) { --fz-hero-fill: var(--ral-8017, var(--navy-700)); }
.home-scene:has(input[name="ral"][value="6005"]:checked) { --fz-hero-fill: var(--ral-6005, var(--sage)); }
.home-scene:has(input[name="ral"][value="3005"]:checked) { --fz-hero-fill: var(--ral-3005, var(--navy-700)); }
.home-scene:has(input[name="ral"][value="5005"]:checked) { --fz-hero-fill: var(--ral-5005, var(--navy-700)); }
.home-scene:has(input[name="ral"][value="1014"]:checked) { --fz-hero-fill: var(--ral-1014, var(--gold-100)); }
.home-scene:has(input[name="ral"][value="9003"]:checked) { --fz-hero-fill: var(--ral-9003, var(--white)); }
.home-scene:has(input[name="ral"][value="6020"]:checked) { --fz-hero-fill: var(--ral-6020, var(--sage)); }
.home-scene:has(input[name="ral"][value="8019"]:checked) { --fz-hero-fill: var(--ral-8019, var(--navy-700)); }
.home-scene:has(input[name="ral"][value="zn"]:checked)   { --fz-hero-fill: var(--ral-zn, var(--muted-2)); }

/* ============================== БЫСТРЫЙ РАСЧЁТ ============================== */

/* В макете карточка стоит ПОД hero, а не заезжает на него: между тёмным
   блоком и белой полосой ровно 15 px. */
.home-quick-band { padding: var(--s-4) 0 0; }

.home-quick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 0;
  padding: 0;
  align-items: stretch;
  /* Итоговая плашка справа доходит до самого края карточки, включая
     скруглённые углы, — поэтому карточка обрезает содержимое по своей форме. */
  overflow: hidden;
}

/* Пять полей в одну строку, без переноса.

   Тонкость, на которой строка расчёта ломалась дважды. Собственная ширина
   <select> определяется самым длинным вариантом списка («Металл под дерево»),
   а не выбранным значением. Поэтому:

   • при flex-wrap: wrap поля вставали в две строки, хотя видимые значения
     занимают заметно меньше места, чем скрытые варианты;
   • при flex-basis: auto браузер ужимал поля пропорционально их «длинным»
     основам и резал многоточием «Распашные 4 м», где резать нечего.

   Отсюда nowrap и flex-basis: 0 — ширина делится не по содержимому списков,
   а поровну, как в макете. На узких экранах перенос включается медиазапросом. */
.home-quick__fields {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
  padding: var(--s-4) var(--s-5);
}

.home-quick__field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 0;
  min-width: 0;
  padding: 0 var(--s-3);
  border-right: 1px solid var(--line);
}
.home-quick__field:first-child { padding-left: 0; }
.home-quick__field:last-child { border-right: 0; padding-right: 0; }

/* Ширину раздаём по потребности, а не поровну.

   Считать на глаз тут нельзя: Chromium не сообщает переполнение <select> —
   scrollWidth равен clientWidth даже там, где многоточие видно. Меряли текст
   самого длинного варианта через canvas в шрифте поля (measure.mjs), при
   контейнере 1280 px:

     длина «200 м»            67 + подпись 83  → полю нужно 139
     высота «2,0 м»           61 + подпись 44  → 117
     материал «Металл под дерево» 177          → 233
     ворота «Распашные»      114               → 170
     калитка «Есть»           57               → 113

   (+56 px на иконку 44 и отступ 12). Поровну каждому доставалось 118–126 —
   материал резался на ЛЮБОЙ ширине, а длина, высота и калитка держали пустоту.
   Коэффициенты ниже пропорциональны этим потребностям, с запасом: на 1280 они
   дают 157 / 131 / 262 / 190 / 131. Подписи «Длина забора» (83) шире своих
   значений — поэтому у длины тир выше, чем у высоты и калитки. */
.home-quick__field--xwide { flex-grow: 2; }
.home-quick__field--wide { flex-grow: 1.45; }
.home-quick__field--mid { flex-grow: 1.2; }
.home-quick__field--narrow { flex-grow: 1; }

.home-quick__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.home-quick__ic svg { width: 25px; height: 25px; stroke-width: 1.5; }

/* Коробка растягивается на всё поле: без flex она осталась бы шириной по
   содержимому, поле выросло бы, а значение всё равно обрезалось. */
.home-quick__box { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 1px; }

.home-quick__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}

/* Поле-значение из макета: рамки нет, есть только само значение и шеврон —
   он и объясняет, что значение можно поменять. */
.home-quick .home-quick__select {
  border: 0;
  background-color: transparent;
  padding: 0 20px 0 0;
  background-position: right 0 center;
  background-size: 15px;
  /* Значение в макете крупное (18,7 px при 1536 — это 17,5 у нас): главная
     цифра поля, а подпись над ним только называет её. Ставим 16: при нынешнем
     контейнере 1280 пять равных колонок дают под значение 124 px, и на 17,5
     «Профнастил» уже уезжал в многоточие. Вернуть 17,5 можно, когда контейнер
     станет 1360, как в макете. */
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  text-overflow: ellipsis;
}
.home-quick .home-quick__select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: var(--radius-xs);
}

/* Плашка итога — она же кнопка отправки формы: в макете справа просто блок с
   суммой, но без JavaScript расчёту нужно куда-то вести. Поэтому вид плашки,
   поведение кнопки. */
.home-quick .home-quick__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--s-3) var(--s-5);
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--sage-50);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background var(--dur);
}
.home-quick .home-quick__result:hover { background: color-mix(in srgb, var(--sage-50) 70%, var(--white)); }
.home-quick .home-quick__result:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* Строк в плашке стало четыре: к заголовку, оговорке и сумме добавилась
   подпись действия. Кегли оставляем прежними — они и рассчитаны на плотную
   посадку в высоту строки полей. */
.home-quick__result-title { font-weight: 800; font-size: 14px; line-height: 1.3; color: var(--ink); }
.home-quick__result-note { font-size: 11.5px; line-height: 1.3; color: var(--muted); font-weight: 600; }

.home-quick__total {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--sage);
  margin-top: var(--s-1);
  /* Цена перерисовывается на каждое изменение поля — на длинных суммах
     строка не должна прыгать по ширине и дёргать соседей. */
  font-variant-numeric: tabular-nums;
}

/* Подпись действия читаемым текстом, а не одной стрелкой в углу.
   Раньше слово «Уточнить расчёт» лежало под visually-hidden, и у расчёта не
   оставалось видимой кнопки «дальше»: сумма выглядела концом сценария. */
.home-quick__result-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-1);
  color: var(--sage);
  font-size: var(--fs-xs);
  font-weight: 800;
  transition: transform var(--dur);
}
.home-quick__result-go svg { width: 16px; height: 16px; flex: none; }
.home-quick__result:hover .home-quick__result-go { transform: translateX(3px); }

/* Оговорки в макете нет вовсе, но без неё расчёт превращается в оферту.
   Держим её в две строки, а не в три: 120ch — предел читаемой строки, дальше
   глаз теряет начало следующей. */
.home-quick__disclaimer {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--muted);
  max-width: 120ch;
}

/* ============================== ПОЛОСА ДОВЕРИЯ ============================== */

/* Полоса стоит сразу под категориями, отступ между ними в макете 21 px. */
.home-trust-band { padding: 0 0 var(--s-9); }

/* Четыре колонки, а не пять: в пятой стоял «Монтаж 1–2 дня», уехавший в этапы,
   а формулировка доставки одна на весь сайт (partials.DELIVERY_SHORT) и в
   190 px пятой колонки не помещалась — ломалась на три строки и разрывала
   полосу по высоте. */
.home-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  padding: var(--s-6) var(--s-5);
}

.home-trust__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.4;
}
.home-trust__item b { display: block; font-size: var(--fs-sm); color: var(--ink); }

/* Значки в макете тёмные, а не золотые: золото на белой полосе спорит с
   кнопкой первого экрана, а полоса здесь — фон, не акцент. */
.home-trust__ic { color: var(--navy); flex: none; }
.home-trust__ic svg { width: 30px; height: 30px; stroke-width: 1.5; }

/* ============================== КАТЕГОРИИ ============================== */

.home-cats-band { padding: var(--s-7) 0 var(--s-6); }

/* В макете у секции только заголовок — ни лида, ни кнопки-«таблетки»:
   карточки и есть содержание, а ссылка на каталог стоит текстом справа. */
.home-cats__head { align-items: baseline; margin-bottom: var(--s-4); }
.home-cats__head .section__title { margin-bottom: 0; }
.home-cats__all { color: var(--muted); text-decoration: none; font-size: var(--fs-sm); }
.home-cats__all:hover { color: var(--navy); }
.home-cats__all svg { width: 16px; height: 16px; }

.home-cats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-5);
}

.home-cat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
}

/* Картинка в макете утоплена в карточку со всех сторон и сама скруглена —
   карточка выглядит как рамка вокруг фотографии, а не как плитка с шапкой. */
.home-cat__art {
  display: block;
  position: relative;
  line-height: 0;
  padding: var(--s-2);
}
.home-cat__art svg,
.home-cat__art img {
  display: block;
  width: 100%;
  /* Кадр в макете панорамный, 2,9:1. Арты нарисованы 16:10, поэтому берём
     компромиссные 2:1 и режем сверху (art.card(anchor="YMax")): выше верха
     полотна там только пустое небо. */
  aspect-ratio: 2 / 1;
  /* height: auto перебивает атрибут height у <img> — без него браузер взял бы
     640 px из разметки и карточка с фотографией стала бы вдвое выше соседней
     с артом. Ряд обязан быть ровным независимо от того, снят кадр или нарисован. */
  height: auto;
  border-radius: var(--radius-xs);
  background: var(--bg-2);
}

/* Фотография 3:2 в кадре 2:1: срезаем не поровну, а больше сверху. Внизу
   снимка линия земли и основания столбов — то, по чему забор узнаётся;
   сверху почти всегда небо. Тот же приём, что anchor="YMax" у артов. */
.home-cat__art img { object-fit: cover; object-position: 50% 62%; }
/* <picture> — инлайновая обёртка: без block под ней остаётся щель от базовой
   линии, и картинка перестаёт совпадать с рамкой карточки. */
.home-cat__art picture { display: block; }

/* «Предварительно» — на картинке, а не в заголовке: в заголовке значок
   переносил строку, и карточки в ряду переставали совпадать по высоте. */
.home-cat__flag { position: absolute; top: var(--s-4); left: var(--s-4); }

.home-cat__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px var(--s-3);
  padding: var(--s-2) var(--s-4) var(--s-4);
  flex: 1;
}

.home-cat__title {
  grid-column: 1;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
}

.home-cat__price {
  grid-column: 1;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Шеврон в макете — тонкая стрелка без подложки, справа от названия. */
.home-cat__go {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--muted-2);
  transition: color var(--dur), transform var(--dur);
}
.home-cat__go svg { width: 20px; height: 20px; stroke-width: 1.6; }
.home-cat:hover .home-cat__go { color: var(--navy); transform: translateX(3px); }
.home-cat:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ============================== ЦЕНЫ ============================== */

/* Блок с якорем #prices — тот, на который ведут пункт меню «Цены» и подвал.
   Таблица собрана из общего компонента `.table`: свой набор правил для
   четырёх колонок здесь не нужен, отличаются только ширины и подпись
   «что посчитано». */

/* Якорь: шапка на главной не прилипшая, но ссылка «Цены» приходит из меню, и
   заголовок не должен упираться в верхний край окна. */
[data-page="home"] #prices { scroll-margin-top: var(--s-6); }

/* Полоса «что входит в цену». Три пункта на всю ширину: это ответ на первый
   вопрос к любому прайсу, и он обязан стоять ДО таблицы, а не сноской под ней. */
.home-prices__inc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4) var(--s-6);
  list-style: none;
  margin-bottom: var(--s-5);
}

.home-prices__inc-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--muted);
}
.home-prices__inc-item b { display: block; color: var(--ink); }

.home-prices__inc-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--sage);
  border-radius: var(--radius-sm);
  background: var(--sage-50);
}
.home-prices__inc-ic svg { width: 19px; height: 19px; stroke-width: 1.6; }

/* Карточка вокруг таблицы: строки прайса должны читаться как один блок, а не
   висеть на белом фоне секции. Поля даёт сама таблица. */
.home-prices { padding: var(--s-2) var(--s-4); }

/* Строки прайса плотнее общих 11 px: в ячейке «что посчитано» две строки
   текста, и на шести системах общий воздух вырастал в лишний пол-экрана. */
.home-prices .table td { padding-top: 9px; padding-bottom: 9px; }

/* Колонка с системой узкая: это подпись строки, а не колонка данных. Верхнее
   выравнивание — общее с ячейками: в `.table` его задают только td, и заголовок
   строки повисал по центру высокой ячейки «что посчитано». */
.home-prices .table th { vertical-align: top; }
.home-prices .home-prices__sys { white-space: normal; width: 1%; }
.home-prices__sys a { color: var(--ink); font-weight: 700; text-transform: none;
  font-size: var(--fs-sm); letter-spacing: 0; }
.home-prices__sys a:hover { color: var(--navy); text-decoration: underline; }
.home-prices__sys .badge { display: block; margin-top: 4px; }

/* Цена метра — главное число строки: по нему сравнивают системы. Цена участка
   рядом остаётся обычной, иначе в строке два акцента и ни одного главного. */
.home-prices .home-prices__money { font-weight: 800; color: var(--ink); font-size: var(--fs-base); }

/* «Что посчитано» — расшифровка, а не второй заголовок: тише и мельче цены,
   но не серее порога читаемости. Ширину отдаём ей: остальные три колонки
   узкие, и без явной доли она сжималась в столбик по слову. */
.home-prices .home-prices__basis {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
  width: 46%;
}

.home-prices__note {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
  max-width: 120ch;
}
.home-prices__note svg { width: 18px; height: 18px; flex: none; color: var(--muted-2); }
.home-prices__note a { color: var(--navy); }

@media (max-width: 1000px) {
  .home-prices__inc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ниже тысячи таблица уже не помещается по ширине — table-wrap включает
     горизонтальную прокрутку, и колонкам нужен минимум, иначе браузер сожмёт
     «Что посчитано» в лапшу по одному слову. */
  .home-prices .home-prices__basis { width: auto; min-width: 32ch; }
}

@media (max-width: 760px) {
  .home-prices__inc { grid-template-columns: minmax(0, 1fr); }

  /* На телефоне четыре колонки не помещаются никак, а горизонтальная прокрутка
     уносит за край экрана ровно ту ячейку, ради которой блок и сделан, —
     «что посчитано». Поэтому строка прайса разворачивается в карточку:
     название, две цены с подписями, расшифровка. Таблица остаётся таблицей
     в разметке (и для экранного диктора), меняется только раскладка. */
  .home-prices .home-prices__table,
  .home-prices .home-prices__table tbody,
  .home-prices .home-prices__table tr,
  .home-prices .home-prices__table th,
  .home-prices .home-prices__table td { display: block; width: auto; }
  .home-prices .home-prices__table thead { display: none; }

  .home-prices .home-prices__table tr {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
  }
  .home-prices .home-prices__table tr:last-child { border-bottom: 0; }
  .home-prices .home-prices__table td { border-bottom: 0; padding: 2px 0; }
  .home-prices .home-prices__sys { padding: 0 0 var(--s-2); }
  .home-prices .home-prices__sys .badge { display: inline-block; margin: 4px 0 0; }

  /* Цены встают в строку и подписываются: без шапки «от 1 919 ₽» и
     «от 95 964 ₽» друг под другом — просто два числа без объяснения. */
  .home-prices .table .num { text-align: left; }
  .home-prices .home-prices__table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--muted);
  }
  .home-prices .home-prices__basis { min-width: 0; padding-top: var(--s-2); }
}

/* ============================== ПРЕИМУЩЕСТВА ============================== */

.home-adv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-8);
}

.home-adv__item { display: flex; gap: var(--s-4); }
.home-adv__item h3 { margin-bottom: var(--s-2); }
.home-adv__item p { color: var(--muted); font-size: var(--fs-sm); }

.home-adv__ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  color: var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold-100);
}
.home-adv__ic svg { width: 26px; height: 26px; }

/* ============================== ЭТАПЫ ============================== */

.home-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-5);
  list-style: none;
  counter-reset: none;
}

.home-step {
  position: relative;
  padding-top: var(--s-6);
  border-top: 3px solid var(--line);
}
/* Пройденную часть подсвечивает золотом первый шаг — взгляд начинает слева. */
.home-step:first-child { border-top-color: var(--gold); }

.home-step__n {
  position: absolute;
  top: calc(var(--s-6) * -1);
  left: 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  /* Номер шага набран цветом ГРАНИЦЫ (--line-2) — 1,3:1 на полотне: цифры
     «1 2 3 4 5» над заголовком «Как это работает — 5 шагов» почти не видно.
     Крупному жирному тексту хватает 3:1, и ровно для этого в токенах лежит
     --muted-2 (3,64:1) — призрачность сохраняется, цифра появляется. */
  color: var(--muted-2);
}

.home-step__title { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.home-step p { color: var(--muted); font-size: var(--fs-sm); }

/* Срок этапа (partials.TERMS). Отдельной строкой между заголовком и описанием:
   это то, ради чего раздел читают, и в общем сером тексте он терялся. Цвет —
   navy, а не золото: золотом набранный текст на белом даёт около 2,8:1, ниже
   порога читаемости. */
.home-step__term {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--s-2);
}
.home-steps .home-step__term { font-size: var(--fs-sm); }

/* ============================== ПРОЕКТЫ ============================== */

.home-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.home-project { display: flex; flex-direction: column; overflow: hidden; }
.home-project__art { line-height: 0; background: var(--bg-2); }
/* Кадр панорамный, как у карточек категорий: арты нарисованы 16:10, и в полный
   рост три подряд забирали полтораста пикселей высоты страницы, ничего к ней не
   добавляя, — те же заборы нарисованы выше, в категориях. Режет сам SVG:
   у него preserveAspectRatio="slice", а art.card(anchor="YMax") прижимает
   картинку к низу, чтобы срезалось небо, а не линия земли. */
.home-project__art svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
}

.home-project__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  flex: 1;
}

.home-project__title a { color: var(--ink); }
.home-project__title a:hover { color: var(--navy); text-decoration: underline; }
.home-project__sub { color: var(--muted); font-size: var(--fs-sm); }

.home-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin-bottom: var(--s-2);
}
.home-project__tags li {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.home-project__price {
  margin-top: auto;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.home-project__price small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}

/* ============================== КЕЙСЫ ============================== */

.home-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.home-case { border-top: 3px solid var(--gold); }
.home-case__title { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.home-case p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.home-case b { color: var(--ink); }

/* ============================== АДАПТИВ ============================== */

@media (max-width: 1180px) {
  .home-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
  /* Четыре пункта в три колонки дают ряд 3 + 1 — полоса перестаёт быть
     полосой. Ниже 1180 они встают в две ровные пары. */
  .home-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Строка расчёта переносится, и итог встаёт снизу во всю ширину. */
  .home-quick { grid-template-columns: minmax(0, 1fr); }
  .home-quick .home-quick__result { border-left: 0; border-top: 1px solid var(--line); }
  .home-quick__fields { flex-wrap: wrap; gap: var(--s-3) 0; }
  /* Основа по длине значений, а не общие 210 px на всех. Замер по ширинам
     320–1600: при равных полях «Металл под дерево» не помещалось на всей полосе
     520–1160 (не хватало до 83 px), а «Длина» и «Высота» держали пустоту. */
  .home-quick__field { flex: 1 1 150px; }
  .home-quick__field--xwide { flex: 2 1 260px; }
  .home-quick__field--wide { flex: 1 1 200px; }

  /* Плашки на узкой сцене переносятся в две строки, но остаются на картинке:
     сцена здесь ещё занимает половину hero и растянута абсолютом, так что
     статичной полосе внутри неё лечь просто некуда — она ложилась поверх
     подсказки и закрывала забор. */
  .home-scene__price { justify-content: space-between; }
  .home-scene__msg { left: var(--s-4); max-width: calc(100% - var(--s-8)); }
}

@media (max-width: 1000px) {
  /* Одна колонка: сцена больше не «уезжает» вправо, значит и поле справа
     возвращается, и скругление у неё снова со всех сторон. */
  .home-hero { padding-left: 0; padding-bottom: var(--s-8); }
  .home-hero .home-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .home-hero__text { padding: var(--s-8) 0 0; }
  .home-hero__title { max-width: none; }
  .home-scene { border-radius: var(--radius); min-height: 0; overflow: visible; }
  .home-scene .home-scene__stage { position: static; border-radius: var(--radius); aspect-ratio: 16 / 10; }

  /* Плашки съехали из-под сцены вниз (см. ниже), и затемнять ради них низ
     снимка больше незачем — оно только съедало бы забор. */
  .home-scene .home-scene__stage:has(> picture):not(.is-3d)::after { content: none; }

  /* Сцена снова обычной высоты — плашки выходят из-под абсолюта и встают под
     ней: на одной колонке они закрывали бы сам забор, ради которого она есть. */
  .home-scene__bar {
    position: static;
    margin-top: var(--s-3);
    align-items: stretch;
  }
  .home-scene__panel,
  .home-scene__price {
    background: var(--navy-900);
    flex: 1 1 240px;
    border-radius: var(--radius);
  }
  .home-scene__panel { border-radius: var(--radius); }
  .home-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-projects,
  .home-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .home-quick-band { padding-top: var(--s-6); }
  .home-quick__field { flex: 1 1 150px; border-right: 0; padding: 0; }
  .home-cats,
  .home-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-steps { grid-template-columns: minmax(0, 1fr); }
  .home-adv,
  .home-projects,
  .home-cases { grid-template-columns: minmax(0, 1fr); }
  .home-hero__cta .btn { width: 100%; }
  .home-hero__cta .home-hero__how { width: auto; }
  .home-hero .home-hero__go { justify-content: space-between; }
}

/* Ниже 820 строка расчёта встаёт в две колонки, и половины не хватает даже
   материалу: «Металл под дерево» требует 233 px вместе с иконкой и стрелкой,
   а колонка даёт 204. Отдаём ему строку целиком — прочитать выбранное важнее
   ровной сетки.

   Блок стоит ПОСЛЕ медиазапроса 760: тот задаёт основу всем полям сразу и по
   порядку перебивал это правило. */
@media (max-width: 820px) {
  .home-quick__field--xwide { flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .home-quick__field { flex: 1 1 100%; }
  .home-cats { grid-template-columns: minmax(0, 1fr); }
  .home-trust { grid-template-columns: minmax(0, 1fr); }
}

/* Печать: тёмный hero съедает картридж и ничего не сообщает на бумаге. */
@media print {
  .home-hero { background: none; color: var(--ink); padding: 0 0 var(--s-6); }
  .home-hero__point-text, .home-hero__point-text b { color: var(--ink-2); }
  .home-hero__title { color: var(--ink); }
  .home-hero__cta, .home-scene__msg { display: none; }
  .home-scene__bar { position: static; margin-top: var(--s-3); }
  .home-scene__panel, .home-scene__price { background: none; box-shadow: none; }
  .home-scene__panel-head b, .home-scene__price b { color: var(--ink); }
}

/* Юридическая часть подписи под расчётом. В макете подписи нет вовсе, но
   «не является публичной офертой» обязано стоять рядом с ценой. Компромисс:
   поясняющая фраза видна всегда, юридическая — на строку ниже и тише. */
/* Тот же случай: юридическая приписка — это текст, а не неактивный элемент.
   На --muted-2 выходило 3,37:1. */
.home-quick__legal { display: block; color: var(--muted); font-size: var(--fs-xs); }