/* =====================================================================
   responsive.css — адаптивные правила (breakpoints: 1440 / 1024 / 768 / 480)
   Подключается ПОСЛЕ style.css.
   ===================================================================== */

/* Крупные экраны — чуть шире контейнер */
@media (min-width: 1440px) {
  :root { --container: 1240px; }
}

/* ------------------------- ≤ 1024px (планшет) ---------------------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
}

/* ------------- ≤ 1120px: мобильная навигация ------------------------
   Порог поднят с 980 до 1120: название мастерской длиннее исходного,
   и на 1024px (iPad landscape и похожие) полной навигации рядом с ним
   уже не хватает места без обрезки. */
@media (max-width: 1120px) {
  .nav { display: none; }
  .header__socials { display: none; }
  .burger { display: block; }
  .header__actions .btn--primary { display: none; } /* CTA живёт в мобильном меню */
}

/* --------------------------- ≤ 768px ------------------------------- */
@media (max-width: 768px) {
  :root { --header-h: 66px; }

  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .masonry { column-count: 2; column-gap: 16px; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--reverse .split__media { order: 0; }
  .split__media .tag-note { right: 12px; }

  .hero { min-height: 84vh; }
  .hero__actions .btn { flex: 1 1 auto; }

  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }

  .form-grid { grid-template-columns: 1fr; }

  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .hex { width: 136px; padding: 0 14px; }
  .hex__name { font-size: 0.78rem; }
}

/* --------------------------- ≤ 480px ------------------------------- */
@media (max-width: 480px) {
  body { font-size: 15.5px; }

  .container { padding-inline: 16px; }
  .section { padding-block: 48px; }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  .masonry { column-count: 1; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .stats { grid-template-columns: repeat(2, 1fr); }

  .logo__sub { display: none; }
  .hero__content { padding-block: 40px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  .filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .filter-btn { flex: none; }

  .cookie { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; }
  .cookie .btn { width: 100%; }

  .partners { gap: 10px 8px; }
  .hex { width: 112px; padding: 0 10px; }
  .hex__name { font-size: 0.72rem; }
}