/* ==========================================================================
   Главная — первый экран

   Макет: `Menu section` 1:580 (527×862) + `Content section` 1:591 (1290×862),
   зазор 63, обе панели радиусом 32.
   Интерлиньяж заголовков — 120.5689 % (проверено по высоте текстовых нод:
   1:596 три строки по 40 px = 144 px), а не 99.625 % из автогенерации.
   ========================================================================== */

/* Первый экран начинается сразу под шапкой (y = 207 в макете), а до
   следующей секции остаётся тот же ритм 190, что и между остальными:
   95 отсюда + 95 из padding-top следующей секции. */
/* Меню категорий (1:580) начинается на 207 при шапке до 190 — отступ 17.
   Раньше его давала сама шапка своим нижним падингом. */
.hero {
  padding-block: 17px calc(var(--section-gap) / 2);
}

.hero__inner {
  display: flex;
  align-items: stretch;
  /* Правка 2026-08-13: аккордеон 530 + зазор 20 + контент 1290 = 1840
     (ноды 40901:26538 и 40901:26591). Раньше было 527 + 63. */
  gap: 20px;
  /* Обе панели в макете ровно 862. Без жёсткой высоты правая колонка
     растёт по контенту и уводит всю страницу. */
  height: 862px;
}

/* --- Левая панель: аккордеон-каталог ---------------------------------------
   Правка макета от 2026-08-13, нода 40901:26538: белая панель с рамкой
   bg_light_grey и радиусом 32, внутри отступ 24. Категории — строки
   20 Regular с шевроном, растянутые по высоте панели; раскрытая —
   синяя, с планкой 3×28 слева. Подкатегории — строки 36 px, 16 Medium
   серым, счётчик товаров 14 Regular у правого края. */

.hero-cat {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 530px;
  padding: var(--space-24);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
}

.hero-cat__title {
  margin-bottom: var(--space-16);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

/* Строки делят высоту панели поровну (в макете ряды с flex-grow), а если
   категорий больше, чем влезает, — список прокручивается внутри панели. */
.hero-cat__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.hero-cat__list::-webkit-scrollbar { display: none; }

.hero-cat__item {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  justify-content: center;
  border-top: 1px solid var(--color-border-soft);
}

.hero-cat__row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding-block: var(--space-12);
  text-align: left;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.hero-cat__row:hover { color: var(--color-brand); }

/* Планка раскрытой категории: 3×28, радиус 2 (нода 40901:26543). */
.hero-cat__bar {
  display: none;
  flex-shrink: 0;
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: var(--color-brand);
}

.hero-cat__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

/* Шеврон в макете — текстовый глиф ▸/▾; рисуем треугольником той же
   геометрии, чтобы не зависеть от начертания шрифта. */
.hero-cat__caret {
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-inline: 4px;
  border-block: 5px solid transparent;
  border-left: 6px solid var(--color-text-muted);
  transition: transform var(--dur-fast) var(--ease-out);
}

.hero-cat__item.is-open .hero-cat__row { color: var(--color-brand); }
.hero-cat__item.is-open .hero-cat__bar { display: block; }

.hero-cat__item.is-open .hero-cat__caret {
  border-left-color: var(--color-brand);
  transform: rotate(90deg);
}

.hero-cat__sub {
  display: none;
  padding: 0 0 var(--space-8) var(--space-16);
}

.hero-cat__item.is-open .hero-cat__sub { display: block; }

.hero-cat__sub-link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 36px;
  padding-left: var(--space-12);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.hero-cat__sub-link:hover { color: var(--color-brand); }

.hero-cat__sub-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
}

.hero-cat__count {
  flex-shrink: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* --- Правая панель ------------------------------------------------------- */

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-48);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-64);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
  overflow: hidden;
}

/* Фото в макете 1332×862 при панели 1290 и сдвинуто влево на 42 (нода 1:593).
   Если растянуть его на всю панель с object-fit: cover, трубы наезжают на
   заголовок — в макете левая треть кадра пустая именно под текст. */
.hero-content__photo {
  position: absolute;
  top: 0;
  left: 100px;
  width: 1332px;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.hero-content__info,
.hero-content__bottom {
  position: relative;
  z-index: 1;
}

.hero-content__info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero-content__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-content__title {
  max-width: 694px;
  font-size: var(--fs-40);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-40);
  color: var(--color-text);
}

.hero-content__title .section-title__accent { color: var(--color-brand); }

.hero-content__lead {
  max-width: 643px;
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-24);
  color: var(--color-text);
}

/* --- Плашки «документы» и «доставка» ------------------------------------- */

.hero-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-24);
}

.hero-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
}

.hero-badge__icon svg { width: 48px; height: 48px; }

/* --- Статистика ----------------------------------------------------------- */

.hero-content__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.hero-stats__divider {
  width: 1px;
  height: 86px;
  background: var(--color-border);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero-stat__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.hero-stat__value {
  font-size: var(--fs-40);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-40);
  color: var(--color-brand);
  white-space: nowrap;
}

/* Четыре кружка 57 px внахлёст: смещения 0 / 18 / 37 / 56 из макета. */
.hero-stat__thumbs {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 113px;
  height: 57px;
}

.hero-stat__thumbs img,
.hero-stat__check {
  position: absolute;
  top: 0;
  width: 57px;
  height: 57px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 2px solid var(--color-bg);
}

