/* lessons-stack.css — секция «Що всередині»: стопка карточек уроков.
   База ниже — обычный список (без JS и при prefers-reduced-motion).
   Живой режим — .ls--live (класс ставит lessons-stack.js).
   Шрифтовые роли берутся со страницы: .t-h2 / .t-h3 / .t-body и токены --f-*, --fs-*.   */

.ls {
  --ls-ink: var(--ink, #201B14);
  --ls-plate: var(--c-milk, #F5F4EF);   /* подложка под текстом поверх фото комнаты — ровная молочная, без полупрозрачности (контроль 14.09) */
  --ls-plate-line: rgb(var(--ink-rgb, 32 27 20) / .08);
  --ls-fog: var(--c-milk, #F5F4EF);            /* дальние панели стопки уходят в этот цвет */
  --ls-media-bg: var(--c-deep-2, #2C261D);
  --ls-bonus-bg: var(--c-deep, #201B14);
  --ls-bonus-ink: var(--c-on-deep, #EFEDE0);
  --ls-bonus-line: rgb(var(--milk-rgb, 239 237 224) / .16);
  --ls-dot-bg: var(--c-milk, #F5F4EF);          /* парный к --ls-ink цвет точки: заливка неактивной, кольцо активной */
  --ls-radius: var(--radius, 22px);
  --ls-plate-radius: 18px;
  --ls-top: 64px;          /* высота фиксированной шапки страницы */
  --ls-bottom: 16px;
  --ls-side: 30px;         /* поле слева/справа от карточки (справа — точки) */
  --ls-max-w: 440px;
  --ls-ratio: .75;         /* высота кадра к ширине: клипы 640×480 */
  --ls-gap: 10px;          /* между кадром и подписью */
  --ls-runway: 120svh;     /* запас дорожки под липкой сценой (прячет инерцию iOS) */
  --ls-pad-top: 2vh;   /* [Nick 15.09 ночь] «Що всередині» ближе к блоку 4 (было 6vh) */      /* страница: над «Що всередині» та же комната, что у «Чому не вийде», — большое поле не нужно */
  position: relative;
  padding-top: var(--ls-pad-top);
  color: var(--ls-ink);
}
.ls[data-theme="dark"] {
  --ls-ink: var(--cream, #EFEDE0);
  --ls-plate: rgba(32, 27, 20, .62);
  --ls-plate-line: rgba(239, 237, 224, .12);
  --ls-fog: #201B14;
  --ls-bonus-bg: #EFEDE0;
  --ls-bonus-ink: #201B14;
  --ls-bonus-line: rgba(32, 27, 20, .16);
  --ls-dot-bg: var(--ink-2, #2C3425);
}

/* ── заголовок и плашка ───────────────────────────────────────────── */
.ls__head { max-width: 600px; margin: 0 auto; padding: 0 var(--pad, 20px); text-align: center; }
.ls__intro {
  max-width: 24em; margin: 18px auto 0; padding: 16px 20px;
  border-radius: var(--ls-radius); background: var(--ls-plate); box-shadow: inset 0 0 0 1px var(--ls-plate-line);
}

/* ── карточка ─────────────────────────────────────────────────────── */
.ls__deck { display: grid; gap: 28px; max-width: var(--ls-max-w); margin: 32px auto 0; padding: 0 var(--pad, 20px) 12vh; }
.ls__dots { display: none; }
.ls-card { position: relative; margin: 0; }
.ls-card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate;
  border-radius: var(--ls-radius); background: var(--ls-media-bg);
}
.ls-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ls-card__shade { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: var(--ls-fog); opacity: 0; pointer-events: none; }
.ls-card__text {
  margin-top: var(--ls-gap); padding: 14px 18px 16px;
  border-radius: var(--ls-plate-radius); background: var(--ls-plate); box-shadow: inset 0 0 0 1px var(--ls-plate-line);
}
.ls-card__name { margin: 0; }
.ls-card__line { margin-top: 6px; }

/* бонусы: вместо кадра — тёмная панель со значками-подарками и номерами */
.ls-card__media--bonus {
  display: flex; align-items: center; padding: 0 20px;
  background: var(--ls-bonus-bg); color: var(--ls-bonus-ink);
}
.ls-bonus { width: 100%; margin: 0; padding: 0; list-style: none; }
.ls-bonus li { display: grid; grid-template-columns: 30px 1.1em 1fr; align-items: center; gap: 12px; padding: 14px 0; }
.ls-bonus li + li { border-top: 1px solid var(--ls-bonus-line); }
.ls-bonus .gift { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.ls-bonus__n { font-family: var(--f-num, "Aboreto", Georgia, serif); font-size: var(--fs-h2, 31px); line-height: 1; text-align: center; }
.ls-bonus__t { font-family: var(--f-body, system-ui, sans-serif); font-weight: 400; font-size: var(--fs-body, 16px); line-height: 1.35; }

/* ── живой режим: липкая сцена со стопкой ─────────────────────────── */
.ls--live .ls__runway { position: relative; height: calc(100vh + 120vh); height: calc(100svh + var(--ls-runway)); }
.ls--live .ls__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* [Nick 15.09 вечер] заголовок с плашкой — в сцене, над стопкой (под шапкой страницы) */
.ls--live .ls__stage > .ls__head { position: absolute; top: var(--ls-head-top, 64px); left: 0; right: 0; z-index: 250; margin: 0 auto; will-change: transform; }
.ls--live .ls__deck { position: absolute; inset: 0; display: block; max-width: none; margin: 0; padding: 0; }
.ls--live .ls-card {
  position: absolute; left: 50%; top: var(--ls-y0, 90px);
  width: var(--ls-w, 320px); margin-left: calc(var(--ls-w, 320px) / -2);
  transform-origin: 50% calc(var(--ls-mh, 240px) / 2);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  cursor: pointer;
  /* панель = карточка целиком (кадр + подпись), ровный прямоугольник со скруглением — как вкладка Safari (контроль 14.09) */
  background: var(--ls-panel, var(--c-milk, #F5F4EF)); border-radius: var(--ls-radius);
  box-shadow: 0 0 0 1px var(--ls-plate-line), 0 14px 30px -18px rgb(var(--shade-rgb, 44 52 37) / .5);
}
.ls--live { --ls-gap: 0px; }   /* подпись прилегает к кадру внутри панели */
/* глубина: панели стопки чуть темнее к дальним — узкие полосы читаются слоями (--ls-k ставит lessons-stack.js) */
.ls--live .ls-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: rgb(var(--shade-rgb, 44 52 37)); opacity: calc(var(--ls-k, 0) * .07);
}
.ls--live .ls-card__media { aspect-ratio: auto; height: var(--ls-mh, 240px); border-radius: var(--ls-radius) var(--ls-radius) 0 0; }
.ls--live .ls-card__text { margin-top: 0; background: none; box-shadow: none; border-radius: 0 0 var(--ls-radius) var(--ls-radius); }
.ls--live .ls-card__text { min-height: var(--ls-th, 0px); will-change: opacity; }

.ls--live .ls__dots {
  position: absolute; right: 0; top: calc(50% + var(--ls-top) / 2); z-index: 300;
  display: flex; flex-direction: column; transform: translateY(-50%);
}
/* тач-цель 44×44, видимая точка 6 px у правого края */
.ls__dot { display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; padding: 0 11px 0 0; -webkit-tap-highlight-color: transparent; }
/* двухтонная точка без прозрачности: неактивная ○ — светлая заливка + кольцо цветом текста,
   активная ● — заливка цветом текста + светлое кольцо, крупнее. Под точками фото комнаты любой яркости:
   на светлом читается кольцо, на среднем и тёмном — заливка; ≥3:1 хотя бы одной частью (замер — test.mjs) */
.ls__dot::before {
  content: ""; box-sizing: border-box; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ls-dot-bg); border: 1.5px solid var(--ls-ink);
  transition: background-color .25s var(--ease, ease), border-color .25s var(--ease, ease), transform .25s var(--ease, ease);
}
.ls__dot[aria-current="step"]::before { background: var(--ls-ink); border-color: var(--ls-dot-bg); transform: scale(1.4); }
.ls__dot:focus-visible { outline: none; }
.ls__dot:focus-visible::before { outline: 2px solid var(--ls-ink); outline-offset: 4px; }