/*
 * «Мотиваторы»: sticky-зоны под фиксированной шапкой сайта.
 *
 * Авторский CSS кейса — из отдельного Webflow-проекта кейсов, где сайтовой
 * шапки нет (0 вхождений navbar_new) — пинит .mot__container.slider/.color
 * на top:0 и .mot__container.sticky-lurk на top:1.2rem. В composed-странице
 * зеркало рендерится под общим хедером chrome (.navbar_new w-nav: fixed,
 * z-index 999, 72px desktop / 75px mobile), перекрывающим верх вьюпорта:
 * на мобиле и коротких десктоп-окнах заголовок «Как работает приложение»,
 * счётчик 01/07 и верх карточки уезжают под шапку (замер 390×844:
 * счётчик top:0, заголовок 47px при шапке 75px).
 *
 * Опускаем пин всех трёх sticky-зон под шапку. Высоту несёт --mot-nav-h —
 * её выставляет /js/cases/motivatory.js по фактической высоте .navbar_new
 * при сборке (и при resize-rebuild); без JS действует фолбэк 72px.
 * GSAP-зоны сдвигаются на ту же величину (start/end '…+=' + NAV в js),
 * чтобы скраб совпадал с фактическим пином.
 *
 * Slider-зона дополнительно: карточки центрируются flex'ом в контейнере
 * height:100vh, и после сдвига пина нижние NAV px этого бокса уходят за
 * фолд — на коротких окнах (589px) запас дизайна снизу (~57px) меньше
 * шапки, низ карточки режется (замер: 604 при фолде 589). padding-bottom
 * на NAV пересчитывает центрирование на видимую полосу [шапка; фолд]:
 * высота контейнера и travel не меняются, GSAP-зоны не трогаем. Только
 * десктоп-раскладка (≥480): мобильный слайд (~0.985×vh, full-bleed) в
 * полосу несжатым не влезает — там центрирование с padding'ом выплескивает
 * верх под шапку (390×844: −15px), остаётся пин-только-top (зазор 6px),
 * выход низа за фолд — свойство самого мобильного дизайна. У color-зоны
 * полосы держит min-height:43.75rem — её выход за фолд на низких окнах есть
 * и в авторском дизайне без шапки (не артефакт композиции), там не правим.
 * На мобиле (≤479) автор пинит lurk на top:0, не 1.2rem — учитываем;
 * этот media-блок обязан стоять ПОСЛЕ базового lurk-правила (см. ниже).
 */
.mot__container.slider,
.mot__container.color {
  top: var(--mot-nav-h, 72px);
}

@media screen and (min-width: 480px) {
  .mot__container.slider {
    padding-bottom: var(--mot-nav-h, 72px);
  }
}

.mot__container.sticky-lurk {
  top: calc(var(--mot-nav-h, 72px) + 1.2rem);
}

/* Мобильный lurk — строго ПОСЛЕ базового правила: специфичность одинаковая,
 * Cascade решает порядок в файле (media-блок выше calc-правила был бы мёртвым
 * кодом — замер 390×844: пин 95px = NAV+1.2rem вместо ожидаемых 75px). */
@media screen and (max-width: 479px) {
  .mot__container.sticky-lurk {
    top: var(--mot-nav-h, 72px);
  }
}