/* ==========================================================================
   Бизнес-события — собственные блоки на телефоне (до 768px).
   Сквозные узлы (шапка, кейсы, отзывы, хвост, футер) и горизонтальные треки
   лежат в mobile.css. Здесь — шапка блока форматов, «Контролируем каждую
   деталь» и «За кадром».
   ========================================================================== */
@media (max-width:1023px){

/* ── ПЕРВЫЙ ЭКРАН ──────────────────────────────────────────────────────── */
/* Заголовок в четыре строки — так он и задуман. 3.8rem — предел, при котором
   самая длинная строка «и статусных событий» держится целиком. */
.page-biz .hero__h1{font-size:3.8rem; letter-spacing:-.114rem}

/* ── ШАПКА БЛОКА ФОРМАТОВ ──────────────────────────────────────────────── */
/* По центру фраза на 1440 читается как манифест, на 390 — как обрывок:
   ставим по левому краю, как все остальные заголовки страницы. */
.fmt-head{padding:9rem 2rem 0; text-align:left}
.fmt-head__h2{font-size:3.5rem; letter-spacing:-.105rem}

/* ── ФОРМАТЫ ───────────────────────────────────────────────────────────── */
/* Залипающая карусель заменена свайп-треком (.mfmt строит mobile.js,
   пин в formats.js на телефоне выключен). Саму секцию убираем целиком —
   иначе её пин-распорка тянет пустую высоту. */
.fmt{display:none}

/* ── КОНТРОЛИРУЕМ КАЖДУЮ ДЕТАЛЬ ────────────────────────────────────────── */
.ctrl{padding:9rem 2rem 8rem}
.ctrl__h2{font-size:3.2rem; letter-spacing:-.096rem; text-wrap:balance}
/* 🔴 Продолжение фразы на десктопе — часть того же крупного капса: слова
   заливаются из серого в белый по скроллу. На 390 этот же капс превращает
   пояснение в вторую шапку, скраб на телефоне выключен, и половина слов
   так и остаётся серой. Разводим абзацем и возвращаем обычный текст:
   не капс, не сжатая гарнитура, ровный цвет. */
.ctrl__h2 i{
  display:block; margin-top:2rem;
  font-family:'Inter Tight',sans-serif; font-weight:400;
  font-size:1.5rem; line-height:150%; letter-spacing:0;
  text-transform:none; color:rgba(255,255,255,.5); text-wrap:pretty;
}
.ctrl__h2 i .w{color:inherit}
.ctrl__stage{width:auto; height:64vw; margin:4.4rem 0 0; border-radius:.8rem}
.ctrl__stage img{width:100%; height:100%; object-fit:cover}

/* Четыре шага в столбец. Сплошная линия шла ПОПЕРЁК колонок и срезала
   цифрам низ — в столбце возвращаем её каждому шагу отдельно. */
/* 2.4 и 1.2, а не 5.6+5.6: от кадра до первой плашки зияла пустота (обратка 02.09) */
.ctrl__grid{grid-template-columns:1fr; margin-top:2.4rem}
.ctrl__grid::before{display:none}
.ctrl__step{padding:5.6rem 0 0}
.ctrl__step:first-child{padding-top:1.2rem}
.ctrl__step::before{display:none}
.ctrl__step + .ctrl__step{padding-left:0; border-left:0}
.ctrl__cut{width:auto; border-bottom:.1rem solid rgba(255,255,255,.12)}
.ctrl__t{width:auto; margin-top:1.6rem; font-size:2.1rem; text-wrap:balance}
.ctrl__d{width:auto; margin-top:1rem; font-size:1.4rem; text-wrap:pretty}

/* Врезка с вопросом и кнопкой — в столбец. Рамка остаётся, но десктопные
   поля 4.8rem съедали бы половину ширины: даём 2.4rem и держим кнопку
   внутри рамки (в базе у неё min-width 32.3rem — на 390 это уже вылет). */
.ctrl__cta{display:block; margin-top:6.4rem; padding:2.8rem 2.4rem}
.ctrl__cta-t{font-size:1.8rem; text-wrap:balance}
.ctrl__cta .btn-pill{position:relative; left:0; top:0; bottom:auto;
  width:100%; min-width:0; margin-top:2.4rem;
  height:6.3rem; padding-left:2.4rem; padding-right:.8rem}
.ctrl__cta .btn-pill .btn__t{font-size:1.3rem}

/* ── ЗА КАДРОМ ─────────────────────────────────────────────────────────── */
/* 🔴 Секция на десктопе — экран с распоркой: min-height 100svh и
   justify-content:space-between разводят список и заголовок по краям.
   В вертикальной колонке эта распорка превращается в две дыры по 250px,
   поэтому и высоту, и распорку снимаем.
   Слои-декорации построены под широкий экран: кольцо из точек и бейдж
   на ремешке на 390 ложатся поверх текста — их убираем, слово-призрак
   остаётся и работает меткой раздела. */
.bts{min-height:0; padding:9rem 2rem 8rem; justify-content:flex-start}
/* Переосмысление (обратка Германа 02.09): бейдж вернулся крупным, слово-
   призрак стоит за ним; заголовок в две строки; порядок — заголовок,
   подводка, бейдж, «закадровая инфраструктура» со списком, кнопка. */
/* 🔴 Обратка Германа 03.09: бейдж крупнее, ленту не обрубать, отступ от
   подводки больше, и слово-призрак центрировать ПО КАРТОЧКЕ бейджа, а не по
   центру экрана. Замер альфы файла: карточка занимает 20,7…79,9 % высоты и
   центрируется на 44,1 % ширины — то есть в самом кадре она левее середины,
   поэтому композиция и читалась косой. Сдвигаем кадр вправо на эту разницу.
   На мобилке подставлен badge-ast-short: там лента короткая и уходит вверх
   двумя стропами, а не обрубается жирным куском (прежняя претензия). */
.bts__badge{display:flex; justify-content:center; position:relative; left:auto; top:auto;
  order:3; width:100%; height:auto; aspect-ratio:auto; overflow:visible;
  margin:4rem 0 0; z-index:2; pointer-events:none}
/* Сдвиг вдвое больше расчётного: при justify-content:center внешний отступ
   входит в раздачу свободного места, поэтому половина хода съедается. */
.bts__badge img{width:76vw; height:auto; object-fit:contain; margin:0 0 0 9vw}
.bts__ring{display:none}
/* Слово идёт ПОСЛЕ бейджа и подтягивается под карточку: центр строки должен
   лечь на центр карточки, отсюда −60,7vw (высота кадра 103,6vw, центр
   карточки 50,3 % от неё, половина строки слова ≈ 9vw). */
.bts__word{position:relative; left:0; right:0; top:0; width:auto; order:4;
  text-align:center; font-size:23vw; margin-top:-60.7vw; z-index:1}
.bts__haze{left:-40%; top:-10%; width:180%; height:60%}

/* 🔴 Порядок в разметке: сначала блок со списком (.bts__top), потом блок
   с заголовком (.bts__bot). На широком экране они стоят рядом и читаются
   разом, в столбце же список приходит раньше, чем сказано, что это такое.
   display:contents поднимает заголовок, абзац и кнопку на уровень секции —
   только так их можно расставить относительно списка. */
.bts__bot,.bts__bl{display:contents}
.bts__h2{order:1; max-width:none; margin-top:0;
  font-size:3.4rem; letter-spacing:-.102rem; text-wrap:balance}
.bts__p{order:2; width:auto; margin-top:2rem; font-size:1.4rem; text-wrap:pretty}
.bts__top{order:5; display:flex; flex-direction:column; gap:0; margin-top:12rem}
.bts__label{font-size:1.2rem}
.bts__list{width:auto; margin-top:2rem}
.bts__item{padding:1.7rem 0 1.7rem 2.4rem; font-size:1.5rem}
/* маркер выставлен под десктопный отступ 2.3rem — на телефоне отступ меньше */
.bts__item::before{left:.2rem; top:2.4rem}
.bts__bl .btn-pill{order:6; position:relative; left:0; top:0; bottom:auto;
  width:100%; min-width:0; margin-top:4rem;
  height:6.3rem; padding-left:2.4rem}

}