/* ---------- /web · «Как проходит обучение»: шаги слева, кадр платформы справа ----------
   Принцип — как в блоке «Как вы станете…» у Практикума: один шаг = один экран прокрутки. Слева номер, заголовок
   и 2–3 строки текста (главное — белым), справа крупный кадр платформы: на широком экране он выходит за правый
   край контейнера до края окна (арт до края). Раскладка — одна сетка, в ней чередуются текст шага и «рукав» с кадром.
   Рукав шага N растянут от своей строки до конца сетки (grid-row: N / -1), кадр внутри липнет по центру окна:
   следующий кадр наезжает на предыдущий и остаётся — без JS. Текст тоже липнет, поэтому смена кадра и текста идёт
   в одном ритме. JS (js/web-process.js) только подсвечивает активный шаг, ведёт рельс, меряет высоту кадра
   и включает ролик. На телефоне сетка в колонку: текст, под ним кадр, ничего не липнет. */

.way .section__lead { text-wrap: pretty; }

.way__grid {
  --way-gap: 48px;                  /* колонка текста ↔ колонка кадра */
  --way-row: clamp(640px, var(--screen-h) - var(--nav-h), 960px); /* «время на шаг» ≈ экран под шапкой; потолок — чтобы сверхвысокий вьюпорт (полностраничные снимки) не раздувал блок */
  --way-frame-h: 0px;               /* высоту кадра меряет JS — по ней равняются рельс, текст и липкий верх */
  --way-top: clamp(var(--nav-h) + 24px, (var(--screen-h) + var(--nav-h) - var(--way-frame-h)) / 2, 260px); /* кадр липнет по центру окна под шапкой */
  --way-prog: 0;                    /* заливка рельса 0…1 */
  position: relative; margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px;
}

/* --- текст шага --- */
.way__step { min-width: 0; }
.way__body { display: grid; gap: 12px; align-content: start; }
.way__no { font: 500 13px/16px var(--mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .42); transition: color .4s var(--ease); }
.way__ttl { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.018em; color: #fff; text-wrap: balance; }
.way__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted-2); text-wrap: pretty; }
.way__text b { font-weight: 600; color: #fff; } /* главное в шаге — белым, остальное приглушено */
.way__fact {
  margin: 4px 0 0; display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6); text-wrap: pretty;
}
.way__fact::before { content: ""; flex: none; margin-top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(199, 255, 46, .6); }

/* --- кадр платформы: арт до края, как .road__frame --- */
.way__sleeve { min-width: 0; }
.way__frame {
  position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14); background: #0F1114;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.way__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.way__gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(150deg, rgba(255, 255, 255, .07), transparent 40%); }

/* --- рельс: линия с точками слева от текста, есть только на широком экране --- */
.way__rail { display: none; }
@media (max-width: 1023px) { .way__no { color: var(--lime); } } /* в колонке номера — лаймовый ритм между шагами */

/* телефон и планшет: кадр под текстом, между шагами воздух; шаги проявляются по мере прокрутки (is-in ставит JS) */
.way__sleeve { margin-bottom: 28px; }
.way__sleeve:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  .way__grid.is-live .way__step, .way__grid.is-live .way__sleeve { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .way__grid.is-live .way__sleeve { transition-delay: .12s; }
  .way__grid.is-live .is-in { opacity: 1; transform: none; }
}

