/* SPARRWAY — раскладка
   Контейнер, вертикальный ритм секций, точечная сетка и немногочисленные
   утилиты, которые нужны больше чем одному блоку. Блоки собственных
   обёрток ширины не заводят. */

/* ============================================================
   КОНТЕЙНЕР
   Ширина контента снята с макета: 1320 при боковом отступе 60 на 1440,
   704 при 32 на 768, 335 при 20 на 375. Отступ входит в контейнер, поэтому
   ограничение ставится на внешнюю ширину, а не на внутреннюю.
   ============================================================ */

.container {
  width: 100%;
  max-width: calc(var(--grid-container) + var(--grid-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* ============================================================
   СЕКЦИЯ
   Отступ сверху и снизу берётся из токена и меняется по брейкпоинтам.
   Точечная сетка живёт на body, а не на секции: в макете она сквозная,
   и если начинать её заново в каждой секции, ритм ломается на стыках.
   Секции с собственной заливкой закрывают её своим фоном.
   ============================================================ */

.section {
  position: relative;
  padding-block: var(--section-padding);
}

/* Первый экран перекрыт шапкой, поэтому верхний отступ считается от края
   документа и уже включает её высоту. */
.section--hero { padding-top: var(--hero-padding-top); }

/* Блок сразу за первым экраном. Первый экран своего отступа снизу не даёт -
   его нижний паддинг лежит внутри градиентной панели, поэтому весь стык
   даёт верхний отступ этой секции. На планшете и мобильном он сокращённый,
   40. Десктоп ниже возвращает свои значения. */
.hero + .section,
.page-header + .section { padding-top: var(--section-gap-first); }

/* Закон: если блок за первым экраном начинается с бейджа-подписи, стык
   с первым экраном полный - как между обычными блоками, 100 / 80 / 50.
   Бейдж низкий и стоит над заголовком: при сокращённом стыке секция липнет
   к панели. Правило действует на всех ширинах, а не только на десктопе. */
.hero + .section:has(.eyebrow),
.page-header + .section:has(.eyebrow) { padding-top: var(--section-gap); }

@media (min-width: 1024px) {
  /* Десктоп - эталон, его вертикаль не менялась: стык с первым экраном 100. */
  .hero + .section,
  .page-header + .section { padding-top: var(--section-gap); }

  /* Кроме каталога, страницы сценария и политик: там стык 50. У каталога и
     сценария так по отдельной просьбе, у политик так было изначально.
     50 - это отступ тесной секции, тот же, что в .section--tight. */
  .page-header + .catalog,
  .page-header + .overview,
  .page-header + .section--no-reveal { padding-top: 50px; }
}

/* ============================================================
   МЕДИА-СЛОТ
   Все фотографии выводятся фоном контейнера, а не тегом img: под ACF
   слот получит переменную --media-image. Соотношение сторон живёт здесь,
   на самой карточке его быть не должно.
   ============================================================ */

.media {
  background-color: var(--bg-muted);
  background-image: var(--media-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Секция внутренней страницы. В макете каталога и сценария вертикальный ритм
   вдвое короче домашнего: 50 на десктопе против 100. На планшете и мобильном
   значения совпадают с общими, поэтому переопределяется только десктоп. */
@media (min-width: 1024px) {
  .section--tight { padding-block: 50px; }
}

/* Последний блок страницы: снизу футер, а не соседняя секция, которая
   добрала бы стык до целого. Такие секции добирают его сами - на всех
   ширинах, а не только на десктопе.
   .section--no-reveal - страницы политик (Privacy, Terms, Cookies).
   #support-form и #apply - формы Support и Creator Program. #waitlist
   (Marketplace) не трогаем: там дальше ещё стоит final-cta. */
.section--no-reveal,
#support-form,
#apply { padding-bottom: var(--section-gap); }

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   Секция плавно проявляется, когда попадает в область просмотра
   (reveal.js, IntersectionObserver). Класс reveal-ready ставится
   скриптом на <html> - без JS или без поддержки IntersectionObserver
   он не появится, и секции останутся видимыми как обычно.
   Первый экран (.hero, .page-header) сюда не входит: это то, что
   видно сразу при загрузке, ему нечего "доскроллить".
   .section--no-reveal тоже не участвует: длинный документ (юридические
   страницы и подобная сплошная простыня текста) не должен быть невидимым,
   пока читатель не доскроллит до него - это выглядит как пустая страница.
   ============================================================ */

.reveal-ready .section:not(.section--no-reveal) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-decelerate),
              transform var(--duration-slow) var(--ease-decelerate);
}

.reveal-ready .section.is-visible {
  opacity: 1;
  transform: translateY(0);
}