/* =========================
   DESKTOP-SMALL (≤ 1200px) — меню сворачивается в бургер раньше
========================= */
@media (max-width: 1200px) {
    .menu { gap: 14px; font-size: 0.85rem; }
    .header__phone { font-size: 0.95rem; }
    .header__contacts .btn { padding: 10px 16px; font-size: 0.8rem; }
}

@media (max-width: 1024px) {
    .header__nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 85vw);
        background: var(--color-graphite-deep);
        box-shadow: -12px 0 40px rgba(0,0,0,0.55);
        padding: 80px 28px 28px;
        z-index: 105;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow-y: auto;
        border-left: 4px solid var(--color-primary);
        color: var(--color-white);
    }
    .header__nav.open { transform: translateX(0); }
    .header__nav .menu {
        flex-direction: column;
        gap: 4px;
        align-items: stretch;
    }
    .header__nav .menu a {
        display: block;
        padding: 14px 16px;
        font-size: 1.02rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-white);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .header__nav .menu a::after { display: none; }
    .header__nav .menu a:hover,
    .header__nav .menu a.is-active {
        background: var(--color-primary);
        color: var(--color-pure-white);
        padding-left: 22px;
    }
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 102;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    .nav-overlay.is-visible { opacity: 1; visibility: visible; }
    body.nav-open { overflow: hidden; }
    .burger { display: flex; position: relative; z-index: 110; }
    .burger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
    .burger.active span:nth-child(2) { opacity: 0; }
    .burger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

    .hero { min-height: auto; padding: 48px 0 56px; }
    .hero__inner { grid-template-columns: 1fr; gap: 28px; }
    /* На мобиле visual идёт ПОСЛЕ текста (текст важнее в hero, mobile-first) */
    .hero__image,
    .hero__visual { order: 2; justify-self: stretch; max-width: 100%; }
    .hero__content { order: 1; }
    /* Visual-card на мобиле: статичная позиция, не торчит за края */
    .hero__visual-card {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin-bottom: 12px;
    }
    /* На мобильном — только одна главная диагональ, без лишнего шума (бриф) */
    .hero::before {
        inset: -8% -10% auto auto;
        width: 88%;
        height: 50%;
        clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
    }
    .hero::after {
        background: var(--stripes-sm);
        opacity: 0.5;
    }
    section { padding: 60px 0; }
}

