/* ==========================================================================
   МЕДИА-ЗАПРОСЫ: ИЗОЛИРОВАННАЯ АДАПТИВНОСТЬ УСТРОЙСТВ
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. РЕЖИМ ПК, НОУТБУКОВ И ПЛАНШЕТОВ (Ширина экрана от 768px и выше)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* Карточка на мобилках: во всю ширину, высота строго 75% экрана со скроллом */
    .content-container {
        width: 80vw !important;          /* Занимает 95% ширины экрана дисплея */
        height: 75vh !important;         /* Строго 75% от высоты экрана сверху вниз */
        max-height: 75vh !important;     /* Жесткое ограничение */
        padding: 15px 10px !important;   /* Компактные внутренние рамки */
        overflow-y: auto !important;     /* Скролл внутри карточки, если текст не влез */
    }

    /* Крупные массивные кнопки аккордеона для больших мониторов */
    .custom-accordion .accordion-button {
        font-size: 1.25rem !important;    /* Увеличенный шрифт (~20px) */
        font-weight: 700 !important;       /* Жирное начертание заголовков */
        letter-spacing: 1.5px !important;  /* Разрядка букв в стиле цифрового кода */
        padding: 18px 25px !important;     /* Увеличенная высота кликабельной зоны */
    }

    /* Просторные настройки текстового контента внутри спойлера на ПК */
    .custom-accordion .accordion-body {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;       /* Свободный межстрочный интервал */
        padding: 20px 25px !important;
    }
}

/* --------------------------------------------------------------------------
   2. МОБИЛЬНЫЙ РЕЖИМ ДЛЯ СМАРТФОНОВ (Ширина экрана до 767.98px включительно)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Сжимаем внешние отступы обертки, подтягивая карточку ближе к краям */
    .content-wrapper {
        padding: 70px 10px 20px !important;
    }

    /* Карточка на мобилках: во всю ширину, высота строго 75% экрана со скроллом */
    .content-container {
        width: 90vw !important;          /* Занимает 95% ширины экрана дисплея */
        height: 75vh !important;         /* Строго 75% от высоты экрана сверху вниз */
        max-height: 75vh !important;     /* Жесткое ограничение */
        padding: 15px 10px !important;   /* Компактные внутренние рамки */
        overflow-y: auto !important;     /* Скролл внутри карточки, если текст не влез */
    }

    /* Мобильный фикс главного заголовка "Бағдарламашы қызметтері" */
    .content-container h1 {
        font-size: clamp(16px, 4.5vw, 22px) !important; /* Удобный читаемый размер */
        letter-spacing: 1px !important;                 /* Сужаем межбуквенный интервал */
        padding-bottom: 8px !important;
        margin-top: 5px !important;
        margin-bottom: 15px !important;
    }

    /* Компактное сжатие элементов аккордеона под тач-скрины телефонов */
    .custom-accordion .accordion-button {
        padding: 12px 10px !important;   /* Маленькие отступы */
        font-size: 14px !important;      /* Чтобы длинные слова не переносились криво */
        letter-spacing: 0px !important;  /* Убираем лишние растяжения букв */
    }

    .custom-accordion .accordion-body {
        padding: 12px 10px !important;
        font-size: 13px !important;      /* Оптимальный размер мобильного текста */
        line-height: 1.5 !important;
    }
}