/* ==============================================================
   МОБИЛЬНЫЙ СЛОЙ — подключается ПОСЛЕДНИМ, ниже всех остальных.
   Правило проекта: побеждает тот файл, что ниже (КОНТЕКСТ §15).

   Здесь собрано всё, что касается телефона и планшета, чтобы
   при переносе в тему WordPress мобильную часть было видно
   одним куском, а не искать по одиннадцати файлам.

   Собран 12.08.2026. Разделы:
     1. Переполнения по ширине (настоящие баги)
     2. Тач-цели: ничего меньше 44px
     3. Читаемость: на телефоне нет текста мельче 12px
     4. Ленты со свайпом
     5. Нижняя панель
     6. Мобильная шторка
     7. Ритм и отбивки
     8. Отклик на касание
   ============================================================== */

/* ==============================================================
   1. ПЕРЕПОЛНЕНИЯ ПО ШИРИНЕ
   ============================================================== */

/* Номер с чипом оператора занимает ~224px: чип 46 + отбивка 12 +
   сам номер 154 + запас. Колонка в 186px его не вмещала, ссылка
   вылезала за край и страница получала прокрутку вбок на 430px.
   Ловилось только на широком телефоне — на 390 колонка одна. */
.footer .phones,
.contactcard .phones {
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
}
.phone { min-width: 0; }
/* Карточка контактов на «О нас»: строка «трубка + четыре номера»
   складывалась в две колонки и вылезала за край на 430px. */
@media (max-width: 767px) {
  .contactcard__row { min-width: 0; }
  .contactcard__row > .phones { grid-template-columns: 1fr; }
}

/* Шапка секции: у ссылки справа `white-space: nowrap`, и вместе
   с длинной надписью-кикером строка не помещалась. На «Политике
   конфиденциальности» это давало прокрутку вбок на всех ширинах
   телефона. Разрешаем строке переноситься. */
@media (max-width: 767px) {
  /* Ячейка grid по умолчанию не уже своего содержимого
     (`min-width: auto`) — та же грабля, что с лентой вкладок
     в §15. Без этой строки строка не переносится вообще:
     она просто распирает шапку раздела шире контейнера. */
  .sec-head > * { min-width: 0; }
  .sec-head__top {
    flex-wrap: wrap;
    row-gap: var(--sp-2);
  }
  .sec-head__kicker { min-width: 0; }
  .sec-head__link { margin-left: auto; }
}

/* Длинное слово в заголовке шире колонки телефона: «ПРОМЫШЛЕННАЯ»
   на 320px, «конфиденциальности» на «Политике». Прокрутки при этом
   может и не появиться — слово просто молча срезается (§15).
   Разрешаем перенос по слогам: у страниц стоит lang="ru",
   поэтому `hyphens: auto` переносит по-русски, а не рубит слово. */