/* =========================
   TABLET LAYOUT (≤ 1024px) — новые блоки
========================= */
@media (max-width: 1024px) {
    .steps__list { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .steps__list::before,
    .steps__progress { display: none; }
    .promo-offers__grid { grid-template-columns: 1fr; }
    .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
    .reviews__grid { grid-template-columns: repeat(2, 1fr); }
    .guarantees__grid { grid-template-columns: repeat(2, 1fr); }
    .equipment__grid { grid-template-columns: repeat(2, 1fr); }
    .certificates__grid { grid-template-columns: repeat(3, 1fr); }
    .clients__grid { grid-template-columns: repeat(4, 1fr); }
    .blog-preview__grid { grid-template-columns: 1fr; gap: 20px; max-width: 560px; margin: 0 auto; }
    .coverage__wrap { grid-template-columns: 1fr; gap: 28px; }

    .compare__grid { grid-template-columns: 1fr; }
    .compare__vs {
        width: auto;
        height: 48px;
        margin: -10px auto;
        padding: 0 28px;
    }
    .compare__col--us,
    .compare__col--them { clip-path: none; }

    .quiz-card { grid-template-columns: 1fr; }
    .quiz-card__left { padding: 32px 28px; }
    .quiz-card__right { padding: 28px 24px; }
    .quiz-step-counter { top: 28px; right: 24px; }

    .reviews__summary { flex-direction: column; align-items: flex-start; }
    .rating-sources { width: 100%; }
}

/* =========================
   MOBILE (≤ 768px)
========================= */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
    img, svg, video, iframe { max-width: 100%; height: auto; }

    .promo-card { padding: 28px 20px 22px; }
    .promo-card__percent { font-size: 1.2rem; padding: 4px 10px; }
    .promo-card h3 { padding-right: 76px; font-size: 1.1rem; }
    .portfolio__grid { grid-template-columns: 1fr; gap: 20px; max-width: 440px; margin: 0 auto; }

    /* Before/After на мобильном */
    .ba-slider { aspect-ratio: 4 / 3; }
    .ba-slider__label {
        top: 10px;
        padding: 4px 9px;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
    }
    .ba-slider__label--before { left: 10px; }
    .ba-slider__label--after { right: 10px; }
    .ba-slider__handle { width: 2px; }
    .ba-slider__handle::after {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        border-width: 2px;
    }
    .ba-slider::before {
        font-size: 0.6rem;
        bottom: 10px;
        padding: 3px 8px;
    }
    /* Reviews: swipeable карусель — 1 карточка центрирована, симметричный peek.
       НЕ применяется на выделенной странице /reviews.html — там нужен вертикальный список. */
    .reviews-section .reviews__grid,
    section.reviews .reviews__grid,
    .reviews:not(.reviews-page) .reviews__grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding: 4px 16px 18px;
        margin: 0 -16px;
    }
    .reviews-section .reviews__grid::-webkit-scrollbar,
    section.reviews .reviews__grid::-webkit-scrollbar { display: none; }
    .reviews-section .reviews__grid > .review,
    section.reviews .reviews__grid > .review {
        flex: 0 0 calc(100% - 32px);
        scroll-snap-align: center;
        scroll-snap-stop: always;
        max-width: calc(100% - 32px);
        min-width: 0;
        margin: 0;
    }
    /* Reviews PAGE — все отзывы вертикально, без carousel */
    .reviews-page .reviews__grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px;
        overflow: visible !important;
        scroll-snap-type: none;
        padding: 0;
        margin: 0;
    }
    .reviews-page .reviews__grid > .review {
        max-width: 100%;
        width: 100%;
        flex: initial;
    }
    /* HINT: карточки занимают всю ширину контейнера; peek больше не показываем — даём чёткую полосу скролла */
    .reviews {
        position: relative;
    }
    /* Маленькая визуальная подсказка снизу — точки-индикатор (CSS pseudo) */
    .reviews__grid + .reviews__cta {
        margin-top: 8px;
    }

    /* Modal как bottom-sheet на мобиле */
    .modal { align-items: flex-end !important; }
    .modal__content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        max-height: 90vh;
        overflow-y: auto;
        animation: sheetUp 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    @keyframes sheetUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    .guarantees__grid { grid-template-columns: 1fr; gap: 14px; }
    .equipment__grid { grid-template-columns: 1fr; gap: 14px; }
    .certificates__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .cert { min-width: 0; }
    .cert__paper {
        min-width: 0;
        padding: 24px 8px 12px;
        gap: 6px;
        aspect-ratio: 3 / 4.2;
    }
    .cert__paper::before {
        top: 8px; left: 8px; right: 8px;
        height: 2px;
    }
    .cert__label {
        font-size: 0.82rem;
        letter-spacing: 0.02em;
        overflow-wrap: anywhere;
        line-height: 1.15;
    }
    .cert__number {
        font-size: 0.68rem;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
    .cert__date {
        font-size: 0.62rem;
        padding-top: 6px;
        width: 78%;
    }
    .cert__issuer {
        font-size: 0.58rem;
        letter-spacing: 0.02em;
        overflow-wrap: anywhere;
    }
    .cert figcaption {
        font-size: 0.72rem;
        padding: 0 2px;
        line-height: 1.3;
    }
    .cert figcaption small { font-size: 0.62rem; }
    .clients__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .client {
        min-width: 0;
        font-size: 0.78rem;
        padding: 10px 6px;
        word-break: break-word;
        text-align: center;
    }
    .filters { gap: 6px; }
    .filter { padding: 8px 14px; font-size: 0.75rem; }
    .section-lead { font-size: 0.95rem; }

    .rating-big strong { font-size: 2.2rem; }
    .rating-sources { gap: 14px; }

    .cookie-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 10px;
        left: 8px;
        right: 8px;
        /* Положение НАД mobile-bar (~64px), чтобы не перекрывать ни mobile-bar,
           ни hero CTA при первом отображении на узких viewport. */
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        padding: 12px 14px;
        z-index: 200;
        font-size: 0.82rem;
    }
    .cookie-bar p { font-size: 0.85rem; line-height: 1.4; }
    .cookie-bar button {
        clip-path: none;
        width: 100%;
        padding: 14px 20px;
        font-size: 0.95rem;
        min-height: 48px;
        touch-action: manipulation;
    }

    .coverage__map { aspect-ratio: 1 / 1; }
    .coverage__pin { font-size: 0.72rem; padding: 4px 10px; }
    .coverage__dot::after { font-size: 0.68rem; top: -22px; padding: 2px 6px; }

    .video-play { width: 72px; height: 72px; }
    .quiz-options { grid-template-columns: 1fr; }

    /* Мобильный паттерн: sticky bottom CTA bar (mobile-bar) показывается,
       float-widgets скрыты (их место занимает mobile-bar). */
    .online-badge { display: none !important; }
    .live-notice { display: none !important; }
    .float-widgets { display: none !important; }
    /* .back-to-top остаётся, .mobile-bar показ управляется через .is-visible */
    body {
        -webkit-tap-highlight-color: rgba(0,0,0,0.05);
        /* padding-bottom задаётся в polish.css mobile-bar секции с учётом высоты бара */
    }

    .steps__list { grid-template-columns: 1fr; gap: 20px; }
    /* На мобиле scroll-linked timeline теряет смысл — все ромбы единого активного вида */
    .steps__list::before,
    .steps__progress { display: none !important; }
    .steps__dot,
    .steps__dot.is-active {
        background: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: var(--color-white) !important;
        transform: none !important;
        box-shadow: 0 8px 22px rgba(211, 53, 36, 0.22) !important;
        opacity: 1 !important;
    }
    .header__contacts .header__phone { display: none; }
    .header__contacts .btn { padding: 10px 14px; font-size: 0.82rem; min-height: 44px; letter-spacing: 0.01em; }

    /* Крупные touch-targets, 48px WCAG */
    .btn, button, .menu a, .filter {
        min-height: 44px;
        touch-action: manipulation;
    }
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important; /* iOS не зумит форму */
        min-height: 44px;
    }
    input[type="checkbox"], input[type="radio"] {
        min-height: 0 !important;
        width: 20px;
        height: 20px;
    }

    h1 { font-size: 2rem; line-height: 1.12; }
    h2 { font-size: 1.5rem; line-height: 1.2; }
    h3 { font-size: 1.15rem; }

    section { padding: 40px 0; }
    .container { padding: 0 16px; }

    /* Убираем тяжёлые декор-элементы на мобильном ради FPS/CLS */
    .hero__decor, .hero__noise, .hero__chev { display: none !important; }
    /* Скрываем rotator на узком мобиле — занимает строку без пользы */
    .hero__rotator { display: none !important; }

    .hero { padding: 32px 0 40px; min-height: auto; }
    .hero h1 { font-size: 1.7rem; max-width: none; line-height: 1.0; }
    .hero__subtitle { margin-bottom: 1rem; font-size: 0.95rem; }
    .hero__benefits { margin-bottom: 1.25rem; gap: 6px; }
    .hero__benefits li { font-size: 0.92rem; }
    .hero__price-hint { display: none !important; }
    .hero__badge { font-size: 0.72rem; padding: 5px 9px; letter-spacing: 0.05em; }
    .hero__form { flex-direction: column; gap: 8px; margin-top: 16px; }
    .hero__form input { width: 100%; }
    .hero__form .btn { width: 100%; }
    .hero__guarantee { font-size: 0.82rem; padding: 10px 12px; margin-top: 14px; }
    /* Click-to-call под формой — psychology: один tap = звонок */
    .hero__call-now {
        display: block;
        margin: 12px 0 0;
        padding: 10px 14px;
        background: rgba(255, 107, 90, 0.10);
        border-left: 3px solid var(--color-primary-on-dark);
        color: var(--color-primary-on-dark);
        font-weight: 700;
        font-size: 0.92rem;
        text-align: center;
        text-decoration: none;
        letter-spacing: 0.02em;
    }

    .calc { grid-template-columns: 1fr; padding: 20px; gap: 12px; }
    .calc label { font-size: 0.88rem; }

    .footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }

    .quiz { padding: 24px; }
    .quiz__options { grid-template-columns: 1fr; }

    /* Tables: помещаем в ширину viewport — первая колонка (название услуги) переносится,
       короткие колонки (Ед. изм., Цена) остаются nowrap, чтобы "от 450 ₽" не разбивалось. */
    .prices-table {
        display: table;
        width: 100%;
        max-width: 100%;
        font-size: 0.85rem;
    }
    .prices-table th, .prices-table td {
        padding: 11px 8px;
        white-space: nowrap;
    }
    .prices-table th:first-child,
    .prices-table td:first-child {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .prices-table th:nth-child(2),
    .prices-table td:nth-child(2) {
        text-align: center;
        padding-inline: 4px;
    }
    .prices-table th:last-child,
    .prices-table td:last-child {
        text-align: right;
    }

    .promo-bar { font-size: 0.78rem; padding: 9px 14px; line-height: 1.3; }
    .ticker__track { font-size: 0.9rem; gap: 32px; }

    /* Контент с горизонтальным скроллом */
    .clients__grid, .certificates__grid { gap: 10px; }
    .client { font-size: 0.8rem; padding: 10px 8px; }

    /* Убираем hover-эффекты с тенями на тач-устройствах */
    @media (hover: none) {
        .case:hover, .review:hover, .guarantee:hover, .promo-card:hover,
        .equipment-item:hover, .certificate:hover { transform: none; box-shadow: var(--shadow); }
        a:hover, button:hover { transform: none !important; }
    }

    /* Reduced motion поддержка */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* =========================
   SMALL MOBILE (≤ 480px)
========================= */
@media (max-width: 480px) {
    .container { padding: 0 14px; }
    /* Promo-bar: ужимаем на маленьких экранах, чтобы не было overflow */
    .promo-bar { font-size: 0.7rem; padding: 8px 10px; letter-spacing: 0.02em; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    .section-lead { font-size: 0.9rem; }
    .footer__inner { grid-template-columns: 1fr; gap: 20px; }
    .stats { padding: 22px 14px; gap: 12px; }
    .stats strong { font-size: 1.8rem; }
    .stats span { font-size: 0.78rem; }
    .hero h1 { font-size: 1.55rem; }
    .hero__subtitle { font-size: 0.9rem; }
    .hero { padding: 28px 0 36px; }
    .btn { padding: 12px 16px; font-size: 0.9rem; }
    .float-widget { width: 48px; height: 48px; }
    .cookie-bar { left: 6px; right: 6px; padding: 12px 14px; }
    .steps__list { gap: 16px; }
    .reviews__summary, .rating-big { text-align: center; }
    .review { padding: 16px; }
    .compare__col { padding: 20px 18px; }
    .guarantee, .promo-card { padding: 20px 16px; }
    .ba-slider { max-width: 100%; }

    /* Сертификаты: уменьшаем ещё на iPhone SE */
    .cert__paper { padding: 20px 6px 10px; aspect-ratio: 3 / 4.3; }
    .cert__label { font-size: 0.74rem; }
    .cert__number { font-size: 0.62rem; }
    .cert__date { font-size: 0.58rem; width: 82%; }
    .cert__issuer { font-size: 0.54rem; }
    .cert figcaption { font-size: 0.68rem; }

    section { padding: 32px 0; }
}

/* =========================
   ULTRA-NARROW (≤ 320px) — Galaxy Fold, старые девайсы
========================= */
@media (max-width: 320px) {
    .container { padding: 0 12px; }
    .promo-bar { font-size: 0.62rem; padding: 7px 8px; letter-spacing: 0.01em; line-height: 1.25; }
    h1, .hero h1 { font-size: 1.35rem; }
    h2 { font-size: 1.2rem; }
    .btn { padding: 11px 12px; font-size: 0.85rem; }
    /* На 280-320px peek можно сделать чуть больше для устойчивого ощущения "ещё карточки" */
    .reviews__grid > .review { flex-basis: calc(100% - 36px); max-width: calc(100% - 36px); }
    .review { padding: 14px; }
    .review p { font-size: 0.88rem; line-height: 1.5; }
    /* Stats и rating не должны быть огромными */
    .stats strong { font-size: 1.6rem; }
    .rating-big strong { font-size: 2.4rem; }
}

/* iOS safe-area для хэдэра с "чёлкой" */
@supports (padding: env(safe-area-inset-top)) {
    .header { padding-top: env(safe-area-inset-top, 0px); }
}

/* =========================
   PRINT
========================= */
@media print {
    .header, .footer, .float-widgets, .live-notice, .modal, .burger { display: none !important; }
    body { color: #000; background: #fff; }
    a { text-decoration: underline; }
}