/* ============================================================
   RS-CAM: точечные mobile-fixes
   ============================================================
   Только CSS @media-rules, без !important там где не нужно.
   Никаких MutationObserver, :has(), JS-DOM-операций.
   ============================================================ */

/* ----------------------------------------------------------
   Блок «Преимущества работы с нами» на странице услуги.

   Решение для mobile (≤767px): горизонтальная карусель со
   scroll-snap. 15 карточек идут в одну строку, пользователь
   свайпает слева-направо. Блок занимает высоту 1 карточки
   (~110px) вместо 8 рядов в столбик.

   Это стандартный mobile-паттерн (как Apple App Store, Stories
   в соцсетях, и т.п.).
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    /* Контейнер row → горизонтальный flex со scroll-snap */
    .company_advanteges .row.company_advan {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 12px;
        gap: 10px;
        margin: 0 -12px;
        padding: 4px 12px 14px;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Тонкий красивый scrollbar (когда видно — например при scroll) */
    .company_advanteges .row.company_advan::-webkit-scrollbar {
        height: 4px;
    }
    .company_advanteges .row.company_advan::-webkit-scrollbar-thumb {
        background: rgba(246, 190, 38, 0.4);
        border-radius: 2px;
    }
    .company_advanteges .row.company_advan::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
    }

    /* Каждая col-обёртка — фиксированная ширина 200px */
    .company_advanteges .row.company_advan > [class*="col-"] {
        flex: 0 0 200px;
        max-width: 200px;
        width: 200px;
        min-width: 0;
        padding: 0;
        scroll-snap-align: start;
    }

    /* Карточка — вертикальный layout, как был раньше, но компактнее */
    body .company_advanteges .company_advan_div {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 14px 10px 12px;
        margin: 0;
        height: 130px;
        border-radius: 10px;
        justify-content: center;
        gap: 8px;
    }

    body .company_advanteges .company_advan_div img {
        width: 36px;
        height: 36px;
        margin: 0;
        flex-shrink: 0;
        object-fit: contain;
    }

    body .company_advanteges h4.company_advan_h4,
    body .company_advanteges .company_advan_h4 {
        font-size: 12px;
        line-height: 1.3;
        margin: 0;
        text-align: center;
        font-weight: 500;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Подсказка-«пилюля» что блок свайпается. Видна как тень справа,
       намекает что есть ещё контент справа от текущей зоны. */
    .company_advanteges {
        position: relative;
    }
    .company_advanteges .row.company_advan::after {
        content: '';
        flex: 0 0 4px;
    }
}

/* Очень узкие экраны — карточки уже */
@media (max-width: 380px) {
    .company_advanteges .row.company_advan > [class*="col-"] {
        flex: 0 0 170px;
        max-width: 170px;
        width: 170px;
    }
    body .company_advanteges .company_advan_div {
        height: 120px;
        padding: 12px 8px 10px;
    }
    body .company_advanteges .company_advan_div img {
        width: 32px;
        height: 32px;
    }
    body .company_advanteges h4.company_advan_h4,
    body .company_advanteges .company_advan_h4 {
        font-size: 11.5px;
    }
}

/* ----------------------------------------------------------
   Блок «Часто задаваемые вопросы» (FAQ-аккордеоны).

   Aspro Next по умолчанию: padding 29px 90px 29px 34px, font-size 18px
   UPPERCASE — каждый вопрос ~100px высоты. 14 вопросов = 1400px.

   На mobile (≤767px) делаем компактно:
   - padding 10px 38px 10px 14px (≈ 20px vertical вместо 58px)
   - font-size 13px без UPPERCASE
   - line-height 1.3
   - меньше margin контейнера

   Результат: ~ 40-45px на вопрос × 14 ≈ 600px ≈ 1 mobile-экран.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    /* Контейнер блока FAQ */
    .have_faq {
        padding: 14px 0;
        margin: 12px 0 8px;
    }

    /* Заголовок-кнопка вопроса */
    .have_faq .toogle-accordion .toggle > label,
    .have_faq .toggle > label {
        font-size: 13px;
        line-height: 1.35;
        font-weight: 600;
        padding: 11px 38px 11px 14px;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Активный (раскрытый) вопрос — чуть выделить */
    .have_faq .toogle-accordion .toggle.active > label,
    .have_faq .toggle.active > label {
        font-size: 13px;
        padding-bottom: 8px;
    }

    /* Текст ответа — компактнее */
    .have_faq .toogle-accordion .toggle .toogle-text,
    .have_faq .toggle .toggle-text,
    .have_faq .toggle .toogle-text {
        font-size: 12.5px;
        line-height: 1.45;
        padding: 0 14px 12px;
    }

    /* Иконка раскрытия (+/–) — меньше и ближе к правому краю */
    .have_faq .toogle-accordion .toggle > label::after,
    .have_faq .toogle-accordion .toggle > label::before,
    .have_faq .toggle > label::after,
    .have_faq .toggle > label::before {
        right: 14px;
        width: 16px;
        height: 16px;
        font-size: 16px;
    }

    /* Уменьшаем заголовок секции «ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ» */
    .have_faq .title_2color,
    .have_faq h3 {
        font-size: 16px;
        margin-bottom: 10px;
        padding-left: 14px;
    }
}

