/* ==========================================================================
   css/pages/landing.css
   страничные стили
   ========================================================================== */
/* ===========================================================================
   Страничное оформление SEO-посадочных (tools/gen_landings.py) и служебных
   страниц (tools/gen_legal.py). Один файл на двух владельцев: страницы
   родственные — длинный текст, таблицы и карточки, — и держать для них два
   почти одинаковых файла значит однажды поправить только один.

   Всё оформление идёт от токенов css/tokens.css: сырых цветов и магических
   пикселей здесь нет. Разметка сама по себе читаема и без этого файла —
   сетки и карточки лишь расставляют её по местам.

   Область действия задаётся классом на <main>: `.landing` и `.legal`.
   Так локальные имена вроде `.ic` не утекают на чужие страницы.
   =========================================================================== */

/* Иконки line-art приходят из tools/art.py с классом .ic. Размер задаём
   здесь: в components.css у .ic владельца нет, каждая страница ставит свой. */
.landing .ic,
.legal .ic { width: 18px; height: 18px; flex: none; }

/* ============================== ПОСАДОЧНАЯ: ШАПКА ============================== */

.landing-hero { padding-top: var(--s-6); }
.landing-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--s-8);
  align-items: start;
}
/* Надзаголовок. Золотом набирать его нельзя: --gold-600 на светлом полотне
   даёт контраст около 2,6:1, а это мелкий текст — нужно 4,5:1. Поэтому текст
   тёмный, а фирменный цвет остаётся в декоративном штрихе перед ним. */
.landing-hero__kicker {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-3);
}
.landing-hero__kicker::before {
  content: ''; flex: none; width: 20px; height: 3px;
  border-radius: 2px; background: var(--gold);
}
.landing-hero h1 { margin-bottom: var(--s-4); }
.landing-hero__lead { color: var(--ink-2); font-size: 16.5px; max-width: 62ch; }

.landing-facts {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-4); margin: var(--s-6) 0;
}
.landing-facts__item { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); }
.landing-facts__item b { display: block; color: var(--ink); font-weight: 800; }
.landing-facts__ic {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--gold-100); color: var(--gold-600);
}

.landing-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.landing-hero__side { display: flex; flex-direction: column; gap: var(--s-4); }
.landing-hero__art {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--bg-2);
}
.landing-hero__art svg { width: 100%; height: auto; aspect-ratio: 16 / 10; }

/* Фотография системы вместо арта. Снимок приходит как <picture> (WebP плюс
   запасной JPEG) с проставленными width/height — их надо перебить, иначе в
   разметке останется жёсткие 1600×900 и кадр перестанет тянуться по колонке.

   height: 100% — для случая, когда шапка встала в ряд (см. адаптив ниже) и
   высоту задаёт соседняя плашка цены: снимок обязан заполнить её ровно, без
   полосы фона снизу. Когда высота колонки не задана, проценты не считаются и
   размер берёт на себя aspect-ratio — кадр 16:9, каким его и сняли. */
.landing-hero__art picture { display: block; height: 100%; }
.landing-hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Низ кадра информативнее верха: там линия земли и основания столбов. */
  object-position: 50% 60%;
}

/* --- плашка цены «от» --- */
.landing-price { border-top: 3px solid var(--gold); }
.landing-price__label {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.landing-price__value {
  font-size: 32px; font-weight: 800; letter-spacing: -.02em;
  margin: var(--s-2) 0 var(--s-4); font-variant-numeric: tabular-nums;
}
.landing-price__value small {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted); letter-spacing: 0;
}
/* Конфигурация под ценой «от»: за что именно посчитано число. Две колонки —
   подпись и значение: так строка читается как строка сметы, а не как текст. */
.landing-price__config {
  display: grid; gap: var(--s-2); margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.landing-price__config > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s-2); align-items: baseline;
}
.landing-price__config dt { color: var(--muted); }
.landing-price__config dd { color: var(--ink); font-weight: 600; }

.landing-price__list { list-style: none; display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.landing-price__list li { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--ink-2); }
.landing-price__list .ic { color: var(--sage); margin-top: 2px; }
.landing-price__note {
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--muted);
}
/* Ссылка на самый доступный товар системы — единственная в сноске, и она
   обязана читаться как ссылка: ею страница мирится с ценой в каталоге. */
.landing-price__note a { color: var(--ink); font-weight: 700; text-decoration: underline; }
.landing-price__note a:hover { color: var(--gold-600); }

/* ============================== ПОСАДОЧНАЯ: ЦЕНЫ ============================== */

/* Первый столбец матрицы — заголовок строки (<th scope="row">). Общий стиль
   .table th рассчитан на шапку: капс и мелкий кегль. Возвращаем нормальный
   вид, иначе «Высота 1,50 м» читается как служебная подпись. */
