/* Телефон и планшет.

   Основной стиль и «экран с одного взгляда» (стиль-экран.css) рассчитаны на
   ноутбук 1366×768 и задают раскладку без оговорок о ширине окна. Здесь —
   раскладка для узких окон, поэтому файл подключается последним. */

/* ─────────────── до 1023 px: планшет и телефон ─────────────── */

@media (max-width: 1023px) {
  main, main:has(.экран-кейса), main:has(.витрина), main:has(.режим-обучения) { padding: 16px 16px 40px; }
  .заголовок-раздела h1 { font-size: 26px; }

  /* Экран ситуации — одна колонка. Персонаж сверху во всю ширину и остаётся
     у верхнего края, как собеседник в видеозвонке: ситуация и ответы
     прокручиваются под ним, и его реакцию видно, где бы ни нажали ответ. */
  .кейс-сетка, .кейс-сетка.без-сцены { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .сцена {
    --высота-сцены: clamp(190px, 32vh, 300px);
    position: sticky; top: 0; z-index: 6; display: block;
    margin: 0 -16px; border-radius: 0; border-width: 0 0 1px;
    box-shadow: 0 10px 24px -20px rgb(0 0 0 / .6);
  }
  .сцена-образ { height: var(--высота-сцены); }
  /* Клип квадратный: на широком планшете не растягиваем его во всю ширину,
     иначе на экране осталось бы одно лицо крупным планом. */
  .сцена-образ .персонаж-видео, .сцена-образ .персонаж-образ {
    left: 50%; width: min(100%, calc(var(--высота-сцены) * 1.6)); transform: translateX(-50%);
  }
  .сцена-образ .персонаж-рамка { width: auto; height: calc(100% - 12px); aspect-ratio: 5 / 12; }
  @media (min-width: 641px) {
    /* Края клипа растворяются в фоне сцены — без резкой границы кадра. */
    .сцена-образ .персонаж-видео, .сцена-образ .персонаж-образ {
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    }
  }
  .сцена-подпись {
    position: absolute; left: 12px; bottom: 12px; z-index: 2;
    display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
    background: var(--стекло); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 6px; box-shadow: 0 0 0 1px var(--линия);
  }
  .сцена-подпись h3 { margin: 0; font-size: 15px; }
  .сцена-роль, .сцена-состояния:empty { display: none; }
  .сцена-состояние { margin-top: 0; height: 24px; padding: 0 9px; font-size: 12px; }
  /* После ответа экран подъезжает к реакции — она встаёт сразу под персонажем. */
  .кейс-сетка > .кейс-содержание { scroll-margin-top: calc(clamp(190px, 32vh, 300px) + 12px); }

  /* Над ситуацией: «назад» и метка в строку, ступени сложности — строкой ниже. */
  .кейс-панель { gap: 10px; margin-bottom: 12px; }
  .кейс-панель .этапы { order: 3; width: 100%; margin-left: 0; }
  .кейс-панель .демо-метка { margin-left: auto; min-height: 32px; padding: 4px 12px; font-size: 13px; }
  .кейс-прогресс .полоса { width: 90px; }

  /* Иллюстрация — после текста ситуации, узкой полосой. */
  .кейс-содержание:has(> .кейс-иллюстрация) { grid-template-columns: minmax(0, 1fr); }
  .кейс-содержание:has(> .кейс-иллюстрация) > * { grid-column: 1; }
  .кейс-содержание:has(> .кейс-иллюстрация) > :nth-child(2) { grid-row: 1; }
  .кейс-содержание:has(> .кейс-иллюстрация) > .кейс-иллюстрация { grid-row: 2; height: auto; min-height: 0; aspect-ratio: 5 / 2; }

  /* Реакция и действия. */
  .кейс-действия { flex-wrap: wrap; }
  .кейс-действия .подсказка { flex-basis: 100%; }

  /* Главный экран педагога. */
  .витрина-раскладка { grid-template-columns: 1fr; gap: 18px; }
  .витрина-образ { height: clamp(190px, 46vw, 300px); }
  .витрина-легенда { flex-wrap: wrap; gap: 2px 14px; }
  .путь.компакт .шаг { flex-wrap: wrap; }
  .сетка-персонажей { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

  /* Итог и отчёты. */
  .итог-герой { padding: 22px; gap: 18px; border-radius: 10px; }
  .итог-герой h1 { font-size: 26px; }
}

/* ─────────────── до 640 px: телефон ─────────────── */

@media (max-width: 640px) {
  body { font-size: 15px; }
  .заголовок-раздела { margin-bottom: 16px; }
  .заголовок-раздела h1 { font-size: 24px; }
  .заголовок-раздела .справа { margin-left: 0; width: 100%; flex-wrap: wrap; }

  /* Экран ситуации. */
  .кейс-лист { padding: 14px 16px; border-radius: 6px; }
  .кейс-контекст { font-size: 15px; line-height: 1.55; }
  .кейс-задача { font-size: 17px; }
  button.вариант { padding: 11px 12px; gap: 10px; font-size: 15px; border-radius: 6px; }
  .реплика { padding: 14px 16px 12px; border-radius: 8px 8px 8px 4px; }
  .реплика-текст { font-size: 17px; }
  .ос-текст, .ос-раздел, .ос-шкала, .ос-цитата { border-radius: 6px; }
  .ос-цитата { font-size: 15px; }
  /* Кнопки ответа и перехода — нижней панелью во всю ширину, как в приложениях:
     подсказка над кнопкой не наезжает на варианты. Кнопки — в один ряд. */
  .кейс-содержание > .кейс-действия {
    margin: 0 -16px; padding: 10px 16px 12px; gap: 8px;
    background: var(--холст); border-top: 1px solid var(--линия);
  }
  .кейс-действия .подсказка { font-size: 12.5px; line-height: 1.4; }
  button.крупная { height: 48px; padding: 0 18px; font-size: 15px; border-radius: 6px; }
  .кейс-действия button, .кейс-действия button.крупная { flex: 1 1 auto; min-width: 0; padding: 0 14px; font-size: 14.5px; }
  .кейс-действия button:not(.главная) { flex: 0 1 auto; }
  .завершение { padding: 36px 16px; }
  .завершение h2 { font-size: 26px; }
  .назад { height: 36px; padding: 0 12px 0 8px; font-size: 13.5px; }

  /* Витрина: имена под портретами не переносятся по слогам. */
  .витрина-лица { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .витрина-главный { padding: 10px 10px 14px; }
  .приветствие h1 { font-size: 26px; }

  /* Итог. */
  .итог-герой { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .итог-герой > :last-child:not(:first-child) { justify-self: stretch; }
  .метка { height: auto; min-height: 26px; padding-block: 4px; white-space: normal; line-height: 1.35; }
  .итог-сетка { gap: 14px; }
  .компетенции-список { padding: 16px; gap: 16px; }
  .диаграмма-и-легенда { padding: 10px 8px 16px; }
  .диаграмма-легенда { flex-wrap: wrap; gap: 8px 16px; }

  /* Факты отчёта: подпись переносится, число — справа. */
  .отчёт-факты { padding: 10px 16px 16px; }
  .отчёт-факты .факт { width: 100%; white-space: normal; justify-content: space-between; gap: 12px; }

  /* Таблицы — прокрутка внутри карточки, не всей страницы; плотнее. */
  .прокрутка td, .прокрутка th { padding: 10px 8px; }
  .прокрутка td { font-size: 13.5px; }
  .процент-ячейка { gap: 6px; }
  .процент-ячейка .полоса { width: 40px; }
  .карточка { border-radius: 6px; }
  .шапка-карточки { padding: 14px 16px; }
  th:first-child, td:first-child { padding-left: 14px; }
  th:last-child, td:last-child { padding-right: 14px; }
  .фильтры { padding: 12px; }
  .фильтры input:not([type=checkbox]):not([type=radio]), .фильтры select { max-width: none; flex: 1 1 100%; }

  /* Окна на весь экран снизу. */
  .подложка { padding: 0; align-items: flex-end; }
  .окно { max-width: none; border-radius: 10px 10px 0 0; max-height: 92vh; display: flex; flex-direction: column; }
  .окно .тело { overflow: auto; padding: 18px 16px; }
  .окно header { padding: 16px 16px 14px; font-size: 17px; }
  .окно footer { padding: 12px 16px 16px; border-radius: 0; flex-wrap: wrap; }
  .окно footer button { flex: 1 1 auto; }

  .уведомления { left: 12px; right: 12px; bottom: 12px; }
  .уведомление { max-width: none; }

  /* Вход: иллюстрация сверху, форма карточкой наезжает на её край. */
  .вход-история { min-height: 60vh; padding: 14px 14px 46px; }
  .вход-логотип { max-width: calc(100% - 58px); padding: 6px 12px 6px 6px; }
  .вход-логотип .знак { width: 30px; height: 30px; border-radius: 6px; }
  .вход-история .бренд-текст b { font-size: 13.5px; white-space: normal; }
  .вход-история .бренд-текст small { display: none; }
  .вход-заголовок { font-size: 27px; margin-bottom: 8px; }
  .вход-подпись { font-size: 13.5px; line-height: 1.5; }
  .вход-преимущества { display: none; }
  .вход-форма { padding: 0 14px 36px; margin-top: -30px; }
  .вход-карточка { padding: 24px 20px 22px; border-radius: 10px; }
  .вход-карточка h2 { font-size: 26px; }
  .вход-карточка .подзаголовок { margin-bottom: 18px; }
  .вход-тема { top: 12px; right: 12px; }
}