/* Совсем узкие экраны — ещё компактнее */
@media (max-width: 380px) {
    .have_faq .toogle-accordion .toggle > label,
    .have_faq .toggle > label {
        font-size: 12px;
        padding: 9px 34px 9px 12px;
    }
    .have_faq .title_2color,
    .have_faq h3 {
        font-size: 14.5px;
    }
}

/* ----------------------------------------------------------
   Блок «Расслабьтесь, мы все устроим!» (форма consult).
   Заголовок раньше был тёмный (rgb(56,56,56)) на тёмном фоне —
   плохо читался. Меняем на фирменный жёлтый Aspro Next.
   ---------------------------------------------------------- */
.rs-consult__info-title {
    color: #F6BE26;
}

/* ----------------------------------------------------------
   Блок «Преимущества работы с нами» — DESKTOP layout.

   По умолчанию Aspro Next рендерит сетку 4 колонки × N рядов.
   Для лучшей читаемости делаем построчный layout:
   1 преимущество = 1 строка, [иконка слева] + [текст справа].

   Aspro inline-CSS имеет высокую специфичность (.rs-page-cctv ...),
   поэтому для критичных свойств (padding, margin img, font-size)
   используется !important — это намеренно, только для layout-свойств,
   не для структурно-важных элементов.

   На mobile (≤767px) сохраняется carousel из блока выше.
   ---------------------------------------------------------- */
@media (min-width: 768px) {
    /* Контейнер секции — убираем избыточные top/bottom paddings (Aspro: 140px).
       padding-top нужен больше, чем bottom, потому что верхний баннер
       (.maket-image-block с инженерами) визуально «свисает» в эту секцию. */
    body .company_advanteges {
        padding-top: 90px !important;
        padding-bottom: 30px !important;
    }

    .company_advanteges .row.company_advan {
        display: block !important;
        margin-left: 0;
        margin-right: 0;
    }

    /* КЛЮЧЕВО: Aspro задаёт .company_advan .col-md-3 { padding-top: 30px } —
       это создаёт огромные вертикальные отступы. Сбрасываем. */
    .company_advanteges .row.company_advan > [class*="col-"] {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
    }

    /* «Стэкнутый» список: соседние карточки делят общую границу
       (border-bottom: 0 на всех кроме последней). Это даёт самую
       тугую компоновку — гораздо плотнее, чем margin-bottom + два
       бордюра отдельно. */
    body .company_advanteges .company_advan_div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        padding: 7px 20px !important;
        gap: 18px;
        height: auto !important;
        min-height: 0 !important;
        border: 1.5px solid #e8eaed;
        border-bottom-width: 0 !important;
        border-radius: 0;
        background: #fff;
        box-shadow: none !important;
        transition: border-color .15s ease, background-color .15s ease;
    }

    /* Первая карточка — скруглён верх */
    .company_advanteges .row.company_advan > [class*="col-"]:first-child .company_advan_div {
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }

    /* Последняя карточка — возвращаем нижнюю границу + скругление низа */
    .company_advanteges .row.company_advan > [class*="col-"]:last-child .company_advan_div {
        border-bottom-width: 1.5px !important;
        border-bottom-left-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
    }

    body .company_advanteges .company_advan_div:hover {
        border-color: #F6BE26;
        background-color: #fffbef;
        z-index: 1;
        position: relative;
    }

    body .company_advanteges .company_advan_div img {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0;
        margin: 0 !important;
        object-fit: contain;
        display: block;
    }

    /* КЛЮЧЕВО: Aspro задаёт .company_advan_h4 { max-width: 186px } —
       из-за этого текст переносится в 3 строки. Снимаем ограничение. */
    body .company_advanteges h4.company_advan_h4,
    body .company_advanteges .company_advan_h4 {
        font-size: 15px !important;
        line-height: 1.35 !important;
        text-align: left !important;
        margin: 0 !important;
        font-weight: 600;
        flex: 1 1 auto;
        max-width: none !important;
        text-transform: none !important;
        letter-spacing: 0;
        color: #1d2029;
        width: auto !important;
    }
}

/* На очень широких экранах (≥1200px) — чуть крупнее padding и шрифт */
@media (min-width: 1200px) {
    body .company_advanteges .company_advan_div {
        padding: 9px 24px !important;
    }
    body .company_advanteges .company_advan_div img {
        width: 44px !important;
        height: 44px !important;
    }
    body .company_advanteges h4.company_advan_h4,
    body .company_advanteges .company_advan_h4 {
        font-size: 16px !important;
    }
}