/* ==========================================================================
   Узкие ширины - временный мост.

   ЭТО НЕ МОБИЛЬНАЯ ВЕРСИЯ. Мобильная версия - отдельный кит из семнадцати
   листов (`ui_kits/mobile/`), и он ещё не перенесён: там своя шапка, нижний
   модуль с «Заявкой», выдвижной фильтр, другая карточка.

   Записка десктопного кита говорит прямо: ниже 1200 сетка каталога переходит
   с трёх карточек на две, а колонка фильтра сворачивается в кнопку
   с модулем - «то есть в мобильное поведение». Отдельными листами эти
   ширины не отрисованы.

   Пока листов нет, десктопный кит на узком экране давал горизонтальную
   прокрутку: полоса 1280 с полями 80 не помещается в 360, а сетки
   `repeat(5,1fr)` не сжимаются. Прокрутка вбок - это сломанная страница,
   и оставлять её до переноса мобильного кита нельзя.

   Здесь ровно то, что убирает поломку, и ничего сверх: поля, число колонок,
   состав шапки. Ни новых решений, ни своей типографики - их место в ките.
   Когда мобильный кит переедет, этот файл удаляется целиком.
   ========================================================================== */

/* Шапка перестаёт вмещать всё раньше, чем страница становится узкой.
   В ките справа пять элементов, на сайте семь: добавлены избранное
   и сравнение. Первыми уходят «Отзывы» и «Вопросы» - это навигация,
   и она есть в подвале. Телефон остаётся: он действие, ради которого
   шапка липкая, и уходит уже на 900. */
/* Порог опустился с 1439 до 1199. «Отзывы» и «Вопросы» скрывались раньше
   потому, что правая зона не вмещала семь элементов; теперь телефон стоит
   слева, избранное и сравнение вернулись, и до 1200 всё помещается
   (замер на 1200: левая зона 422 px в колонке 446, правая 330).

   Ниже 1200 телефон возвращается вправо: слева на него и навигацию места
   уже нет. Вместе с ним уходят «Отзывы» и «Вопросы», а обе зоны прижимаются
   к краям - раскладка становится обычной: меню слева, знак по центру,
   средства справа. */
@media (max-width: 1199px) {
  /* Скрывается вся ближняя группа, а не только ссылки внутри неё: пустая
     группа продолжала бы делить правую зону пополам, и средства отъехали
     бы от края на середину. */
  .ac-hd__near { display: none; }
  .ac-tel--l   { display: none; }
  .ac-tel--r   { display: inline-block; }
  .ac-hd__l { justify-content: flex-start; }
  .ac-hd__r { justify-content: flex-end; }
}

@media (max-width: 1199px) {
  :root { --ac-gut: 40px; }

  /* Пять услуг в ряд на 1024 дают колонку в 150 px - читается заголовок,
     но не текст под ним. */
  .ac-srv   { grid-template-columns: repeat(3, 1fr); }
  .ac-facts { grid-template-columns: repeat(2, 1fr); }

  /* Прайс-строка услуги: название, срок 260 и цена 150 в ряд перестают
     помещаться раньше самой страницы - срок уходит под название. */
  .ac-wk li { grid-template-columns: minmax(0, 1fr) 150px;
              grid-template-areas: "t p" "s p"; row-gap: 4px; }
  .ac-wk h3 { grid-area: t; }
  .ac-wk span { grid-area: s; }
  .ac-wk b  { grid-area: p; align-self: center; }
}