.hero-stat__thumbs img:nth-child(1) { left: 0; border-color: transparent; }
.hero-stat__thumbs img:nth-child(2) { left: 18px; }
.hero-stat__thumbs img:nth-child(3) { left: 37px; }

/* Четвёртый кружок — белый с синей галочкой (нода 1:616). Иконка
   перекрашивается через currentColor, поэтому цвет задаём здесь. */
.hero-stat__check {
  left: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-color: var(--color-bg);
  color: var(--color-brand);
}

.hero-stat__check svg { width: 32px; height: 32px; }

.hero-stat__label {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

/* --- Кнопка, «или», мессенджеры ------------------------------------------ */

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: 680px;
}

.hero-actions__btn {
  width: 376px;
  flex-shrink: 0;
}


/* --- Ниже 1920 px ---------------------------------------------------------
   Мобильного макета нет. Задача правил — не сломать первый экран. */

@media (max-width: 1500px) {
  .hero__inner { height: auto; min-height: 0; }
  .hero-content__photo { left: 0; width: 100%; }

  /* Высота первого экрана здесь уже не жёсткая — потолок панели держит
     аккордеон вровень с контентной карточкой, лишнее прокручивается
     внутри списка. Число выведено по высоте контентной панели. */
  .hero-cat { width: 420px; max-height: 720px; }

  .hero-content { padding: var(--space-48); }
  .hero-content__title { font-size: var(--fs-32); }
}

@media (max-width: 1100px) {
  .hero__inner { flex-direction: column; }

  /* В колонку первым идёт промо (заголовок, текст, кнопка заявки) — как
     первый экран у лендингов; каталог-аккордеон опускается под него.
     Раньше посетитель с телефона видел вместо оффера список категорий
     (правка 2026-08-28: промо выше каталога). */
  .hero-content { order: 0; }
  .hero-cat { order: 1; width: 100%; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions__btn { width: 100%; }
  .or-divider { display: none; }

  /* Соц-иконки под кнопкой заявки в колонку смотрелись сиротливо
     (полупрозрачный инстаграм на светлом фоне почти невидим), а ватсап
     и так плавает в углу и есть в шапке — в узкой вёрстке строку убираем
     (правка 2026-08-28). */
  .hero-actions .social-icons { display: none; }

  /* На широком экране левая треть фото пустая и текст лежит на ней.
     В колонку панель сужается, cover-кадрирование подтягивает трубы под
     заголовок — и тёмный текст тонет в тёмном фото. Гасим фото градиентной
     вуалью цвета подложки: сверху, под текстом, она глухая, к низу
     отпускает — фото остаётся видно, но уже не спорит с текстом.
     Сама панель при этом не растёт ни на пиксель. */
  .hero-content__photo { z-index: 0; }

  .hero-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      180deg,
      var(--color-bg-soft) 30%,
      rgba(247, 247, 247, .7) 100%
    );
  }
}

@media (max-width: 700px) {
  .hero-content { padding: var(--space-24); }

  /* Аккордеон на телефоне: строки не растягиваются по высоте панели,
     а идут по контенту — иначе панель распирает первый экран. Потолок
     высоты с внутренней прокруткой здесь тоже снят: на таче список,
     скроллящийся внутри страницы, ловит палец вместо страницы. */
  .hero-cat { padding: var(--space-16) var(--space-24); max-height: none; }
  .hero-cat__list { overflow-y: visible; }
  .hero-cat__item { flex: 0 0 auto; }
  .hero-cat__name { font-size: var(--fs-18); }
  .hero-cat__row { padding-block: var(--space-12); }

  /* Типографика первого экрана: макетные размеры на 375 px дают заголовок
     в шесть строк. Сжимаем шкалу на шаг-два — карточка становится короче,
     а не длиннее. */
  .hero-content__title { font-size: var(--fs-24); }
  .hero-content__lead { font-size: var(--fs-16); }

  .hero-badge {
    font-size: var(--fs-16);
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
  }

  .hero-badge__icon { width: 44px; height: 44px; }
  .hero-badge__icon svg { width: 28px; height: 28px; }

  .hero-stats { flex-wrap: wrap; gap: var(--space-16) var(--space-24); }
  .hero-stats__divider { display: none; }
  .hero-stat__value { font-size: var(--fs-32); }
  .hero-stat__label { font-size: var(--fs-16); }

  .hero-actions .cta-btn { font-size: var(--fs-18); }
  .hero-actions .cta-btn__icon { width: 48px; height: 48px; }
  .hero-actions .cta-btn__icon svg { width: 28px; height: 28px; }
}

/* --- Телефон: панели во весь экран ------------------------------------------
   Боковые поля страницы у крупных панелей съедали 40 px ширины ради
   «рамки» вокруг скругления. На телефоне панели разворачиваются от края
   до края (отрицательный margin на ширину поля, скругления снимаются),
   внутренний отступ равен полю страницы — текст остаётся на одной
   вертикали с остальным контентом. */
@media (max-width: 700px) {
  .hero-cat,
  .hero-content {
    margin-inline: calc(var(--side-padding) * -1);
    border-radius: 0;
  }

  /* width: 100% из блока 1100 при отрицательных margin оставляла панель
     узкой и прижатой влево: со stretch по умолчанию флекс сам растягивает
     её на всю ширину вместе с полями. У аккордеона на полном полотне
     рамка теряет смысл — остаются только разделители строк. */
  .hero-cat {
    width: auto;
    border-inline: 0;
    padding-inline: var(--side-padding);
  }

  .hero-content { padding-inline: var(--side-padding); }
}