@media (max-width: 767px) {
  /* Нижняя граница шкалы заголовков рассчитывалась на десктоп:
     на 320–430px H1 оставался 36px, и длинное русское слово
     («конфиденциальности», «ПРОМЫШЛЕННАЯ») было шире колонки.
     Chrome переносить по слогам отказывается, а `break-word`
     рубит слово без дефиса — читается как опечатка. Поэтому
     сам кегль привязан к ширине экрана: 320 → 25px, 390 → 29px,
     767 → 36px. Первый экран главной набран `--fs-display`
     и остаётся крупным. */
  :root {
    --fs-h1: clamp(1.5rem, 7.4vw, 2.25rem);
    --fs-h2: clamp(1.375rem, 6.2vw, 1.75rem);
  }
  /* Перенос по слогам там, где браузер его умеет. `break-word`
     не ставим: он рубит слово в произвольном месте и без дефиса. */
  h1, h2, h3, .pagehero__title, .hero__title {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .sec-head__body > * { min-width: 0; }

  /* То же самое в подписях под снимками: на «Промышленных
     системах» подпись к кадру состава станции распирала сетку
     на 320px — длинное слово внутри <b>. */
  figcaption, dd, dt, li, p, td, th {
    overflow-wrap: break-word;
  }
  .indshots > *, .gal > *, .shots > * { min-width: 0; }
}

/* Нижняя панель на узком экране: колонка сетки по умолчанию
   не уже своего содержимого, и подпись «Позвонить» распирала
   страницу на 320px. */
@media (max-width: 1023px) {
  .mobilebar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mobilebar__item { min-width: 0; }
}
@media (max-width: 359px) {
  .mobilebar__item { font-size: 0.6875rem; }
}

/* Общая страховка по медиа: ни один снимок не шире своего места.
   ⚠️ `overflow: clip` на контейнер здесь НЕ ставим — на главной
   карточка первого экрана нарочно свисает за границу снимка
   (§15), и отсечение её срежет. Переполнения лечим по месту. */
@media (max-width: 1023px) {
  img, svg, video, iframe { max-width: 100%; }
}

/* ==============================================================
   2. ТАЧ-ЦЕЛИ: ничего меньше 44px
   Проверка 12.08.2026 нашла 26–49 элементов на страницу ниже
   нормы. Растим не сам элемент, а его область нажатия —
   раскладка при этом не едет.
   ============================================================== */
@media (max-width: 1023px) {

  /* Соцсети в подвале: были 30×30.
     ⚠️ Серую рамку убрали 27.08.2026: она осталась с той поры, когда
     кружки были серые и без неё терялись на тёмном. Теперь кружок
     фирменного цвета, а рамка при `box-sizing: border-box` съедала
     по пикселю цвета с каждой стороны и читалась тусклым ободком. */
  .social { gap: var(--sp-2); }
  .social__link {
    width: var(--tap);
    height: var(--tap);
  }
  .social__link svg { width: 18px; height: 18px; }

  /* Ссылки-стрелки и «Все услуги →» */
  .link-arrow,
  .sec-head__link {
    min-height: var(--tap);
    align-items: center;
  }

  /* Списки подвала: строки в 19px превращаются в строки в 44px */
  .footer__list { gap: 0; }
  .footer__list a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
  }

  /* Нижняя строка подвала: «Политика», «Карта сайта» и прочее */
  .footer__bottom { gap: 0 var(--sp-5); }
  .footer__bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Чипы: вкладки «Задачи по воде», якоря услуг, фильтр работ */
  .chip {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
  }

  /* Точки рулетки первого экрана: полоска остаётся 3px,
     нажимается площадка вокруг неё */
  .hslider__dots { gap: var(--sp-2); }
  .hslider__dot {
    position: relative;
    min-height: 22px;
    padding-block: 10px;
    background-clip: content-box;
  }

  /* Чекбокс согласия в форме */
  .check input[type='checkbox'] { width: 22px; height: 22px; }

  /* Почта и адрес в подвале */
  .footer__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Телефоны в подвале и в карточке контактов */
  .footer .phone a,
  .contactcard .phone a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
}

/* ==============================================================
   3. ЧИТАЕМОСТЬ
   На телефоне 11px читается плохо, а мелких капсов на страницах
   много: подписи полей, метки операторов, индексы разделов.
   Поднимаем нижнюю границу до 12px, разрядку при этом чуть
   убираем — иначе строка становится длиннее и переносится.
   ============================================================== */
@media (max-width: 1023px) {
  :root {
    --fs-label: 0.75rem;   /* было 11px */
    --ls-label: 0.13em;
  }
  .label,
  .field__label,
  .phone__op,
  .mobilebar__item,
  .work__meta,
  .review__meta,
  .badge { font-size: 0.75rem; }

  .sitelogo__tag { font-size: 0.6875rem; }
}

/* ==============================================================
   4. ЛЕНТЫ СО СВАЙПОМ
   ============================================================== */
@media (max-width: 719px) {

  /* Карточки в ленте больше не тянутся по самой длинной:
     один многословный отзыв растягивал все четыре и оставлял
     под коротким текстом пустой экран в половину телефона.
     `height: 100%` у карточки при этом надо снять — иначе она
     продолжает тянуться на всю высоту ряда. */
  .rail { align-items: start; }
  .rail > .review,
  .rail > .newscard { height: auto; }
  .review p { flex: 0 1 auto; }

  /* Лента выходит за поля контейнера и подрезается по краю
     экрана — так видно, что справа есть продолжение. */
  /* ⚠️ Ширина колонки задаётся одним значением, без minmax(0, …):
     нижняя граница 0 разрешает колонке схлопнуться, и текст
     карточки встаёт в столбик по одной букве. */
  .rail {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    grid-auto-columns: 84vw;
  }

  /* Полоса прокрутки под лентой тоньше и тише */
  .rail::-webkit-scrollbar { height: 3px; }

  /* Кнопки листания на телефоне не нужны — есть палец */
  .rail-nav { display: none; }
}

/* Ленты чипов (якоря разделов, вкладки «Задачи по воде»):
   прячем полосу прокрутки, оставляем инерцию и подрезку */
