/* ============================================================
   mobile-safe.css — обязательное правило: ни один элемент
   не выходит за границы viewport и за границы своего контейнера.
   Загружается ПОСЛЕДНИМ — перекрывает style.css и polish.css.
   ============================================================ */

/* ---- 0. Глобальная защита от horizontal overflow ---- */
html, body {
    max-width: 100vw !important;
    overflow-x: clip !important;
    width: 100%;
}
*, *::before, *::after {
    box-sizing: border-box;
    max-width: 100%;
}
img, video, iframe, picture, svg, canvas, embed, object {
    max-width: 100% !important;
    height: auto;
}
table {
    max-width: 100%;
    table-layout: auto;
}

/* ---- 1. Текстовые элементы — НЕ ВЫХОДЯТ за границы родителя ---- */
h1, h2, h3, h4, h5, h6,
p, li, span, a, b, strong, em, blockquote,
td, th, label, button, summary, figcaption,
.btn, [class*="__title"], [class*="__text"], [class*="__lead"],
[class*="__desc"], [class*="__name"], [class*="__hint"] {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
    min-width: 0;
}

/* Длинные URL/email/телефоны — могут переноситься в произвольной точке */
a[href^="mailto:"], a[href^="tel:"], code, kbd, samp, pre {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* ---- 2. Контейнеры — никогда не шире своего родителя ---- */
.container, section, header, main, footer,
[class*="__grid"], [class*="__inner"], [class*="__wrap"],
[class*="__content"], [class*="__body"] {
    max-width: 100%;
    min-width: 0;
}

/* Grid items могут сжиматься */
[class*="__grid"] > *, [class$="__list"] > *,
.grid > *, .row > * {
    min-width: 0;
}

/* ---- 3. Hero h1 — fluid font-size, без overflow ---- */
.hero h1 {
    max-width: 100% !important;
    width: 100%;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}
.hero h1 span {
    display: inline !important;
    padding: 1px 6px 2px !important;
    margin: 0 1px !important;
    clip-path: none !important;
    line-height: 1.3 !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* ---- 4. Мобильные viewport-specific фиксы ---- */
@media (max-width: 768px) {
    .container { padding-left: 14px !important; padding-right: 14px !important; }

    /* H1/H2 — компактнее */
    .hero h1 { font-size: clamp(1.25rem, 6vw, 1.85rem) !important; line-height: 1.1 !important; }
    h1 { font-size: clamp(1.3rem, 5.5vw, 1.9rem) !important; line-height: 1.15 !important; }
    h2 { font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important; line-height: 1.2 !important; }
    h3 { font-size: clamp(1rem, 3.8vw, 1.2rem) !important; line-height: 1.25 !important; }

    /* Promo-bar — без letter-spacing, переносится */
    .promo-bar, .promo-bar *,
    [class*="promo-bar"] {
        white-space: normal !important;
        letter-spacing: 0 !important;
        word-spacing: normal !important;
        text-align: center !important;
    }
    .promo-bar {
        font-size: clamp(.6rem, 2.8vw, .82rem) !important;
        padding: 8px 10px !important;
        line-height: 1.3 !important;
    }
    .promo-bar__timer { min-width: 0 !important; margin-left: 4px !important; }

    /* Stats / benefits / equipment / guarantees — 2 колонки макс */
    .stats, .stats__animated,
    .benefits__grid, .services__grid,
    .guarantees__grid, .equipment__grid,
    .certificates__grid, .clients__grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .stats > div, .stats__animated > div,
    .benefits__item, .services__card,
    .guarantee, .equipment__item {
        padding: 16px 12px !important;
        min-width: 0 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    .stats strong, .stats__animated strong {
        font-size: clamp(1.3rem, 5.5vw, 1.9rem) !important;
        line-height: 1.05 !important;
    }
    .stats span, .stats__animated span { font-size: .75rem !important; }

    /* Steps timeline — без обрезанных слов */
    .steps__list li, .steps__dot { min-width: 0; }
    .steps__list li strong, .steps__list li p {
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    /* Forms / inputs / textarea — внутри viewport.
       ВАЖНО: checkbox/radio не растягиваем — иначе вёрстка agreement ломается. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
    textarea, select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    input[type="checkbox"], input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        flex: 0 0 20px !important;
    }
    /* Agreement (чекбокс согласия) — flex с правильным layout */
    .agreement, label.agreement, [class*="agreement"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .agreement > *:not(input):not([type="checkbox"]),
    label.agreement > span,
    label.agreement > * {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 30px) !important;
        font-size: .85rem !important;
        line-height: 1.4 !important;
    }

    /* Скрываем back-to-top если открыта модалка ИЛИ если внутри viewport видна форма */
    body:has(form[data-form] input:focus) .back-to-top,
    body:has(form[data-form] textarea:focus) .back-to-form,
    body:has(.lead-success-overlay) .back-to-top {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Tables — горизонтальный скролл вместо overflow */
    .prices-table, table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Back-to-top — на мобиле НЕ нужен (есть mobile-bar + iOS scroll-to-top по статус-бару) */
    .back-to-top { display: none !important; }

    /* Rating summary — горизонтальная компактная раскладка */
    .reviews__summary {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 18px 16px !important;
    }
    .rating-big {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }
    .rating-big > strong {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: clamp(2rem, 8vw, 2.6rem) !important;
        line-height: 1 !important;
    }
    .rating-big > div, .rating-big > span {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .rating-stars {
        white-space: nowrap !important;
        letter-spacing: 1px !important;
        font-size: 1.05rem !important;
        display: inline-block !important;
    }
    .rating-sources {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .rating-source { min-width: 0 !important; }

    /* Карточки отзывов — компактный layout, звёзды в одну строку */
    .review header {
        display: grid !important;
        grid-template-columns: 44px 1fr auto !important;
        align-items: center !important;
        gap: 10px !important;
        column-gap: 10px !important;
        min-width: 0 !important;
    }
    .review__avatar {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        font-size: 1rem !important;
    }
    .review header b {
        font-size: .92rem !important;
        line-height: 1.2 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        display: block;
    }
    .review header span {
        font-size: .78rem !important;
        line-height: 1.25 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        display: block;
        margin-top: 2px;
    }
    .review__stars,
    .rating-stars {
        white-space: nowrap !important;
        display: inline-block !important;
        font-size: .85rem !important;
        letter-spacing: 1px !important;
        flex: 0 0 auto !important;
        word-spacing: 0 !important;
    }
    .review {
        min-width: 0 !important;
        padding: 18px 14px !important;
    }
    .review p {
        font-size: .9rem !important;
        line-height: 1.5 !important;
        margin: 12px 0 !important;
    }
    .review footer { font-size: .78rem !important; padding-top: 8px !important; }
}

@media (max-width: 480px) {
    .container { padding-left: 12px !important; padding-right: 12px !important; }

    /* Hero h1 ещё мельче */
    .hero h1 { font-size: clamp(1.15rem, 6.5vw, 1.55rem) !important; }
    .hero h1 span { padding: 0 5px 1px !important; }

    /* Grids — на узком viewport 1 колонка для контентных карточек */
    .benefits__grid, .services__grid,
    .guarantees__grid, .equipment__grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Stats остаются 2 колонки — короткий текст помещается */
    .stats, .stats__animated {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .stats strong, .stats__animated strong { font-size: clamp(1.15rem, 5vw, 1.55rem) !important; }

    /* Promo-bar — самый мелкий */
    .promo-bar { font-size: clamp(.55rem, 2.4vw, .72rem) !important; padding: 7px 8px !important; }
}

@media (max-width: 360px) {
    .container { padding-left: 10px !important; padding-right: 10px !important; }
    .hero h1 { font-size: clamp(1.05rem, 6.2vw, 1.35rem) !important; }
    .stats, .stats__animated { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .stats > div, .stats__animated > div { padding: 12px 8px !important; }
}

/* ---- 5. Точечный фикс: длинные слова в карточках кейсов / equipment ----
   Если слово реально длиннее контейнера — разрешаем сломать его, но это последний
   ресорт (для технических терминов вроде «Полипропиленовое», «фиброволокно»). */
.equipment__item *, .case *, .guarantee *,
.benefits__item *, .services__card * {
    overflow-wrap: break-word !important;
}

/* ---- 6. Бегущая строка (ticker) ----
   На мобиле скрываем — marquee на узком экране читается как обрезки. На десктопе оставляем. */
@media (max-width: 900px) {
    .ticker, [class*="ticker"] { display: none !important; }
}
/* На десктопе — текст не должен переноситься (если вдруг overflow-wrap его сломает) */
@media (min-width: 901px) {
    .ticker, .ticker__track, .ticker__item, .ticker span, .ticker *,
    .marquee, .marquee * {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
    .ticker { overflow: hidden !important; max-width: 100%; }
}

/* ---- 7. Контактные ссылки-кнопки в форме (Позвонить / MAX / Telegram) ----
   Стилизуем как «Отправить заявку» — красные primary с тем же clip-path. */
.contact-form__messengers,
.contact-form .messengers,
[class*="form__messengers"],
[class*="form-success__actions"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px !important;
    width: 100% !important;
    align-items: stretch !important;
}
.contact-form__messengers > a,
.contact-form .messengers > a,
[class*="form__messengers"] > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 22px !important;
    background: #D33524 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-size: .92rem !important;
    line-height: 1.2 !important;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important;
    border: 2px solid #D33524 !important;
    transition: background .15s, transform .15s, border-color .15s !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    text-align: center !important;
    cursor: pointer !important;
    gap: 8px !important;
}
.contact-form__messengers > a:hover,
.contact-form .messengers > a:hover,
[class*="form__messengers"] > a:hover {
    background: #AF2C20 !important;
    border-color: #AF2C20 !important;
    color: #fff !important;
    transform: translate(2px, -1px) !important;
}
.contact-form__messengers > a:active {
    transform: translate(1px, 0) !important;
}

/* На широких экранах — кнопки в один ряд */
@media (min-width: 600px) {
    .contact-form__messengers,
    .contact-form .messengers,
    [class*="form__messengers"] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .contact-form__messengers > a,
    .contact-form .messengers > a,
    [class*="form__messengers"] > a {
        flex: 1 1 calc(33.333% - 7px) !important;
        min-width: 140px !important;
    }
}