/* ==================================================================
   Узкие экраны — правки поверх остальных таблиц. Подключается последней.

   1) Сетки, заданные инлайном в разметке, складываются в одну колонку.
      Инлайн бьёт медиа-запрос, поэтому здесь !important — иначе текст
      остаётся в колонке нулевой ширины.

   2) Мокапы не перестраиваются, а уменьшаются целиком, как будто
      смотришь на тот же Mac с расстояния. Холст у каждого жёсткий,
      масштаб — ступенями по брейкпоинтам (scale() требует безразмерное
      число, а vw на пиксели не поделить). Ступень посчитана по НИЖНЕЙ
      границе своего диапазона: иначе в узком его конце окно вылезает
      из колонки. Скрипт fitScenes потом уточняет масштаб до точного
      вписывания, но и без скрипта ничего не торчит.
   ================================================================== */

@media (max-width: 1000px) {
  /* у .aw правая колонка жёсткие 520 px: заголовку остаётся 265 px
     уже на ноутбучном окне — складываем раньше остальных */
  .aw { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; }
  .aw svg { max-width: 100% !important; }
}

@media (max-width: 900px) {
  /* --- инлайновые сетки --- */
  .last-line { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; min-height: 0 !important; }
  .footer-columns { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; }
  .band--handoff .band-copy { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
  .band--handoff .copy-main { grid-column: 1 !important; grid-row: 1 !important; }
  .band--handoff .band-draw { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; max-height: none !important; }
  .band--soon .band-draw { width: 100% !important; max-height: none !important; }
  /* чертежи внутри полос — по ширине колонки; иначе .band-draw{overflow:auto}
     просто срезает половину картинки */
  .band-draw { overflow: hidden !important; }
  .band-draw svg.draw { width: 100% !important; min-width: 0 !important; height: auto !important; }

  /* --- первый экран: приложение и плавающая панель едут вместе --- */
  .hero-scene { --hs: .62; position: relative; height: calc(580px * var(--hs)); overflow: hidden; }
  .hero-scene__canvas { position: absolute; top: 0; left: 0; width: 1100px; transform: scale(var(--hs)); transform-origin: top left; }
}

@media (max-width: 760px) {
  /* recompose-page.css переопределяет --edge внутри #how и #anywhere,
     и на узком экране выпуск за край получается шире, чем поля раздела:
     полоса с сохранённой встречей вылезала из страницы на 16 px */
  #how, #anywhere { --edge: 20px; }

  .hero-scene { --hs: .52; }
  .band-screen { --s: .63; }
  .vb-plate { --s: .53; }

  /* --- макбук: корпус остаётся на месте, уменьшается вся сцена --- */
  .band--mac .band-stage { --ms: .92; position: relative; height: calc(430px * var(--ms)); overflow: hidden; }
  .band--mac .mac { position: absolute; top: 0; left: 0; width: 646px; margin-inline: 0; transform: scale(var(--ms)); transform-origin: top left; }
  /* панель заметок — в той же пропорции к корпусу, что и на большом экране */
  .band--mac .os-notes { transform: scale(.6); }
}

@media (max-width: 640px) {
  .hero-scene { --hs: .41; }
  .band-screen { --s: .51; }
  .vb-plate { --s: .43; }
  .band--mac .band-stage { --ms: .74; }
}

@media (max-width: 520px) {
  .hero-scene { --hs: .34; }
  .band-screen { --s: .43; }
  .vb-plate { --s: .35; }
  .band--mac .band-stage { --ms: .62; }
}

@media (max-width: 440px) {
  .hero-scene { --hs: .27; }
  .band-screen { --s: .36; }
  .vb-plate { --s: .28; }
  .band--mac .band-stage { --ms: .51; }
}

@media (max-width: 370px) {
  /* совсем узкие экраны: длинному слову в заголовке некуда деться */
  h1, h2, h3 { overflow-wrap: break-word; }
  /* «Браузер / Zoom, Телемост… / Офлайн-встреча / Импорт записи» в две
     колонки требуют 152 px на ряд (значок 40 + отступ 16 + min-content
     «Телемост…» 96) — при 320 px это выпирало из страницы на 4 px */
  .aw > div { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-scene { --hs: .23; }
  .band-screen { --s: .30; }
  .vb-plate { --s: .25; }
  .band--mac .band-stage { --ms: .43; }
}

/* Форма заявки: два поля в ряд оставляют на каждое по 167 px при экране
   в 390 px. Подсказка «Email или Telegram» в такую ширину не влезает и
   обрезается, а подпись «Куда прислать Мюсли» переносится на вторую
   строку — и правое поле съезжает вниз на 24 px относительно левого.
   Ставим поля друг под другом.

   Смотрим на ширину самой формы, а не экрана: на планшете в 768 px
   рассказ о себе встаёт в две колонки, форме остаётся 171 px на поле —
   ровно та же беда, что и на телефоне, хотя экран вдвое шире.

   Порог 440 px: подсказке «Email или Telegram» нужно 157 px плюс 30 px
   полей ввода, подписи «Куда прислать Мюсли» — 165 px; два поля по
   212 px с промежутком в 16 px держат и то, и другое с запасом.

   Сетка задана инлайном в разметке, поэтому !important — как и у
   остальных правил этого файла. */
.access-form { container-type: inline-size; }
@container (max-width: 440px) {
  .access-form > div { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==================================================================
   Заголовок первого экрана: жёлтое — под каждой строкой отдельно.

   Обе выделенные фразы обёрнуты в inline-block, а жёлтое лежит поверх
   обёртки по её краям. Пока фраза в одну строку, края обёртки совпадают
   с краями слов. С 486 px фраза «можно работать» перестаёт помещаться,
   обёртка становится двухстрочным прямоугольником во всю ширину — и
   жёлтое закрашивает его целиком, оставляя пустое поле справа от «СО».

   Поэтому здесь жёлтое переезжает под сам текст: фон у строчного текста
   рисуется по каждой строке своей. Нужны две вещи. Первая — вернуть
   тексту строчность: style.css делает блоком все span внутри заголовка.
   Вторая — box-decoration-break: clone, иначе фон посчитается один на
   обе строки и размажется по ним как по одной.

   Ход маркера сохраняем: background-size едет от нуля до полной ширины
   в те же доли семисекундного показа, что и прежние кадры, и с той же
   задержкой в 2 с, с которой portrait.js запускает маркер на большом
   экране. Обе строки заливаются разом — вести перо по двум строкам
   подряд нечем, поэтому сам значок пера прячем.

   В объявлении фона ширина сразу полная: не проиграются кадры — жёлтое
   просто стоит на месте, а не пропадает.
   ================================================================== */

@keyframes marker-hl-lines-a {
  0%, 7% { background-size: 0% var(--hl-h); }
  24%, 100% { background-size: 100% var(--hl-h); }
}
@keyframes marker-hl-lines-b {
  0%, 28% { background-size: 0% var(--hl-h); }
  46%, 100% { background-size: 100% var(--hl-h); }
}

@media (max-width: 520px) {
  .hero-transcript h1 [data-marker-highlight],
  .hero-transcript h1 [data-marker-run] { display: none; }

  .hero-transcript h1 [data-marker-anim="marker-hl-a"] ~ span:last-child,
  .hero-transcript h1 [data-marker-anim="marker-hl-b"] ~ span:last-child {
    --hl-h: 0.66em;
    display: inline;
    padding: 0 0.04em;
    margin: 0 -0.04em;
    background-image: linear-gradient(var(--yellow), var(--yellow));
    background-repeat: no-repeat;
    /* 0,452em = 0,15em, на которые прежний блок отступал от верха строки,
       плюс 0,302em: у строчного текста фон начинается не от верха строки,
       а от верха площадки шрифта, а она у Literata выше. Величина взята
       замером и держится в em, поэтому не поедет при другом кегле. */
    background-position: 0 0.452em;
    background-size: 100% var(--hl-h);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .hero-transcript h1 [data-marker-anim="marker-hl-a"] ~ span:last-child {
    animation: marker-hl-lines-a 7s ease-in-out 2s 1 both;
  }
  .hero-transcript h1 [data-marker-anim="marker-hl-b"] ~ span:last-child {
    animation: marker-hl-lines-b 7s ease-in-out 2s 1 both;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-transcript h1 [data-marker-anim="marker-hl-a"] ~ span:last-child,
    .hero-transcript h1 [data-marker-anim="marker-hl-b"] ~ span:last-child {
      animation: none !important;
      background-size: 100% var(--hl-h) !important;
    }
  }
}