/* ============================================================
   responsive.css — все media queries проекта.
   Брейкпоинты по контракту: 1280 / 1024 / 768 / 520.
   Ниже 520 покрываются 430 / 390 / 360 (мобильные).
   Touch-targets ≥ 44px — заложено в базовых стилях
   (кнопки 52px+, ссылки меню 44px+, чипы 48px+).
   ============================================================ */

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

  .hero__title { font-size: clamp(2.5rem, 4.6vw, 3.8rem); }

  .hero-visual { max-width: 560px; }

  .site-nav__list { gap: clamp(14px, 1.8vw, 26px); }
}

/* ---------- ≤ 1024: планшет, hero складывается ---------- */
@media (max-width: 1024px) {
  :root { --section-gap: clamp(24px, 3.2vw, 35px); }

  /* Навигация уезжает в мобильную панель */
  .site-header .site-nav,
  .site-header .header-cta,
  .site-header .header-contacts { display: none; }

  #menu-toggle { display: block; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero__content { max-width: 640px; }

  /* Визуал — под контентом, чуть компактнее */
  .hero-visual {
    margin-inline: auto;
    max-width: 520px;
    aspect-ratio: 10 / 10;
  }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .stats { grid-template-columns: repeat(2, 1fr); }

  .city-grid { grid-template-columns: repeat(3, 1fr); }

  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤ 768: большой мобильный ---------- */
@media (max-width: 768px) {
  body { font-size: 15.5px; }

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

  .hero { padding-top: 32px; }

  .hero__points { gap: 12px 20px; }

  .hero-visual { max-width: 440px; }

  .browser-mock__body { min-height: 220px; }

  .ui-card { min-width: 112px; padding: 12px 14px; }

  /* Процесс → вертикальная timeline слева */
  .process {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 0;
    padding-left: 26px;
  }

  .process__line {
    top: 8px;
    bottom: 8px;
    left: 51px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .process__step {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 20px;
    align-items: start;
  }

  .process__title { margin-top: 12px; }

  .process__text { grid-column: 2; }

  .city-grid { grid-template-columns: repeat(2, 1fr); }

  .cta-band__actions .btn { width: 100%; }

  .faq__question { font-size: 1.15rem; }

  .error-page { min-height: 52vh; }
}

/* ---------- ≤ 520: мобильный (430/390/360 сюда же) ---------- */
@media (max-width: 520px) {
  :root {
    --header-h: 68px;
    --section-gap: 22px;
  }

  .logo__sign { width: 34px; height: 34px; }
  .logo__word { font-size: 1.15rem; }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn { width: 100%; }

  .hero-visual {
    max-width: 100%;
    aspect-ratio: 10 / 11;
  }

  /* Перекомпоновка слоёв под узкий экран */
  .browser-mock { width: 84%; left: 0; top: 11%; }

  .phone-mock { width: 27%; right: 0; bottom: 4%; }

  .ui-card--1 { right: -2%; top: 3%; }
  .ui-card--2 { left: -2%; bottom: 10%; }

  .hero-visual__badge { right: 2%; top: 44%; font-size: .62rem; padding: 7px 13px; }

  .hero-visual__arch { left: 10%; width: 80%; }

  .grid--4,
  .grid--3 { grid-template-columns: 1fr; }

  .stats { grid-template-columns: 1fr; gap: 12px; }

  .stat,
  .stats li {
    border-left: 0;
    border-top: 1px solid var(--sand);
    padding: 16px 0 0;
  }

  .city-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .city-chip { font-size: .85rem; }

  .cta-band { text-align: left; }

  .cta-band__title,
  .cta-band__text { margin-inline: 0; }

  .cta-band__actions { justify-content: flex-start; }

  .form__submit { justify-self: stretch; width: 100%; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }

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

  .breadcrumbs { padding-top: 16px; }

  .error-page__code { font-size: clamp(6rem, 34vw, 9rem); }
}

/* ---------- Крупные экраны: не растягиваем в бесконечность ---------- */
@media (min-width: 1600px) {
  :root { --container: 1280px; }

  .hero__title { font-size: 4.6rem; }
}