/* ─────────────────────────────────────────────────────────
   ГК «МЕТРЫ» — медиазапросы
   Все адаптивные правила проекта собраны здесь: в main.css
   медиазапросов нет по регламенту вёрстки.

   Порядок сверху вниз: ноутбук → планшет → телефон → узкий
   телефон → правила для сенсорных экранов.
   ───────────────────────────────────────────────────────── */

/* ══ НОУТБУК И ПЛАНШЕТ ══════════════════════════════════ */

@media (max-width:1100px){
  /* внутренние страницы */
  /* лот: панель условий уходит под планировку */
  .lot__grid{grid-template-columns:1fr}
  .lot__panel{position:static}
  .lot__specs{grid-template-columns:repeat(3,1fr)}
  .about-p__card{grid-template-columns:1fr}
  .about-p__shot{order:-1;aspect-ratio:16/9}
  .plans__grid{grid-template-columns:repeat(3,1fr)}
  /* фильтр складывается в две строки: пять полей в ряд на ноутбуке
     ужимают селекты до нечитаемой ширины */
  .fbar,.fbar__more{grid-template-columns:repeat(2,1fr)}
  .fbar{align-items:end}
  .clg__items{grid-template-columns:repeat(3,1fr)}
  .specs__grid{grid-template-columns:repeat(2,1fr)}
  .spec{border-left:0;border-top:1px solid var(--hair);padding-left:0}
  .obj-about__grid{grid-template-columns:1fr}
  .gal__item{width:78vw}

  /* расчёт: две колонки не помещаются — ячейки идут одна под другой */
  .calc__grid{grid-template-columns:1fr;grid-template-rows:none}
  .calc__scheme,.calc__head,.calc__panel{grid-column:1;grid-row:auto}
  /* на узком порядок тот же: заголовок → схема → панель */
  .calc__head{order:0}.calc__scheme{order:1}.calc__panel{order:2}
  .calc__head{padding:clamp(30px,6vw,50px) var(--pad) 0}
  .calc__shot{min-height:44svh;border-right:0;border-bottom:1px solid var(--hair)}

  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(3){border-left:0;padding-left:0}
  .lead__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1000px){
  /* интервью: вопросы над ответом */
  .talk__stage{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .talk__answer{padding-left:clamp(26px,7vw,44px)}
  .talk__text{min-height:0}
}

@media (max-width:900px){
  /* Первое значение ведёт блок и идёт во всю ширину крупно,
     два оставшихся встают под ним парой и набраны мельче. */
  .dataline{grid-template-columns:1fr 1fr;border-top:0}
  .cell{border-left:0;border-top:1px solid var(--hair);padding-left:0}
  .cell:first-child{grid-column:1/-1}
  .cell:nth-child(3){border-left:1px solid var(--hair);padding-left:clamp(12px,3vw,22px)}
  .cell__val{font-size:clamp(30px,20cqw,120px)}
  .cell:nth-child(1) .cell__val{font-size:clamp(48px,24cqw,140px)}
  .cell:nth-child(2) .cell__val,
  .cell:nth-child(3) .cell__val{font-size:clamp(26px,21cqw,64px)}
  .cell--lead{grid-column:1/-1}
  .manifest__foot{grid-template-columns:1fr}
  .credo{text-align:left;white-space:normal}

  .catalog__top{grid-template-columns:1fr;align-items:start}
  .catalog .pside{border-left:0;padding-left:0}
  .clg__items{grid-template-columns:repeat(2,1fr)}
  .plans__grid{grid-template-columns:repeat(2,1fr)}
  .lot__specs{grid-template-columns:repeat(2,1fr)}

  /* ── шапка: разделы уходят в бургер ──
     Пункты в строке требуют шести колонок, на планшете они режутся
     на полуслове. Оставляем логотип, телефон и кнопку меню — само
     меню при этом не меняется, в нём те же разделы. */
  .bar{grid-template-columns:1fr auto}
  .bar__cell:not(.bar__cell--brand):not(.bar__cell--action){display:none}
  .bar__cell--action{gap:clamp(14px,3vw,24px);padding-left:clamp(14px,3.4vw,22px)}

  /* первый экран: панели с цифрами уходят под заголовок,
     иначе заголовок ужимается в узкий столбец */
  .hero__foot{grid-template-columns:1fr;gap:clamp(18px,3vw,28px)}
  /* v2 ставит панели во вторую колонку рядом с заголовком (main.css,
     блок V2) — в одной колонке это создавало лишнюю колонку и узкий
     столбец текста; здесь панели снова под подписью */
  .hero__foot > .panels{grid-column:1;grid-row:auto}
  .hero__foot > .hero__lede{align-self:start}
  .panels{width:100%}
  .panel{flex:1;width:auto;min-width:0}
  .panel:first-child{border-left:0}

  /* меню: пять колонок складываются в две, шестая ячейка была бы
     пустой — её занимают контакты */
  .menu__grid{grid-template-columns:repeat(2,1fr)}
  .menu__col--contacts{display:flex}
  .menu__offices{grid-template-columns:1fr}
  .menu__foot{gap:14px 22px}
  .menu__soc{margin-left:0;width:100%}
}

/* ══ ТЕЛЕФОН ════════════════════════════════════════════ */

@media (max-width:700px){

  /* ── первый экран ──
     Слои и анимации те же: смена кадров, бегущие цифры, отъезд
     экрана под следующий блок. Меняется только раскладка. */
  /* подписи в одно слово: «Разместить бизнес» в строку не влезает,
     а перенос на две строки ломал высоту переключателя */
  .switch__item{
    /* короткие слова в узких ячейках выравниваем по центру:
       у левого края они выглядели прижатыми к линиям сетки */
    justify-content:center;text-align:center;
    min-height:50px;
    padding:10px clamp(8px,2.6vw,12px);
    font-size:clamp(13px,3.6vw,16px);letter-spacing:-.01em;
  }
  .switch__full{display:none}
  .switch__short{display:inline}
  .hero__foot{
    grid-template-columns:1fr;gap:20px;
    padding-bottom:clamp(58px,14vw,72px);
  }
  .hero__title{font-size:clamp(26px,7.6vw,36px)}
  .hero__foot > .panels{grid-column:1;grid-row:auto}
  .hero__foot > .hero__lede{align-self:start}
  .panels{width:100%}
  .panel{flex:1;width:auto;min-width:0;padding:14px clamp(12px,3.4vw,16px) 16px}
  .panel:first-child{border-left:0}
  .panel__num{font-size:clamp(34px,10vw,44px)}
  .hero__bottom{bottom:12px;gap:10px}
  /* Строка занимает всю ширину: координаты уходят к правому краю
     экрана — место освободилось, координат курсора на телефоне нет. */
  .hero__geo{font-size:9.5px;gap:8px;letter-spacing:.06em;width:100%}
  .hero__geo-num{--pad-l:8px}
  /* координаты курсора — приём для мыши, на телефоне их нет */
  .coords{display:none}

  /* ── лента проектов ── */
  .cat{width:min(78vw,320px)}
  .crail{padding-bottom:20px}
  /* стрелки и ссылка «весь каталог» стоят под карточками одной
     строкой — переносит их main.js */
  .crail__foot{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:0 var(--pad);margin-bottom:clamp(28px,7vw,40px);
  }
  .crail__foot .arrows{margin:0}
  .crail__foot .ghost--map{margin:0}

  /* Разделы портфеля — горизонтальной лентой: пять строк в столбик
     съедали экран целиком ещё до первой карточки. */
  /* min-width:0 обязателен: без него лента из неразрывных строк
     растягивает колонку и уводит всю страницу вбок */
  .catalog__top,.catalog__top > *,.pside,.fbar__f{min-width:0}
  .tabs{
    flex-direction:row;gap:0;min-width:0;max-width:100%;
    margin-top:clamp(16px,4vw,24px);
    border-top:0;border-bottom:1px solid var(--hair);
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    flex:none;gap:8px;white-space:nowrap;
    padding:10px 16px 12px;
    border-bottom:0;border-right:1px solid var(--hair);
  }
  .tab:first-child{padding-left:0}
  .tab:hover,.tab._is-active{padding-left:16px}
  .tab:first-child:hover,.tab:first-child._is-active{padding-left:0}
  /* линия рисуется тенью, а не рамкой: рамка меняла бы высоту
     ячейки и лента подпрыгивала бы при переключении */
  .tab._is-active{box-shadow:inset 0 -2px 0 var(--accent)}

  /* ── город и этапы ──
     Механика та же, что на десктопе: кадр раскрывается во весь экран,
     потом сводится маской в портретное окно, и вокруг него идут этапы.
     Меняется только раскладка подписей: номер с заголовком над окном,
     описание под ним — поверх видео они читались тяжело. */
  /* На телефоне окно шириной по сетке — те же поля, что у номера
     и описания. Высоту ограничиваем свободной полосой между ними:
     прежние 120vw делали окно выше экрана, и подписи ложились
     на фотографию. Пропорция при этом не задана жёстко — окно
     занимает всё, что осталось, но не вытягивается уже 3:4. */
  /* Высоты лент задаём переменными и от них считаем окно кадра:
     раньше окно центрировалось на 50svh, а нижняя лента с текстом
     и кнопкой (последний этап — 6 строк + кнопка, ~200px) не
     помещалась в свои 106px и кнопка упиралась в край экрана.
     Теперь окно занимает ровно то, что осталось между лентами. */
  .film{
    height:640svh;
    --side-h:clamp(80px,10.5vh,104px);
    --aside-h:clamp(212px,26svh,240px);
    /* + место под индикатор шагов: он стоит под заголовком и не должен
       ложиться на кадр (Артём, 16.09) */
    --film-top:calc(var(--bar) + 5vh + var(--side-h) + 44px);
    --film-bot:calc(5vh + var(--aside-h) + 14px);
    --fw:calc(100vw - var(--pad) * 2);
    --fh:calc(100svh - var(--film-top) - var(--film-bot));
  }
  .film__frame{
    top:calc(var(--shape,0) * var(--film-top));
    bottom:calc(var(--shape,0) * var(--film-bot));
    left:calc(var(--shape,0) * (50vw - var(--fw) / 2));
    right:calc(var(--shape,0) * (50vw - var(--fw) / 2));
    clip-path:inset(0 calc(99% - 99% * var(--open,0)) 0 0);
  }
  .film__steps{
    grid-template-columns:1fr;grid-template-rows:auto 1fr auto;
    align-content:stretch;gap:0;
    padding:calc(var(--bar) + 5vh) var(--pad) 5vh;
    /* подложка только у краёв — там, где лежит текст; середина
       остаётся чистым кадром */
    background:linear-gradient(180deg,
      rgba(8,8,8,.88) 0%, rgba(8,8,8,.5) 22%,
      rgba(8,8,8,.12) 46%, rgba(8,8,8,.55) 76%, rgba(8,8,8,.92) 100%);
  }
  .film__side{grid-row:1;grid-column:1;justify-self:start;text-align:left;max-width:none}
  .film__side .reel__item{text-align:left}
  .film__aside{grid-row:3;grid-column:1;justify-self:start;text-align:left;max-width:none}
  .film__side .reel{height:var(--side-h)}
  .film__aside .reel{height:var(--aside-h)}
  .adv__dots{justify-content:flex-start;margin-top:12px}
  .film__over{width:88vw}

  /* ── было / стало ── */
  /* табы категорий — одной строкой со свайпом, с выходом за правое
     поле; в две строки они разваливались на подчёркнутые обрывки */
  .ba__top .ba__tabs{justify-self:stretch;min-width:0;max-width:none}
  .ba__tabs{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-right:calc(var(--pad) * -1);padding-right:var(--pad);
  }
  .ba__tabs::-webkit-scrollbar{display:none}
  .ba__tab{flex:0 0 auto;white-space:nowrap;padding:11px 16px 13px}
  .ba__stage{aspect-ratio:4/5;max-height:58svh}
  .ba__hint{position:static;margin-top:12px}

  /* ── расчёт ──
     График стоит над управлением и набран компактно: так кривая
     и переключатели попадают в один экран, и видно, как график
     отзывается на смену суммы. */
  /* Порядок: заголовок, под ним график, под графиком управление.
     Закрепление убрано: график накрывал собой строку с суммой,
     и панель уезжала под него. Всё нужное и так в одном экране. */
  .calc__head{order:0;padding:clamp(26px,6vw,40px) var(--pad) 0}
  .calc__scheme{
    order:1;gap:clamp(16px,4vw,24px);
    padding:clamp(18px,4vw,26px) var(--pad) clamp(14px,3.4vw,20px);
    border-bottom:1px solid var(--hair);
  }
  /* сетка лотов уводится: в закреплённой шапке важна только кривая */
  .lots{display:none}
  .calc__panel{order:2;gap:clamp(18px,4.4vw,26px);padding:clamp(18px,4.4vw,26px) var(--pad) clamp(30px,7vw,44px)}
  .calc__title{font-size:var(--h2);gap:clamp(10px,3vw,18px)}
  /* в одну колонку сумма уже не выравнивается с заголовком — воздух под подписью лишний */
  .calc__out{margin-top:8px}
  .calc__cell{border-left:0;padding-left:0}
  .calc__val{font-size:clamp(14px,4vw,18px);margin-top:8px}
  .calc__type{padding:0 clamp(8px,2.6vw,14px) 12px}
  .calc__type:first-child{padding-left:0}

  /* ── шаги ── */
  .steps{grid-template-columns:1fr}
  .step{border-left:0;padding-left:0;border-top:1px solid var(--hair)}
  .step:first-child{border-top:0}

  /* ── интервью ──
     Ответ живёт внутри пункта списка (его переставляет main.js),
     поэтому здесь он выглядит продолжением вопроса, а не отдельным
     блоком: без кавычки-выноса и с отступом от строки. */
  .talk__lead{font-size:var(--h2);padding:14px 0}
  /* отступ сверху равен нижнему: текст не должен липнуть к линии,
     которая отделяет его от вопроса */
  .talk__list .talk__answer{padding:20px 0 22px}
  .talk__list .talk__mark{display:none}
  /* портрет стоит один раз под всем списком */
  .talk__side > .talk__author{margin-top:clamp(22px,6vw,30px)}
  .talk__text{font-size:clamp(16px,4.4vw,19px);margin-bottom:clamp(18px,5vw,26px)}
  .talk__author{padding-top:clamp(14px,4vw,20px)}
  .talk__author img{width:74px}
  .talk__name{font-size:14px}

  /* ── фильтр каталога ──
     Фильтр свёрнут под кнопку: пять полей в столбик занимали первый
     экран целиком. Подборки и сортировка остаются на виду. */
  .fbar__toggle{display:flex}
  .fbar{display:none;padding-top:clamp(14px,4vw,20px)}
  .fbar._is-open{display:grid}
  /* Каждое поле — своей строкой во всю ширину. «Цена» и «Площадь»
     стояли парой в половину экрана: на два поля «от» и «до» внутри
     оставалось по 70px, и «6 000 000» в них было не разглядеть. */
  .fbar,.fbar__more{grid-template-columns:1fr}
  .fbar{gap:clamp(14px,4vw,20px)}
  .fbar__f{grid-column:1/-1}
  /* офферы в столбик: рядом они ужимаются до нечитаемых колонок */
  .offers{grid-template-columns:1fr}
  /* Пропорция 21:9 на телефоне давала полосу в 150px: заголовок,
     описание и ссылка в неё не помещались и вылезали за край.
     Высоту задаёт содержимое, а текст идёт во всю ширину — колонка
     в 52% рвала каждую строку на три. */
  .offer{aspect-ratio:auto;min-height:clamp(190px,52vw,230px);gap:8px}
  .offer > *:not(.offer__art):not(.offer__bg){max-width:100%}
  /* На баннере с чертежом текст в его половину не лезет: строки идут
     до кромки рисунка, дальше начинается он сам. */
  .offer--accent > *:not(.offer__art):not(.offer__bg){max-width:60%}
  /* Кадр под текстом затемняем снизу вверх: боковой градиент оставлял
     заголовок на светлой части фасада. */
  .offer--photo::after{
    background:linear-gradient(180deg,rgba(11,11,11,.35) 0%,rgba(11,11,11,.72) 46%,rgba(11,11,11,.92) 100%);
  }
  /* Чертёж целиком в поле баннера: раньше он свисал за правый край
     и круг обрезался. Держится правой трети, текст к нему не подходит. */
  .offer__art{width:40%;right:10px;opacity:.45}
  /* Промо-карточка тянется по высоте соседей выдачи, а в одну колонку
     соседей нет — она схлопывалась в полосу, где метка ложилась
     на заголовок, а текст — на светлый фасад. */
  .cat--promo{min-height:clamp(260px,74vw,340px)}
  .cat--promo::after{
    background:linear-gradient(180deg,rgba(11,11,11,.15) 0%,rgba(11,11,11,.7) 44%,rgba(11,11,11,.94) 100%);
  }
  .clg__tools{width:100%;justify-content:space-between}
  .sel--sort{min-width:0;flex:1}

  /* ── калькулятор ──
     Блок объясняет доход, и на телефоне объяснение важнее подробностей:
     оставляем один план лота, короткие подписи и потоки в столбик. */
  .calc__streams{grid-template-columns:1fr;gap:clamp(14px,4vw,20px)}
  .stream__why{font-size:11.5px}
  /* Планы мелкие и в ряд: на телефоне они иллюстрация к сумме,
     а не главный объект. Крупный план съедал экран целиком. */
  .metres__plans{gap:8px;margin-bottom:10px}
  .plan-lot{width:min(25vw,96px);padding:5px}
  .plan-lot:nth-child(n+3){display:none}
  .plan-lot__grid{gap:1px}
  .plan-lot__cap{margin-top:5px;font-size:9px;letter-spacing:.04em}
  /* Остаток лотов — третьей ячейкой того же размера, пунктиром:
     после двух планов заполнение больше не меняется, и рост суммы
     видно только по этому счётчику — строкой сбоку его не замечали. */
  .metres__more{
    align-self:stretch;width:min(25vw,96px);
    display:flex;align-items:center;justify-content:center;
    margin:0;padding:5px;
    border:1px dashed rgba(192,129,82,.45);
    font-size:13px;line-height:1.25;text-align:center;color:var(--fg);
  }
  /* цена метра остаётся: это ядро блока */
  .metres__val{font-size:clamp(20px,5.6vw,28px)}
  .metres__pair{gap:14px;margin-top:16px;padding-top:14px}
  /* Рулетка окупаемости уходит: вместе с ней в первый экран
     не помещались ползунок и цифры, а смысл блока — двигать сумму
     и видеть, как меняется результат. */
  .tape{display:none}
  .calc__houses{gap:5px}
  .calc__house{padding:7px 11px;font-size:11.5px}

  /* ── страница объекта ──
     Две кнопки разной длины в столбик смотрятся как ошибка:
     на телефоне они одной ширины. */
  .obj-hero__act{flex-direction:column;align-items:stretch}
  .obj-hero__act .btn{justify-content:center;text-align:center}

  /* ── подвал ── */
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__phone{margin-left:0}
}

/* ── сцена с заявкой на узких экранах ──
   Сцена остаётся закреплённой и многотактной: кадр так же
   раскрывается слева направо, панель так же поднимается снизу.
   Панель занимает всю ширину, карточка объекта уменьшается
   и стоит в верхней части кадра, чтобы панель её не накрыла. */
@media (max-width:1000px){
  .fin{height:320svh}
  /* Панель поднимается на две трети экрана, верхняя треть остаётся
     кадром с карточкой: иначе форма накрывает сцену целиком и от
     слоёв ничего не видно. */
  .fin__panel{
    /* высота по содержимому, панель прижата к низу: на невысоких
       экранах фиксированная доля обрезала кнопку */
    top:auto;bottom:0;height:auto;max-height:92svh;
    width:100%;border-left:0;border-top:1px solid var(--hair);
    /* нижнее поле считаем с учётом панели браузера и «челюсти»:
       в Яндекс.Браузере кнопка уходила под панель */
    padding:clamp(18px,3vh,34px) var(--pad)
            calc(clamp(16px,2.6vh,28px) + env(safe-area-inset-bottom,0px));
    /* длинная форма (HR — 6 полей) листается внутри панели; страница не застревает —
       атрибут для Lenis ставит main.js только пока панели есть куда листать (22.09) */
    justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  /* форма собрана плотнее: на невысоких экранах с панелью браузера
     нижняя кнопка не помещалась */
  .fin__form .field__input{font-size:16px;padding:11px 0}
  .fin__form .field{margin-bottom:clamp(10px,1.6vh,18px)}
  .fin__note{margin-bottom:clamp(12px,2vh,20px)}
  .fin__panel .agree{margin-bottom:clamp(12px,2vh,20px)}
  .fin__panel .btn{padding:13px 22px}
  .fin__card{
    left:var(--pad);top:calc(var(--bar) + 14px);
    width:min(44vw,172px);
    transform:translateY(calc(24px - 24px * var(--p2,0)));
  }
  /* в кадре карточка работает как метка объекта — подробности
     и кнопки уводим, для них есть каталог */
  .fin__card.cat .cat__facts,.fin__card.cat .cat__act{display:none}
  .fin__title{font-size:var(--h2);margin-bottom:10px}
  .fin__note{max-width:none;margin-bottom:clamp(16px,2.4vh,26px)}
  .fin__head{margin-bottom:10px}
}

@media (max-width:760px){
  /* Карточку объекта с кадра убираем: в ширину телефона она влезает
     только обрезанной панелью, а кадр без неё читается чище. */
  .fin__card{display:none}

  /* шестая ячейка сетки была бы пустой — ставим туда контакты */
  .foot__grid{grid-template-columns:repeat(2,1fr)}
  .foot__col--contacts{display:flex}
  .foot__offices{grid-template-columns:1fr}
  .foot__soc{margin-left:0}
  .foot__by{margin-left:0}
}

@media (max-width:640px){
  .clg__items{grid-template-columns:1fr}
  .plans__grid{grid-template-columns:1fr}
  .clg-hero__row{grid-template-columns:1fr}
  .clg-hero__note{text-align:left}
  .clg-hero__row{grid-template-columns:1fr}
  .clg-hero__note{text-align:left}
  /* вид «списком» на телефоне не имеет смысла: три колонки внутри
     карточки схлопываются в нечитаемые полоски */
  .specs__grid{grid-template-columns:1fr}
  .gal{height:200svh}
  .gal__item{width:86vw}
}

/* ══ УЗКИЙ ТЕЛЕФОН ══════════════════════════════════════ */

@media (max-width:430px){
  .bar__phone{font-size:12px}
  /* меню держит две колонки, как большой подвал */
  .menu__col{padding:16px clamp(12px,3.6vw,16px) 20px}
  .menu__legal{flex-direction:column;gap:9px}
  .menu__foot{flex-direction:column;align-items:flex-start}
  .fin__card{width:min(62vw,200px)}
}

/* ══ СЕНСОРНЫЕ ЭКРАНЫ ═══════════════════════════════════ */

/* Лентой проектов на телефоне управляет сам браузер: своя прокрутка
   с инерцией и подхватом карточки. Перетаскивание по пальцу давало
   сдвиг ровно на длину свайпа — листалось тяжело. */
@media (pointer:coarse){
  .crail{
    overflow-x:auto;overscroll-behavior-x:contain;cursor:default;
    /* mandatory: лента всегда встаёт на начало карточки, не посреди объекта (24.09) */
    scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .crail::-webkit-scrollbar{display:none}
  .crail__track{transform:none !important;width:max-content}
  .cat{scroll-snap-align:start;scroll-snap-stop:always}
  /* Горизонтальный жест по снимку остаётся снимку — им листают кадры.
     Без этого он уводил каталог вбок, и кадр сменить было нельзя. */
  .cat__img,.cat__link{touch-action:pan-y}
  /* В ленте на главной наоборот: весь жест отдан прокрутке ленты,
     кадр там один. Иначе половина карточки не пускала ленту листаться. */
  .crail .cat__img,.crail .cat__link{touch-action:auto}
  .crail .cat__bars,.crail .cat__more{display:none}
}

@media (hover:none){
  /* курсор-кружок — приём для мыши */
  .dot{display:none}
  /* Раскрытие по наведению на сенсорном экране недоступно: описание
     ставим в поток, чтобы оно вообще было видно. */
  .cat__drop{opacity:1;grid-template-rows:1fr}
  .cat__drop p{padding-top:9px}
  /* Кадр не сжимается: место под описание освобождать не нужно —
     оно и так в потоке. От тапа карточка получала :focus-within
     и снимок дёргался, будто карточка сломалась. */
  .cat:hover .cat__img,.cat:focus-within .cat__img{aspect-ratio:1/1}
  /* и приглушение снимка снимаем сразу: наводить тут нечем */
  .cat__ph{filter:none}
  /* Полосы кадров видны всегда: наведения нет, а без них непонятно,
     что снимки листаются и сколько их. Счётчик «+2» убран — о том же
     говорят полосы, а он занимал угол кадра. */
  .cat__bars{opacity:1}
  .cat__more{display:none}
}

/* галерея дома: подпись под заголовком — в две колонки она ужимается */
@media (max-width:900px){
  .gal__head{grid-template-columns:1fr;gap:clamp(14px,3vw,20px)}
}

/* история про дом: на планшете и телефоне кадр над текстом */
@media (max-width:900px){
  .story{height:300svh}
  .story__stage{
    grid-template-columns:1fr;grid-template-rows:38svh 1fr;
    gap:clamp(16px,4vw,26px);align-items:start;
  }
  .story__media{order:-1;height:100%}
  .story__steps{min-height:clamp(230px,52vw,300px)}
}

/* новости: крупная запись над списком — рядом они ужимаются */
@media (max-width:900px){
  .news__lead{grid-template-columns:1fr;gap:clamp(20px,4vw,32px)}
}

/* ── ход реновации на телефоне ──
   Кадр и текст встают друг под друга. Раньше сетка оставалась
   двухколоночной: кадр с пропорцией 16:9 требовал 557px ширины
   и распирал страницу — телефон ужимал масштаб всего макета,
   и весь сайт открывался мельче, чем нарисован. */
@media (max-width:900px){
  .build__body{grid-template-columns:1fr;gap:clamp(14px,3vw,22px)}
  .build__body > *{min-width:0}
  .build__shot{width:100%}
}

/* ── три довода об объекте на телефоне ──
   В три колонки они превращались в узкие полосы, где текст лез
   за края карточки. Идут друг под другом, кадр пониже. */
@media (max-width:900px){
  .usp{grid-template-columns:1fr;gap:clamp(10px,2.4vw,16px)}
  .usp__i{min-height:clamp(220px,58vw,300px)}
}

/* ── история дома на телефоне ──
   Липкий экран остаётся, но такт должен помещаться целиком:
   кадр ниже, текст компактнее, иначе последняя строка уходила
   под нижний край и читать её было нечем. */
@media (max-width:700px){
  .story__stage{
    grid-template-rows:28svh 1fr;
    padding:calc(var(--bar) + 14px) var(--pad) 18px;
    gap:14px;
  }
  .story__lead{font-size:clamp(22px,6.4vw,30px);margin-bottom:16px}
  /* резерв под самый длинный такт: короткий оставлял воздух,
     а длинный подпирал засечки хода снизу */
  .story__steps{min-height:clamp(250px,66vw,300px)}
  .story__step h3{font-size:clamp(16px,4.4vw,20px);margin-bottom:8px}
  .story__step p{font-size:13px;line-height:1.5;margin-bottom:8px}
  .story__note{padding-top:8px}
  .story__dots{margin-top:22px}
}

/* ═══ V2 ═══ */
@media (max-width:900px){
  .pside--act{align-items:flex-start}
  .tabs--row{flex-wrap:nowrap;margin-left:0;margin-right:0;padding:0 var(--pad);overflow-x:auto}
}
@media (max-width:900px){
  .tabs__act{margin-left:clamp(10px,3vw,20px);padding-bottom:0}
  .tabs__act .arrows{display:none}
}
@media (max-width:900px){.tabs--row{border-bottom:0}}
@media (max-width:900px){
  .done__top{grid-template-columns:1fr}
  .done__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){.done__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.calc--smart .calc__inputs{grid-template-columns:1fr}.calc--smart .calc__sum--adr{margin-top:clamp(14px,3vw,20px)}}
@media (max-width:900px){
  .ba__top{grid-template-columns:1fr}
  .ba__top .ba__tabs{grid-column:1;grid-row:3;justify-self:start;margin-top:clamp(14px,3vw,22px)}
}

/* до/после на телефоне: табы — прокручиваемая строка ровно в ширину колонки.
   Правило выше (≤900) ставило justify-self:start, и ряд получал ширину по
   содержимому — 558px растягивали всю страницу (Артём, 16.09). */
@media (max-width:700px){
  .ba__top{grid-template-columns:minmax(0,1fr)}
  .ba__top .ba__tabs{justify-self:stretch;width:100%;max-width:100%;min-width:0}
}

/* первый экран на телефоне (Артём, 16.09): подзаголовок под заголовком
   убираем — он занимал экран; низ кадра темнее, чтобы заголовок и цифры
   читались на светлых фасадах золотого часа */
@media (max-width:700px){
  .hero__foot > .hero__lede{display:none}
  .hero__veil{
    /* затемнение поднято выше, к первой строке заголовка; самый низ мягче */
    /* низ чуть светлее (Артём, 16.09) */
    background:linear-gradient(to top,
      rgba(11,11,11,.7) 0%, rgba(11,11,11,.56) 30%, rgba(11,11,11,.4) 50%, rgba(11,11,11,.2) 66%, rgba(11,11,11,.06) 80%, rgba(11,11,11,0) 92%);
    /* блюр только у самой кромки: на портретном кадре маска десктопа (до 50%)
       размывала половину здания (Артём, 16.09) */
    -webkit-mask-image:linear-gradient(to top, #000 0%, #000 8%, rgba(0,0,0,.5) 18%, transparent 30%);
    mask-image:linear-gradient(to top, #000 0%, #000 8%, rgba(0,0,0,.5) 18%, transparent 30%);
  }
  /* Маска вуали (main.css) режет её на 56% высоты кадра вместе с блюром,
     а заголовок на телефоне стоит выше. Отдельный слой без размытия
     дотягивает затемнение до первой строки заголовка. */
  .hero__stage::after{
    content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
    /* два градиента одним слоем: верхний — под переключатели, темнее, чем на
       десктопе; нижний — до заголовка, чуть легче прежнего (Артём, 16.09) */
    background:
      linear-gradient(to bottom, rgba(11,11,11,.72) 0%, rgba(11,11,11,.42) 14%, rgba(11,11,11,.12) 26%, rgba(11,11,11,0) 36%),
      linear-gradient(to top, rgba(11,11,11,.3) 0%, rgba(11,11,11,.46) 26%, rgba(11,11,11,.46) 46%, rgba(11,11,11,.3) 60%, rgba(11,11,11,.1) 76%, rgba(11,11,11,0) 88%);
  }
}

/* индикатор шагов на телефоне — слева, по нижнему краю заголовка шага */
@media (max-width:700px){.film__side .adv__dots{justify-content:flex-start;margin-top:10px}}

/* Крошки на телефоне скрыты (Артём, 16.09): в разметке и JSON-LD остаются,
   поиск их читает; на странице лота вместо цепочки — ссылка назад, на странице
   дома ничего: на кадре первого экрана она не читается (Артём, 16.09). */
@media (max-width:700px){
  .obj-hero__crumbs,.lot__crumbs,.clg-hero .eyebrow:has(a){display:none}
  .back{
    display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  }
  .lot .back{margin:0 0 16px}
}

/* страница лота на телефоне: без кнопок PDF и «Поделиться» (Артём, 16.09) */
@media (max-width:700px){.lot__tools{display:none}}

/* Страница лота на телефоне: подписи во вкладках 16.09 были скрыты — плашка
   закрывала узкий кадр. С 23.09 подпись стоит ПОД кадром (main.css, блок
   «карточка видов на телефоне»), закрывать ей нечего, и она нужна всем
   вкладкам одинаково — у фото дома её не хватало. Правило снято намеренно. */

/* карточки лотов на телефоне: без описания — заголовок, этаж и окна, плашки (Артём, 16.09) */
@media (max-width:700px){.plans__grid .cat__drop{display:none}}


/* первый экран дома с кадром из-под маски (Артём, 17.09): на телефоне текст
   в одну колонку, высоту блока меряет main.js; координаты и повтор адреса
   убраны — лишнее; вместо крошек ссылка «← Смарт-квартиры» (правило .back выше) */
@media (max-width:900px){
  .hero--mask .hero__top{grid-template-columns:1fr;height:auto}
  .hero--mask .hero__lead{border-right:0;padding:18px var(--pad) 22px}
  .hero--mask .hero__title{font-size:clamp(26px,7.6vw,36px);min-height:3.2em}
  .hero--mask .hero__sub{font-size:14px}
  .hero--mask .hero__cta{margin-top:18px}
  .switch--nums{padding-top:0}
  .hero--mask .panels{margin-top:0}
  .hero--mask .panel{padding:14px 16px 16px}
  .hero--mask .panel__num{font-size:34px}
  .hero--mask .panel__sub{font-size:12px}
  .hero--mask .hero__geo{display:none}
}

/* Манифест на телефоне: пара ячеек под ведущей цифрой — подпись, цифра и
   пояснение стоят в общих строках и прижаты к низу, поэтому цифры на одной
   линии и тексты заканчиваются вровень (Анастасия, 24.09). */
@media (max-width:900px){
  /* subgrid здесь не годится: кегль цифры считается от ширины ячейки (cqw), и
     строки сетки получались ниже содержимого — цифры наезжали на подписи (24.09).
     Поэтому проще: подпись над цифрой всегда в две строки — цифры на одной линии,
     пояснение прижато к низу ячейки — тексты заканчиваются вровень. */
  .dataline .cell:not(:has(.cell__sub)){display:flex;flex-direction:column}
  .dataline .cell:not(:has(.cell__sub)) .cell__label{line-height:1.45;min-height:2.9em}
  .dataline .cell:not(:has(.cell__sub)) .cell__note{margin-top:auto;padding-top:clamp(12px,1.4vw,20px)}
  .dataline:not(.dataline--four) .cell:first-child:not(:has(.cell__sub)) .cell__label{min-height:0}
}

/* «Управление» на телефоне: четыре цифры сеткой 2×2 вместо «одна крупно + три»,
   и меньше пустоты перед «Управляем объектом» (Анастасия, 24.09) */
@media (max-width:900px){
  .dataline--four .cell:first-child{grid-column:auto}
  .dataline--four .cell{border-left:0;padding-left:0}
  .dataline--four .cell:nth-child(even){border-left:1px solid var(--hair);padding-left:clamp(12px,3vw,22px)}
  .dataline--four .cell:nth-child(n) .cell__val{font-size:clamp(26px,21cqw,64px)}
  .dataline--four .cell{padding-bottom:clamp(18px,4vw,28px)}
  .pg-numbers--mgmt{padding-bottom:0}
  .pg-numbers--mgmt .dataline{margin-bottom:0}
  .pg-numbers--mgmt + .manifest{padding-top:clamp(20px,6vw,32px)}
}

/* Кадры шагов на телефоне: точка фокуса задаётся в build-pages.mjs (--pos) */
@media (max-width:900px){.story__shot img{object-position:var(--pos,50% 50%)}}

/* «Для человека / города / собственника» на телефоне: не три абзаца подряд,
   а таблица из трёх строк — ключ слева, вывод справа крупнее, строки разделены
   линией (Анастасия, 24.09) */
@media (max-width:900px){
  .trio{gap:0;padding-top:0}
  /* колонка подписи — по самой длинной («Для собственника»), зазор до текста широкий:
     при долях колонок подпись вылезала и почти касалась текста (Артём, 24.09) */
  .trio{grid-template-columns:max-content minmax(0,1fr)}
  .trio__i{display:grid;grid-column:1/-1;grid-template-columns:subgrid;column-gap:clamp(24px,7vw,36px);align-items:baseline;
           padding:clamp(18px,5vw,26px) 0;border-top:1px solid var(--hair)}
  .trio__i:first-child{border-top:0}
  .trio__k{margin:0;line-height:1.4;font-size:10px;letter-spacing:.12em}
  .trio__i p{font-size:clamp(17px,4.8vw,21px);line-height:1.3}
  .trio__i p::first-letter{text-transform:uppercase}
}

/* Карточки «Агентам» на телефоне широкие и низкие: люди в кадре уходили под
   подпись. Кадрам с людьми задан --pos — показываем нижнюю часть (Анастасия, 24.09) */
@media (max-width:900px){.eco__i img{object-position:var(--pos,50% 50%)}}

/* Первый экран дома на телефоне: маска открывала низ полноэкранного кадра —
   дорогу и машины. Кадр вписан в видимое окно маски с фокусом на фасаде,
   по мере раскрытия он растёт вместе с окном (Анастасия, 24.09) */
@media (max-width:700px){
  .hero--mask .hero__stage{height:100%}
  .hero--mask .shot img{object-position:50% 38%}
}

/* ══ ТЕЛЕФОН: АНИМАЦИИ ПРОКРУТКИ НА КОМПОЗИТНЫХ СВОЙСТВАХ (01.10.2026) ══════
   Жалоба: на iPhone (Safari) при прокрутке дёргаются первый экран, сцена
   «Город» и маска кадра на странице дома. Safari не композитит clip-path,
   filter, backdrop-filter и изменения размеров — каждый кадр прокрутки шла
   раскладка и перерисовка на весь экран. Здесь на телефоне те же движения
   переведены на transform/opacity; значения пишет main.js (без var() на корне
   сцены). Порог ≤700 — тот же, на котором у этих сцен своя раскладка; компьютер
   и планшет не трогаем. */
@media (max-width:700px){
  /* первый экран главной: размытие под вуалью убрано — backdrop-filter поверх
     движущегося кадра Safari пересчитывает каждый кадр; затемнение то же */
  .hero__veil{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero__dim{will-change:opacity}

  /* смена кадров первого экрана: срез слева направо — не clip-path, а встречный
     сдвиг кадра (translate, режет overflow) и картинки внутри; «дыхание» кадра
     перенесено с .shot на картинку, чтобы не спорить со сдвигом */
  .shot,.shot._was-active,.shot._is-active{clip-path:none;animation:none}
  .shot{overflow:hidden;translate:-100% 0}
  .shot img{translate:100% 0;animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
  .shot._is-active,.shot._was-active,
  .shot._is-active img,.shot._was-active img{translate:none}
  .shot._is-active,.shot._is-active img{transition:translate 2.2s cubic-bezier(.65,0,.2,1)}

  /* первый экран дома: маска не растёт высотой — кадр во весь экран уезжает
     вниз transform-ом, картинка внутри едет обратно (main.js, heroLeave) */
  .hero--mask .hero__photo{
    height:100svh;
    transform:translate3d(0,calc((1 - var(--leave,0)) * (var(--bar) + var(--th))),0);
    will-change:transform;
  }
  .hero--mask .hero__stage{transform-origin:0 0;will-change:transform}
  /* до замеров main.js кадр сразу вписан в окно маски (--th меряет скрипт в разметке),
     как и после них — без скачка масштаба; main.js ставит свои размеры поверх */
  .hero--mask .hero__stage{top:0;bottom:auto;height:calc(100svh - var(--bar) - var(--th))}
  /* кадр проявляется, когда шрифты и картинка готовы (см. hero.tsx, _wait) */
  .hero--mask .hero__photo{transition:opacity .35s var(--e)}
  /* без main.js кадр всё равно покажется через 2 с; пока ждём — кадров прокрутки не нужно */
  .hero--mask._wait .hero__photo{opacity:0;animation:heroPhotoShow .35s 2s forwards}
  .hero--mask .hero__top{will-change:opacity}

  /* сцена «Город»: с холстом окно кадра и шторку рисует main.js на холсте во весь
     экран сцены; без холста (пока не загрузился) остаётся прежний вид */
  .film__frame._is-gl{top:0;bottom:0;left:0;right:0;clip-path:none}
  .film__frame._is-gl .film__src{filter:none;transform:none}
  .film__over,.film__veil,.film__steps{will-change:opacity}
  /* этапы: без clip-path и filter — только сдвиг и гашение */
  .reel__item{will-change:transform,opacity}
  .reel__in{will-change:transform}

  /* подвал: шторка кадра — заслонка цвета фона, уезжает вправо transform-ом
     (было clip-path: inset справа 72% → 0) */
  .fin__media{clip-path:none}
  .fin__media::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:var(--bg);
    transform:translate3d(calc(28% + 72% * var(--p1,0)),0,0);
    will-change:transform;
  }
  .fin__panel,.fin__form{will-change:transform}

  /* линейка: бегунок едет transform-ом, не top; смена числа метров
     перекладывает только саму линейку, а не всю страницу */
  .ruler{contain:size layout style}
  .ruler__mark{top:0;transition:transform .1s linear}
}
@keyframes heroPhotoShow{to{opacity:1}}