/* ============================================================
   RESPONSIVE — все медиа-запросы сайта в одном месте.
   Подключается ПОСЛЕДНИМ: правила здесь имеют ту же специфичность,
   что и базовые (один класс), и переопределяют их только за счёт
   порядка подключения — переносить этот файл выше остальных нельзя.
   ============================================================ */

/* уважение к настройке "меньше анимации" в ОС/браузере */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .vt-blob{transition:none}
  .vt-blob.morph{animation:none}
}

/* ---------- Шапка на ноутбуках и планшетах ----------
   Полная шапка (логотип + 5 пунктов + телефон текстом + кнопка) требует
   примерно 1080px. Раньше бургер включался только на 860px, поэтому в
   промежутке 861–1180 меню упиралось в логотип, «Как мы работаем» ломалось
   на две строки, а около 900px появлялась горизонтальная прокрутка.

   Здесь шапка ужимается постепенно: сначала уменьшаются отступы и шрифт,
   затем номер телефона сворачивается в иконку — звонок остаётся доступен,
   в отличие от простого display:none. */
@media(min-width:901px) and (max-width:1180px){
  .menu{gap:20px;font-size:14px}
  .nav-cta{gap:10px}
  .nav-cta .btn{padding:11px 16px;font-size:14px}
  /* Логотип прописными и так широкий — на средних экранах поджимаем
     размер и разрядку, иначе он теснит меню. 16px/0.18 — это 147px,
     при 901px остаётся 28px на каждый отступ. */
  .logo{font-size:16px;letter-spacing:.18em}
}

/* Ниже ~1030px номер текстом уже не помещается рядом с меню */
@media(min-width:901px) and (max-width:1030px){
  .menu{gap:16px}
  .nav-cta .phone{display:none}
  .nav-cta .phone-icon{display:inline-flex}
}

@media(max-width:960px){
  .foot{grid-template-columns:1fr 1fr}
  .feature-work{grid-template-columns:1fr}
  .fw-hero{aspect-ratio:16/10}
}

/* Бургер включается на 900px: до этой ширины компактная шапка выше ещё
   помещается целиком, ниже — уже нет. */
@media(max-width:900px){
  .menu,.nav-cta .phone,.nav-cta .phone-icon,.nav-cta .btn,.nav-cta .tg-link{display:none}
  .burger{display:flex}
  /* В шапке остались только логотип и бургер — место есть, можно крупнее */
  .logo{font-size:21px;letter-spacing:.22em}
}

@media(max-width:360px){
  /* Совсем узкие телефоны: разрядка съедает ширину быстрее самого шрифта */
  .logo{font-size:18px;letter-spacing:.18em}
}

@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .rooms{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .info-cols{grid-template-columns:1fr}
  .cta-box,.foot,.work-detail,.contacts-grid{grid-template-columns:1fr}
  .cta-box{padding:36px 28px}
  .pf-grid{grid-template-columns:1fr 1fr;gap:20px}
  .section{padding:60px 0}
  .cta{padding:60px 0}
  .production-grid{grid-template-columns:1fr 1fr}
  .ws-gallery{grid-template-columns:repeat(3,1fr)}
  .fw-thumbs{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Сенсорный ввод ----------
   Привязка не к ширине, а к типу ввода: пальцу нужна зона крупнее, чем
   курсору. Так планшет в альбомной (1024px, но касание) тоже получает
   нормальные зоны нажатия, а мышь на узком окне не теряет плотность.
   Ориентир — 44px, минимум по рекомендациям Google. */
@media(hover:none){
  .foot a{padding:10px 0}
  .breadcrumbs{font-size:15px}
  .breadcrumbs a{display:inline-block;padding:8px 0}
  .copy a{display:inline-block;padding:12px 0}
  .ci-value{display:inline-block;padding:7px 0}
  .faq-item summary{padding:7px 0}
  .vt-btn{padding:14px 22px}
}

@media(max-width:520px){
  .rooms{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .pf-grid{grid-template-columns:1fr}
  .fab{right:12px;bottom:12px;padding:12px 18px;font-size:14px}
  .modal-box{padding:32px 22px}
  .trust{gap:20px}
  .trust b{font-size:24px}
  .production-grid{grid-template-columns:1fr}
  .ws-gallery{grid-template-columns:repeat(2,1fr)}
  .zhk-rooms{padding:20px 18px}
  .lead{font-size:16px;margin:12px 0 28px}
}