/* --- START OF FILE style.css --- */

/* ==========================================================================
   1. БАЗОВАЯ СТРУКТУРА
   ========================================================================== */

/* Контейнер: ограничивает видимую область (overflow: hidden) и позиционирует навигацию */
.super-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    user-select: none; /* Запрещаем выделение текста при перетаскивании мышью */
}

/* Обертка (трек): двигается внутри контейнера с помощью transform: translate */
.super-slider-wrapper {
    display: flex; /* Слайды выстраиваются в ряд */
    will-change: transform; /* Подсказка браузеру для оптимизации GPU */
	height: 100%;           
}

/* Вертикальный режим: меняем ось flex на вертикальную */
/* JS пересчитает высоты слайдов, чтобы они влезали */
.super-slider-container.ss-dir-vertical .super-slider-wrapper {
    flex-direction: column;
}

/* Слайд: базовая ячейка */
.super-slide, .wp-block-super-slider-slide {
    position: relative;
    flex-shrink: 0;         /* Важно: запрещаем сжатие слайда flexbox-ом */
    overflow: hidden;
    min-height: 300px;      /* Минимальная высота безопасности */
    display: flex;
    align-items: center;    /* Вертикальное центрирование контента */
    justify-content: center;/* Горизонтальное центрирование контента */
    height: 100%;
    margin: 0;
    box-sizing: border-box; /* Padding учитывается в ширине */
}

/* ==========================================================================
   2. ИСПРАВЛЕНИЕ DRAG & DROP
   ========================================================================== */
/* Запрещаем браузеру перетаскивать картинку как файл (ghost image) */
.super-slider-wrapper img,
.super-slider-wrapper a,
.super-slider-wrapper video {
    -webkit-user-drag: none; /* Chrome/Safari */
    user-drag: none;         /* Стандарт */
    -moz-user-drag: none;    /* Firefox */
    user-select: none;       /* Запрет выделения */
    pointer-events: auto;    /* Клики разрешены */
}


/* ==========================================================================
   2. МЕДИА-ОБЕРТКИ И РЕЖИМЫ (FIT MODES)
   ========================================================================== */

/* Базовые стили для обертки медиа */
.super-slide .slide-media-wrapper {
	display: flex; align-items: center; justify-content: center;
	position: relative;
	width: 100%;
    height: 100%;
	z-index: 1; /* Медиа лежит внизу (z-index 1), под контентом */
}

/* --- Видео-фон: специфические правила --- */
/* Блокируем клики по видео-фону, чтобы пользователь не мог его остановить или вызвать контекстное меню */
.super-slide.is-background-mode video.slide-media-element {
    pointer-events: none; 
}
/* Скрываем стандартные контролы браузера, если они вдруг появятся */
.super-slide.is-background-mode video::-webkit-media-controls {
    display: none !important;
}


/* --- РЕЖИМ 1: ПО ШИРИНЕ (Standard Width) --- */
/* Стандартное поведение для фонов. Картинка растягивается (cover) и позиционируется абсолютно */
.super-slide.is-background-mode .slide-media-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}
.super-slide.is-background-mode .slide-media-element,
.super-slide.is-background-mode .slide-video-iframe iframe {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Обрезает лишнее, заполняя контейнер */
}


/* --- РЕЖИМ 2: ПО ВЫСОТЕ (Fit Height / Auto Width) --- */
/* В этом режиме ширина слайда не фиксирована, она зависит от пропорций картинки */

/* Разрешаем слайду иметь width: auto */
.super-slider-container.ss-fit-height .super-slide,
.super-slider-container.ss-fit-height .wp-block-super-slider-slide {
    width: auto !important; 
    flex: 0 0 auto !important;
}
/* Исключение: если слайд 1, то растягиваем его */
.super-slider-container.ss-fit-height[data-slides-per-view="1"] .super-slide,
.super-slider-container.ss-fit-height[data-slides-per-view="1"] .wp-block-super-slider-slide {
	width: 100% !important;
}

/* Медиа-обертка становится relative, чтобы "распереть" слайд по ширине */
.super-slider-container.ss-fit-height .super-slide.is-background-mode .slide-media-wrapper {
    position: relative; 
    width: auto;
    height: 100%;
}
.super-slider-container.ss-fit-height .super-slide.is-background-mode .slide-media-element {
    width: auto;
    height: 100%;
    object-fit: contain; /* Картинка видна целиком */
    display: block;
}


/* --- РЕЖИМ 3: ФИКСИРОВАННЫЕ ГАБАРИТЫ (Fixed) --- */
/* Картинка не растягивается больше своих размеров и центрируется */

.super-slider-container.ss-fit-fixed .super-slide.is-background-mode .slide-media-element,
.super-slider-container.ss-fit-fixed .super-slide.is-background-mode .slide-video-iframe iframe {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* Центрируем через flex */
.super-slider-container.ss-fit-fixed .super-slide.is-background-mode .slide-media-wrapper {
    display: flex; align-items: center; justify-content: center;
}


/* ==========================================================================
   3. КОНТЕНТ И ОВЕРЛЕЙ
   ========================================================================== */

/* Оверлей (полупрозрачный цвет) всегда лежит поверх медиа (z-index 3) */
/* .super-slide.is-background-mode .slide-content-overlay - убераем .is-background-mode чтобы всегда поверх медиа был */
.super-slide .slide-content-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3; pointer-events: none;
}