.landing-matrix { min-width: 640px; }
.landing-matrix tbody th {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-base);
  color: var(--ink); font-weight: 700; white-space: normal;
}
.landing-matrix thead th.num { text-align: right; }
/* Подпись колонки: чем эта комплектация отличается. Набирается строчными —
   капс шапки на составе читался бы как второй заголовок. */
.landing-matrix thead th small {
  display: block; margin-top: 4px; max-width: 15rem; margin-left: auto;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.35;
  text-transform: none; letter-spacing: 0; color: var(--muted); white-space: normal;
}
.landing-matrix tbody tr:nth-child(even) { background: var(--bg); }
.landing-matrix tfoot th {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-sm);
  color: var(--ink); font-weight: 800; white-space: normal;
  background: var(--bg-2); border-bottom: 0;
}
.landing-matrix tfoot td { background: var(--bg-2); font-weight: 800; border-bottom: 0; }

.landing-note {
  display: flex; gap: var(--s-3); margin-top: var(--s-4);
  font-size: var(--fs-sm); color: var(--muted); max-width: 92ch;
}
.landing-note .ic { color: var(--gold-600); margin-top: 3px; }

/* --- состав комплектаций --- */
.landing-grades__title { margin: var(--s-7) 0 var(--s-2); font-size: var(--fs-h3); }
.landing-legend {
  display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--muted); max-width: 92ch;
}
.landing-legend .ic { color: var(--gold-600); margin-top: 3px; flex: 0 0 auto; }
.landing-grades {
  display: grid; gap: var(--s-4); margin-top: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.landing-grade__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.landing-grade__price {
  font-weight: 800; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.landing-grade__price small { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.landing-grade__specs { display: grid; grid-template-columns: 1fr; gap: var(--s-3); font-size: var(--fs-sm); }
.landing-grade__specs dt {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.landing-grade__specs dd { color: var(--ink-2); margin-top: 2px; }
/* Отличие от базовой комплектации — золотая отчёрка и основной цвет. Общие
   строки остаются как были: гасить их сильнее нельзя, состав читают целиком. */
.landing-grade__spec.is-diff {
  padding-left: var(--s-3); border-left: 3px solid var(--gold);
}
.landing-grade__spec.is-diff dt { color: var(--ink-2); }
.landing-grade__spec.is-diff dd { color: var(--ink); font-weight: 600; }

/* ============================== ПОСАДОЧНАЯ: ТОВАРЫ ============================== */

.landing-products__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr));
}
.landing-products__sub { margin: var(--s-8) 0 var(--s-2); font-size: var(--fs-h3); }
.landing-products__note { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--s-4); max-width: 72ch; }

.landing-card__sub { font-size: var(--fs-sm); color: var(--muted); }
/* Арт категории рисуется в пропорции 16:10 — та же, что у .product-card__media,
   поэтому карточки в ряду не пляшут по высоте. */
.landing-card .product-card__media svg { width: 100%; height: 100%; }

/* Плитка «своя конфигурация» встаёт в тот же ряд, что и карточки товаров:
   ряд из одной карточки выглядит как недогруженная страница. */
.landing-tile {
  display: flex; flex-direction: column; gap: var(--s-3);
  border: 1px dashed var(--line-2); background: var(--bg-2);
}
.landing-tile__ic {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--radius-sm); background: var(--white); color: var(--gold-600);
}
.landing-tile p { color: var(--ink-2); font-size: var(--fs-sm); flex: 1; }

/* ============================== ПОСАДОЧНАЯ: ТЕКСТ ============================== */

.landing-h2 { margin-top: var(--s-9); }

/* Три колонки жёстко, а не auto-fit: пунктов состава обычно пять, и при
   четырёх колонках последний остаётся один в строке. Три плюс два читается
   как осознанная раскладка, а текст в широкой колонке — лучше. */
.landing-parts {
  display: grid; gap: var(--s-5) var(--s-6); margin-top: var(--s-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.landing-part {
  padding-left: var(--s-4); border-left: 3px solid var(--gold);
}
.landing-part h3 { font-size: 16px; margin-bottom: var(--s-2); }
.landing-part p { color: var(--ink-2); font-size: var(--fs-sm); }

.landing-cols {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-8); margin-top: var(--s-9); align-items: start;
}
.landing-cols__text { max-width: none; }

.landing-fit { display: grid; gap: var(--s-4); }
.landing-fit__box { padding: var(--s-5); border-radius: var(--radius); border: 1px solid var(--line); }
.landing-fit__box h3 { font-size: 16px; margin-bottom: var(--s-3); }
.landing-fit__box ul { list-style: none; display: grid; gap: var(--s-2); }
.landing-fit__box li { display: flex; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-2); }
.landing-fit__box li .ic { margin-top: 2px; }
.landing-fit__box--yes { background: var(--sage-50); border-color: var(--line); }
/* Рамка «подходит» — разбавленный успех из токенов. Сырого hex в файле быть
   не должно, поэтому оттенок получаем подмешиванием, а не подбором цвета. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .landing-fit__box--yes { border-color: color-mix(in srgb, var(--sage) 30%, var(--white)); }
}
.landing-fit__box--yes .ic { color: var(--sage); }
.landing-fit__box--no { background: var(--bg-2); }
.landing-fit__box--no .ic { color: var(--muted-2); }

.landing-life { min-width: 520px; }
.landing-life td:nth-child(2) { font-weight: 700; }

/* Нумерация «на что смотреть» — счётчиком, а не цифрами в тексте:
   при вставке пункта посередине ничего перебивать не нужно. */
