/* ===========================================================================
   Вертикальный ритм страниц.

   Десктоп (1920) — по фреймам 289:5327 / 289:4223 / 305:7181.
   Планшет (≤1024, холст макета 768) — по фреймам 505:1827 / 534:4540 / 534:6963.

   Собственных вертикальных отступов у секций быть НЕ должно: высота каждой
   секции обязана совпадать с высотой её узла в Figma, иначе сверка врёт.
   Селекторы на КЛАССАХ: у секций есть свои margin, и правило на тегах
   проигрывает им по специфичности.
   =========================================================================== */

/* --- Десктоп: главная — верх 44, между секциями 180 ------------------------ */

.how-it-works,
.map,
.platform,
.marketplaces,
.pricing,
.cta-warehouse,
.faq,
.blog,
.footer {
  margin-top: 180px;
  margin-bottom: 0;
}

/* --- Hero и навбар над ним --------------------------------------------------
   В макете navbar — плашка поверх hero. Держится на position: fixed, поэтому
   в разметке лежит вне <main>: sticky на <main> создаёт контекст наложения,
   внутри которого навбар ушёл бы под футер.                                 */

.hero-shell {
  position: relative;
  margin-top: 44px;
}

/* Навбар закреплён и виден всегда.
   В покое стоит ровно там, где нарисован: 44px отступ hero + 40px внутри
   него = 84px от верха окна. При прокрутке поднимается к краю и получает
   тень, чтобы отделяться от контента. */
.navbar {
  position: fixed;
  top: 84px;
  /* Центрируем раскладкой (inset-inline + margin auto из navbar.css), а не
     transform: у навбара нечётная ширина 1399px, и translateX(-50%) кладёт
     композитный слой на полупиксель — весь текст пересэмплируется и мылится. */
  inset-inline: 0;
  z-index: 100;
  transition: top 0.3s ease, box-shadow 0.3s ease;
}

.navbar.is-scrolled {
  top: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

/* Якорные ссылки не должны заводить секцию под закреплённый навбар. */
/* section, а не main > section: часть секций лежит внутри обёртки сцены
   наложения, и прямыми детьми <main> они больше не являются. */
main section,
main > .hero-shell,
body > footer,
#lead-form,
#warehouse-form {
  scroll-margin-top: 110px;
}

/* Обёртка hero участвует в ритме наравне с секциями. */
main > .hero-shell + section {
  margin-top: 180px;
}

/* --- Десктоп: «Для фулфилментов» (289:4223): 80/180/180/180/180/155 -------- */

.page-fulfilment .ff-marketplaces { margin-top: 80px; }
.page-fulfilment .ff-how-it-works,
.page-fulfilment .ff-cta-form,
.page-fulfilment .ff-faq,
.page-fulfilment .blog          { margin-top: 180px; }
.page-fulfilment .ff-footer     { margin-top: 155px; }

/* --- Десктоп: «Контакты» (305:7181): 100/100/180/180/167 ------------------- */

.page-contacts .kt-contact-info,
.page-contacts .kt-map          { margin-top: 100px; }
.page-contacts .cta-warehouse,
.page-contacts .kt-blog         { margin-top: 180px; }
.page-contacts .footer          { margin-top: 167px; }

/* ===========================================================================
   Планшет (≤1024). Холст 768: поле страницы 24, у hero-card паддинг 24 →
   навбар лежит на 48/48 и имеет ширину 672 (100% − 96).
   Ритм: между секциями 80; контакты и hero фулфилментов — 40.
   Мобильные правила появятся отдельным блоком по мобильным макетам.
   =========================================================================== */

@media (max-width: 1199px) {
  .hero-shell { margin-top: 24px; }

  .navbar {
    top: 48px;
    width: calc(100% - 96px);
  }

  .navbar.is-scrolled { top: 16px; }

  .how-it-works, .map, .platform, .marketplaces, .pricing,
  .cta-warehouse, .faq, .blog, .footer {
    margin-top: 80px;
  }

  main > .hero-shell + section { margin-top: 80px; }

  /* Фулфилменты: hero → marketplaces 40, дальше 80 */
  .page-fulfilment .ff-marketplaces { margin-top: 40px; }
  .page-fulfilment .ff-how-it-works,
  .page-fulfilment .ff-cta-form,
  .page-fulfilment .ff-faq,
  .page-fulfilment .blog,
  .page-fulfilment .ff-footer { margin-top: 80px; }

  /* Контакты: hero → info 40, info → карта 40, дальше 80 */
  .page-contacts .kt-contact-info,
  .page-contacts .kt-map { margin-top: 40px; }
  .page-contacts .cta-warehouse,
  .page-contacts .kt-blog,
  .page-contacts .footer { margin-top: 80px; }

  main > section,
  main > .hero-shell,
  body > footer {
    scroll-margin-top: 124px; /* 48 навбар + 60 бар + зазор */
  }
}

/* ===========================================================================
   Мобильный (≤767). Холст 375: поле страницы 16, hero-card на поле 12 с
   паддингом 16 → навбар на 28/28 шириной 319 (100% − 56). Ритм 48;
   особые зазоры: ff hero→marketplaces 20; контакты 32/24/48/74/48.
   На мобильной главной карты НЕТ (узел отсутствует в макете 505:2436).
   =========================================================================== */

@media (max-width: 767px) {
  .hero-shell { margin-top: 12px; }

  .navbar {
    top: 28px;
    width: calc(100% - 56px);
  }

  .navbar.is-scrolled { top: 12px; }

  .how-it-works, .platform, .marketplaces, .pricing,
  .cta-warehouse, .faq, .blog, .footer {
    margin-top: 48px;
  }

  main > .hero-shell + section { margin-top: 48px; }

  /* Карты на мобильной главной нет */
  .map { display: none; }
  /* Карта была следующей за hero; сохранить зазор 48 первому видимому */
  .page-fulfilment .ff-marketplaces { margin-top: 20px; }
  .page-fulfilment .ff-how-it-works,
  .page-fulfilment .ff-cta-form,
  .page-fulfilment .ff-faq,
  .page-fulfilment .blog,
  .page-fulfilment .ff-footer { margin-top: 48px; }

  .page-contacts .kt-contact-info { margin-top: 32px; }
  .page-contacts .kt-map { margin-top: 24px; }
  .page-contacts .cta-warehouse { margin-top: 48px; }
  .page-contacts .kt-blog { margin-top: 74px; }
  .page-contacts .footer { margin-top: 48px; }

  main > section,
  main > .hero-shell,
  body > footer {
    scroll-margin-top: 100px; /* 28 навбар + 60 бар + зазор */
  }
}