/* =============================================================================
   Процес — секція 06.

   Ритм за art-direction §7: заглиблена поверхня, пін ~250vh, десять кроків
   їдуть горизонтально по скролу. Це єдина закріплена секція на сторінці, тому
   з сусідами вона не сплутається: 05 — драбина вниз-праворуч, 07 — повношині
   блоки кейсів.

   ВІДСТУП від §7, свідомий: план призначав кожному кроку поділку й гліф 32px.
   Гребінка поділок за рішенням від 2026-09-08 живе рівно в одному місці — на
   рейці, бо саме її повторення робило з фірмового прийому шаблон. Тут роль
   поділки грає сам номер кроку, а десять іконок по 32px на смузі, що їде,
   читалися б як шум. Гліфів немає.

   Без JS і під reduce секція не пінується: доріжка лишається звичайною
   горизонтальною стрічкою з прокруткою пальцем. Контент повний в обох випадках.
   ============================================================================= */

.process {
  padding-block: 0;
}

/* Закріплений блок бере всю висоту вікна: інакше під ним, поки секція
   тримається, визирає наступна — і пін читається як помилка верстки, а не як
   зупинка. Висота діє тільки в закріпленому стані, щоб без JS секція не
   розтягувалась на порожній екран. */
.process__pin {
  padding-block: var(--section-pad);
}

.process--pinned .process__pin {
  min-block-size: 100vh;
  display: grid;
  align-content: center;
  gap: var(--space-2xl);
}

.process--pinned .process__head { margin-block-end: 0; }

/* display і gap шапки живуть у base.css разом із рештою шапок секцій: проміжок
   «заголовок → лід/показник» задається в одному місці на всі секції. */
.process__head {
  margin-block-end: var(--space-2xl);
}

.process__progress {
  color: var(--text-muted);
}

.process__progress-now { color: var(--accent); }

/* ---- доріжка ---------------------------------------------------------------
   Поки JS не забрав керування, це просто стрічка з прокруткою: сторінка
   лишається робочою без нього. Модуль process.js вимикає власну прокрутку і
   веде доріжку скролом сторінки. */

/* Вікно обрізки і сама доріжка — різні елементи, і це принципово: якщо
   зсувати той самий вузол, що обрізає вміст, разом із вмістом їде й вікно, і
   наприкінці доріжка просто виходить за екран. Вікно стоїть, їде доріжка. */
.process__viewport {
  /* Запас під ореол активної картки. overflow-x: auto робить обрізаною і
     вертикальну вісь, тому лампа зрізалася по верхньому й нижньому краю.
     Поле дає їй місце, від'ємний марджин повертає розкладку на місце. */
  padding-block: var(--space-md);
  margin-block: calc(var(--space-md) * -1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--wrap-pad);
  scrollbar-width: thin;
  padding-inline: var(--wrap-pad);
}

.process--pinned .process__viewport {
  overflow-x: hidden;
  scroll-snap-type: none;
}

.process__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 20rem);
  gap: var(--gutter);
  inline-size: max-content;
}

/* ---- крок як картка ---------------------------------------------------------
   Раніше крок був голим текстом під тонкою рискою і на темному полі просто
   губився. Тепер це картка тією самою мовою, якою зроблені результати в 08:
   піднята поверхня, тонка рамка, асиметричний радіус --radius-instrument.

   Це не запозичення: асиметричний кут уже прийнятий у систему як F1 і
   витрачений один раз; тут він застосований до іншого змісту — крок процесу
   замість картки результату — і круглий кут дивиться в інший бік.

   Опис притиснутий до низу, але картка не тягнеться в порожнечу: 16rem це
   висота, за якої низ читається як низ, а не як провал. Саме провал у
   середині картки був головним зауваженням до карток fulcrum.
   --------------------------------------------------------------------------- */

.step {
  scroll-snap-align: start;
  scroll-margin-inline-start: var(--wrap-pad);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-2xs);
  min-block-size: 14rem;
  padding: var(--card-pad);
  background: var(--surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-instrument);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.step:hover { transform: translateY(-4px); }

/* Номер кроку — погашена поділка, але поділку має бути видно. Був
   --surface-hairline-strong: це колір ЛІНІЇ, не тексту, і на --surface-raised
   він дає 1.59:1 — «02», «03», «04» практично не читалися, з усієї доріжки
   читався тільки активний крок. Мінімум для великого тексту 3:1; --text-muted
   дає 4.90:1 на цьому ж тлі (WCAG 2.x, 32px @390 і 60px @1440 — великий текст
   із запасом).

   Різниця з увімкненим станом лишається й на око, і в числі: активний номер
   бурштиновий і дає 9.94:1, тобто вдвічі контрастніший, а картка під ним іще й
   міняє колір рамки й світить лампою. Неактивний номер тихіший за власний опис
   кроку (--text-secondary), тому ієрархія в картці не перевернулась. */
.step__num {
  font-family: var(--font-readout);
  font-size: var(--fs-h2);
  font-weight: var(--fw-readout);
  line-height: var(--lh-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-out);
}

.step__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}

.step__note {
  align-self: end;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Крок, який зараз під покажчиком, засвічується — той самий стан, що активна
   поділка рейки. Клас ставить модуль; без JS жоден крок не активний і всі
   читаються однаково. */
/* Крок під покажчиком — увімкнений канал: рамка бере бурштин, картка світить
   лампою. Той самий стан, що активна поділка рейки й рекомендований тариф. */
.step--on {
  border-color: var(--accent);
  box-shadow: var(--shadow-lamp);
}

.step--on .step__num { color: var(--accent); }

@media (min-width: 64rem) {
  /* Чотири фази вкладаються в екран, тому доріжка тут не доріжка, а рівний ряд.
     Це не косметика: поки колонки були фіксовані на 22rem, чотири картки
     вилазили за вікно на ~209px, вмикався пін, і після його зняття доріжка
     лишалася зсунутою — перша картка назавжди йшла під рейку, четверта
     обрізалася кромкою вікна. Пін при цьому купував 185px скролу заради 209px
     ходу, тобто не робив нічого корисного.

     Тепер overflow дорівнює нулю, і модуль process.js сам вимикає пін: у ньому
     distance рахується як «ширина доріжки мінус ширина вікна». */
  .process__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    inline-size: auto;
  }

  .process__viewport { padding-inline: var(--wrap-pad); }
}

/* ---- телефон ------------------------------------------------------------------
   Пін на телефоні не вмикається, тож закріплений блок — це звичайна смуга з
   доріжкою карток. Поля в неї десктопні: 64px зверху і знизу плюс 80px під
   шапкою на екран 844px. Секція має власне поле замість .section, тому й
   вкорочувати його треба тут. */
@media not all and (min-width: 48rem) {
  .process__pin { padding-block: var(--section-pad-tight); }

  .process__head { margin-block-end: var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .step,
  .step__num { transition: none; }
}