/* ==========================================================================
   ГОРТЕКС — главная страница.

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

/* ---------- Первый экран ---------- */
.hero {
  position: relative;
  /* Фото котельной фоном. Без него полноэкранный блок читается как дыра:
     контента 663px на 954px высоты, треть площади — пустая.
     Слои сверху вниз: тёплый блик, затемнение под текст, само фото. */
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(245, 190, 110, 0.12), transparent 62%),
    linear-gradient(100deg, rgba(20, 20, 20, 0.94) 0%, rgba(20, 20, 20, 0.86) 45%, rgba(20, 20, 20, 0.72) 100%),
    url("/assets/img/hero-boiler.webp") center / cover no-repeat,
    var(--c-850);
  border-bottom: 1px solid var(--c-600);
  overflow: hidden;

  /* Первый экран занимает всё окно за вычетом прилипшей шапки.
     svh вместо vh — на мобильных vh считается по развёрнутому окну, и низ
     экрана уезжает под адресную строку браузера. min-height, а не height:
     если контент выше окна, блок растёт, а не обрезается. */
  display: grid;
  /* center, а не end: при end вся лишняя высота окна уходила одним куском
     наверх — на мониторе 1030px это 200px пустоты между шапкой и надзаголовком,
     то есть тёмный прямоугольник во весь левый борт до начала текста.
     Теперь запас делится поровну: сверху остаётся воздух под шапкой, снизу
     — полоса кадра с котельной, а сам текст начинается выше и стоит
     в оптическом центре экрана. */
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

.hero__inner {
  display: grid;
  gap: 44px;
  /* Только padding-block: горизонтальные поля приходят от .container.
     Меньше прежнего: высоту теперь держит сам .hero, а padding нужен лишь
     как воздух на узких экранах, где контент упирается в края. */
  padding-block: clamp(36px, 5vw, 64px);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
    gap: 60px;
    /* stretch, а не start: иначе карточка-обещание обрывается на середине
       и справа висит 250px пустоты. */
    align-items: stretch;
  }
}

.hero h1 { margin-bottom: 20px; }
.hero__lead { margin-bottom: 26px; }

.hero__claims {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
}
.hero__claims li {
  padding: 7px 13px;
  border: 1px solid var(--c-500);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.hero__claims li::before { content: "— "; color: var(--gold); }
.hero__claims li {
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(2px);
}

/* ---------- Первый экран в окне любой высоты ----------
   Блок и раньше занимал всё окно за вычетом шапки, но собран был в пикселях:
   879px на мониторе 27" и те же 879px на ноутбуке 15", где под него есть
   663. Экран честно растягивался на высоком окне и на треть вылезал за край
   низкого — развилка «купить / арендовать» на ноутбуке начиналась ниже сгиба,
   а это главный узел выбора на сайте.

   Теперь первый экран главной считается в тех же единицах, что и первые
   экраны разделов (см. :root в base.css): --fit-space для воздуха,
   --fit-type для текста, --fit-head для крупного набора. Коэффициент —
   размер при окне 950px, то есть ровно то, что было на мониторе.

   Порядок сжатия виден на заголовке: он теряет четверть кегля, подводка —
   девять процентов, отступы — треть. Поэтому раскладка не плывёт: на любой
   диагонали это тот же экран, снятый в другом масштабе, и развилка стоит
   над сгибом везде. */
@media (min-width: 1024px) {
  .hero__inner {
    /* Снизу — тот же общий отступ до сгиба, что у второго блока разделов.
       Сверху больше: под шапкой идёт кадр, и текст не должен начинаться
       сразу под ней. Но не 56: блок теперь стоит по центру, и к этому
       отступу сверху прибавляется ещё половина свободной высоты окна. */
    padding-block: calc(40 * var(--fit-space)) calc(26 * var(--fit-space));
    /* По горизонтали зазор колонок не трогаем: 60px держат вертикальную
       линию, по которой стоит правая колонка. Сжимается только строчный
       зазор — он работает, когда колонки складываются в одну. */
    column-gap: 60px;
    row-gap: calc(44 * var(--fit-space));
  }

  .hero .eyebrow {
    margin-bottom: calc(14 * var(--fit-space));
    font-size: calc(13 * var(--fit-type));
  }

  /* Межстрочный интервал плотнее общих 1.08: у заголовка первого экрана
     строк четыре, и каждый процент интерлиньяжа здесь стоит двух пикселей
     экрана. На трёх словах в строке это незаметно. */
  .hero h1 {
    font-size: calc(56 * var(--fit-head));
    line-height: 1.03;
    margin-bottom: calc(20 * var(--fit-space));
  }

  .hero__lead {
    margin-bottom: calc(26 * var(--fit-space));
    font-size: calc(18 * var(--fit-type));
    line-height: 1.45;
  }

  .hero__claims {
    margin-bottom: calc(30 * var(--fit-space));
    gap: calc(10 * var(--fit-space)) 8px;
  }

  .hero__claims li {
    padding-block: calc(7 * var(--fit-space));
    font-size: calc(13 * var(--fit-type));
  }

  .fork { gap: calc(14 * var(--fit-space)); }

  .fork__card {
    padding: calc(22 * var(--fit-space));
    gap: calc(8 * var(--fit-space));
  }

  .fork__title { font-size: calc(22 * var(--fit-type)); }
  .fork__text { font-size: calc(14 * var(--fit-type)); }
  .fork__meta {
    padding-top: calc(14 * var(--fit-space));
    font-size: calc(13 * var(--fit-type));
  }

  /* Карточка-обещание сжимается тем же механизмом, но её правила стоят
     ниже по файлу — сразу за её базовыми. Здесь их держать нельзя: базовые
     идут позже и той же силы, поэтому перебивали бы эти. */
}

/* То же, что на разделах: ниже 690px отдаём размер вспомогательных
   элементов — чипов с доводами и полей карточек развилки. Сами доводы
   и развилка остаются: это содержание первого экрана. */
@media (min-width: 1024px) and (max-height: 690px) {
  .hero__claims {
    margin-bottom: calc(20 * var(--fit-space));
    gap: calc(7 * var(--fit-space)) 6px;
  }
  .hero__claims li { padding-block: calc(4 * var(--fit-space)); }
  .fork__card { padding: calc(16 * var(--fit-space)); }
  .fork__meta { padding-top: calc(10 * var(--fit-space)); }
}

/* Развилка «купить / арендовать» — главный узел выбора на первом экране. */
.fork { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .fork { grid-template-columns: repeat(2, 1fr); } }

.fork__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease), transform 0.22s var(--ease);
}
/* На наведении карточка чуть светлеет, но остаётся в своей ступени:
   прыжок до --c-600 после смены рецепта стал слишком заметным. */
