/**
 * Адаптив содержимого страниц (начали с главной, 13.08.2026).
 *
 * Мобильный шаблон отключён, десктопный отдаётся всем — узкие экраны ломала
 * вёрстка контента: ряды карточек не переносились, слайдеры показывали по 4
 * элемента, стрелки висели за краем секции, картинки шли в натуральную величину.
 *
 * Файл отдельный, а не в src/scss шаблона: тот собирается gulp-ом и требует
 * ручной синхронизации четырёх файлов (см. память template-switching).
 * Подключается в local/templates/desktop/header.php с версией по mtime.
 * Число видимых слайдов правит local/js/zn-content-adaptive.js.
 */

/* В сборке шаблона нет bootstrap-утилиты .img-fluid, хотя разметка ей размечена:
   баннеры главной уходили в натуральные 1440px и обрезались. */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* ─────────── планшет и ниже: ряды карточек переносятся ─────────── */
@media (max-width: 991.98px) {
    /* .list у товарных секций прячет всё, что не влезло, — на узком экране
       это съедало половину карточек */
    .app--items-list:not(.slick-initialized),
    .products--sections .list:not(.slick-initialized),
    .service-banners {
        flex-wrap: wrap;
        overflow: visible;
    }
    .products--sections .list:not(.slick-initialized) { row-gap: 1.5rem; }

    .app--items-list:not(.slick-initialized).columns-3 .item,
    .app--items-list:not(.slick-initialized).columns-4 .item,
    .app--items-list:not(.slick-initialized).columns-5 .item,
    .products--sections .list:not(.slick-initialized).columns-3 .item,
    .products--sections .list:not(.slick-initialized).columns-4 .item {
        flex: 0 0 calc(50% - 2rem);
    }

    .service-banners .item { flex: 0 0 33.333%; }
    .service-banners .item:nth-child(3n + 1):before { display: none; }
    .service-banners .item:nth-child(n + 4) { margin-top: 1.25rem; }

    /* стрелки слайдеров вынесены за края секции и распирают страницу */
    .slick-arrow.prev,
    .mainpage-slider .slick-arrow.prev,
    .mainpage-steps .slick-arrow.prev { left: 2px; }
    .slick-arrow.next,
    .mainpage-slider .slick-arrow.next,
    .mainpage-steps .slick-arrow.next { right: 2px; }
}

/* ─────────── мобильный ─────────── */
@media (max-width: 767.98px) {
    /* стрелки поменьше — на телефоне они и так лежат поверх содержимого */
    .slick-arrow {
        width: 36px;
        height: 36px;
        margin-top: -18px;
        border-radius: 18px;
        opacity: .92;
    }

    /* промо-блок «текст + кнопки» складывается в столбик */
    .feedback-section {
        flex-direction: column;
        align-items: stretch !important;
    }
    .feedback-section .text { flex: 1 1 auto; }
    .feedback-section .buttons {
        flex: 1 1 auto;
        width: 100%;
        margin-top: 1.25rem;
    }
    .feedback-section .buttons .btn { width: 100%; }

    /* Декоративный синий круг на узком экране наезжал на текст и делал его
       нечитаемым — убираем. Вместе с ним пропадает тёмная подложка, поэтому
       белый текст поверх светло-голубого фона перекрашиваем в основной. */
    .feedback-section .bg { display: none; }
    .feedback-section .buttons .btn-link.text-light { color: #212529 !important; }  /* у .text-light свой !important */
    .hot-line--widget { color: #212529; }

    /* у слайдера-инструкции стрелки ложились прямо на текст */
    .mainpage-steps .item { padding: 0 26px; }

    /* строка «изображение + текст» */
    .app--items-rows > .item { flex-direction: column; }
    .app--items-rows > .item > .image,
    .app--items-rows > .item > .video {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .service-banners .item { flex: 0 0 50%; }
    .service-banners .item:before { display: none !important; }
    .service-banners .item:nth-child(n + 3) { margin-top: 1.25rem; }

    /* заголовки под ширину экрана */
    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.2rem; }
    h4, .h4 { font-size: 1.1rem; }

    /* Растянутый по ширине текст на узкой колонке рвётся дырами. Наследуем
       выравнивание родителя: в тексте страницы это слева, а в карточках,
       где цена размечена тем же классом, — по центру.
       [align=justify] — из визуального редактора, там атрибут, а не класс. */
    .text-justify,
    main [align="justify"] { text-align: inherit !important; }

    /* широкий контент из инфоблоков не должен распирать страницу */
    main img { max-width: 100%; height: auto; }
    main iframe { max-width: 100%; }
    main table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─────────── узкий телефон: одна колонка ─────────── */
@media (max-width: 575.98px) {
    .app--items-list:not(.slick-initialized).columns-2 .item,
    .app--items-list:not(.slick-initialized).columns-3 .item,
    .app--items-list:not(.slick-initialized).columns-4 .item,
    .app--items-list:not(.slick-initialized).columns-5 .item,
    .products--sections .list:not(.slick-initialized).columns-2 .item,
    .products--sections .list:not(.slick-initialized).columns-3 .item,
    .products--sections .list:not(.slick-initialized).columns-4 .item {
        flex: 0 0 calc(100% - 2rem);
    }
}