@media (max-width: 900px) {
  :root { --ac-gut: 24px; }

  /* Шапка: три зоны в одну строку не помещаются. Телефон уходит здесь -
     он есть в подвале и в контактах; «Заявка» остаётся, потому что она
     и есть постоянное действие, ради которого шапка липкая.
     «Отзывы» и «Вопросы» скрыты выше, с 1439. */
  .ac-tel { display: none; }

  .ac-srv,
  .ac-tiles { grid-template-columns: repeat(2, 1fr); }
  .ac-grid,
  .ac-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Изделие: колонка выбора фиксирована на 400 px и на узком экране
     распирала страницу. Встаёт под галерею и перестаёт быть липкой -
     в мобильном ките на её месте нижняя панель с ценой. */
  .ac-pc { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s8); }
  .ac-rail { position: static; }
  /* `min-width: 0` нужен на каждом уровне до прокручиваемой ленты: иначе
     grid-элемент растягивается содержимым, и прокрутку получает документ,
     а не лента. Двенадцать кадров давали 905 при экране 768. */
  .ac-pc > *,
  .ac-gal { min-width: 0; }
  .ac-gal { grid-template-columns: minmax(0, 1fr); }
  /* Миниатюры переносятся сеткой, а не листаются лентой.
     Ленту с `overflow-x: auto` я пробовал первой: она прокручивалась сама,
     min-width стоял, ни один элемент за край не выходил - и всё равно
     документ получал 905 при экране 768. Перенос решает это без прокрутки
     вообще, а на узком экране двенадцать кадров сеткой читаются не хуже. */
  .ac-gal__t { display: grid; grid-template-columns: repeat(auto-fill, 56px);
               gap: var(--ac-s2); min-width: 0; }
  .ac-gal__t-i { width: 56px; }

  /* Окно заявки шире экрана: ужимаем и прижимаем к полям. */
  .ac-modal { width: auto; left: var(--ac-gut); right: var(--ac-gut);
              transform: none; top: var(--ac-s8); padding: var(--ac-s6); }

  /* Каталог: колонка фильтра 260 плюс сетка в 1fr на узком экране не
     помещаются. Фильтр встаёт над выдачей и перестаёт быть липким -
     в мобильном ките на его месте выдвижной модуль.

     `minmax(0, 1fr)`, а не `1fr`: трек в `1fr` не может стать уже своего
     содержимого, и колонка фильтра распирала страницу на 360px. Эта же
     ловушка ловила проект на комплектах - там её поймал такой же прогон. */
  .ac-cols { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s8); }
  .ac-side { position: static; min-width: 0; }

  /* Заявка: итог и форма стоят липкой колонкой справа только там, где они
     видны вместе со списком. Ниже - под списком, как в мобильном ките. */
  .ac-cc { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s8); }

  /* Услуга: та же история - форма встаёт под текстом. `.ac-rail`
     фиксирована на 400 px и в узкой колонке распирала страницу. */
  .ac-sc { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s8); }

  /* Направление услуг: заголовочная колонка 340 плюс прайс не помещаются.
     Заголовок встаёт над списком и перестаёт быть липким. */
  .ac-dir { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s6); }
  .ac-dir__h { position: static; }

  /* Четыре шага в ряд дают колонку в 150 px. */
  .ac-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ac-ask { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s6); }

  /* Вопросы: карточка «вопроса нет в списке» встаёт под списком. */
  .ac-qc { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s8); }
  .ac-qc .ac-rail { position: static; }

  /* О мастерской: два абзаца в колонку, команда по двое, съёмка
     производства - одним столбцом кадров. */
  .ac-two  { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s6); }
  .ac-boss { grid-template-columns: minmax(0, 1fr); }
  .ac-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-shop { grid-template-columns: minmax(0, 1fr); }

  /* Отзывы: две колонки становятся одной, полоса «оставить отзыв» тоже. */
  .ac-write { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s6); }

  /* Документ: оглавление 260 плюс текст мерой 46em не помещаются. Оглавление
     встаёт над текстом и перестаёт быть липким - иначе оно занимало бы экран
     целиком при каждой прокрутке. */
  .ac-dc { grid-template-columns: minmax(0, 1fr); gap: var(--ac-s8); }
  .ac-toc { position: static; }

  .ac-about,
  .ac-revs,
  .ac-qs,
  .ac-cont,
  .ac-seo__b { grid-template-columns: 1fr; }

  .ac-prod3  { grid-template-columns: 1fr 1fr; }
  .ac-ft__in { grid-template-columns: 1fr 1fr; gap: var(--ac-s10); }

  /* Мега-панель в четыре колонки не помещается; витрина в ней уходит -
     на узком экране это картинка ради картинки. */
  .ac-mega__in { grid-template-columns: repeat(2, 1fr); }
  .ac-mega__p  { display: none; }

  /* Кадр во всю высоту экрана на телефоне превращается в заставку,
     которую нужно пролистывать. Ниже - половина. */
  .ac-hero { height: clamp(420px, 62svh, 560px); }
}

@media (max-width: 620px) {
  :root { --ac-gut: 16px; }

  .ac-srv,
  .ac-tiles,
  .ac-grid,
  .ac-grid--3,
  .ac-facts,
  .ac-prod3,
  .ac-mega__in,
  .ac-fcols,
  .ac-ft__in { grid-template-columns: minmax(0, 1fr); }

  /* Поле поиска набрано Golos Text 26 - на 360 в него помещается
     полтора слова подсказки. */
  .ac-sf { padding: 0 var(--ac-s3); }
  .ac-sf input { font-size: var(--ac-size-h3); }

  /* Страницы выдачи: «1 2 3 4 … 6 Дальше» в строку не помещаются и
     распирали страницу ровно на три пикселя - их и искал прогон. */
  .ac-pg { flex-wrap: wrap; }

  /* Заголовок раздела и сортировка встают друг под друга. */
  .ac-ph { flex-wrap: wrap; gap: var(--ac-s4); }

  /* Навигация слева тоже не помещается: остаются знак и «Заявка».
     В мобильном ките на их месте бургер и нижний модуль. */
  .ac-nav { display: none; }
  .ac-hd__row { grid-template-columns: auto 1fr; }
  .ac-hd__w { justify-self: start; }

  /* Кегли первого экрана десктопные: 60 px на 360 даёт три слова в строку. */
  .ac-hero h1 { font-size: 34px; }
  .ac-hero__s { font-size: var(--ac-size-body); }

  .ac-h1 { font-size: 28px; }
  .ac-h2 { font-size: 22px; }
  .ac-rail h1 { font-size: 24px; }
  .ac-f2 { grid-template-columns: minmax(0, 1fr); }

  .ac-dl div { grid-template-columns: 1fr; gap: var(--ac-s1); }

  /* Строка заявки: четыре колонки в 360 не помещаются. Кадр мельче, цена
     и крестик уходят во вторую строку под описанием. */
  .ac-it { grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--ac-s4); }
  .ac-it__ph { width: 64px; height: 64px; }
  .ac-it__b { grid-column: 2 / -1; }
  .ac-it__p { grid-column: 2; grid-row: 2; }
  .ac-it__x { grid-column: 3; grid-row: 2; }

  /* Услуга: перечисления и таблица сроков в одну колонку. */
  .ac-does,
  .ac-tar,
  .ac-steps { grid-template-columns: minmax(0, 1fr); }
  .ac-wk li { grid-template-columns: minmax(0, 1fr) auto; }
}