/* ============================================================
   ТЕЛЕФОННЫЙ СЛОЙ
   🔴 Всё в этом файле живёт ТОЛЬКО внутри @media (max-width: 699px).
   Компьютерная версия отсюда не меняется ни одной строкой —
   файл подключён последним, поэтому правки адресные и предсказуемые.
   ============================================================ */
@media (max-width: 699px) {

  /* ---------- сцены персонажей ---------- */
  /* перед новой сценой нужен воздух: раньше заголовок шёл вплотную
     к последнему пункту предыдущего персонажа */
  .scenes .tt-2a, .scenes .tt-3a { margin-top: 26px; }
  /* третья фигура вытянутая и была на 170 px выше соседей */
  .scenes .fg-3 { width: min(44vw, 196px); }

  /* ---------- «Тебе с нами, если ты» ---------- */
  /* строки шли до середины карточки, хотя иллюстрация мешает
     только последнему пункту — отступ оставляем ему одному */
  .card > .panel .list { padding-right: 0; }
  .card > .panel .list li:last-child { padding-right: clamp(70px, 27vw, 124px); }
  /* иллюстрация опущена ниже: так она попадает только в полосу последнего
     пункта, которому отступ и оставлен */
  .card__art { bottom: -36px; right: -6px; }
  /* «четвертинка» повёрнута на 34°, поэтому при равной ширине её габарит
     был вдвое больше соседей — равняем по видимому размеру, а не по width */
  .card__art--girl    { width: clamp(96px, 26vw, 136px) !important; }
  .card__art--pom     { width: clamp(112px, 32vw, 170px) !important; }
  .card__art--boy     { width: clamp(104px, 29.5vw, 158px) !important; }
  .card__art--quarter { width: clamp(62px, 17.6vw, 96px) !important; }
  /* у «портфолио, которое не работает» последний пункт короткий — одной строки
     не хватает, чтобы закрыть рисунок, поэтому отступ и предпоследнему */
  .card:has(.card__art--quarter) .list li:nth-last-child(2) { padding-right: clamp(70px, 27vw, 124px); }

  /* ---------- результаты ---------- */
  /* стрелки уместны на широком экране, на телефоне — шум.
     Подменяем картинку вариантом без них (см. <picture> в разметке). */
  .res__pic { display: contents; }
  /* плашки во втором блоке должны чередоваться: подряд шли два текста без неё */
  .res--2 .rt.rt--card { padding: 0; background: none; border-radius: 0; }
  .res--2 .rt:nth-of-type(odd) {
    padding: 14px 16px; border-radius: 14px; background: #f3eeea;
  }

  /* ---------- «Вместе оба этапа…» ---------- */
  /* иллюстрация целиком, без обрезки девушки: она шире экрана и прижата
     вправо, поэтому красный платок идёт по всей нижней линии и обрывается
     только краем экрана. Текст лежит в пустом левом верхнем углу. */
  body.light-theme .finale.light { display: block; position: relative; overflow: hidden; }
  .finale__bg {
    position: absolute; right: 0; bottom: 0;
    width: 128%; max-width: none; margin: 0;
    height: auto; min-height: 0; object-fit: fill;
  }
  body.light-theme .finale.light .finale__text {
    position: relative; z-index: 2;
    transform: none; margin: 0; background: none;
    width: min(64%, 320px);
    padding: clamp(12px, 3.6vw, 20px) 0 clamp(120px, 30vw, 170px) clamp(16px, 4.5vw, 24px);
  }
  .finale__text p { font-size: clamp(13px, 3.5vw, 17px); line-height: 1.4; }
  .finale.light .btn { padding: 11px 18px; font-size: clamp(13px, 3.4vw, 16px); }

  /* ---------- автор и спикер ---------- */
  .qz, .au { gap: 22px; }                       /* воздух между кадром и подписью */
  .au__art {
    max-width: 230px;                            /* влезает в экран вместе с текстом */
    border-radius: clamp(16px, 4vw, 22px);       /* края как у блоков */
  }
  .au__nick { font-size: clamp(15px, 4vw, 17px); }

  /* ---------- «Я поделила процесс обучения…» ---------- */
  /* веточки кладём горизонтально: стоймя они съедали экран и
     отодвигали заголовок программы. Верхняя смотрит вправо, нижняя влево. */
  .split { --fl-w: min(42vw, 192px); gap: clamp(4px, 1.6vw, 10px); }
  .split__fl {
    width: var(--fl-w);
    /* поворот не меняет место в потоке — лишнюю высоту снимаем полями.
       Оставляем запас: у веточки есть диагональные листья, которые
       выходят за квадрат поворота и иначе лезут в заголовок ниже. */
    margin-block: calc(var(--fl-w) * -0.32);
  }
  .split__fl--l { transform: rotate(90deg); }               /* вправо, над текстом */
  /* нижняя веточка: тоже горизонтально влево, но отражена — листья вниз,
     стебель кверху, к тексту */
  .split__fl--r { transform: scaleY(-1) rotate(-90deg); }
  .split__body { gap: .85em; }                              /* два абзаца с просветом */
  /* текст по центру: в общем файле у абзаца сброшены поля ради ряда на компьютере */
  .split__text { margin-inline: auto; }
  .s12 { padding-bottom: clamp(6px, 2vw, 14px); }

  /* ---------- по центру ---------- */
  /* общий мобильный сброс делает все заголовки левыми — эти возвращаем в центр */
  .s2 .h2, .s5 .h2, .s11 .h2, .s11b .h2, .s-book .h2 { text-align: center; }
  /* «Квест внутри курса» — одной строкой по центру */
  .qz-head { display: block; order: 1; text-align: center; }
  .qz-h { display: inline; }
  /* в акварельном начертании пробел между словами почти незаметен */
  .qz-h1 { margin-right: .3em; }
  .qz-h2 { margin-top: 0; }
  /* автор и спикер: кадр, имя и ник по центру */
  .au__art { margin-inline: auto; }
  .au__head { text-align: center; }
  .au__nick { font-size: clamp(17px, 4.6vw, 20px); }
  /* текст под «Общим проектом» — по левому краю */
  .book__text { text-align: left; margin-inline: 0; }

  /* ---------- просмотр иллюстраций ---------- */
  /* на телефоне тёмная подложка выглядит чужой — делаем светлую */
  .lb { background: rgba(238, 232, 227, .97); padding: 44px 12px 40px; }
  .lb__img { filter: drop-shadow(0 12px 30px rgba(87, 29, 23, .18)); }
  .lb__close, .lb__nav {
    background: rgba(125, 18, 32, .10); color: var(--wine-line);
  }
  .lb__close:hover, .lb__nav:hover { background: rgba(125, 18, 32, .18); }
  .lb__count { color: var(--ink-mid); }
}