/* Maldivoff Club Styles - Version 1.8.11 */
/* (Версия 1.9.0 не требует изменений в этом файле) */

html, body {
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important; 
    width: 100% !important; 
}
body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#wpadminbar {
    display: none !important;
    height: 0 !important;
}

/* Контейнеры галереи - Полная ширина экрана */
.grok-gallery-header,
.grok-gallery-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    left: 0 !important; 
    box-sizing: border-box !important; 
}

/* Контейнер изображений (родительский элемент для обрезки) */
.gallery-container {
    width: 100% !important; 
    min-width: 100% !important; 
    /* height: 1080px !important; (Управляется режимами ниже) */
    position: relative;
    overflow: hidden !important; /* Обрезает все, что выходит за пределы */
    background-color: #000;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* 🟢 УЛУЧШЕНИЕ 5: Режим высоты по умолчанию (fixed_1080) */
    height: 1080px !important; /* Фиксированная высота 1080px */
}

/* 🟢 УЛУЧШЕНИЕ 5: Адаптивные режимы */
.grok-gallery-wrapper[data-height-mode="adaptive_16_9"] .gallery-container {
    padding-top: 56.25%; /* 9 / 16 = 0.5625 = 56.25% (16:9) */
    height: auto !important;
}

.grok-gallery-wrapper[data-height-mode="adaptive_4_3"] .gallery-container {
    padding-top: 75%; /* 3 / 4 = 0.75 = 75% (4:3) */
    height: auto !important;
}
/* --- Конец Улучшения 5 --- */


.gallery-container img,
.gallery-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute; /* Этот position: absolute важен для адаптивных режимов */
    top: 0;
    left: 0;
    opacity: 0;
    /* 🛑 ИСПРАВЛЕНИЕ: Удалена жестко заданная длительность transition: opacity 1s... */
}

.gallery-container img.active,
.gallery-container video.active {
    opacity: 1;
}

/* Стили для текста */
.gallery-text {
    position: absolute;
    z-index: 20;
    color: #fff; /* Цвет по умолчанию, будет переопределен JS */
    padding: 20px;
    max-width: 80%;
    /* 🛑 ИСПРАВЛЕНИЕ: Удалена жестко заданная длительность transition: opacity 0.5s... */
    opacity: 0; /* Изначально скрыт */
    /* 🟢 НОВОЕ: Стили (font, size, color, opacity) будут применены JS (inline) */
    /* 🟢 НОВОЕ: JS будет управлять transition при fade-in и fade-out */
}

/* Позиционирование текста */
.gallery-text.position-top { top: 10%; left: 50%; transform: translateX(-50%); }
.gallery-text.position-bottom { bottom: 10%; left: 50%; transform: translateX(-50%); }
.gallery-text.position-left { top: 50%; left: 10%; transform: translateY(-50%); }
.gallery-text.position-right { top: 50%; right: 10%; transform: translateY(-50%); }
.gallery-text.position-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Анимация текста */
.gallery-text.active {
    opacity: 1; /* JS будет анимировать opacity от 0 до 1 */
}

/* Стили для миниатюр */
.gallery-thumbnails {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100; 
    width: 100%;
    padding: 10px;
    display: flex;
    gap: 10px;
    
    /* 🟢 ИСПРАВЛЕНИЕ (Логика Миниатюр): Запрещаем перенос, прячем лишнее, включаем плавный скролл */
    flex-wrap: nowrap;
    justify-content: flex-start; /* JS будет управлять скроллом */
    overflow: hidden;
    scroll-behavior: smooth;
    
    background: rgba(0, 0, 0, 0.7); 
    box-shadow: 0 -5px 10px rgba(0,0,0,0.5);
}

.gallery-thumbnails img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    
    /* 🟢 ИСПРАВЛЕНИЕ: Opacity будет управляться JS, но transition оставляем */
    opacity: 0.6; /* Базовая прозрачность (JS переопределит) */
    transition: opacity 0.3s ease, border 0.3s ease, transform 0.3s ease;
    
    /* 🟢 ИСПРАВЛЕНИЕ: Запрещаем сжатие миниатюр */
    flex-shrink: 0;
}

.gallery-thumbnails img.active {
    opacity: 1; /* JS и так поставит 1, но пусть будет */
    border: 3px solid #fff; 
    transform: scale(1.05); 
}

.transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    /* 🛑 ИСПРАВЛЕНИЕ: Удалена жестко заданная длительность transition: background 1s... */
    z-index: 5; /* Ниже текста, но выше медиа */
}

