/* ==========================================================================
   Стили для новой Grid/Flex структуры (Десктопная версия)
   ========================================================================== */

/* Контейнер, который заменяет <table>. На ПК выстраивает колонки в ряд */
.btswap-adaptive-page .gust-grid-container {
    display: flex;
    gap: 2px; /* Отступ между левой и правой колонками */
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* Колонки (Левая и Правая). Каждая занимает ровно 50% ширины */
.btswap-adaptive-page .gust-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Элементы внутри колонок (блоки с картинками, заголовками и текстом) */
/* Элементы внутри колонок (общие правила) */
.btswap-adaptive-page .gust-cell {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Отдельное правило для ТЕКСТОВЫХ ячеек (всем, кроме картинок) */
.btswap-adaptive-page .gust-cell:not(.image) {
    padding: 10px 20px 10px 10px !important; /* Вверх 10, Право 0, Низ 10, Лево 10 */
}

/* Отдельное правило для КАРТИНОК (оставляем без отступов по бокам) */
.btswap-adaptive-page .gust-cell.image {
    padding: 10px 0 !important;
}

/* Адаптация картинок, чтобы они не вылезали за пределы колонок */
.btswap-adaptive-page .gust-cell.image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Блок опыта применения проектов (на всю ширину) */
.btswap-adaptive-page .gust-exp-block {
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
}


/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ (Экран меньше 768px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Перестраиваем колонки: вместо "в ряд" они встают "друг под друга" */
    .btswap-adaptive-page .gust-grid-container {
        flex-direction: column;
        gap: 35px; /* Заметный отступ между бывшей левой и правой колонкой */
    }

    /* Каждая колонка растягивается на 100% ширины экрана */
    .btswap-adaptive-page .gust-column {
        width: 100%;
    }
    
    /* Слегка уменьшаем отступы для компактности на смартфонах */
    .btswap-adaptive-page .gust-cell {
        padding: 5px 0;
    }
    
    /* Центрируем картинки на мобильных для красоты */
    .btswap-adaptive-page .gust-cell.image img {
        margin: 0 auto;
    }
}
/* ==========================================================================
   ИСПРАВЛЕНИЕ ДЛЯ СПИСКОВ (Перебиваем старое сжатие до 20%)
   ========================================================================== */

/* Сбрасываем принудительное ограничение ширины для списков внутри колонок */
.btswap-adaptive-page .gust-column ul li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: list-item !important; /* Гарантируем стандартное отображение списка */
}

/* На всякий случай сбрасываем ограничения для самого контейнера списка */
.btswap-adaptive-page .gust-column ul {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important; /* Возвращаем стандартный отступ для маркеров */
    margin: 10px 0 !important;
}