.landing-choose {
  list-style: none; counter-reset: choose; margin-top: var(--s-6);
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.landing-choose__item { counter-increment: choose; position: relative; padding-left: 44px; }
.landing-choose__item::before {
  content: counter(choose); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: var(--gold);
  font-size: var(--fs-sm); font-weight: 800;
}
.landing-choose__item h3 { font-size: 16px; margin-bottom: var(--s-2); }
.landing-choose__item p { color: var(--ink-2); font-size: var(--fs-sm); }

/* ============================== СЛУЖЕБНЫЕ СТРАНИЦЫ ============================== */

.legal-head { padding-bottom: 0; }
.legal-head h1 { margin-bottom: var(--s-3); }
.legal-head__lead { color: var(--ink-2); max-width: 68ch; font-size: 16.5px; }

.contacts-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.contact-card { display: flex; flex-direction: column; gap: var(--s-2); }
.contact-card__ic {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-2);
  border-radius: var(--radius-sm); background: var(--gold-100); color: var(--gold-600);
}
.contact-card__title {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.contact-card__big { font-size: 18px; font-weight: 800; color: var(--ink); }
a.contact-card__big:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.contact-card__note { font-size: var(--fs-sm); color: var(--muted); margin-top: auto; }

.legal-cols {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--s-8); align-items: start;
}
.legal-aside { position: sticky; top: calc(var(--header-h) + 16px); }
.legal-aside__title { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.legal-aside__note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-3); }

.legal-steps { list-style: none; display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.legal-steps__item { display: flex; gap: var(--s-3); }
.legal-steps__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: var(--gold);
  font-size: var(--fs-sm); font-weight: 800;
}
.legal-steps__item h3 { font-size: 15px; margin-bottom: 2px; }
.legal-steps__item p { font-size: var(--fs-sm); color: var(--ink-2); }

/* --- юридический документ --- */
.legal-doc { max-width: 78ch; }
.legal-doc__date {
  font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 800; margin-bottom: var(--s-6);
}
.legal-doc__item + .legal-doc__item { margin-top: var(--s-7); }
.legal-doc h2 { font-size: 21px; margin: 0 0 var(--s-3); }
.legal-doc ol { padding-left: 22px; }

/* ================================== 404 ================================== */

.page404 { text-align: center; padding: var(--s-10) 0; }
.page404__code {
  font-size: clamp(64px, 12vw, 116px); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: var(--gold); margin-bottom: var(--s-3);
}
.page404 h1 { margin-bottom: var(--s-3); }
.page404__lead { color: var(--ink-2); max-width: 56ch; margin: 0 auto var(--s-6); }
.page404__main { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.page404__sub {
  margin: var(--s-8) 0 var(--s-3); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2);
}
.page404__links { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
.page404__note { margin-top: var(--s-7); font-size: var(--fs-sm); color: var(--ink-2); }
.page404__note a { color: var(--navy); font-weight: 700; }

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

@media (max-width: 1100px) {
  .landing-hero__grid,
  .landing-cols,
  .legal-cols { grid-template-columns: 1fr; gap: var(--s-7); }
  .landing-parts,
  .landing-choose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* На одной колонке липкая колонка только мешает: она уезжает вниз страницы. */
  .legal-aside { position: static; }
  /* Арт и цена встают в ряд, пока хватает ширины: иначе шапка растягивается
     на два экрана и таблица цен уходит за сгиб. */
  .landing-hero__side { flex-direction: row; align-items: stretch; }
  .landing-hero__art { flex: 1 1 46%; }
  .landing-price { flex: 1 1 54%; }
}

@media (max-width: 700px) {
  .landing-facts { grid-template-columns: 1fr; gap: var(--s-3); }
  .landing-parts,
  .landing-choose { grid-template-columns: 1fr; }
  .landing-hero__side { flex-direction: column; }
  .landing-hero__cta .btn { width: 100%; justify-content: center; }
  .landing-price__value { font-size: 28px; }
  /* На узком экране подпись конфигурации встаёт над значением: колонка в
     8,5 rem съедала бы половину строки и рвала «60×30×1,5 мм» пополам. */
  .landing-price__config > div { grid-template-columns: 1fr; gap: 0; }
  .landing-h2 { margin-top: var(--s-8); }
  .page404 { padding: var(--s-8) 0; }
  .page404__main .btn { width: 100%; justify-content: center; }
}