/* 1. Растягиваем контейнеры SP Page Builder на 100% ширины */
#sp-page-builder .sppb-section, 
#sp-page-builder .sppb-row, 
#sp-page-builder .sppb-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Настраиваем флекс-контейнер и добавляем зазор в 2 пикселя */
#sp-page-builder .sppb-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important; /* Тот самый тонкий отступ между колонками */
    background-color: #ffffff !important; /* Цвет отступа (белый) */
}

/* 3. Пересчитываем ширину колонок с учетом добавленного зазора */
#sp-page-builder .sppb-row > div {
    flex: 1 !important; /* Колонки автоматически поровну поделят экран */
    max-width: calc(20% - 2px) !important; /* Вычитаем зазор, чтобы картинки не переносились */
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. Заставляем картинки идеально заполнять пространство */
#sp-page-builder .sppb-row img,
#sp-page-builder .sppb-addon-single-image img,
#sp-page-builder .sppb-addon-gallery-item img {
    width: 100% !important;
    height: 75vh !important; /* Высота фото */
    object-fit: cover !important;
    display: block !important;
}
/* ========================================================
   АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ И МОБИЛЬНЫХ ТЕЛЕФОНОВ
   ======================================================== */

/* Настройки для планшетов (экраны меньше 1024px) */
@media (max-width: 1024px) {
    #sp-page-builder .sppb-row {
        flex-wrap: wrap !important; /* Разрешаем перенос картинок */
        gap: 4px !important; /* На планшетах сделаем зазор чуть заметнее */
    }
    
    #sp-page-builder .sppb-row > div {
        flex: 0 0 calc(50% - 4px) !important; /* Показываем по 2 фотографии в ряд */
        max-width: calc(50% - 4px) !important;
    }

    #sp-page-builder .sppb-row img,
    #sp-page-builder .sppb-addon-single-image img,
    #sp-page-builder .sppb-addon-gallery-item img {
        height: 45vh !important; /* Немного уменьшаем высоту на планшетах, чтобы было аккуратно */
    }
}

/* Настройки для мобильных телефонов (экраны меньше 576px) */
@media (max-width: 576px) {
    #sp-page-builder .sppb-row {
        flex-direction: column !important; /* Выстраиваем фото строго друг под друга */
        gap: 6px !important; /* Красивый вертикальный отступ между кадрами */
    }
    
    #sp-page-builder .sppb-row > div {
        flex: 0 0 100% !important; /* Каждое фото занимает 100% ширины экрана смартфона */
        max-width: 100% !important;
    }

    #sp-page-builder .sppb-row img,
    #sp-page-builder .sppb-addon-single-image img,
    #sp-page-builder .sppb-addon-gallery-item img {
        height: 60vh !important; /* Оптимальная высота, чтобы вертикальный портрет смотрелся крупно и сочно */
    }
}
/* РОСКОШНОЕ ЦЕНТРИРОВАНИЕ И РАССТОЯНИЯ В МЕНЮ */
@media (min-width: 992px) {
    /* Полностью освобождаем строку шапки */
    #sp-header .container,
    #sp-header .container > .row {
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Сдвигаем само меню строго по центру экрана */
    #sp-menu {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        max-width: none !important;
        padding: 0 !important;
    }

    /* Выстраиваем пункты меню в просторный ряд */
    ul.sp-menu {
        display: flex !important;
        justify-content: center !important;
        gap: 45px !important; /* РАССТОЯНИЕ МЕЖДУ ТЕМАМИ. Можно увеличить до 50px или уменьшить */
        margin: 0 auto !important;
        float: none !important;
    }

    /* Убираем старые отступы у самих ссылок, чтобы gap работал идеально */
    ul.sp-menu > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Отрезаем влияние старых колонок шаблона */
    .col-lg-3, .col-lg-9, .col-md-3, .col-md-9 {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }
}
/* РОСКОШНОЕ ЦЕНТРИРОВАНИЕ ШАПКИ И ОТСТУПЫ МЕЖДУ ТЕМАМИ */
@media (min-width: 992px) {
    /* 1. Освобождаем контейнер шапки во всю ширину */
    #sp-header .container, 
    #sp-header .row {
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 2. Выталкиваем блок меню строго на середину экрана */
    #sp-menu {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        max-width: none !important;
        width: auto !important;
        float: none !important;
    }

    /* 3. Делаем одинаковые красивые зазоры между темами */
    ul.sp-menu {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 45px !important; /* Расстояние между словами (можно поставить 35px или 55px) */
        margin: 0 auto !important;
        padding: 0 !important;
        float: none !important;
    }

    ul.sp-menu > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Отключаем сжатие правой стороны шапки шаблона */
    #sp-header .col-lg-9, 
    #sp-header .col-md-9 {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
    }
}