.sections-list-full__item-image-wrapper {
  --section-image-size: 40px;
  width: var(--section-image-size);
  height: var(--section-image-size);
}
.sections-list-full__item-image-wrapper--TRANSPARENT_PICTURES {
  --section-image-size: 56px;
}
.sections-list-full__item-image-wrapper--PICTURES {
  --section-image-size: 88px;
}
.sections-list-full__items--top-image .sections-list-full__item-image-wrapper--PICTURES {
  --section-image-size: 120px;
}
.sections-list-full__item-image-wrapper--ICONS svg {
  width: var(--section-image-size);
  height: var(--section-image-size);
}
.sections-list-full .sections-list-full__item-info {
  flex-shrink: 1;
}

/*
 * Универсальные стили для шаблона sections_list1
 * Создают "масонри" сетку (склейку блоков) с корректным внутренним отображением
*/

/* Главный контейнер для всех блоков разделов */
.sections-list-full .sections-list-full__items {
    display: block !important; /* Включаем колоночный режим */
    column-count: 4;          /* 4 колонки для десктопа */
    column-gap: 24px;         /* Расстояние между колонками */
}

/* 
  Отдельный блок раздела.
  Теперь он САМ является FLEX-контейнером, чтобы картинка и текст были в ряд.
*/
.sections-list-full .sections-list-full__item {
    /* Свойства для "масонри" сетки */
    break-inside: avoid; 
    margin-bottom: 24px; 
    
    /* СВОЙСТВА ДЛЯ ВОССТАНОВЛЕНИЯ ВНУТРЕННЕЙ ВЕРСТКИ */
    display: flex !important;             /* ВОЗВРАЩАЕМ FLEX, ЧТОБЫ КАРТИНКА И ТЕКСТ БЫЛИ В РЯД */
    align-items: flex-start !important;   /* Выравниваем их по верху, а не по центру */
    gap: 20px !important;                 /* Возвращаем отступ между картинкой и текстом */
}

/* Адаптивность для планшетов */
@media (max-width: 991px) {
    .sections-list-full .sections-list-full__items {
        column-count: 2;
    }
}

/* Адаптивность для мобильных телефонов */
@media (max-width: 550px) {
    .sections-list-full .sections-list-full__items {
        column-count: 1;
    }
    .sections-list-full .sections-list-full__item {
        gap: 16px !important; /* Уменьшаем отступ на мобильных */
    }
}
/*
 * Стили для выделенного подраздела
*/
a.subsection-highlight span {
    font-weight: bold !important;
    color: #fe620d !important; /* Фирменный оранжевый цвет Aspro Premier */
}

/*
 * Логика для аккордеона: ДЕСКТОП vs МОБИЛЬНАЯ версия
*/

/* --- ДЕСКТОПНАЯ ВЕРСИЯ (экраны шире 550px) --- */
@media (min-width: 551px) {
    /* Текстовая кнопка на десктопе НЕ НУЖНА - скрываем */
    .toggle-subsections-btn {
        display: none !important;
    }
    /* Список подразделов на десктопе ВСЕГДА ВИДЕН */
    .sections-list-full__submenu-container {
        display: block !important;
    }
}


/* --- МОБИЛЬНАЯ ВЕРСИЯ (экраны до 550px) --- */
@media (max-width: 550px) {
    
    /* --- ОБЩИЕ НАСТРОЙКИ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ --- */

    /* Вся сетка перестраивается в одну колонку */
    .sections-list-full .sections-list-full__items {
        column-count: 1;
        display: block; /* Убираем grid/flex у родителя */
    }

    /* --- РЕШЕНИЕ ПРОБЛЕМЫ "ПРЫЖКА" И ВЫРАВНИВАНИЯ --- */

    /* 1. Главный блок-контейнер для раздела. */
    .sections-list-full .sections-list-full__item {
        display: flex; /* Используем Flex для выравнивания иконки и текста */
        align-items: flex-start; /* ВАЖНО: "Якорь" по верхнему краю. Это убивает "прыжок". */
        gap: 12px;
        margin-bottom: 24px !important;
        /* Убираем рамки и фон, если они остались */
        padding: 0; 
        background-color: transparent;
        border: none;
    }

    /* 2. Иконка. Запрещаем ей сжиматься. */
    .sections-list-full .sections-list-full__item-image-wrapper {
        --section-image-size: 88px;
        flex-shrink: 0; /* РЕШЕНИЕ ПРОБЛЕМЫ "КАРТИНКИ НЕТ" */
    }

    /* 3. Текстовый блок. Заставляем его занимать все оставшееся место. */
    .sections-list-full .sections-list-full__item-info {
        flex-grow: 1; /* РЕШЕНИЕ ПРОБЛЕМЫ "КАРТИНКИ НЕТ" */
        margin-top: 26px;
    }

    .sections-list-full .has-multiline-title {
    margin-top: 16px; /* Новый, уменьшенный отступ. Можете поменять на 6px, 10px и т.д. */
}
    
    /* 4. "РУЧНОЕ" ЦЕНТРИРОВАНИЕ: Сдвигаем иконку вниз на половину высоты строки текста */
    .sections-list-full .sections-list-full__item-image-wrapper {
        position: relative;
        top: 10px; /* Эмпирическое значение для визуального центра */
    }

    /* --- ЛОГИКА АККОРДЕОНА --- */
    
    /* Стили для текстовой кнопки "свернуть/развернуть" */
    .toggle-subsections-btn {
        background: none; border: none; padding: 0; margin: 0; cursor: pointer;
        color: #fe620d; font-size: 12px; text-decoration: underline; text-decoration-style: dotted;
    }
    .toggle-subsections-btn:hover { text-decoration: none; }

    /* Список подразделов по умолчанию скрыт и является обычным блоком */
    .sections-list-full__submenu-container {
        display: none;
        width: 100%;
        padding-top: 12px;
    }

    
}