/* ---------- широкий экран: две колонки, кадры липнут и наезжают друг на друга ---------- */
@media (min-width: 1024px) {
  .way { overflow-x: clip; } /* кадр выходит до края окна; с полосой прокрутки 100vw шире страницы на её ширину — лишнее срезаем, липкость не ломается (clip не создаёт прокрутку) */
  .way__grid {
    --way-bleed: 32px; /* поле контейнера справа (по брейкпоинтам .container в main.css); точное значение ставит JS */
    grid-template-columns: minmax(0, 9fr) minmax(0, 15fr);
    grid-template-rows: repeat(4, minmax(var(--way-row), auto)) minmax(calc(var(--way-frame-h) + 48px), auto); /* последний шаг не «висит» над пустотой — после него сразу следующий блок */
    column-gap: var(--way-gap); row-gap: 0; margin-top: 48px;
  }
  /* порядок детей: рельс, затем пары «шаг, рукав» ×5 — рукав тянется от своей строки до конца сетки */
  .way__grid > :nth-child(1)  { grid-row: 1 / -1; grid-column: 1; }
  .way__grid > :nth-child(2)  { grid-row: 1; }
  .way__grid > :nth-child(3)  { grid-row: 1 / -1; }
  .way__grid > :nth-child(4)  { grid-row: 2; }
  .way__grid > :nth-child(5)  { grid-row: 2 / -1; }
  .way__grid > :nth-child(6)  { grid-row: 3; }
  .way__grid > :nth-child(7)  { grid-row: 3 / -1; }
  .way__grid > :nth-child(8)  { grid-row: 4; }
  .way__grid > :nth-child(9)  { grid-row: 4 / -1; }
  .way__grid > :nth-child(10) { grid-row: 5; }
  .way__grid > :nth-child(11) { grid-row: 5 / -1; }
  .way__step { grid-column: 1; }
  .way__sleeve { grid-column: 2; margin: 0; }

  /* текст липнет на уровне кадра и стоит по его центру; min-height = высоте кадра, чтобы текст и кадр отлипали в один момент */
  .way__body { position: sticky; top: var(--way-top); min-height: var(--way-frame-h); align-content: center; gap: 14px; padding-left: 40px; padding-bottom: 8px; transition: opacity .45s var(--ease); }
  .way__grid.is-live .way__step:not(.is-on) .way__body { opacity: .34; }
  .way__step.is-on .way__no { color: var(--lime); }

  /* кадр — до правого края окна: скругление и рамка только слева; на сверхшироком низком окне кадр не выше экрана */
  .way__sleeve { margin-right: calc(-1 * var(--way-bleed)); }
  .way__frame { position: sticky; top: var(--way-top); max-width: calc((var(--screen-h) - var(--nav-h) - 64px) * 16 / 9); border-radius: 24px 0 0 24px; border-right: 0; transform-origin: 0 50%; transition: transform .5s var(--ease), opacity .5s var(--ease); }
  .way__frame.is-under { transform: scale(.94) translateY(-10px); opacity: .55; } /* кадр, на который наехал следующий, чуть уходит вглубь */

  .way__rail { display: block; position: sticky; top: var(--way-top); height: var(--way-frame-h); width: 12px; justify-self: start; z-index: 1; }
  .way__rail::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, .12); }
  .way__rail b { position: absolute; left: 5px; top: 6px; width: 2px; height: calc(var(--way-prog) * (100% - 12px)); border-radius: 1px; background: var(--lime); box-shadow: 0 0 12px rgba(199, 255, 46, .55); transition: height .15s linear; }
  .way__rail i { position: absolute; left: 0; top: calc(var(--k) * (100% - 12px)); width: 12px; height: 12px; border-radius: 50%; background: #0B0B0C; border: 2px solid rgba(255, 255, 255, .18); box-sizing: border-box; transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--spring), box-shadow .35s var(--ease); }
  .way__rail i:nth-child(2) { --k: 0; }
  .way__rail i:nth-child(3) { --k: .25; }
  .way__rail i:nth-child(4) { --k: .5; }
  .way__rail i:nth-child(5) { --k: .75; }
  .way__rail i:nth-child(6) { --k: 1; }
  .way__rail i.is-done { border-color: rgba(199, 255, 46, .55); background: rgba(199, 255, 46, .55); }
  .way__rail i.is-on { border-color: var(--lime); background: var(--lime); transform: scale(1.25); box-shadow: 0 0 16px rgba(199, 255, 46, .7); }
}

@media (min-width: 1024px) {
  .way__ttl { font-size: 28px; line-height: 34px; letter-spacing: -.022em; }
  .way__text { font-size: 17px; line-height: 26px; }
}
/* 1024–1439: контейнер уже — колонке текста больше доли, чтобы шаг оставался в 3 строки */
@media (min-width: 1024px) and (max-width: 1439px) {
  .way__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .way__ttl { font-size: 26px; line-height: 32px; }
  .way__text { font-size: 16px; line-height: 24px; }
}
@media (min-width: 1280px) {
  .way__grid { --way-gap: clamp(48px, 4.5vw, 72px); --way-bleed: max(var(--wrap-pad), (100vw / var(--z, 1) - var(--wrap-max)) / 2); }
  .way__ttl { font-size: clamp(30px, 2.1vw, 36px); line-height: 1.16; }
  .way__text { font-size: 18px; line-height: 28px; }
  .way__body { max-width: 580px; padding-right: 8px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .way__text { font-size: 17px; line-height: 26px; }
}


@media (max-width: 767px) {
  .way__grid { margin-top: 32px; row-gap: 16px; }
  .way__ttl { font-size: 22px; line-height: 28px; }
  .way__text { font-size: 15px; line-height: 22px; }
  .way__sleeve { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .way__body, .way__frame, .way__rail b, .way__rail i, .way__no, .way__step, .way__sleeve { transition: none; }
  .way__frame.is-under { transform: none; }
  .way__grid.is-live .way__step, .way__grid.is-live .way__sleeve { opacity: 1; transform: none; } /* статика: всё видно сразу */
}