@media (max-width: 1023px) {
  .anchorrail,
  .problems__tabs {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .anchorrail::-webkit-scrollbar,
  .problems__tabs::-webkit-scrollbar { display: none; }
}

/* ==============================================================
   5. НИЖНЯЯ ПАНЕЛЬ
   Главный элемент управления на телефоне: с неё звонят и
   отправляют заявку. Делаем её плотнее и заметнее.
   ============================================================== */
@media (max-width: 1023px) {
  .mobilebar {
    background: color-mix(in srgb, var(--c-bg-alt) 92%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.42);
  }

  .mobilebar__item {
    gap: 5px;
    letter-spacing: 0.01em;
    line-height: 1;
    border-right-color: color-mix(in srgb, var(--c-line) 60%, transparent);
    transition: color var(--d-fast) var(--e-out),
                background-color var(--d-fast) var(--e-out);
  }
  .mobilebar__item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .mobilebar__item:active { background: var(--c-surface); }

  /* Кнопка заявки: белый текст на фирменном красном, без рамки */
  .mobilebar__item--accent {
    color: #fff;
    border-right: 0;
    font-weight: 700;
  }

  /* Подвал не должен упираться в панель */
  .footer { padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom) + var(--sp-6)); }
}

/* ==============================================================
   6. МОБИЛЬНАЯ ШТОРКА
   ============================================================== */
@media (max-width: 1023px) {
  .drawer__link {
    min-height: 62px;
    transition: padding-left var(--d-base) var(--e-out),
                color var(--d-base) var(--e-out);
  }
  .drawer__link:active {
    padding-left: var(--sp-2);
    color: var(--c-accent-hi);
  }
  /* Текущий раздел подсвечен, как в меню на десктопе */
  .drawer__link[aria-current='page'] { color: var(--c-accent); }

  .drawer__phones .phone a { font-size: 1.1875rem; }
}

/* ==============================================================
   7. РИТМ
   Страницы на телефоне длинные (у «О нас» — 24 000px). Убираем
   лишний воздух там, где он только добавляет прокрутки: между
   секциями и внутри шапок разделов. Содержимое не трогаем.
   ============================================================== */
@media (max-width: 767px) {
  :root { --section-y: 3.25rem; }

  .sec-head { margin-bottom: var(--sp-6); gap: var(--sp-3); }
  .sec-head__body { gap: var(--sp-4); }

  /* Якорь не должен уезжать под залипшую шапку */
  :target { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
}

/* ==============================================================
   8. ОТКЛИК НА КАСАНИЕ
   На телефоне нет наведения: единственная обратная связь —
   момент нажатия. Синюю подсветку Android убираем, вместо неё
   даём собственную.
   ============================================================== */
@media (hover: none) {
  a, button, [role='button'], [role='tab'], summary {
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active { transform: translateY(1px) scale(0.99); }
  .chip:active,
  .rail-btn:active { background: var(--c-surface-2); }

  /* Ховер-эффекты на тач-экране только мешают: они «залипают»
     после нажатия до касания в другом месте. */
  .card:hover,
  .work:hover,
  .prodtile:hover { transform: none; }
}

/* ==============================================================
   ПОЛОСЫ С КАДРОМ НА УЗКИХ ЭКРАНАХ (13.08.2026)

   ⚠️ Полосы `.strip`, `.infig` и `.ctfig--band` рассчитаны на
   широкий экран: кадр 3–4,7:1, подпись лежит поверх него. На
   телефоне тот же бокс становится почти квадратным (268×188),
   и от панорамы остаётся вертикальная щепка — до 66% кадра
   срезалось по бокам.

   Здесь полоса превращается в обычную карточку: кадр показывается
   ЦЕЛИКОМ (высота по картинке, срез ноль), подпись уходит под него
   на поверхность карточки. Читается лучше и на телефоне честнее.
   Проверять — `_скрипты/crop_audit.js 390`.
   ============================================================== */
@media (max-width: 720px) {

  .strip,
  .infig,
  .ctfig--band,
  .bband:not(.bband--studio) {
    height: auto;
    aspect-ratio: auto;
    background: var(--c-surface);
  }

  .strip img,
  .infig img,
  .ctfig--band img,
  .bband:not(.bband--studio) img {
    height: auto;
    aspect-ratio: auto;
  }

  /* Полоса со штатной бригадой в общий приём не входит: у неё текст
     и так стоит рядом с кадром, а не поверх. Но фиксированная высота
     резала кадру 2:1 бока — вместе с крайними мастерами. Отдаём кадру
     его пропорцию (25.08.2026). */
  .bband--studio img {
    height: auto;
    aspect-ratio: 2 / 1;
    object-position: 50% 50%;
  }

  /* Подпись со снимка — под снимок. Градиент здесь не нужен:
     текст стоит на поверхности карточки, а не на фотографии. */
  .strip__cap,
  .infig__cap,
  .ctfig__cap,
  .bband:not(.bband--studio) .bband__body {
    position: static;
    background: none;
    padding: var(--sp-4);
  }
}