/* --- МОБИЛЬНЫЙ СЛАЙДЕР 4:2.5 (ПОД РАЗМЕР 800x500) --- */

@media (max-width: 1000px) {
    /* 1. Контейнер с жесткой пропорцией */
    .mobile-slider-container {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 62.5% !important; /* Пропорция 1.6 (как 800x500) */
        background: #fff;
        overflow: hidden;
        margin: 0;
    }

    /* 2. Растягиваем медиа-элементы на всю площадь контейнера */
    .mobile-slider-container iframe,
    .mobile-slider-container video,
    .mobile-slider-container .mob-slide-viewport,
    .mobile-slider-container #mobSliderContent,
    .mob-slide-viewport,
#mobMediaHolder,
video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none;
    object-fit: contain !important; 
    background: #fff !important; /* Здесь теперь белый фон принудительно */
    display: block;
}
}

.mob-slide-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff; /* ЗАМЕНИЛИ (или добавили) белый фон айтема */
}

/* --- ОФОРМЛЕНИЕ НАДПИСЕЙ --- */

.mob-slide-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    /* Прижимаем всё содержимое к нижнему краю */
    justify-content: flex-end !important; 
    align-items: center !important;
    text-align: center !important;
    /* Отступ снизу, чтобы текст был над нижним краем (примерно 10px) */
    padding: 0 20px 10px 20px !important;
    box-sizing: border-box !important;
    /* Плавное затемнение снизу для читаемости, как на ПК */
    z-index: 50 !important;
    pointer-events: none;
}

.mob-slide-content h2 {
    font-family: 'Oswald', sans-serif !important;
    font-size: 25px !important; /* Оптимально для мобилки */
	font-weight: 500;
    margin: 0 0 5px 0 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    opacity: 1 !important;
    transform: none !important;
    border: none !important;
}

.mob-slide-content p {
    font-family: 'Oswald', sans-serif !important;
    font-size: 16px !important;
    margin: 0 !important;
    color: #ffffff !important;
    /* Синяя подложка под текстом, как на твоем скриншоте ПК */

    padding: 4px 12px !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Анимация текста при активном слайде */
.mob-slide-item.active .mob-slide-content h2,
.mob-slide-item.active .mob-slide-content p {
    transform: translateY(0); opacity: 1;
}
