/* ============================================================
   АДАПТИВ
   Договорённость от 25.08.2026: вылизываем только ПК. Здесь
   лежит минимум, чтобы на планшете и телефоне бенто не рвало.
   ============================================================ */
@media (max-width: 1100px){
  .nav{ display:none; }
  .hero__inner{ grid-template-columns:1fr; }
  /* В одну колонку предмет встаёт над текстом и должен стоять по
     центру — вынос вправо здесь только перекосил бы его. */
  .hero__media{ order:-1; margin-right:0; }
  .stats{ grid-template-columns:repeat(2, 1fr); }
  .svc__grid{ grid-template-columns:1fr 1fr; }
  .s1,.s2,.s3,.s4,.s5,.s6{ grid-column:auto; grid-row:auto; }
  /* три карточки заявки: правило в common.css перебивает process.css,
     который подключается позже, — поэтому здесь, в последнем файле */
  .finale{ grid-template-columns:1fr; }
  /* каталог: две доли; крупная плитка во всю ширину и ниже, акцентная тоже во всю */
  .cg__grid{ grid-template-columns:1fr 1fr; }
  .cg__big{ grid-row:span 1; min-height:clamp(300px, 46vw, 420px); }
  .cg__acc--3, .cg__acc--4{ grid-column:span 2; }
  .about__inner{ grid-template-columns:1fr; }
  /* Атлант по центру, принципы не висят поверх статуи, а стоят сеткой под ней */
  .about__stage{ margin-inline:auto; }
  .about__points{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:clamp(8px, 2vw, 18px); }
  .about__point{ position:relative; inset:auto; max-width:none; animation:none; }
  .t1,.t4,.t7{ grid-column:span 12; }
  .t2,.t3,.t5,.t6,.t8{ grid-column:span 6; }
  .tile--round{ --r:var(--r-card); }
}
@media (max-width: 768px){
  /* ПАЛЬЦЕМ, А НЕ КУРСОРОМ. Замер на 390px: 14–33 ссылки на страницу
     имели высоту меньше 32 пикселей — в списке футера строки идут одна
     под другой почти вплотную, и попасть в нужную с первого раза нельзя.
     Рекомендация Apple — 44pt, Google — 48dp; 44 берём как компромисс,
     который не разносит футер на два экрана.

     Растим не шрифт, а область нажатия: padding и inline-flex с min-height.
     Текст остаётся того же размера, между строками появляется воздух. */
  .footer__list a,
  .footer__list .contact,
  .doc__toc-list a,
  .menu__mini a,
  .socials a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  /* Список услуг в меню: те же 44px, но через padding — inline-flex
     сломал бы перенос длинных названий вроде «Программирование 1С». */
  .menu__svc a{ padding-block:11px; }
}

@media (max-width: 640px){
  .header__cta{ display:none; }

  /* Номер в шапке сворачивается в кружок с трубкой. Целиком он туда
     не влезает: логотип, номер и бургер вместе шире экрана, и бургер
     уезжал за правый край — замер на 375px дал правую кромку 404.
     Кружок повторяет размер и форму бургера, так что справа выходит
     пара одинаковых кнопок, а не разнобой. Сам номер никуда не делся:
     он читается скринридером из aria-label и открыт текстом в меню. */
  .header__phone{
    width:clamp(40px, 3.1vw, 52px);
    height:clamp(40px, 3.1vw, 52px);
    justify-content:center;
    gap:0;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--surface);
  }
  /* Не display:none: скрытый так текст пропадает и для поиска по странице,
     и для части голосовых помощников. Это визуальное скрытие. */
  .header__phone span{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .header__phone-ico{ width:18px; height:18px; }
  .stats{ grid-template-columns:1fr; }
  .svc__grid{ grid-template-columns:1fr; }
  .s1{ grid-column:auto; }
  .cg__grid{ grid-template-columns:1fr; grid-auto-rows:minmax(220px, auto); }
  .cg__big, .cg__acc--3, .cg__acc--4{ grid-column:auto; }
  .cg__big{ min-height:340px; }
  .cg__tabs{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scrollbar-width:none; }
  .cg__tabs::-webkit-scrollbar{ display:none; }
  .cg__tab{ flex:none; }
  .t1,.t2,.t3,.t4,.t5,.t6,.t7,.t8{ grid-column:span 12; }
  .tile--pill{ --r:var(--r-card); }
}

/* ============================================================
   СТРАНИЦА «РАЗРАБОТКА САЙТОВ» (30.09.2026): web-build, web-kinds,
   web-path, web-steps, web-own. Здесь, а не в файлах блоков, —
   иначе их стили, подключённые позже, перебьют медиазапрос.
   ============================================================ */
