/* ≤ 1279px — ноутбуки (13"/14"): уплотняем сетки и chrome шапки,
   контент получает больше места без визуального squeeze */
@media (max-width: 1279px) {
  :root { --pad-x: clamp(20px, 3.5vw, 56px); }

  /* Шапка чуть компактнее, чтобы telephone + nav гарантированно помещались */
  .site-header__nav { gap: 22px; }
  .site-header__nav a { font-size: 13.5px; }
  .site-header__phone { padding: 10px 18px; font-size: 13px; }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .materials-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 14px;
  }
  .bento__card--feature  { grid-column: 1 / span 2; grid-row: auto; }
  .bento__card--foreman  { grid-column: 1;          grid-row: auto; }
  .bento__card--price    { grid-column: 2;          grid-row: auto; }
  .bento__card--payment  { grid-column: 1;          grid-row: auto; }
  .bento__card--materials{ grid-column: 2;          grid-row: auto; }
  .bento__card--map      { grid-column: 1 / span 2; grid-row: auto; }
}

/* Tablet ≤ 1023px — iPad landscape/portrait, Android планшеты */
@media (max-width: 1023px) {
  .site-header__nav { display: none; }
  .site-header__burger { display: inline-flex; }
  .site-header__phone { display: none; }

  .hero {
    height: auto;
    min-height: 0;
    padding-bottom: 32px;
  }
  .hero__main {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero__right {
    height: clamp(300px, 50vw, 440px);
    order: -1;
  }
  .hero__process-bar {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
  }
  .hero__step { scroll-snap-align: start; }

  .materials-grid { grid-template-columns: repeat(3, 1fr); }
  .bento__card--map { grid-template-columns: 1fr; }
  .bento__map-info { padding: 24px; }
  .bento__map-stage { min-height: 240px; }

  .calc {
    grid-template-columns: 1fr;
  }
  .cta {
    grid-template-columns: 1fr;
  }
  .contacts {
    grid-template-columns: 1fr;
  }
  .contacts__map { min-height: 280px; }
  /* minmax(0,1fr) (а не 1fr) — иначе трек берёт min-content самого длинного
     контента и карточка распирается шире экрана, текст/теги обрезаются */
  .geo {
    grid-template-columns: minmax(0, 1fr);
  }
  .geo > div { min-width: 0; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* Узкие планшеты 768–899 (iPad portrait, Android-планшеты) —
   3 колонки материалов тесноваты, переходим на 2 для читаемости */
@media (min-width: 768px) and (max-width: 899px) {
  .materials-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile ≤ 767px */
@media (max-width: 767px) {
  /* На мобиле меньше боковых отступов — даём контенту больше воздуха.
     Переопределяет clamp(20px, 5vw, 80px) из variables.css */
  :root {
    --pad-x: 16px;
    --section-y: clamp(44px, 8vw, 68px);
  }

  /* На мобиле шапка НЕ sticky – ест экранную вертикаль */
  .site-header {
    position: relative;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header__inner { padding: 12px var(--pad-x); }
  .site-header__logo { font-size: 17px; }

  .hero { padding: 12px var(--pad-x) 24px; }
  .hero__right { height: 240px; }
  .hero__h1 { font-size: 30px; margin-bottom: 12px; }
  .hero__pitch { font-size: 14px; margin-bottom: 20px; }
  .hero__step-current { padding: 14px; gap: 14px; margin-bottom: 20px; }
  .hero__num-stage { width: 52px; height: 44px; }
  .hero__num { font-size: 44px; }
  .hero__step-label { font-size: 10px; }
  .hero__title { font-size: 15px; }
  .hero__title-stage { min-height: 22px; }
  .hero__lead { font-size: 13px; }
  .hero__lead-stage { min-height: 54px; }

  /* CTA-блок hero: только кнопка на всю ширину. «или» и номер убираем –
     снизу sticky-bar уже даёт «Позвонить» + WhatsApp */
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .hero__cta-or,
  .hero__cta-phone { display: none; }
  .hero__cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero__photo-card { bottom: 10px; left: 10px; padding: 5px 11px; gap: 7px; max-width: calc(100% - 20px); }
  .hero__photo-card-dot { width: 7px; height: 7px; }
  .hero__photo-card-text { font-size: 12px; }
  .hero__photo-frame { top: 10px; right: 10px; font-size: 11px; padding: 5px 11px; }
  /* Этапы «Как мы работаем» на мобиле скрыты – их роль выполняют
     листаемые фото hero (5 кадров = 5 этапов) */
  .hero__process { display: none; }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }

  /* Услуги → swipe-карусель: карточки с peek соседей, scroll-snap по центру.
     Контейнер «вытекает» на всю ширину экрана (bleed через отрицательный margin),
     боковой padding = ровно половина свободного места → 1-я и последняя
     карточки центрируются с равными отступами слева/справа */
  .services-grid,
  .materials-grid,
  .portfolio-track {
    --card-w: min(84vw, 340px);
    display: flex;
    grid-template-columns: none;
    grid-auto-flow: column;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    margin-inline: calc(-1 * var(--pad-x));
    padding: 4px calc((100vw - var(--card-w)) / 2);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .services-grid::-webkit-scrollbar,
  .materials-grid::-webkit-scrollbar,
  .portfolio-track::-webkit-scrollbar { display: none; }
  .service-card,
  .material,
  .portfolio-item {
    flex: 0 0 var(--card-w);
    scroll-snap-align: center;
  }
  .material { aspect-ratio: 4/3; }
  /* На мобиле описание убираем — карточки компактнее, остаются
     заголовок, цена и список плюсов */
  .service-card__desc { display: none; }

  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }
  .carousel-dots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(22,20,18,0.22);
    transition: width .3s var(--ease-out), background .3s var(--ease-out);
  }
  .carousel-dots__dot.is-active {
    width: 22px;
    border-radius: var(--r-pill);
    background: var(--accent-mid);
  }

  .bento { grid-template-columns: 1fr; gap: 12px; }
  .bento__card--feature, .bento__card--foreman, .bento__card--price,
  .bento__card--payment, .bento__card--materials, .bento__card--map {
    grid-column: 1; grid-row: auto;
  }
  .bento__card--feature { padding: 24px; }
  .bento__feature-num-digit { font-size: clamp(96px, 30vw, 140px); }
  .bento__map-stage { min-height: 220px; }
  .bento__pin-label { font-size: 11px; padding: 3px 8px; }

  /* Заголовки и тексты Bento на mobile — чуть компактнее desktop-версии,
     чтобы не давили на узком экране, но оставались крупнее старых 19px */
  .bento__title { font-size: 20px; line-height: 1.2; margin-bottom: 8px; }
  .bento__feature-title { font-size: 22px; line-height: 1.2; }
  .bento__feature-foot { font-size: 12.5px; gap: 8px; }
  .bento__desc { font-size: 14px; line-height: 1.5; }
  /* Description в Map (про районы) на mobile — чуть компактнее */
  .bento__card--map .bento__desc { font-size: 14px; }

  .material__name { font-size: 15px; }
  .material__price { font-size: 11px; }

  /* Отзывы на мобиле — одна строка (вторую прячем), тоньше боковая виньетка */
  .reviews-row--reverse { display: none; }
  .reviews-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
                            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }
  .review { width: 78vw; padding: 22px 20px; gap: 12px; }
  .review__quote-icon { font-size: 64px; top: 6px; right: 14px; }
  .review__text { font-size: 14.5px; }
  .reviews-rating { align-items: flex-start; text-align: left; }

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

  .portfolio-nav { justify-content: space-between; width: 100%; }

  .faq-item__head { padding: 18px 0; gap: 16px; font-size: 15px; }
  .faq-item__icon { width: 28px; height: 28px; }
  .faq-item__body p { font-size: 14px; padding-bottom: 18px; }

  .geo { padding: 24px 20px; }
  .geo__tag { font-size: 13px; padding: 8px 14px; }
  .geo__note { font-size: 13px; }

  .cta {
    padding: 28px 22px;
  }
  /* поля формы чуть ближе друг к другу — блок ниже по высоте */
  .cta__form { gap: 10px; }
  .cta__lead { margin-top: 12px; }
  /* ошибку убираем из потока (display:none) → зазор телефон↔выбор равен
     остальным. Показываем только при невалидной отправке. opacity:0 + min-height
     не годились: скрытый текст всё равно занимал высоту строки */
  .cta__form .form-field__error { display: none; }
  .cta__form .form-field.is-invalid .form-field__error { display: block; }
  /* кнопка чуть дальше от полей */
  .cta__form .btn { margin-top: 8px; }

  .contacts__info { padding: 24px; gap: 20px; }
  .contacts__socials { gap: 8px; }
  .contacts__social { padding: 9px 14px; font-size: 12px; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* Кнопка телефона в footer-brand — на всю ширину для удобного тапа */
  .footer-brand .btn { width: 100%; justify-content: center; }

  .sticky-bar { display: flex; }
  /* padding под sticky-bar строго = высоте бара (56px). Без env(): без
     viewport-fit=cover он мог давать лишние px → белая полоса над баром */
  body { padding-bottom: 56px; }
}

/* Small ≤ 479px — узкие экраны (iPhone SE, мини-Android) */
@media (max-width: 479px) {
  /* H1 и H2 — уменьшаем минимум, чтобы не давили на узком экране */
  .hero__h1 { font-size: 26px; margin-bottom: 10px; }
  .h1 { font-size: clamp(28px, 8vw, 42px); }
  .h2 { font-size: clamp(26px, 7vw, 36px); }

  /* Цифра-этап в hero rotation чуть меньше */
  .hero__num { font-size: 120px; }
  .hero__title { font-size: 22px; }

  /* Materials — карусель (см. ≤767), на узких экранах чуть крупнее имя */
  .material__name { font-size: 16px; }

  /* Calc, CTA, FAQ — компактнее внутренние отступы */
  .cta { padding: 24px 18px; }
  .calc__form { padding: 22px 18px; }
  .calc__result { padding: 22px 18px; }

  /* Lead modal на узких экранах — фото компактнее */
  .lead-modal__media { aspect-ratio: 16/9; }
  .lead-modal__title { font-size: 22px; }
}