/*
 * ТЕЛЕФОН: ОДИН РАЗДЕЛ — ОДИН ЭКРАН.
 *
 * На телефоне маршрут не прокручивается, а листается разделами (см.
 * `src/marketing/cinema/mobile.ts`). Отсюда единственное жёсткое требование к
 * вёрстке: содержание раздела обязано целиком помещаться в кадр. Прокрутки
 * внутри экрана быть не должно никакой — ни вертикальной, ни горизонтальной:
 * низ такого раздела на телефоне физически недостижим.
 *
 * Замер до этих правил (375×812): «Создавай сцены» занимал 4547px вместо 812,
 * «Скачай Blender Bridge» — 1063px и прокручивался внутри себя, тарифы жили
 * горизонтальной каруселью, подвал стоял посреди экрана.
 *
 * Файл подключается последним и действует только ниже 700px, поэтому
 * компьютерная вёрстка им не затрагивается вовсе.
 */

@media (max-width: 699px) {

  /* ─── Общее ───────────────────────────────────────────────────────────── */

  /*
   * Кадр раздела — ровно экран.
   *
   * Сверху почти ничего не резервируется. Раньше здесь стояли 84 пикселя под
   * шапку, и получалось худшее из двух: и пустота наверху, и обрезанный низ —
   * замерено на окне 360×640, где содержание вылезало за нижний край сразу в
   * пяти разделах (тарифы на 127 пикселей, установка на 101). Шапка на
   * телефоне появляется по отдельному движению вверх и ложится поверх кадра:
   * держать под неё постоянную пустоту незачем.
   *
   * Снизу резерв остаётся — там живёт стрелка перехода.
   *
   * Высота считается в svh, то есть в самом коротком виде окна: у браузера на
   * телефоне адресная строка то появляется, то прячется, и содержание обязано
   * помещаться в тот момент, когда её видно.
   */
  #marketing-v5 [data-section-id] > .marketing-inner {
    min-block-size: 100vh; min-block-size: 100svh;
    max-block-size: 100vh; max-block-size: 100svh;
    padding-block: 20px 64px;
    align-content: center;
  }

  /* Боковые поля намеренно уже вертикальных: так кадр читается шире, а
     воздух остаётся там, где он работает — сверху и снизу. */
  #marketing-v5 .marketing-inner { width: calc(100% - 28px); }

  /*
   * Отступ кадра приходится перебивать явно.
   *
   * Каждый из этих разделов задаёт себе свой верхний отступ селектором с
   * лишним атрибутом — `#uses-game[data-game-sequence]`, `#uses-site[data-highlights]`,
   * `#share[data-share-directed]`, `#marketing-v5[data-blocks-mounted] #pricing` —
   * и любое более простое правило проигрывает, каким бы поздним оно ни было.
   * Замерено: сверху оставалось 80–112 пикселей пустоты, а низ в это же время
   * обрезался на 36–86. Поэтому здесь повторена ровно та же сила селектора.
   */
  #marketing-v5[data-blocks-mounted] :is(
    #workflow, #uses-game[data-game-sequence], #uses-game,
    #uses-site[data-highlights], #uses-site, #uses-video,
    #uses-freelance, #uses-more, #share[data-share-directed], #share,
    #audience, #closer, #pricing, #install
  ) > .marketing-inner {
    padding-block: 20px 64px;
    /* Воздуха между заголовком и содержанием чуть больше: при 10 пикселях
       экран читался как плотно набитый лист, а не как кадр. */
    gap: clamp(16px, 2.8vh, 26px); gap: clamp(16px, 2.8svh, 26px);
  }

  #marketing-v5[data-blocks-mounted] #footer > .marketing-inner {
    padding-block: 20px 18px;
  }

  /* Стрелка перехода стоит над нижним краем и не накрывает содержание. */
  .cinema-cue { bottom: 14px; }

  /* ─── «Создавай сцены в 3D, общаясь с AI» ─────────────────────────────── */

  /*
   * Пять тактов лежат в потоке друг под другом — на компьютере их листает
   * прокрутка. На телефоне такт ровно один, поэтому они складываются в стопку
   * и занимают только верх кадра, а низ отдан двум окнам.
   */
  #marketing-v5 #workflow > .marketing-inner {
    position: relative;
    display: block;
    padding-block: 24px 64px;
  }

  #marketing-v5 #workflow .editorial-beat {
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    min-height: 0;
    height: auto;
  }

  #marketing-v5 #workflow .editorial-beat .editorial-visual {
    font-size: clamp(27px, 8.4vw, 34px);
    line-height: 1.06;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-stage {
    --editorial-stage-top: 26vh; --editorial-stage-top: 26svh;
    --editorial-stage-height: 62vh; --editorial-stage-height: 62svh;
    --editorial-stage-width: calc(100vw - 32px);
    --editorial-stage-gap: 10px;
  }

  /* ─── Ролики ──────────────────────────────────────────────────────────── */

  /*
   * Оба окна — 16:9, независимо от пропорции самого ролика: квадрат сверху и
   * прямоугольник снизу читались как ошибка вёрстки. Ролик вписывается внутрь
   * целиком, поля остаются полями.
   */
  #marketing-v5 #uses-video .video-pair { gap: 12px; margin-top: 18px; }

  #marketing-v5[data-blocks-mounted] #uses-video .video-slot,
  #marketing-v5 #uses-video .video-slot {
    width: 100%;
    height: auto;
    min-height: 0;
    /* Источник первого ролика квадратный, и рамка наследовала его пропорцию:
       сверху квадрат, снизу прямоугольник — читалось как ошибка вёрстки. */
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
  }

  #marketing-v5 #uses-video .video-slot > *,
  #marketing-v5 #uses-video .video-slot video { width: 100%; height: 100%; object-fit: contain; }

  #marketing-v5 #uses-video > .marketing-inner { gap: 16px; }
  #marketing-v5 #uses-video .marketing-copy h2 { font-size: clamp(26px, 7.4vw, 34px); }

  /* ─── «Подходит и тем, кто никогда не открывал Blender» ───────────────── */

  /* Две колонки идут подряд и не выходят за нижний край: замерено +4px. */
  #marketing-v5 #audience > .marketing-inner { gap: 10px; }
  #marketing-v5 #audience .audience-split { gap: 18px; }
  #marketing-v5 #audience .audience-split article { padding-top: 16px; }
  #marketing-v5 #audience .audience-split article p { margin-top: 12px; }

  /* ─── Тарифы ──────────────────────────────────────────────────────────── */

  /*
   * Карусель отменена. Четыре срока подписки — это сравнение, а сравнивать
   * можно только то, что видно одновременно; на ленте в кадр попадал один
   * тариф и обрезанный край второго, причём первым оказывался самый дорогой.
   */
  #marketing-v5 #pricing .offer-pricing__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 10px;
    margin-top: 22px;
    padding: 0;
    overflow: visible;
  }

  #marketing-v5 #pricing .offer-pricing__grid > .offer-plan {
    flex: none;
    min-height: 0;
    padding: 14px 12px 16px;
  }

  #marketing-v5 #pricing .offer-plan__heading { font-size: 15px; }
  #marketing-v5 #pricing .offer-plan__total { padding-top: 14px; font-size: 26px; }
  #marketing-v5 #pricing .offer-plan__monthly { margin-top: 6px; font-size: 12px; }
  #marketing-v5 #pricing .offer-plan__saving { margin-top: 8px; font-size: 11px; }
  #marketing-v5 #pricing .offer-plan__trial { margin-top: 10px; font-size: 11px; }
  #marketing-v5 #pricing .offer-plan__badge { top: -20px; right: 6px; padding: 3px 6px; font-size: 9px; }
  #marketing-v5 #pricing .offer-plan__availability { top: calc(100% + 5px); font-size: 11px; }

  #marketing-v5 #pricing > .marketing-inner { padding-block: 20px 64px; }
  #marketing-v5 #pricing .offer-heading h2 { font-size: clamp(28px, 8vw, 36px); }
  #marketing-v5 #pricing .offer-trial { margin-top: 26px; gap: 12px; }
  #marketing-v5 #pricing .offer-trial h3 { font-size: 20px; }
  #marketing-v5 #pricing .offer-trial p { font-size: 13px; line-height: 1.4; }

  /* ─── «Скачай Blender Bridge» ─────────────────────────────────────────── */

  /*
   * Раздел требовал 1063px на экран в 812 и прокручивался внутри себя: низ со
   * вторым способом подключения был недостижим. Здесь он сжат до кадра —
   * ужимаются отступы и кегль, а не выбрасывается содержание.
   */
  #marketing-v5 #install > .marketing-inner { padding-block: 20px 64px; align-content: start; }
  #marketing-v5 #install .offer-install { overflow: visible; gap: 14px; }
  #marketing-v5 #install .offer-heading h2 { font-size: clamp(26px, 7.4vw, 34px); }
  #marketing-v5 #install .offer-install__guide { margin-top: 14px; gap: 12px; }
  #marketing-v5 #install .offer-install__foundation { gap: 10px; }
  #marketing-v5 #install .offer-install__foundation h3,
  #marketing-v5 #install .offer-install__path h4 { font-size: 17px; line-height: 1.15; }
  #marketing-v5 #install .offer-install__foundation p,
  #marketing-v5 #install .offer-install__path > p,
  #marketing-v5 #install .offer-install__ready { margin-top: 6px; font-size: 12px; line-height: 1.35; }
  #marketing-v5 #install .offer-install__step-heading { font-size: 13px; }
  #marketing-v5 #install .offer-install__choice { margin-top: 14px; }
  #marketing-v5 #install .offer-install__paths { gap: 14px; margin-top: 12px; }
  #marketing-v5 #install .offer-install__path + .offer-install__path { padding-top: 14px; }
  #marketing-v5 #install .offer-install__actions { margin-top: 10px; gap: 8px; }
  #marketing-v5 #install .offer-action { min-height: 40px; padding-inline: 16px; font-size: 13px; }
  #marketing-v5 #install .offer-install__availability > span { font-size: 11px; }
  #marketing-v5 #install .offer-install__availability, #marketing-v5 #install .offer-trial__action { gap: 4px; }
  #marketing-v5 #install .offer-install__guide { margin-top: 10px; }
  #marketing-v5 #install .offer-install__path > .offer-install__detail { margin-top: 4px; }
  #marketing-v5 #install .offer-install__ready { margin-top: 8px; }
  #marketing-v5 #install .offer-install__route-heading { gap: 8px; }
  #marketing-v5 #install .offer-heading h2 { line-height: 1.02; }
  #marketing-v5 #install .offer-install__foundation p,
  #marketing-v5 #install .offer-install__path > p,
  #marketing-v5 #install .offer-install__ready { font-size: 11.5px; line-height: 1.3; }
  #marketing-v5 #install .offer-install__foundation h3,
  #marketing-v5 #install .offer-install__path h4 { font-size: 16px; }
  #marketing-v5 #install .offer-action { min-height: 38px; }

  /* ─── Подвал ──────────────────────────────────────────────────────────── */

  /*
   * Подвал — это низ страницы, а не её середина. Он прижимается к нижнему
   * краю: до этого он вставал по центру и доходил почти до шапки, оставляя
   * под собой пустоту.
   */
  #marketing-v5 #footer > .marketing-inner {
    align-content: end;
    padding-block: 24px 18px;
  }

  /*
   * Подвал занимал 296 пикселей из 640 — почти половину экрана — и начинался
   * прямо под кубиком и мостом, без зазора. Здесь он сжат примерно вдвое:
   * ссылки идут в строку, а не столбиком, знаки соцсетей мельче, внутренние
   * промежутки убраны. Мир финала остаётся выше, подвал — внизу.
   */
  #marketing-v5 #footer .offer-footer {
    gap: 10px;
    padding-top: 14px;
    row-gap: 10px;
  }

  #marketing-v5 #footer .offer-footer__brand { font-size: 17px; gap: 10px; }
  #marketing-v5 #footer .offer-footer__brand img { width: 28px; height: 28px; }

  #marketing-v5 #footer .offer-footer__legal {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    gap: 6px 18px;
    font-size: 12.5px;
  }

  #marketing-v5 #footer .offer-footer__socials { gap: 10px; }
  #marketing-v5 #footer .offer-footer__social { width: 32px; height: 32px; }
  #marketing-v5 #footer .offer-footer__social svg { width: 16px; height: 16px; }
  #marketing-v5 #footer .offer-footer__copyright { font-size: 11px; }

  /* Старая разметка подвала — на случай статического запасного вида. */
  #marketing-v5 #footer .marketing-footer { padding: 14px 0 0; gap: 10px; }
  #marketing-v5 #footer .footer-brand { font-size: 17px; gap: 10px; }
  #marketing-v5 #footer .footer-brand img { width: 28px; height: 28px; }
  #marketing-v5 #footer .footer-links { gap: 14px; font-size: 12.5px; }
  #marketing-v5 #footer .footer-social span { width: 32px; height: 32px; }
  #marketing-v5 #footer .marketing-footer > p { font-size: 11px; }

  /* ─── Ещё немного места там, где содержания больше всего ──────────────── */

  /* Замер на окне 360×640: «Поделиться» вылезало на 60 пикселей. */
  #marketing-v5 #share > .marketing-inner { gap: 14px; }
  #marketing-v5 #share .marketing-copy h2 { font-size: clamp(25px, 7vw, 32px); }
  #marketing-v5 #share .share-reasons { font-size: 14px; }
  #marketing-v5 #share .share-proof__modal { padding: 12px; }
  #marketing-v5 #share .proof-slot { max-block-size: 42vh; max-block-size: 42svh; }
  /* Ряд соцсетей стоял непомерно широко: кнопки расходились по краям окна. */
  #marketing-v5 #share .share-proof__platforms { gap: 8px; justify-content: center; }

  /* Цепочка заказа вылезала на 48 пикселей. */
  #marketing-v5 #uses-freelance > .marketing-inner { gap: 10px; }
  #marketing-v5 #uses-freelance .marketing-copy h2 { font-size: clamp(25px, 7vw, 32px); }
  #marketing-v5 #uses-freelance .proof-slot { max-block-size: 52vh; max-block-size: 52svh; }

  /* Две колонки аудитории вылезали на 45 пикселей. */
  #marketing-v5 #audience .audience-split h3 { font-size: 17px; line-height: 1.12; }
  #marketing-v5 #audience .audience-split article p { font-size: 12.5px; line-height: 1.32; }
  #marketing-v5 #audience .marketing-copy h2,
  #marketing-v5 #audience .audience-split > h2 { font-size: clamp(22px, 6.2vw, 28px); }

  /* Тарифы вылезали на 127 пикселей — больше всех. */
  #marketing-v5 #pricing .offer-pricing__grid { gap: 30px 8px; margin-top: 16px; }
  #marketing-v5 #pricing .offer-plan__total { padding-top: 10px; font-size: 23px; }
  #marketing-v5 #pricing .offer-plan { padding: 11px 10px 12px; }
  #marketing-v5 #pricing .offer-trial { margin-top: 18px; }
  #marketing-v5 #pricing .offer-trial h3 { font-size: 18px; }
  #marketing-v5 #pricing .offer-action { min-height: 36px; font-size: 13px; }
  #marketing-v5 #pricing .offer-heading h2 { font-size: clamp(24px, 6.6vw, 30px); }
  #marketing-v5 #pricing .offer-plan__trial { margin-top: 7px; }
  #marketing-v5 #pricing .offer-plan__saving { margin-top: 5px; }
  #marketing-v5 #pricing .offer-trial p { font-size: 12px; }
  #marketing-v5 #install .offer-heading h2 { font-size: clamp(23px, 6.4vw, 30px); }
  #marketing-v5 #install .offer-action { min-height: 35px; font-size: 12.5px; }
  #marketing-v5 #install .offer-install__foundation h3,
  #marketing-v5 #install .offer-install__path h4 { font-size: 15px; }

  /* Установка вылезала на 101 пиксель. */
  #marketing-v5 #install .offer-install { gap: 10px; }
  #marketing-v5 #install .offer-install__guide { margin-top: 8px; gap: 8px; }
  #marketing-v5 #install .offer-install__choice { margin-top: 10px; }
  #marketing-v5 #install .offer-install__paths { gap: 10px; margin-top: 8px; }
  #marketing-v5 #install .offer-install__path + .offer-install__path { padding-top: 10px; }
  #marketing-v5 #install .offer-install__actions { margin-top: 10px; }
  /*
   * «Скоро» встаёт рядом с кнопкой, а не под ней: две подписи столбиком
   * съедали сорок пикселей и рвали ритм — между кнопкой и кнопкой оказывалось
   * больше воздуха, чем между шагами установки.
   */
  #marketing-v5 #install .offer-install__availability {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    text-align: left;
  }
  #marketing-v5 #install .offer-install__availability > span { text-align: right; }
  /* Шаги получают собственный воздух — иначе экран читается как свалка. */
  #marketing-v5 #install .offer-install__guide { margin-top: 14px; gap: 14px; }
  #marketing-v5 #install .offer-install__choice { margin-top: 16px; }
  #marketing-v5 #install .offer-install__paths { gap: 14px; margin-top: 12px; }
  #marketing-v5 #install .offer-install__path + .offer-install__path { padding-top: 14px; }

  /* ─── Плеер ───────────────────────────────────────────────────────────── */

  /*
   * Кнопки плеера на телефоне заметно мельче, а панель не висит раскрытой.
   * Касание на телефоне оставляет «залипшее» наведение, и правило :hover
   * держало панель на виду постоянно: было видно крупные кнопки поверх
   * ролика с первой секунды.
   */
  .bb-video-player__controls {
    inset: auto 8px 8px;
    grid-template-columns: 34px 1fr 34px minmax(30px, 54px) 34px;
    gap: 6px;
  }

  .bb-video-player__button { width: 34px; height: 34px; }
  .bb-video-player__button svg { width: 16px; height: 16px; }
  .bb-video-player__time { font-size: 10.5px; }
  .bb-video-player__seek, .bb-video-player__volume { height: 22px; }
}

@media (max-width: 699px) and (hover: none) {
  .bb-video-player:hover .bb-video-player__controls { opacity: 0; visibility: hidden; }
  /* Пока ролик стоит — кнопка запуска обязана быть видна. Пошёл ролик —
     панель уходит и возвращается по касанию. */
  .bb-video-player[data-paused="true"] .bb-video-player__controls,
  .bb-video-player:focus-within .bb-video-player__controls { opacity: 1; visibility: visible; }
}