@media (max-width: 900px){
  /* первый экран: не липнет, картинка над текстом, ролик играет сам */
  .wb{ height:auto; }
  .wb__stage{ position:relative; height:auto; min-height:0; padding-bottom:clamp(36px, 8vw, 56px); }
  .wb__inner{ grid-template-columns:1fr; gap:clamp(8px, 3vw, 20px); }
  .wb__media{ order:-1; margin-right:0; }
  .wb__grid{ -webkit-mask-image:radial-gradient(90% 40% at 50% 26%, #000 20%, transparent 80%);
                     mask-image:radial-gradient(90% 40% at 50% 26%, #000 20%, transparent 80%); }
  .wb__hint{ display:none; }
  .wb__steps{ gap:10px; }

  /* что строим (атлас): заголовок, лист с астролябией, описание, стрелки */
  .wk__box{ grid-template-columns:1fr; gap:20px; }
  .wk__side{ display:contents; }
  .wk__head{ order:-2; }
  .wk__dial{ order:-1; max-width:460px; width:92%; }
  .wk__rn{ width:32px; height:26px; top:-13px; font-size:14px; }
  .wk__ttag{ display:none; }
  .wk__note{ font-size:10px; padding:4px 6px; }
  .wk__num{ font-size:84px; }

  /* какой путь: вопросы и пути столбиком */
  .wp__qs{ grid-template-columns:1fr; }
  .wp__paths{ grid-template-columns:1fr 1fr; }
  .wp__scale{ font-size:11.5px; }

  /* как идёт работа: окно над шагами, шаги листаются сами */
  .ws__wrap{ grid-template-columns:1fr; gap:18px; }
  .ws__stick{ order:-1; position:relative; top:auto; }
  .ws__item{ min-height:0; padding-block:14px; cursor:pointer; }
  .ws__t{ font-size:clamp(18px, 5vw, 22px); }
  .ws__s{ margin-top:6px; font-size:14.5px; }
  .ws__item:not(.is-on) .ws__s{ display:none; }
  /* шаг с кнопкой вылезал за край: flex-start давал детям ширину по содержимому */
  .ws__item{ align-items:stretch; }
  .ws__badge{ align-self:flex-start; }
  .ws__s{ max-width:none; }
  .ws__btn{ justify-content:center; padding-inline:14px; font-size:12.5px; }
  .ws__item:not(.is-on) .ws__btn{ display:none; }
  .ws__pager{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
  .ws__pager i{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .3s var(--ease), width .3s var(--ease); }
  .ws__pager i.is-on{ width:22px; border-radius:4px; background:var(--accent-1); }
  .ws__phone{ right:-2%; bottom:-6%; width:24%; }
  .ws__keys{ left:2%; bottom:-6%; font-size:12px; padding:8px 10px; }

  /* наш сайт: снимки сверху, подписи лентой */
  .wo__box{ grid-template-columns:1fr; }
  .wo__win{ order:-1; }
  .wo__tabs{
    display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter) 8px;
  }
  .wo__tabs::-webkit-scrollbar{ display:none; }
  .wo__tab{ flex:0 0 72%; border-color:var(--line); }
  .wo__open{ right:10px; bottom:10px; padding:8px 11px; font-size:12px; }
}
@media (max-width: 640px){
  .wb__s{ display:none; }
  .wb__step b{ font-size:13px; flex-direction:column; gap:4px; }
  .wp__paths{ grid-template-columns:1fr; }
  .wp__box.has-pick .wp__path:not(.is-pick) .wp__dl{ display:none; }
  .wp__answer{ flex-direction:column; align-items:flex-start; }
  .wp__reset{ position:static; margin-top:12px; }
}
@media (max-width: 900px){
  .ws__item:has(.ws__art){ padding-right:84px; }
  .ws__art{ width:76px; }
  .wp__art{ aspect-ratio:2 / 1; }
}

/* ============================================================
   СТРАНИЦА «ЧАТ-БОТЫ» (30.09.2026): bot-hero на узких экранах —
   текст сверху, телефон под ним, строка площадок под телефоном.
   ============================================================ */
@media (max-width: 900px){
  .bh__inner{ grid-template-columns:1fr; gap:34px; }
  .bh__title{ font-size:clamp(34px, 9vw, 52px); }
  .bh__phone{ width:min(280px, 76vw); rotate:0deg; }
  .bh__toast{ left:0; top:auto; bottom:92px; }
  .bh__proof{ gap:8px 18px; }
}