/* Внутренний контент (текст, кнопки) лежит поверх всего (z-index 4) */
/* .super-slide.is-background-mode .slide-inner-content - убераем .is-background-mode чтобы всегда поверх медиа был */
.super-slide .slide-inner-content {
    position: absolute; 
    z-index: 4;
    padding: 40px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Сам слой контента прозрачен для кликов */
.super-slide .slide-inner-content { pointer-events: none; }

/* Но элементы внутри (кнопки, ссылки) должны быть кликабельны */
.super-slide .slide-inner-content a, 
.super-slide .slide-inner-content button, 
.super-slide .slide-inner-content .button,
.super-slide .slide-inner-content input {
	pointer-events: auto;
}

/* Центрирование контента для режима "По высоте" */
.super-slider-container.ss-fit-height .super-slide.is-background-mode .slide-inner-content {
    display: flex; align-items: center; justify-content: center;
}


/* ==========================================================================
   4. UI ЭЛЕМЕНТЫ И МОБИЛЬНАЯ АДАПТАЦИЯ
   ========================================================================== */

/* Ссылка-обертка слайда */
.ss-wrap-link {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; position: relative; text-decoration: none;
}

/* Постер видео (исчезает при классе .video-playing) */
.ss-video-poster {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2; background-size: cover; background-position: center;
    transition: opacity 0.5s ease;
}
.super-slide.video-playing .ss-video-poster { opacity: 0; pointer-events: none; }

/* Прогресс-бар */
.ss-progress-bar-container {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    background: rgba(255,255,255,0.2); z-index: 20;
}
.ss-progress-bar-fill {
    height: 100%; background: #007cba; width: 0; transition: width 0.3s ease;
}

/* Курсоры для перетаскивания (Drag) */
.super-slider-container.grab-cursor { cursor: grab; }
.super-slider-container.grabbing-cursor { cursor: grabbing; }

/* МОБИЛЬНАЯ АДАПТАЦИЯ (класс .ss-mobile-force добавляется JS если включено) */
@media screen and (max-width: 767px) {
    /* Принудительно 100% ширины */
    .super-slider-container.ss-mobile-force .super-slide,
    .super-slider-container.ss-mobile-force .wp-block-super-slider-slide {
        width: 100% !important; flex: 0 0 100% !important; margin-right: 0 !important;
    }
    /* Сброс особенностей fit-height */
    .super-slider-container.ss-mobile-force.ss-fit-height .super-slide.is-background-mode .slide-media-wrapper {
        position: absolute; width: 100%;
    }
    .super-slider-container.ss-mobile-force.ss-fit-height .super-slide.is-background-mode .slide-media-element {
        object-fit: cover; width: 100%;
    }
}


/* ==========================================================================
   5. НАВИГАЦИЯ
   ========================================================================== */
.ss-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.3); color: #fff; border: none; padding: 15px;
    cursor: pointer; z-index: 10; border-radius: 50%; transition: background 0.3s, opacity 0.3s;
}
.ss-arrow:hover { background: rgba(0,0,0,0.6); }

/* Состояние отключенной стрелки (Hard Stop) */
.ss-arrow.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.ss-prev { left: 10px; }
.ss-next { right: 10px; }

/* Вертикальные стрелки */
.super-slider-container.ss-dir-vertical .ss-arrow {
    top: auto; left: 50%; transform: translateX(-50%);
}
.super-slider-container.ss-dir-vertical .ss-prev { top: 10px; }
.super-slider-container.ss-dir-vertical .ss-next { bottom: 10px; }

/* Точки (div вместо button) */
.ss-dots {
    position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 10;
}
/* Вертикальные точки */
.super-slider-container.ss-dir-vertical .ss-dots {
    bottom: auto; top: 50%; right: 15px; left: auto;
    flex-direction: column; transform: translateY(-50%);
}

.ss-dot {
    width: 12px; height: 12px; border-radius: 100%;
    background: rgba(255,255,255,0.5); cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ss-dot.active {
    background: #007cba; transform: scale(1.2);
}

/* Миниатюры (скроллятся горизонтально) */
.ss-thumbnails {
    display: flex; gap: 10px; margin-top: 15px; overflow-x: auto; padding-bottom: 5px;
}
.ss-thumbnails::-webkit-scrollbar { height: 4px; }
.ss-thumbnails::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

.ss-thumb {
    width: 80px; flex-shrink: 0; cursor: pointer; 
    border: 2px solid transparent; display: flex; flex-direction: column;
}
.ss-thumb.active { border-color: #007cba; }
.ss-thumb img { width: 100%; height: 60px; object-fit: cover; pointer-events: none; }
.ss-thumb-label {
    font-size: 11px; text-align: center; margin-top: 3px; color: #666;
    line-height: 1.2; overflow: hidden;
	/*text-overflow: ellipsis; white-space: nowrap;*/ /*обрезка текста*/
}