/* responsive.css — мобильная версия как отдельный продукт, а не сжатый десктоп.
   Общее у двух версий — токены и тексты. Всё остальное решается заново.
   CSS не пускает var() в прелюдию @media, поэтому брейкпоинты здесь стоят
   литералами; их единственный реестр — --as-bp-* в tokens.css. */

/* ---------- Ниже --as-bp-lg (1200px): сетка сжимается, регистры остаются ---------- */
@media (max-width: 1200px) {
  #s03 .market__claim { grid-column: span 12; }
  #s03 .market__figures { grid-column: span 12; }

  #s04 .sector__map { grid-column: span 12; }
  #s04 .sector__legend { grid-column: span 12; }

  #s07 .formats__lead { grid-column: span 12; }
  #s07 .formats__rest { grid-column: span 12; }

  #s11 .audit__have,
  #s11 .audit__missing { grid-column: span 12; }

  #s12 .lead__say,
  #s12 .lead__form { grid-column: span 12; }
}

/* ---------- Ниже --as-bp-md (900px): мобильный продукт ---------- */
@media (max-width: 900px) {
  .shell,
  .shell--narrow {
    padding-inline: var(--as-gutter-sm);
  }

  /* Ритм на телефоне свой: 64 рядовой, 80 на смене регистра */
  .rhythm { padding-block: var(--as-rhythm-tight-sm); }
  .rhythm--wide { padding-block: var(--as-rhythm-wide-sm); }

  .header { height: var(--as-header-h-sm); }
  .sticky-cta { display: flex; }

  /* ---------- Лента ----------
     Форма одна и живёт в компоненте .rail (components.css, §6): nowrap,
     родная инерция, scroll-snap и спрятанная полоса. Здесь она приходит
     на четыре места разом — рецепт не повторяется, повторяются только
     собственные отличия каждого места ниже по файлу.
     Селекторы стоят вместо класса потому, что разметку этих мест сейчас
     держит другой таск; как только `class="rail"` встанет в HTML,
     от этих двух правил остаётся один `.rail`. */
  .rail,
  .header__nav,
  #s04 .sector__layers,
  #s05 .project__filter,
  #s07 .section__body {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .rail::-webkit-scrollbar,
  .header__nav::-webkit-scrollbar,
  #s04 .sector__layers::-webkit-scrollbar,
  #s05 .project__filter::-webkit-scrollbar,
  #s07 .section__body::-webkit-scrollbar {
    display: none;
  }

  /* Кадры блока 07 названы отдельно: контейнер двух мелких растворён
     (display: contents), и прямых потомков у ленты там не те. */
  .rail > *,
  .header__nav > *,
  #s04 .sector__layers > *,
  #s05 .project__filter > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .rail--bleed,
  #s04 .sector__layers,
  #s05 .project__filter,
  #s07 .section__body {
    margin-inline: calc(var(--as-gutter-sm) * -1);
    padding-inline: var(--as-gutter-sm);
  }

  /* Четыре якоря остаются на виду, пока помещаются: гамбургер ради гамбургера
     не заводится. Действие из шапки уходит — его на телефоне несёт
     закреплённая нижняя панель, и заливка на экране остаётся одна. */
  .header .btn { display: none; }

  .header__nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: var(--as-s5);
  }

  /* Палец попадает в строку, а не в текст высотой в кегль */
  .header__link,
  .header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: var(--as-ctrl-h-sm);
  }

  .section[id] { scroll-margin-top: var(--as-header-h-sm); }

  /* Порядок блоков на телефоне меняется: карта отвечает на «где это»
     за один экран, рынок — за три; полотно уходит ниже, чтобы не съедать
     прокрутку. Перестановку делает nav.js прямо в DOM — здесь её нет
     намеренно: класс order двигал бы картинку и не двигал табуляцию. */

  /* Hero на телефоне — своя раскладка, а не отменённая десктопная: та же
     сетка в одну дорожку, метка → слово → слот → текст одной колонкой.
     Порядок дорожек повторяет порядок разметки, поэтому обход с клавиатуры
     и чтение вслух идут тем же путём, что и глаз. */
  #s01 {
    min-height: auto;
    padding-top: calc(var(--as-header-h-sm) + var(--as-rhythm-tight-sm));
  }

  #s01 .shell { grid-template-columns: minmax(0, 1fr); }

  #s01 .hero__media,
  #s01 .hero__text { grid-column: 1; }

  /* Сдвиг перекрытия — там же, где на десктопе: у верхнего края слота.
     Здесь он мельче, потому что мельче само слово. */
  #s01 .hero__media {
    grid-row: 3;
    margin-top: calc(var(--as-s3) * -1);
  }

  #s01 .hero__text {
    grid-row: 4;
    margin-top: var(--as-s7);
  }

  /* Полотна держат вертикальную пропорцию вместо 16:9 */
  .slot {
    aspect-ratio: var(--as-ratio-tall);
    padding: var(--as-s5);
  }

  .slot--bleed { min-height: auto; }

  /* Заголовок больше не жмётся к двум третям — колонка и так узкая */
  .section__title { max-width: 100%; }

  .section__head { margin-bottom: var(--as-s6); }

  /* Многоколоночные раскладки становятся одной колонкой */
  #s05 .project__list,
  #s09 .timeline,
  #s10 .parties,
  #s13 .footer__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Раскладка «крупное слева + два мелких справа» на телефоне становится
     горизонтальной лентой: три формата идут одним рядом, край следующего
     кадра виден и сообщает о продолжении без стрелок и точек.
     Контейнер двух мелких растворяется (display: contents), поэтому все три
     карточки оказываются кадрами одной ленты; появление переехало на них
     самих — у растворённого контейнера нет коробки, а значит и анимации. */
  #s07 .section__body {
    column-gap: var(--as-col-gap-sm);
    scroll-snap-type: x mandatory;
  }

  #s07 .formats__rest { display: contents; }

  #s07 .formats__lead,
  #s07 .formats__item {
    flex: 0 0 var(--as-frame-sm);
    scroll-snap-align: start;
  }

  /* Широкая позиция блока 10: сетка стала одноколоночной, и span 2
     достраивал бы вторую колонку за краем экрана. */
  #s10 .parties__item--wide { grid-column: span 1; }

  /* Полотна следуют мобильному ритму: 96px десктопного отступа
     на телефоне спорят с 64px самой секции. */
  #s04 .sector__canvas,
  #s09 .timeline__canvas {
    margin-top: var(--as-rhythm-tight-sm);
  }

  /* Строка-заголовок слоя экономики — тоже кнопка: короткое имя в одну
     строку давало 24px высоты, и палец промахивался. */
  #s08 .economy__trigger { min-height: var(--as-ctrl-h-sm); }

  /* Флажок согласия: под палец растёт область нажатия, а не глиф.
     Сам глиф остаётся 24px — нативному флажку браузер не даёт ни padding,
     ни border, они на его коробке не сказываются (проверено замером).
     Поэтому область добирает подпись: она и есть то, чем флажок
     переключается (label for=lead-consent). Отрицательный отступ надвигает
     её на глиф, внутренний отступ отодвигает текст обратно, min-height даёт
     44px по высоте — палец попадает в строку целиком, а не в квадрат 24px. */
  #s12 .lead__consent-row {
    align-items: center;
    gap: 0;
  }

  #s12 .lead__consent-row label {
    display: flex;
    align-items: center;
    min-height: var(--as-ctrl-h-sm);
    margin-inline-start: calc(var(--as-s5) * -1);
    padding-inline-start: calc(var(--as-s5) + var(--as-s3));
  }

  /* Чипам фильтра и слоёв лента добавляет только место под палец снизу */
  #s05 .project__filter,
  #s04 .sector__layers {
    padding-bottom: var(--as-s2);
  }

  /* Форма и футер не должны прятаться под закреплённой панелью */
  #s12 { padding-bottom: calc(var(--as-rhythm-wide-sm) + var(--as-sticky-h)); }

  #s06 .shell { padding-block: var(--as-rhythm-tight-sm); }

  .footer { padding-block: var(--as-rhythm-tight-sm); }
}

/* ---------- Ниже --as-bp-sm (600px): узкий телефон ---------- */
@media (max-width: 600px) {
  /* Здесь четыре якоря уже не помещаются в строку шапки рядом с лого —
     только здесь и появляется панель меню. */
  .header__nav { display: none; }
  .header__burger { display: inline-flex; }

  #s10 .parties,
  #s09 .timeline {
    row-gap: var(--as-s5);
  }

  /* Действие на узком экране занимает всю строку. В шапке его нет уже
     с 900px — его роль там взяла закреплённая нижняя панель. */
  .menu .btn,
  #s12 .btn,
  .sticky-cta .btn {
    width: 100%;
  }

  .header__logo {
    font-size: var(--as-fs-micro);
  }
}