/* АГРЕССИВНО УБИРАЕМ ВСЕ ОТСТУПЫ */
.header {
    margin-bottom: 0 !important;
}

body, main, #_ajax_content_ {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body .wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Минимальные отступы между секциями */
#_ajax_content_ > * {
    margin-top: 0 !important;
}

#_ajax_content_ > *:not(:first-child):not(.banner-slider) {
    margin-top: 8px !important;
}

/* Убираем отступ для banner-slider */
#_ajax_content_ > .banner-slider {
    margin-top: 0 !important;
}

/* Слайдер баннеров - используем единую систему padding */
.banner-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 !important; /* Убираем все margin */
    padding: 0 !important;
    overflow: hidden;
    background: transparent;
    box-sizing: border-box;
}

/* DESKTOP - БЕСКОНЕЧНАЯ КАРУСЕЛЬ (3 баннера всегда видны) */
@media (min-width: 1024px) {
    .banner-slider {
        /* Не используем отрицательные margin! */
        /* Ширина управляется unified-alignment.css */
        width: 100% !important;
        max-width: none !important;
    }
    
    .banner-slider__wrapper {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        gap: 12px;
        overflow: visible; /* Важно для бесконечной карусели */
        /* padding управляется unified-alignment.css */
        box-sizing: border-box;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    .banner-slider__slide {
        position: relative;
        /* Расчет ширины: (100% - 2 gaps) / 3 слайда */
        flex: 0 0 calc((100% - 24px) / 3) !important;
        width: calc((100% - 24px) / 3) !important;
        min-width: calc((100% - 24px) / 3) !important;
        max-width: calc((100% - 24px) / 3) !important;
        aspect-ratio: 480 / 300 !important; /* Правильные пропорции */
        box-sizing: border-box !important;
        opacity: 1;
        transition: none;
        border-radius: 20px; /* Увеличенный радиус для более закругленных углов */
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    /* Изначально скрываем подписи и кнопку до загрузки изображения */
    .banner-slider__slide .banner-slider__caption,
    .banner-slider__slide .banner-slider__details { opacity: 0; visibility: hidden; transition: opacity .25s ease; }
    .banner-slider__slide.loaded .banner-slider__caption,
    .banner-slider__slide.loaded .banner-slider__details { opacity: 1; visibility: visible; }
    /* Текстовая подпись на баннере (как на примере) */
    .banner-slider__caption {
        position: absolute;
        left: 20px;
        top: 18px;
        z-index: 11;
        color: #fff;
        font-family: 'Montserrat', 'Arial Black', Impact, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-weight: 900;
        line-height: 1.05;
        max-width: 55%;
        text-shadow: 0 2px 12px rgba(0,0,0,0.35);
        pointer-events: none; /* не мешаем drag */
    }
    .banner-slider__caption-line1 { font-size: 28px; letter-spacing: 0.02em; }
    .banner-slider__caption-line2 { font-size: 28px; letter-spacing: 0.02em; }
    
    .banner-slider__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
    }
}

/* MOBILE - БОЛЬШОЙ БАННЕР С SWIPE */
@media (max-width: 1023px) {
    .banner-slider {
        padding: 0 !important;
        margin: 8px 0 0 0 !important;
        /* Выходим ЗА ПРЕДЕЛЫ всего контейнера */
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: visible !important;
        position: relative;
    }
    
    .banner-slider__wrapper {
        position: relative;
        width: 100%;
        height: auto;
        display: flex !important;
        gap: 12px; /* Gap между баннерами */
        /* Центрирование: padding слева = (100vw - 90vw) / 2 = 5vw */
        padding: 0 5vw 40px 5vw !important;
        overflow: visible !important; /* Для transform-based прокрутки */
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        touch-action: manipulation; /* Быстрое нажатие без 300ms задержки, JS полностью контролирует свайпы */
    }
    
    .banner-slider__slide {
        position: relative;
        /* БОЛЬШОЙ БАННЕР ПО ЦЕНТРУ - края соседних видны */
        flex: 0 0 90vw;
        width: 90vw;
        min-width: 90vw;
        max-width: 90vw;
        aspect-ratio: 670 / 448; /* Пропорции Mellstroy для mobile */
        border-radius: 16px !important;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
        transition: none;
    }

    .banner-slider__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
    }
    
    /* Изначально скрываем подписи и кнопку до загрузки изображения */
    .banner-slider__slide .banner-slider__caption,
    .banner-slider__slide .banner-slider__details { 
        opacity: 0; 
        visibility: hidden; 
        transition: opacity .25s ease; 
    }
    
    .banner-slider__slide.loaded .banner-slider__caption,
    .banner-slider__slide.loaded .banner-slider__details { 
        opacity: 1; 
        visibility: visible; 
    }
    
    /* Текстовая подпись на баннере - МОБИЛЬНАЯ ВЕРСИЯ */
    .banner-slider__caption {
        position: absolute;
        left: 18px;
        top: 20px;
        z-index: 11;
        color: #fff;
        font-family: 'Montserrat', 'Arial Black', Impact, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-weight: 900;
        line-height: 1.05;
        max-width: 60%; /* Чуть больше на мобильных */
        text-shadow: 0 2px 12px rgba(0,0,0,0.4);
        pointer-events: none; /* не мешаем swipe */
    }
    
    .banner-slider__caption-line1 { 
        font-size: 24px; /* Чуть меньше чем на desktop */
        letter-spacing: 0.02em; 
    }
    
    .banner-slider__caption-line2 { 
        font-size: 24px; 
        letter-spacing: 0.02em; 
    }
}

