/* tpl «page-chrome» — универсальный мобильный адаптив «обвязки» страницы.
   В site.css базовые правила есть, но НЕТ медиа-запросов (адаптив каждая
   обычная страница несёт в своём inline-блобе). Hand-made raw-pages без блоба
   (например /spasibo/) остаются с десктоп-сеткой на мобильном — шапка не
   сворачивается, .adv__grid в 4 колонки и футер в 5 распирают экран.
   Здесь — те же брейкпоинты, что в шаблонах (proekt.css и т.п.). Подключать
   на любой hand-made странице, где используются шапка/футер/блок .adv. */

/* Контейнер — боковые поля на мобильном */
@media (max-width: 768px) {
  .container { padding: 0 var(--sp-5); }
}

/* Шапка: прячем десктоп-навигацию, показываем гамбургер (drawer — mobile-nav.js) */
@media (max-width: 1024px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
/* На узких экранах прячем кнопку «Запросить КП» в шапке (есть гамбургер + телефон) */
@media (max-width: 640px) {
  .header__actions .btn--primary { display: none; }
}

/* Блок «Преимущества» (.adv): 4 → 2 → 1 колонка */
@media (max-width: 1024px) {
  .adv__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .adv__grid { grid-template-columns: 1fr; }
}

/* Футер: 5 колонок → 2 (бренд на всю ширину) → 1 */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer__brand-block { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer__top { grid-template-columns: 1fr; }
}