/* ==========================================================================
   Экосистема 99Percentile – МОБИЛЬНЫЙ СЛОЙ (≤ 640px)

   Добавлен 2026-08-12 по аудиту всех 12 страниц на 360/393px. Подключается
   ПОСЛЕДНИМ (inc/enqueue.php) и только перебивает: ни одно правило здесь не
   нужно на десктопе. Откат – удалить подключение файла в enqueue.php или
   запустить _backup/2026-08-12-before-mobile/ОТКАТ.sh.

   Что было не так (замеры на 393px):
   • крупные локальные токены страниц (36 / 40 / 48 / 64px) не перебивались
     мобильными токенами variables.css – заголовки и заглушки «видео» стояли
     в десктопном кегле;
   • наклейки-таблетки на пиксельных координатах поверх «дырок» в заголовках
     («Летние программы») на мобиле разъезжались с дыркой и ложились на текст;
   • абсолютные декоры (кольца, фото) хиро/CTA рисовались во всю макетную
     величину и утяжеляли экран;
   • у ряда карточек фикс-минимальные высоты 300–500px под десктоп.

   Каждый блок ниже подписан страницей и причиной.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- Общие крупные токены страниц ------------------------------------ */
  /* Заголовки секций 36 → 24, дисплей 40 → 28, крупные заголовки 48 → 30,
     заглушки «видео» 64 → 32. Значения согласованы с мобильными токенами
     variables.css (--fs-h2: 24, --fs-display: 28). */

  .front-page,
  .extra-page {
    --fs-section-title: 24px;
    --fs-cta-title: 28px;
    --fs-card-lead: 22px;
    --fs-card-title: 22px;
    --fs-cta-lead: 20px;
  }

  .ap-page {
    --ap-fs-h2: 24px;
    --ap-fs-32: 24px;
    --ap-fs-64: 30px;
  }

  .ap-hero__title { font-size: 30px; }
  .ap-tracks__video-label,
  .ap-cta__title { font-size: 28px; }

  .ielts-page {
    --ielts-fs-title: 24px;
    --ielts-fs-name: 24px;
    --ielts-fs-cta: 26px;
    --ielts-fs-stub: 32px;
  }

  .club-page {
    --club-fs-section: 24px;
    --club-fs-cta: 26px;
    --club-fs-video: 32px;
  }

  .summer {
    --summer-fs-card: 24px;
    --summer-fs-video: 32px;
  }

  .page-about {
    --about-fs-display: 26px;
    --about-fs-stub: 32px;
    --about-fs-h2: 24px;
  }

  .about-hero__title,
  .about-panel__title,
  .about-band__title,
  .about-join__title,
  .about-cta__title { font-size: 26px; }

  .prog-page {
    --prog-fs-title: 24px;
    --prog-fs-title-lg: 24px;
    --prog-fs-display: 30px;
    --prog-fs-final: 26px;
  }

  .prog-display { font-size: 30px; }

  .adm-page {
    --adm-fs-video: 32px;
    --adm-fs-case: 28px;
  }

  /* Заглушки «видео» – где кегль задан не токеном. */
  .prog-video span,
  .club-hero__video-label,
  .summer-video__label,
  .adm-video__label,
  .ielts-cta__video-label,
  .about-stub,
  .tour-cta__video span { font-size: 32px; }

  /* --- Заголовки h1 хиро на всех страницах ---------------------------- */
  /* 48px при 345px ширины контента – три-четыре строки в пол-экрана. */
  h1,
  .front-hero__title,
  .prog-hero__title,
  .ielts-hero__title,
  .club-hero__title,
  .summer-hero__title,
  .about-hero__title,
  .adm-hero__title,
  .tour-hero__title,
  .extra-hero__title,
  .res-hero__title { font-size: 30px; line-height: 1.1; }

  /* --- Летние программы: наклейки в заголовках ------------------------- */
  /* На десктопе наклейка стоит абсолютом на пиксельных координатах поверх
     «дырки» из пробелов в заголовке. На мобиле перенос строк другой, дырка и
     наклейка расходятся, наклейка ложится на слова. Здесь: наклейка встаёт
     в поток отдельной строкой перед заголовком, дырка схлопывается. */
  .summer-fit__text .summer-sticker,
  .summer-gains__content .summer-sticker,
  .summer-sticker {
    position: static;
    translate: none;
    rotate: 0deg;
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: var(--space-8);
    order: -1;
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }

  .summer-fit__text,
  .summer-gains__content { display: flex; flex-direction: column; }
  .summer-pre { white-space: normal; }
  .summer-gains__line:empty { display: none; }

  /* --- Летние: фото-подложки карточек «Кому подойдет» ------------------ */
  /* Фото 742×993 и 934×1252 в карточке шириной ~345 – просто скрываем
     нижнюю выпущенную часть высотой карточки. */
  .summer-fit__card { min-height: 0; }
  .summer-fit__card > img[class*="photo"],
  .summer-fit__photo { max-height: 260px; object-fit: cover; object-position: top; }

  /* --- Летние: карточки «Что даёт сильная summer program» ------------- */
  /* Текст 24px в карточке ~345px упирался в границы: кегль 20, воздух между
     текстом и шевроном, шеврон не сжимается. */
  .summer-gains__card { padding: var(--space-20); min-height: 0; gap: var(--space-24); }
  .summer-gains__label { font-size: 20px; line-height: 1.25; }
  .summer-gains__content { gap: var(--space-16); }
  .summer-gains__content .summer-sticker { margin-bottom: 4px; }
  .summer-gains__chevron { flex: 0 0 auto; }

  /* --- SAT: таблетки регионов в хиро ----------------------------------- */
  /* На 360 «Сингапур» и «Китай» в ряду касаются: чуть больше зазор и
     перенос строк разрешён. */
  .prog-hero__regions { gap: var(--space-8) var(--space-12); }
  .prog-hero__region .prog-pill { white-space: normal; }

  /* --- SAT: строка «TOEFL R & W или IELTS R & W…» ---------------------- */
  /* Карточки «вокруг SAT»: текст 36px/1.0 с цветными акцентами «TOEFL R & W
     или IELTS R & W…» – при переносе строки ложатся друг на друга.
     Кегль ниже, интерлиньяж выше. */
  .prog-around__text { font-size: 22px; line-height: 1.2; }
  .prog-hero__formula { white-space: normal; }

  /* --- AP: сравнение «С AP / Без AP» ---------------------------------- */
  /* Два красных акцента одной строки на 360 наползали друг на друга при
     переносе – интерлиньяж чуть выше. */
  .ap-compare__item p { line-height: 1.25; }

  /* --- IELTS: «Наш подход» – панель и aside в колонке ----------------- */
  /* В колоночной раскладке flex: 1 1 0 у панели/aside – это нулевой базис
     по ВЫСОТЕ: обе схлопывались до 48px, карточки 01–05 вываливались наружу
     и ложились на соседние блоки (аудит 2026-08-12, 393px). */
  .ielts-approach__panel,
  .ielts-approach__aside { flex: 0 0 auto; height: auto; }

  /* --- IELTS: карточка «После этого формируем стратегию…» ------------- */
  /* Фото 793×545 абсолютом (right −93 / top 51) на мобиле закрывает текст
     и наезжает на нижнюю карточку номеров. Фото уходит под текст полосой. */
  .ielts-approach__aside {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }
  .ielts-approach__photo {
    position: static;
    order: 2;
    width: 100%;
    height: 200px;
    max-width: 100%;
    transform: none;
    border-radius: var(--radius-lg);
  }
  .ielts-approach__aside-text { max-width: none; }

  /* --- AP: фото в карточках «Принцип» и «Проблема» -------------------- */
  /* Фото 532×713 стояло абсолютом под текстом карточки. На телефоне
     карточка ~345px и авто-высоты: фото торчало на 713px за низ. Фото
     становится полосой под текстом в потоке. */
  .ap-principle__card,
  .ap-problem__card { display: flex; flex-direction: column; min-height: 0; height: auto; overflow: hidden; }
  .ap-principle__photo,
  .ap-problem__photo {
    position: static;
    order: 9;
    width: 100%;
    max-width: 100%;
    height: 220px;
    margin-top: var(--space-16);
    border-radius: var(--radius-lg);
    object-position: top;
  }
  .ap-principle__cloud { display: none; }

  /* --- Внешкольная: эллипсы хиро (781/729/675 и 1197…) --------------- */
  .extra-hero__ellipse { display: none; }

  /* --- Летние: кадры-подложки (.summer-frame) в градиентных панелях ---- */
  /* Панели «что рынок продаёт» / «тест-драйв» / CTA: фото 929×558 и
     978×546 в панели ~345px торчали за пределы. Кадр – полоса фикс-высоты
     у низа панели, картинка внутри заполняет кадр. */
  .summer-tourism__info,
  .summer-testdrive__info { min-height: 0; padding-bottom: 260px; }
  .summer-tourism__photo,
  .summer-testdrive__photo {
    --x: 0; --y: auto; --w: 100%; --h: 240px;
    top: auto; bottom: 0; left: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  /* Кадр заполняется картинкой целиком; фото горизонтальные (1000×559),
     сюжет справа – фокус кропа смещён вправо, иначе в кадре одна пустота
     и обрезанная фигура (заказчик, 2026-08-12). */
  .summer-tourism__photo img,
  .summer-testdrive__photo img { --ix: 0; --iy: 0; --iw: 100%; --ih: 100%; object-position: 80% 50%; }
  .summer-card { min-height: 0; }

  /* Синий финальный блок: фото 1561×911 и кольца – фоновый декор под
     холст 1920, на телефоне за экраном; скрываем. */
  .summer-cta__decor,
  .summer-cta__photo { display: none; }

  /* --- AP: «Процесс обучения» – фото в карточках ---------------------- */
  .ap-process__card { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .ap-process__photo {
    position: static; order: 9; width: 100%; max-width: 100%; height: 220px;
    margin-top: var(--space-16); border-radius: var(--radius-lg); object-position: top;
  }

  /* --- IELTS: карточка видео с постером 597×597 ----------------------- */
  .ielts-video__card { width: 100%; max-width: 100%; height: auto; aspect-ratio: 432 / 480; }
  .ielts-video__poster { left: 50%; translate: -50% 0; width: 138%; height: 100%; }

  /* --- Внешкольная: фикс-высоты карточек под десктоп ------------------- */
  .extra-eval__card,
  .extra-sem__card,
  .extra-research__card,
  .extra-biz__card { min-height: 0; height: auto; }

  /* --- Главная / Внешкольная: кольца CTA ------------------------------ */
  /* Шесть кругов 942–1691px в секции шириной 393 – за экраном почти
     целиком, но грузятся и считаются. На телефоне декор не нужен. */
  .front-consult__decor,
  .extra-cta__decor { display: none; }

  /* --- IELTS: кольца хиро (1197px) ------------------------------------ */
  .ielts-hero__ring { display: none; }

  /* --- Тур: тултипы пинов карты --------------------------------------- */
  /* Карта 345px: пины стоят вплотную, тултип 324px закрывает соседей и
     кнопку. На телефоне тултип показываем компактным и только по тапу
     (focus), без наведения. */
  .tour-map__tip { max-width: 240px; padding: var(--space-12); gap: var(--space-8); }
  .tour-map__tip-logo { width: 32px; height: 32px; }

  /* --- Общие карточки: минимальные высоты под десктоп ------------------ */
  .front-problems__card,
  .front-ap__card,
  .front-track__card,
  .front-service__text,
  .ap-subject,
  .ap-career__card,
  .ap-audience__card,
  .adm-step,
  .adm-why__card,
  .club-card,
  .summer-fit__card,
  .prog-card,
  .prog-tile,
  .tour-benefit,
  .extra-tile { min-height: 0; }

  /* --- Главная: финальная сетка разделов и команда --------------------- */
  /* Карточки 394px min-height с заголовком 48→28 и графикой под десктоп:
     на 375 – восемь полупустых экранов. Высота по контенту, заголовок 24. */
  .front-nav-card { min-height: 0; padding: var(--space-24); }
  .front-nav-card__title { font-size: 24px; }
  .front-nav-card__desc { max-width: none; }
  .front-nav-grid { gap: var(--space-16); }
  .front-team__card { min-height: 0; padding: var(--space-20); }
  .front-team__grid { grid-auto-rows: auto; gap: var(--space-12); }
  .front-team__photo { aspect-ratio: 4 / 3; }
  .front-tile { gap: var(--space-16); }
  .front-tile__caption { font-size: 18px; }
  .front-problems__card,
  .front-ap__card,
  .front-track__card { padding: var(--space-20); }
  .front-problems__text { font-size: 20px; }
  .front-service__title { font-size: 26px; }
  .front-hero__card { min-height: 0; padding: var(--space-16); }
  .front-hero__cards { gap: var(--space-8); }

  /* --- Кнопки: не выше 52 и на всю ширину, текст в две строки --------- */
  .front-btn,
  .ap-btn,
  .club-btn,
  .summer-btn,
  .adm-btn,
  .tour-btn,
  .ielts-btn,
  .about-btn,
  .res-hero__cta {
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    height: auto;
    padding: 12px 20px;
    white-space: normal;
    text-align: center;
    font-size: 16px;
  }

  /* --- Отступы секций и внутренние поля -------------------------------- */
  .ap-section,
  .club-page > section + section,
  .summer > .summer-section + .summer-section,
  .page-tour > section + section,
  .adm-page > section + section,
  .front-page > section + section { margin-top: 56px; }

  .container { padding-inline: 20px; }
}

/* Совсем узкие (≤ 360): кегли ещё на шаг ниже, поля 16. */
@media (max-width: 360px) {
  h1,
  .front-hero__title,
  .prog-hero__title,
  .ielts-hero__title,
  .club-hero__title,
  .summer-hero__title,
  .about-hero__title,
  .adm-hero__title,
  .tour-hero__title,
  .extra-hero__title,
  .res-hero__title { font-size: 27px; }

  .container { padding-inline: 16px; }
}

/* ==========================================================================
   ВТОРОЙ ПРОХОД ПО МОБИЛКЕ – 2026-08-22

   Аудит всех 16 страниц на 393 и 768px (Playwright: ищем блоки, вылезающие
   за окно и обрезанные предком, обрезанный текст, тач-мишени < 40px).
   Ниже – только найденное, каждый блок подписан причиной.

   Порог 1024, а не 640: то, что ломается на телефоне, на планшете ломается
   так же – оба размера дизайнером не нарисованы.
   ========================================================================== */

@media (max-width: 1024px) {

  /* --- Ширина «по содержимому» у синих блоков-полос -------------------- */
  /*
     .prog-bleed__inner (SAT) и .summer-cta__inner (Летние программы) –
     флекс-колонки с align-items: flex-start. Ширина такой колонки считается
     ПО СОДЕРЖИМОМУ, а внутри лежат блоки с макетной шириной 873 / 939 / 710.
     Итог: контент секции получался 873px при экране 393, а max-width: 100%
     не спасал – процент считать не от чего, ширина родителя сама зависит
     от детей. Правая половина плиток и кнопок уезжала под обрез (заголовок
     «Проверьте уровень…», плитки 01–04, обе кнопки).

     Лечится явной шириной 100% на всей цепочке.
  */
  .prog-final__content,
  .prog-final__texts,
  .prog-final__title,
  .prog-final__tiles,
  .prog-final__buttons,
  .prog-after__title,
  .prog-after__tiles,
  .summer-cta__head,
  .summer-cta__body,
  .summer-cta__tiles,
  .summer-cta__buttons {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }

  /* Плитки внутри – резиновые: на планшете лягут по две, на телефоне по
     одной (правило ниже, ≤640). */
  .prog-final__tiles > .prog-tile,
  .prog-after__tiles > .prog-tile,
  .summer-cta__tiles > .summer-cta__tile {
    flex: 1 1 240px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
  }

  .prog-final__buttons .prog-btn,
  .summer-cta__buttons .summer-btn { width: 100%; max-width: 100%; }

  /* --- «О нас»: карточки фиксированной высоты -------------------------- */
  /* height: 253px + длинные слова («entrepreneurship», «Сертифицированный»)
     в колонке ~103px: текст вылезал за карточку. Высота по содержимому,
     длинные слова переносятся. */
  .about-card--fixed { height: auto; min-height: 180px; }
  .about-card__text { overflow-wrap: anywhere; hyphens: auto; }

  /* --- «О нас»: фото преподавателей ------------------------------------ */
  /* Кроп из макета (width 107.87%, left 4.94%) на узкой колонке вылезал
     за рамку. На мобиле кадрируем средствами object-fit. */
  .about-educators__photo { min-height: 220px; }
  .about-educators__photo img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }

  /* --- IELTS: сравнительная таблица ------------------------------------ */
  /* min-width 1000 + первая колонка 443: на экране виден один столбец
     критериев, три колонки экзаменов уезжали в невидимую прокрутку.
     Ужимаем до 560 – в кадр попадают критерий и полторы колонки, край
     третьей виден и подсказывает, что таблицу можно листать. */
  .ielts-compare__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .ielts-compare__table { min-width: 560px; }
  .ielts-compare__table th:first-child { width: 150px; }

  .ielts-compare__th,
  .ielts-compare__criterion,
  .ielts-compare__cell {
    padding: var(--space-12) var(--space-8);
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .ielts-compare__th { height: auto; min-height: 56px; }
  .ielts-compare__criterion,
  .ielts-compare__cell { height: auto; min-height: 56px; }

  /* --- AP: фото в карточках «С AP / Без AP» ---------------------------- */
  /* Фото стояло по макетным координатам (left −58, 378×506) и вылезало за
     карточку слева. Селектор строго по первому img: вторым лежит кружок-
     маркер 32px, и общее правило раздувало его на всю карточку. */
  .ap-compare__photo > img:first-child,
  .ap-compare__photo--left > img:first-child,
  .ap-compare__photo--right > img:first-child {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
  }

  /* --- Подвал: плитки соцсетей ----------------------------------------- */
  /* min-height: 160px из десктопной ленты давал два синих квадрата в
     пол-экрана. Плитка – кнопка 64px с иконкой 32. */
  .site-footer__social { min-height: 0; }

  .site-footer__social-tile {
    min-height: 64px;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
  }

  .site-footer__social-tile img { width: 32px; height: 32px; }

  /* --- Подвал: тач-мишени ---------------------------------------------- */
  /* Ссылки подвала были высотой 19–21px – вдвое меньше минимальной
     мишени. Строчные ссылки становятся строчно-блочными с полями. */
  .site-footer__links a,
  .site-footer__contacts a,
  .site-footer__legal a {
    display: inline-block;
    padding-block: 8px;
  }

  .site-footer__links li + li,
  .site-footer__contacts li + li { margin-top: 0; }
}

@media (max-width: 640px) {

  /* Плитки синих блоков – по одной в ряд. */
  .prog-final__tiles > .prog-tile,
  .prog-after__tiles > .prog-tile,
  .summer-cta__tiles > .summer-cta__tile { flex-basis: 100%; }

  /* Номера плиток (01–04) на телефоне стояли справа от текста и в узкой
     карточке отрывались от него. */
  .summer-cta__tile { padding: var(--space-20); }

  /* --- IB DP: подписи в плашках ---------------------------------------- */
  /* 9.5px – нечитаемо даже на большом телефоне. */
  .dps-tag span { font-size: 11px; }

  /* --- Хиро с кольцами: декор шире экрана ------------------------------ */
  /* Кольца 781/650/520px нарисованы под полосу 1920. На телефоне они
     обрезаны краем секции и видны обрубком дуги. */
  .tch-hero__ring,
  .ibdp-hero__ring,
  .pap-hero__ring,
  .par-hero__ring { display: none; }

  /* --- Сопровождение: аватары «родителей» ------------------------------ */
  /* Фото 566px в ряду шириной 345: вылезали за пределы полосы. */
  .adm-parents__avatar img { width: 100%; height: 100%; object-fit: cover; }
}

/* --- Летние: фото-подложки карточек «Кому подойдёт» (второй заход) ------- */
/*
   Кадр .summer-frame получает координаты и размер инлайн-переменными из
   шаблона (--x/--y/--w/--h), поэтому переопределять их из файла бесполезно:
   инлайн-стиль сильнее. Перебиваем сами свойства left/top/width/height.

   Было: кадр 742×260 с left −178 накрывал ВЕСЬ текст карточки – заголовок и
   описание читались поверх фотографии. Стало: полоса фото внизу карточки,
   текст над ней на чистом фоне.
*/
@media (max-width: 1024px) {

  .summer-fit__card { min-height: 0; padding-bottom: 216px; }

  .summer-fit__photo {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 200px;
    max-height: 200px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .summer-fit__photo img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
  }

  /* Иконки-наклейки карточки нарисованы под макетную ширину 420 и на
     телефоне висят поверх фото обрубками. */
  .summer-fit__deco { display: none; }

  /* Те же инлайн-переменные у панелей «что рынок продаёт» и «тест-драйв»:
     ширина оставалась макетной (929/978), полоса уезжала за правый край. */
  .summer-tourism__photo,
  .summer-testdrive__photo { width: 100%; right: 0; }

  /* --- AP: фото в финальном блоке -------------------------------------- */
  /* left: 452px под холст 1920 – на телефоне фотография целиком за кадром,
     но продолжает грузиться. Ставим полосой под текст. */
  .ap-result__final { padding-bottom: 200px; }
  .ap-result__final-photo {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 180px;
    object-position: center 20%;
  }

  /* --- Сопровождение: аватары «родителей» ------------------------------- */
  /* Кроп из макета (снимок 566px, сдвиги −66 / −369) на мобиле показывал
     пустоту: круги 162px, а сдвиг больше их размера. Кадрируем object-fit,
     разные куски снимка сохраняем через object-position. */
  .adm-parents__avatar img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .adm-parents__avatar--1 img { object-position: 30% 50%; }
  .adm-parents__avatar--2 img { object-position: 70% 50%; }

  /* --- Подвал: тач-мишени (добивка до 44px) ----------------------------- */
  .site-footer__links a,
  .site-footer__contacts a,
  .site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
}

/* --- Главная: названия карточек ресурсов --------------------------------- */
/* В макете имя обрезано многоточием по ширине строки холста 1840px. На
   телефоне и планшете «Официальный гайд по Digital SAT» превращался в
   «Официальный гайд по D…». Перенос вместо обрезки. */
@media (max-width: 1024px) {
  .front-res__name {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* ==========================================================================
   ДЕКОР ПОВЕРХ ТЕКСТА – 2026-08-22

   Иконки и фотоколлажи расставлены по координатам холста 1920. На телефоне
   колонка сжимается, а декор – нет: он наезжает на буквы. Найдено скриптом
   _tools/overlap.py (ищет текст, перекрытый абсолютным декором больше чем
   на четверть площади).
   ========================================================================== */

@media (max-width: 900px) {

  /* SAT, синий призыв: шесть предметных иконок ложились прямо на заголовок
     «Поступление – это выбор своего уровня…». В секции «После SAT» такой
     слой уже скрыт с ≤1000 – делаем то же здесь. */
  .prog-cta .prog-deco { display: none; }

  /* IB DP, баннер: шесть плавающих кружков-иконок по краям баннера на
     мобиле сходятся к центру и перекрывают текст. */
  .dps-banner .dps-chip { display: none; }

  /* AP, «Для кого это подойдёт»: фото – фон карточки, текст поверх него.
     На телефоне карточка высотой по тексту (72–143px), и фото целиком
     оказывается под буквами. Текст остаётся на чистом фоне, фото –
     полосой снизу. */
  .ap-audience__card {
    aspect-ratio: auto;
    min-height: 0;
    padding-bottom: 176px;
  }

  .ap-audience__photo,
  .ap-audience__photo--1,
  .ap-audience__photo--3,
  .ap-audience__photo--4 {
    inset: auto 0 0 0;
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: center 25%;
  }
}

/* ==========================================================================
   СЛУЖЕБНЫЕ СТРАНИЦЫ – 2026-08-22

   404, поиск и обычная страница (политика конфиденциальности) собраны на
   простом шаблоне без секций: заголовок упирался прямо в шапку, кнопка
   «На главную» шла узкой полоской, а перед подвалом не было воздуха.
   ========================================================================== */

@media (max-width: 1024px) {

  /* У .entry-content свои нижние поля (base.css) – снизу не добавляем,
     иначе перед подвалом получается 112px пустоты. */
  .site-main > .container > article { padding-top: var(--space-32); }

  .site-main > .container.error-404 {
    padding-block: var(--space-32) var(--space-48);
  }

  .site-main > .container > article > h1,
  .error-404 h1 { margin-bottom: var(--space-16); }

  .error-404 p { margin-bottom: var(--space-24); }
  .error-404 .btn { width: 100%; }

  /* Заголовок страницы поиска и её карточки – тот же ритм. */
  .site-main > .container > h1 { padding-top: var(--space-32); }
}

/* ==========================================================================
   УЗКИЕ ЭКРАНЫ (320–480) И МЕЛОЧИ – 2026-08-22, второй прогон аудита
   ========================================================================== */

@media (max-width: 1024px) {

  /* Тур, синий призыв: заглушка «видео» на десктопе стоит абсолютом справа
     от заголовка, на мобиле встаёт в поток – и упирается в заголовок
     вплотную (замер: низ видео 7783, верх заголовка 7783). */
  .tour-cta__video { margin-bottom: var(--space-24); }
}

@media (max-width: 480px) {

  /* Строки FAQ: номер + вопрос + шеврон с зазором 32px не помещались на
     320px – страница получала горизонтальную прокрутку (замер: 342 при
     окне 320). Зазор меньше, длинные слова переносятся. */
  .adm-faq__row,
  .extra-faq__body {
    gap: var(--space-12);
    min-width: 0;
  }

  .adm-faq__question,
  .extra-faq__question {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* «Сопровождение», полоса с аватарами: два круга по 162 + зазор 18 = 342
     при доступных 280. Размер плавающий. */
  .adm-parents__avatars { gap: var(--space-12); }

  .adm-parents__avatar {
    width: clamp(96px, 34vw, 162px);
    height: clamp(96px, 34vw, 162px);
  }
}