.fork__card:hover { border-color: var(--gold); background: var(--c-700); transform: translateY(-2px); }
.fork__card::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.26s var(--ease);
}
.fork__card:hover::after { transform: scaleY(1); }

.fork__kicker {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.fork__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.fork__text { margin: 0; font-size: 0.875rem; color: var(--text-dim); }
.fork__meta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.8125rem;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* Карточка-обещание по срокам — главный аргумент первого экрана. */
.promise {
  display: flex;
  flex-direction: column;
  /* Карточка растянута на высоту левой колонки, и свободные 120px раньше
     собирались в один провал перед сноской — из-за него панель читалась
     как длинный пустой прямоугольник. space-between раскладывает тот же
     запас по всем промежуткам: абзацы стоят ровной лесенкой, дыры нет. */
  justify-content: space-between;
  padding: 28px;
  background: var(--card-bg);
  border: 1px solid var(--gold-line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
}
.promise__year {
  display: block;
  font-family: var(--font-display);
  /* Кегль задаётся здесь, а не в блоке «первый экран в окне любой высоты»
     выше по файлу: то правило стоит раньше и той же силы, поэтому базовое
     его перебивает и calc(72 * var(--fit-head)) не работает вовсе. Менять
     размер надо в этой строке.

     Кегль считается по строке «10 лет» без слова «более»: оно вынесено
     в отдельную строку мелким набором (.promise__year small). Вместе
     одной строкой они занимали бы 391 пиксель из 381 доступных. */
  font-size: clamp(2.375rem, 10.5vw, 4.5rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* «Более» — приставка к цифре, а не часть её. Отдельной строкой, кеглем
   примерно в треть: цифра остаётся главным, что видно в карточке. */
.promise__year small {
  display: block;
  margin-bottom: 6px;
  font-size: 0.3em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.promise__label {
  display: block;
  margin: 10px 0 16px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.promise p { font-size: 0.9375rem; color: var(--text-dim); }

/* ---------- Что уходит из карточки на низком окне ----------
   Карточка тянется на высоту левой колонки, и свободного места в ней тем
   больше, чем выше окно: 336px на мониторе, 166px на ноутбуке. Дописанные
   абзацы это место занимают, но на низком окне они сами становятся выше
   колонки — и тогда уже карточка начинает распирать первый экран: замер
   до порогов давал +15px при окне 768 и +111px при 660.

   Поэтому объяснение уходит в два шага, от частного к главному. Сначала
   история с первым объектом — она есть в хронике на /proizvodstvo. Потом
   довод про свой цех — он есть там же, на странице производства. Само
   обещание про срок и сноска про дежурного оператора не уходят никогда:
   ради них карточка и стоит на первом экране. */
@media (max-height: 800px) {
  .promise__more { display: none; }
}

/* Порог был 690px, и в вилке 690–800 карточка вылезала за сгиб: при окне
   1024×700 её низ оказывался на 31 пикселе ниже края экрана ещё до того,
   как в неё добавилось слово «Более». Причина не в порогах — не работает
   блок «первый экран в окне любой высоты» выше по файлу (он стоит раньше
   базовых правил и той же силы, поэтому базовые его перебивают, и карточка
   не сжимается вовсе). Пока это так, вилку закрывает сам порог. */
@media (max-height: 690px) {
  .promise__why { display: none; }
}
.promise__note {
  /* Низ карточки держит justify-content выше: margin-top: auto съедал весь
     свободный запас и вешал его одним куском над сноской. */
  padding-top: 18px;
  border-top: 1px solid var(--card-bd);
  font-size: 0.8125rem;
  color: var(--text-mute);
}

/* ---------- Карточка-обещание в окне любой высоты ----------
   Эти правила — часть механизма «первый экран сжимается вместе с окном»
   (см. блок выше про --fit-space / --fit-type / --fit-head). Жили они там
   же, но это место в файле идёт ДО базовых правил .promise, а сила у них
   одинаковая — поэтому базовые их перебивали, и карточка единственная
   из всего первого экрана не сжималась вовсе. На окне 1024×700 она из-за
   этого свисала на три десятка пикселей ниже сгиба.

   Отсюда они работают. Правило одно: любое новое базовое правило .promise
   должно стоять ВЫШЕ этого блока, иначе снова перебьёт. */
@media (min-width: 1024px) {
  .promise { padding: calc(28 * var(--fit-space)); }
  .promise__year { font-size: calc(72 * var(--fit-head)); }
  .promise__label {
    margin: calc(10 * var(--fit-space)) 0 calc(16 * var(--fit-space));
    font-size: calc(17 * var(--fit-type));
  }
  .promise p { font-size: calc(15 * var(--fit-type)); }
  .promise__note { padding-top: calc(18 * var(--fit-space)); }
}

/* ---------- Полоса доказательств ---------- */
.proof { background: var(--c-800); border-bottom: 1px solid var(--c-600); }
.proof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--card-bd);
  border-inline: 1px solid var(--card-bd);
}
@media (min-width: 900px) { .proof__grid { grid-template-columns: repeat(4, 1fr); } }

.proof__cell { padding: 26px 22px; background: var(--c-800); }
.proof__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.proof__cap { margin-top: 8px; font-size: 0.8125rem; color: var(--text-dim); line-height: 1.4; }

/* ---------- Каталог: один блок вместо двух ---------- */
.types { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .types { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .types { grid-template-columns: repeat(3, 1fr); } }

.type-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.type-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.type-card__media {
  aspect-ratio: 16 / 9;
  /* Рендеры сняты на светлом. Подложка красится в цвет фона конкретного
     снимка (--plate ставится инлайном), поэтому поля вокруг объекта
     не видно — раньше они читались как белые полосы на тёмной карточке. */
  background: var(--plate, var(--c-700));
  display: grid;
  place-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--c-500);
  /* Без overflow:hidden автоматический минимальный размер побеждает
     aspect-ratio, и картинка распирает карточку до своей полной высоты. */
  overflow: hidden;
  min-height: 0;
}
.type-card__media img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.type-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.type-card__title { margin: 0; font-size: 1.1875rem; }
.type-card__full { font-size: 0.75rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.type-card__note { margin: 0; font-size: 0.875rem; color: var(--text-dim); }
.type-card__power {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--c-500);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ---------- Дверь в раздел: текст + список + картинка ---------- */
.door { display: grid; gap: 32px; align-items: center; }
@media (min-width: 940px) {
  .door { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .door--flip .door__media { order: -1; }
}

.door__facts { list-style: none; margin: 26px 0 28px; padding: 0; display: grid; gap: 16px; }
.door__facts li { padding-left: 24px; position: relative; }
.door__facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 12px; height: 2px;
  background: var(--accent);
}
.door__facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.door__facts span { font-size: 0.9375rem; color: var(--text-dim); }

.door__media {
  background: var(--c-700);
  border: 1px solid var(--c-500);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  min-height: 0;
}
.door__media img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* ---------- Почему Гортекс: компактные плитки вместо длинного списка ---------- */
.why { background: radial-gradient(900px 420px at 82% 0%, rgba(245, 190, 110, 0.08), transparent 64%), var(--c-900); }

.why__grid { display: grid; gap: 1px; background: var(--card-bd); border: 1px solid var(--card-bd); }
@media (min-width: 720px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .why__grid { grid-template-columns: repeat(4, 1fr); } }

.why__cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: var(--card-bg);
}
.why__icon {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.why__cell h3 { margin: 0; font-size: 1.0625rem; }
.why__cell p { margin: 0; font-size: 0.875rem; color: var(--text-dim); }

/* ---------- Новости и события ---------- */