/* === 1. ГЛАВНАЯ МАГИЯ ПРОТИВ СКАЧКОВ (ПРОПОРЦИИ) === */
.front-slider .swiper-slide {
    position: relative;
    width: 100%;
    /* Впишите сюда РЕАЛЬНУЮ ширину / высоту вашего длинного баннера */
    aspect-ratio: 1920 / 400; 
    overflow: hidden;
}

/* Прячем лишние слайды до загрузки скрипта, чтобы они не наслаивались */
.front-slider .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none !important;
}

/* === 2. КАРТИНКА: КАК В ОРИГИНАЛЕ, НО НЕ РЕЖЕТСЯ === */
.background-banner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    display: block;
}

.background-banner img {
    width: 100%;
    height: 100%;
    /* contain гарантирует, что картинка поместится целиком и не обрежется */
    object-fit: contain; 
}

/* Скрываем дублирующий текст */
.front-slider .info {
    display: none !important;
}
/* === 3. ВИДИМАЯ КНОПКА ПОВЕРХ РИСУНКА === */
.front-slider .btn {
    position: absolute;
    z-index: 10;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* Координаты в % (подгоните под нужное место на баннере) */
    left: 3.8%;
    bottom: 7.4%;
    
    /* Убираем жесткие размеры, чтобы кнопка подстраивалась под текст */
    width: auto !important;
    height: auto !important;
    
    /* Оформление самой кнопки */
    background: #ffffff !important;
    color: #1F2021 !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 16px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    white-space: nowrap;
    transition: background 0.3s ease;
    cursor: pointer;
}

/* Эффект при наведении */
.front-slider .btn:hover {
    background: #f0f0f0 !important;
}

/* === 4. АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ === */
@media screen and (max-width: 768px) {
    .front-slider .swiper-slide {
        /* Меняем пропорцию квадрата на прямоугольную */
        /* Если картинка такая же вытянутая, как на ПК, можно попробовать 16 / 9 или 2 / 1 */
        aspect-ratio: 16 / 9; 
    }
    
 .front-slider .btn {
        left: 3.9%;
     
        bottom: 9.7%;
        font-size: clamp(9px, 2.8vw, 14px) !important;
    
    /* Первый clamp — для верха и низа (от 4px до 6px)
       Второй clamp — для лева и права (от 15px до 30px) 
    */
    padding: clamp(4px, 1.2vw, 6px) clamp(15px, 6vw, 30px) !important;
    }
}