/* =========================================================
   АДАПТАЦИЯ
   xs <576 / sm ≥576 / md ≥768 / lg ≥992 / xl ≥1200 / xxl ≥1400
   Подход: mobile-first отсутствует — десктоп в main.css, тут идём
   сверху вниз по брейкпоинтам от широкого к узкому (max-width).
   ========================================================= */

/* ===== xl (1200-1399): чуть уменьшаем гуттеры и заголовки ===== */
@media (max-width: 1399.98px) {
  :root {
    --container: 1140px;
    --gutter: 24px;
  }
  .hero__nav { gap: 40px; }
  .hero__top { padding: 24px var(--gutter); }
  .summer__decor--left  { left: -20px;  width: 220px; height: 280px; }
  .summer__decor--right { right: -20px; width: 240px; height: 310px; }
}

/* ===== lg (992-1199): десктоп → ноут ===== */
@media (max-width: 1199.98px) {
  :root {
    --container: 960px;
  }

  /* Hero */
  .hero__nav { gap: 28px; font-size: 18px; }
  .hero__center { padding-top: 140px; }
  .hero__title { font-size: 40px; }

  /* Approach: оставим 3 колонки, но уменьшим padding */
  .approach__cell { padding-left: 24px !important; padding-right: 24px !important; }
  .approach__cell:nth-child(3n-2) { padding-left: 0 !important; }
  .approach__cell:nth-child(3n)   { padding-right: 0 !important; }
  .approach__cell h3 { font-size: 22px; }
  .approach__cell p  { font-size: 18px; }

  /* Summer */
  .summer__title { font-size: 36px; }
  .summer__decor { display: none; } /* убираем декор, он наезжает на сетку */

  /* Services: 4 → 3 колонки */
  .services__grid { grid-template-columns: repeat(3, 1fr); }

  /* Portfolio: 3 колонки оставляем */
  .portfolio__item { height: 240px; }

  /* Contact: форма уже */
  .contact__grid { grid-template-columns: 1fr 480px; gap: 40px; }

  /* Section heads */
  .section-head__title { font-size: 40px; }
  .faq__title { font-size: 40px; }
  .contact__title { font-size: 40px; }
}

