/* МТБ — мобильный слой вёрстки (взрослый раздел и /deti/).
 *
 * Подключается сборкой (tools/prerender.js → tools/mobile-layer.js) последним
 * стилем в <head> каждой страницы, поэтому новая выгрузка Claude Design его не стирает.
 * Только вёрстка: тексты, ссылки и картинки не прячутся и не меняются.
 * Все правила — внутри max-width, компьютер (1440 px) не затрагивается.
 * Запись — CHANGES-OUTSIDE-DESIGN.md, «Открытые правки», пункт 5.
 */

/* ── 1. Шапка статичных страниц (главная, навигатор, протокол, теория) ──
 * В одну строку на телефоне не помещается: «МТБ · Дети» и «Для коллег – ОЛТ»
 * уезжали за правый край вместе с бургером. Кнопки-иконки остаются в первой
 * строке рядом с логотипом, две текстовые кнопки — второй строкой. */
@media (max-width: 540px) {
  .nav > .wrap {
    flex-wrap: wrap; height: auto; min-height: 72px;
    justify-content: flex-start; column-gap: 8px; row-gap: 8px;
    padding-top: 14px; padding-bottom: 12px;
  }
  .nav > .wrap > .brand { margin-right: auto; }
  .nav > .wrap > .right { display: contents; }
  .nav > .wrap > .right > .deti,
  .nav > .wrap > .right > .svc { order: 2; flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ── 2. Главная: первый экран ──
 * Колонка сетки растягивалась по самому длинному слову заголовка. */
@media (max-width: 980px) {
  .hero .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 340px) {
  .hero h1 { font-size: 36px; }
}

/* ── 3. Басня: основная колонка и шапка (оба раздела) ──
 * В одну колонку сетка шла шириной по самому широкому содержимому и вылезала за край. */
@media (max-width: 1100px) {
  .fable-main { grid-template-columns: minmax(0, 1fr); }
  .fable-head__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Таблица «Архитектура»: подпись над значением (строки — карточками),
 * иначе значению оставалось ~90 px и строка вылезала за край. */
@media (max-width: 600px) {
  .arch-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* «Применение»: значение под подписью на всю ширину; длинное название мишени
 * в плашке переносится, а не уезжает за край */
@media (max-width: 600px) {
  .app-row { row-gap: 4px; }
  .app-row__val { flex: 1 1 100%; min-width: 0; }
  .app-row__val .chip { white-space: normal; max-width: 100%; }
}

/* ── 4. Соседние басни и мишени внизу страницы: название целиком, без многоточия ── */
@media (max-width: 720px) {
  .fable-nav__name { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ── 5. Мишень (взрослый раздел): первый экран, крошки, вкладки ── */
@media (max-width: 1100px) {
  .target-hero__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  /* «Экзистенциальная», «Функциональная» и т. п. шире экрана при 44 px */
  .target-hero__title { font-size: clamp(34px, 11.6vw, 44px); }
}
@media (max-width: 760px) {
  /* вкладки — в несколько строк вместо полосы, уходящей за край */
  .tabs__inner { flex-wrap: wrap; overflow-x: visible; padding: 0 12px; }
  .tab-btn { padding: 11px 10px 10px; font-size: 12px; letter-spacing: 1px; gap: 6px; }
}

/* ── 6. Каталоги мишеней и басен: счётчик в заголовке кластера ── */
@media (max-width: 600px) {
  .cluster-group__head { flex-wrap: wrap; row-gap: 6px; }
}

/* ── 7. Теория: список кластеров ── */
@media (max-width: 600px) {
  .cl-row { grid-template-columns: 46px minmax(0, 1fr); }
  .cl-row .cl-n { grid-column: 2; text-align: left; }
}

/* ── 8. Крошки (мишени и др.): переносятся целиком, последняя не уезжает за край ── */
@media (max-width: 640px) {
  .breadcrumb { flex-wrap: wrap; row-gap: 6px; }
}

/* ── 9. Басня (/deti/): плашка показателей справа от заголовка ── */
@media (max-width: 600px) {
  .fable-ind { flex-wrap: wrap; row-gap: 4px; }
}

/* ── 10. Мишень (/deti/): показатели под заголовком ──
 * «с осторожностью (не инструментализовать)» набрано крупным цифровым шрифтом. */
@media (max-width: 900px) {
  .listing-hero__stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 340px) {
  /* размер 1.6rem задан в разметке выгрузки (style), поэтому !important */
  .listing-hero__stat-num[style*="font-size"] { font-size: 1.4rem !important; }
}

/* ── 11. Главная /deti/: заголовки секций ──
 * В выгрузке /deti/ нет мобильного правила, которое есть у взрослой главной:
 * заголовки оставались 52 px, «терапевтическая» не помещалась в экран.
 * Правило перенесено из взрослой главной как есть (там оно ничего не меняет). */
@media (max-width: 600px) {
  .stitle { font-size: clamp(30px, 8vw, 40px); overflow-wrap: break-word; }
}

/* ── 12. Главная: водяные цифры фаз 01–04 ──
 * На телефоне заголовок фазы ложился на цифру; цифра чуть меньше и выше. */
@media (max-width: 600px) {
  .phf .ghost { top: 12px; right: 16px; font-size: 56px; }
}

/* ── 13. Шапка на телефоне без backdrop-filter ──
 * Фон шапки непрозрачен на 96 %, размытие под ним почти не видно. Но из-за него
 * шапка становится опорой для position:fixed внутри неё, и панель меню «Другие
 * разделы сайта» (общая с alexlisovoy.ru, рассчитана на окно: top 72px,
 * max-height 100vh − 88px) отсчитывалась от шапки. На МТБ над шапкой полоса
 * авторства, поэтому низ панели уходил за нижний край экрана на 51–106 px.
 * Без размытия панель держится за окно, как на основном сайте. Само меню
 * (список, панель, стили) по-прежнему только на alexlisovoy.ru. */
@media (max-width: 480px) {
  .topnav, .nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
}