/* TABLET - АДАПТАЦИЯ ТЕКСТОВ (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Чуть больше текст на планшетах */
    .banner-slider__caption-line1,
    .banner-slider__caption-line2 { 
        font-size: 26px !important; /* Между мобильными (24px) и desktop (28px) */
    }
    
    .banner-slider__caption {
        left: 20px !important;
        top: 18px !important;
        max-width: 58% !important;
    }
}

/* SMALL MOBILE - КОМПАКТНЫЕ ТЕКСТЫ (до 375px) */
@media (max-width: 375px) {
    /* Еще меньше текст на маленьких экранах */
    .banner-slider__caption-line1,
    .banner-slider__caption-line2 { 
        font-size: 20px !important; /* Совсем компактный */
    }
    
    .banner-slider__caption {
        left: 14px !important;
        top: 16px !important;
        max-width: 65% !important;
    }
}

/* Кнопка Details - компактная, без обводки, центрированный текст */
.banner-slider__details {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none; /* Без обводки */
    color: rgba(255, 255, 255, 0.82); /* Полупрозрачный текст */
    /* Возвращаем исходную высоту коробки: правим только текст */
    padding: 10px 16px; /* симметрично */
    border-radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: none;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: inline-flex; /* центрирование содержимого */
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    position: relative;
}

/* Жёстко фиксируем кнопку внутри самого баннера (нижний левый угол) */
.banner-slider__slide { position: relative; overflow: hidden; }
.banner-slider__slide .banner-slider__details {
    position: absolute;
    left: 12px;
    bottom: 12px;
    margin: 0;
    transform: none;
    max-width: calc(100% - 24px);
}

/* Desktop: оптический подъём текста в кнопке (только на ПК) */
@media (min-width: 1024px) {
    .banner-slider__slide .banner-slider__details {
        padding-top: 8px;
        padding-bottom: 12px;
        line-height: 1;
    }
}

/* Рисуем текст через псевдо-элемент с точной центровкой и оптическим сдвигом */
/* Убрали псевдо-элемент — используем реальный текст внутри кнопки */

.banner-slider__details:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.95);
}

/* Индикаторы */
.banner-slider__indicators {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

/* Desktop: центрируем относительно СРЕДНЕГО баннера */
@media (min-width: 1024px) {
    .banner-slider__indicators {
        /* Расчет: padding(20px) + первый баннер(26.9%) + gap(6px) + половина второго баннера(13.45%) */
        left: calc(20px + 26.9% + 6px + 13.45%);
        transform: translateX(-50%);
    }
}

.banner-slider__indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.banner-slider__indicator.active {
    background: #ffffff;
    width: 6px;
    border-radius: 50%;
    transform: scale(1.3);
}

/* Стрелки навигации - СКРЫТЫ */
.banner-slider__nav {
    display: none !important; /* Кнопки прокрутки скрыты */
}

.banner-slider__nav:hover {
    background: rgba(124, 58, 237, 0.9);
    border-color: rgba(124, 58, 237, 1);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.5);
    opacity: 1;
}

.banner-slider__nav--prev {
    left: 15px;
}

.banner-slider__nav--next {
    right: 15px;
}

/* На мобилках стрелки скрываем */
@media (max-width: 1023px) {
    .banner-slider__nav {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .banner-slider__details {
        bottom: 20px;
        left: 20px;
        padding: 12px 28px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 12px;
    }
    
    .banner-slider__indicators {
        bottom: 12px;
        left: 50% !important; /* Центрируем относительно баннера */
        transform: translateX(-50%) !important;
        right: auto !important;
        gap: 5px;
    }
    
    .banner-slider__indicator {
        width: 6px;
        height: 6px;
        min-width: 6px !important;
        min-height: 6px !important;
        flex-shrink: 0; /* Не сжимать */
    }
    
    .banner-slider__indicator.active {
        width: 6px !important; /* Круглый, НЕ овальный */
        height: 6px !important;
        transform: scale(1.3); /* Увеличение вместо растяжения */
    }
}