/* ===== md (768-991): ноут → планшет ===== */
@media (max-width: 991.98px) {
  :root {
    --container: 720px;
    --gutter: 20px;
  }

  /* Hero — остаётся на полный экран */
  .hero__top { padding: 16px var(--gutter); flex-wrap: nowrap; }
  .hero__nav { display: none; }
  .hero__burger { display: inline-flex; }
  .hero__center { padding: 40px 16px; }
  .hero__title { font-size: 32px; }

  /* Mobile nav drawer (показывается JS-классом is-open) */
  .hero__nav.is-open {
    display: flex;
    position: fixed; inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.92);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    font-size: 24px;
    padding: 40px;
  }
  .hero__nav.is-open::after {
    content: "✕";
    position: absolute; top: 24px; right: 24px;
    font-size: 32px;
    cursor: pointer;
  }

  /* Approach: 3 → 2 колонки */
  .approach__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .approach__cell:nth-child(3n)   { border-right: 1px solid #d9d3cb; padding-right: 24px !important; }
  .approach__cell:nth-child(2n)   { border-right: 0; padding-right: 0 !important; }
  .approach__cell:nth-child(2n-1) { padding-left: 0 !important; padding-right: 24px !important; }
  .approach__cell:nth-child(2n)   { padding-left: 24px !important; }
  .approach__cell:nth-child(n+3)  { border-top: 1px solid #d9d3cb; }
  .approach__title { font-size: 26px; }

  /* Summer */
  .summer { padding-top: 80px; }
  .summer__card { padding: 60px 24px; }
  .summer__title { font-size: 28px; }
  .summer__list {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .summer__list li { width: 100%; margin-left: 0; list-style-position: inside; }

  /* Services: 3 → 2 колонки */
  .services { padding: 90px 0; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }

  /* Portfolio: 3 → 2 */
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio__item { height: 220px; }

  /* FAQ */
  .faq { padding: 50px 24px 60px; }
  .faq__title { font-size: 34px; }

  /* Contact: 2 → 1 колонка */
  .contact { padding: 80px 0; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__details { grid-template-columns: 1fr; }
  .contact__title { font-size: 34px; }

  /* Section heads */
  .section-head__title { font-size: 34px; }

  /* Footer */
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== sm (576-767): телефон в landscape / большой телефон ===== */
@media (max-width: 767.98px) {
  :root {
    --container: 540px;
    --gutter: 16px;
  }

  /* Hero */
  .hero__top { gap: 12px; padding: 12px 16px; }
  .logo { height: 44px; gap: 6px; }
  .logo__icon { width: 44px; height: 44px; flex-basis: 44px; }
  .logo__divider { height: 40px; }
  .logo__text .logo__tagline { display: none; }
  .hero__action { width: 40px; height: 40px; border-radius: 10px; }
  .hero__action img { width: 26px; height: 26px; }
  /* На узких экранах оставляем только WhatsApp + телефон в шапке */
  .hero__actions .hero__action:nth-child(2) { display: none; }
  .hero__center { padding-top: 60px; gap: 24px; }
  .hero__title { font-size: 26px; line-height: 1.15; }
  .btn { min-width: 240px; height: 56px; font-size: 16px; }

  /* Approach */
  .approach { padding-top: 60px; }
  .approach__head { margin-bottom: 40px; }
  .approach__title { font-size: 22px; }
  .approach__lead  { font-size: 17px; }
  .approach__grid  { grid-template-columns: 1fr; }
  .approach__cell {
    padding: 28px 0 !important;
    border-right: 0;
  }
  .approach__cell:not(:last-child) { border-bottom: 1px solid #d9d3cb; }
  .approach__cell:nth-child(n+2)   { border-top: 0; }
  .approach__cell h3 { font-size: 20px; margin-bottom: 16px; }
  .approach__cell p  { font-size: 17px; }
  .approach__icon { margin-bottom: 16px; }

  /* Summer */
  .summer__card { padding: 48px 20px; border-radius: 12px; }
  .summer__title { font-size: 24px; margin-bottom: 28px; }
  .summer__list { font-size: 17px; gap: 14px; margin-bottom: 36px; }

  /* Services: 2 → 1 колонка */
  .services { padding: 60px 0; }
  .services__grid { grid-template-columns: 1fr; }
  .service-card { height: 220px; }

  /* Portfolio: 2 → 1 */
  .portfolio { padding-bottom: 60px; }
  .portfolio__grid { grid-template-columns: 1fr; }
  .portfolio__item { height: 240px; }

  /* FAQ */
  .faq { padding: 40px 16px 50px; border-radius: 10px; }
  .faq__title { font-size: 26px; }
  .faq__lead  { font-size: 17px; }
  .faq__q     { font-size: 16px; padding: 18px 0; }

  /* Contact */
  .contact { padding: 60px 0; }
  .contact__title { font-size: 28px; }
  .form { padding: 22px 18px; }
  .form__row { grid-template-columns: 1fr; gap: 14px; }

  /* Section heads */
  .section-head { margin-bottom: 36px; }
  .section-head__title { font-size: 28px; }
  .section-head__lead  { font-size: 17px; }

  /* Footer */
  .footer { padding-top: 48px; }
  .footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 36px;
  }
  .footer__brand p { max-width: 100%; }
}

/* ===== xs (<576): мобайл ===== */
@media (max-width: 575.98px) {
  :root { --gutter: 14px; }

  .hero__title { font-size: 22px; }
  .hero__actions { gap: 6px; }
  .hero__action  { width: 36px; height: 36px; }
  .hero__action img { width: 22px; height: 22px; }
  /* На xs оставляем только WhatsApp */
  .hero__actions .hero__action:nth-child(1) { display: none; }
  .btn { min-width: 0; width: 100%; max-width: 320px; }

  .section-head__title,
  .faq__title,
  .contact__title { font-size: 24px; }

  .footer__bottom { font-size: 12px; }
}

/* ===== Печать ===== */
@media print {
  .hero__actions, .hero__burger, .form__submit, .btn { display: none; }
  .hero { min-height: auto; padding: 20px 0; }
  .hero::before, .hero__bg { display: none; }
  body { color: #000; }
}