/* Медиа-запросы - ширина и высота сохраняются */
@media (max-width: 768px) {
    .grok-gallery-wrapper {
        width: 100vw !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important; /* Убираем все возможные отступы */
        padding: 0 !important;
        padding-bottom: 0px !important; /* Буфер для миниатюр */
        position: relative !important; /* Контейнер для absolute-позиционирования thumbnails */
        top: -46px !important; /* Компенсируем admin bar */
        left: 0 !important;
        overflow: visible !important; /* Убираем обрезку для видимости миниатюр */
        box-sizing: border-box !important;
        margin-top: -46px !important; /* Компенсируем admin bar */
        height: auto !important; /* Позволяем wrapper растягиваться */
        z-index: 10 !important; /* Выше header-content и stats */
    }
    .grok-gallery-header {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important; /* Позволяем header растягиваться */
        z-index: 5 !important; /* Ниже gallery-thumbnails */
    }
    #main-gallery {
        margin: 0 !important;
        padding: 0 !important;
    }
    .grok-gallery-header h3 {
        margin: 0 !important; /* Убираем отступы для h3 */
        padding: 0 !important; /* Убираем лишний зазор */
        z-index: 0 !important; /* Ниже gallery-thumbnails */
    }
    .gallery-container {
        width: 166.67% !important; /* Для обрезки до 60% видимой ширины */
        min-width: 166.67% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 80vh !important; /* 80% высоты экрана смартфона */
        position: relative !important;
        top: 0 !important;
        left: -33.33% !important; /* Центрируем, обрезая по 20% с каждого края */
        background-color: #000 !important; /* Гарантируем чёрный фон */
        z-index: 1 !important; /* Базовый z-index */
        box-sizing: border-box !important;
    }
    .gallery-container img,
    .gallery-container video {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important; /* Ограничиваем масштабирование содержимого */
        object-fit: cover !important;
    }
    .gallery-thumbnails {
        position: absolute !important; /* Привязываем к gallery-container */
        top: 100% !important; /* Вплотную к нижней границе gallery-container */
        left: 0 !important;
        z-index: 2000 !important; /* Максимальный приоритет для избежания перекрытия */
        width: 100vw !important; /* Полная ширина viewport */
        min-height: 120px !important; /* Пространство для миниатюр */
        margin: 0 !important; /* Убираем отступы */
        padding: 0 10px 10px !important; /* Отступы только по бокам и снизу */
        display: flex !important;
        visibility: visible !important;
        
        /* 🟢 ИСПРАВЛЕНИЕ: Фон миниатюр на мобильных (v1.8.9) */
        background: #000 !important; /* ЧИСТЫЙ ЧЕРНЫЙ ФОН */
        
        box-shadow: 0 -5px 10px rgba(0,0,0,0.5) !important;
        
        /* 🟢 ИСПРАВЛЕНИЕ (Мобильные миниатюры): Явно запрещаем перенос и прячем */
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow: hidden !important; 
    }
    .gallery-thumbnails img {
        width: 80px;
        height: 80px;
        /* 🟢 ИСПРАВЛЕНИЕ (Мобильные миниатюры): Явно запрещаем сжатие */
        flex-shrink: 0 !important;
    }
    /* Понижаем z-index и добавляем отступы для элементов шаблона */
    .header-content,
    .stats {
        z-index: 0 !important; /* Ниже gallery-thumbnails */
        position: relative !important;
        margin-top: 200px !important; /* Смещаем ниже буфера */
    }
    /* УЛУЧШЕНИЕ: Уточняем адаптивные режимы для мобильных */
    .grok-gallery-wrapper[data-height-mode="adaptive_16_9"] .gallery-container {
        padding-top: 56.25% !important; /* 16:9 */
        padding-bottom: 0 !important;
        height: 80vh !important; /* 80% высоты экрана */
        min-height: 300px !important;
        margin: 0 !important;
        width: 166.67% !important;
        left: -33.33% !important;
    }
    .grok-gallery-wrapper[data-height-mode="adaptive_4_3"] .gallery-container {
        padding-top: 75% !important; /* 4:3 */
        padding-bottom: 0 !important;
        height: 80vh !important; /* 80% высоты экрана */
        min-height: 300px !important;
        margin: 0 !important;
        width: 166.67% !important;
        left: -33.33% !important;
    }
    /* Убираем возможные отступы от родительских контейнеров шаблона */
    .grok-gallery-wrapper * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* ГЛОБАЛЬНОЕ ИСПРАВЛЕНИЕ: Убираем отступы от WordPress-контейнеров (только для галереи) */
    .wp-site-blocks:has(.grok-gallery-wrapper),
    main:has(.grok-gallery-wrapper),
    article:has(.grok-gallery-wrapper),
    .wp-block-group:has(.grok-gallery-wrapper),
    header.grok-gallery-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 0 !important;
        display: block !important; /* Избегаем display: contents, чтобы сохранить структуру */
        height: auto !important; /* Позволяем растягиваться */
    }
    /* Дополнительно для вложенных блоков Gutenberg */
    .wp-block-group__inner-container:has(.grok-gallery-wrapper) {
        margin-top: 0 !important;
        padding-top: 0 !important;
        height: auto !important;
    }
}