/* --- СТИЛИ ДЛЯ МОДУЛЯ СПИСКА ВИДЕО --- */
.videolist-wrapper {
    margin: 10px -30px 40px -30px; /* Сильно уменьшили верхний внешний отступ */
    padding: 20px 30px 40px 30px; /* Уменьшили верхний внутренний отступ */
    position: relative; 
    overflow: hidden;
    border-radius: 0 !important; 
}

/* Заголовок всего блока */
.vl-main-title {
    margin-top: 0; 
    margin-bottom: 30px; 
    color: #fff !important; 
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    padding-bottom: 10px;
    position: relative;
    z-index: 2;
}

/* В обычном режиме заголовок акцентный */
.vl-default-mode .vl-main-title {
    color: var(--main-color) !important;
    border-bottom: 1px solid #ddd !important;
}

/* Интерактивная подсветка ("Фонарик" строго за курсором) */
.interactive-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Крупные плотные точки (как соты) */
    background-image: radial-gradient(circle, var(--vl-bl-color, #ffffff) 3px, transparent 3.5px);
    background-size: 8px 8px; 
    
    /* В спокойном состоянии (без мыши) полностью скрыто! */
    opacity: 0; 
    pointer-events: none;
    z-index: 1;
    
    /* МАГИЯ: Используем новые ЛОКАЛЬНЫЕ координаты для точного центрирования */
    -webkit-mask-image: radial-gradient(circle 250px at var(--local-x, 50%) var(--local-y, 50%), black, transparent);
    mask-image: radial-gradient(circle 250px at var(--local-x, 50%) var(--local-y, 50%), black, transparent);
    transition: opacity 0.5s ease;
}

/* Фонарик плавно вспыхивает ТОЛЬКО при наведении мыши */
.interactive-bg:hover::before {
    /* ▼ ЗДЕСЬ МЕНЯТЬ ЯРКОСТЬ ТОЧЕК (Например: 0.15 - тускло, 0.8 - очень ярко) ▼ */
    opacity: 0.25; 
}
@keyframes bg-pulse-vl {
    0% { opacity: 0.1; }
    100% { opacity: 0.4; }
}

/* =======================================================
   УМНАЯ СЕТКА (Выравнивание высоты по математической формуле)
   ======================================================= */
.videolist-flex-grid {
    display: flex; 
    flex-wrap: wrap; 
    gap: 30px; 
    justify-content: center; 
    align-items: flex-start; /* Высоту задаст сам контент */
    position: relative;
    z-index: 2;
}

.vl-item {
    display: flex; 
    flex-direction: column; 
    gap: 0 !important; 
    /* Множитель 35% гарантирует: Горизонтальное(62%) + Вертикальное(19%) = 81% (ВСЕГДА влезут в 1 ряд). Гориз+Гориз = 124% (не влезут) */
    flex: var(--v-ratio, 1.777) 1 calc(var(--v-ratio, 1.777) * 35%);
    max-width: 100%;
    min-width: 0 !important; /* Убрали лимит ширины. Теперь высоты Горизонтального и Вертикального идеально совпадут! */
}

/* --- РЕЖИМ 2 В РЯД --- */
.videolist-flex-grid.two-cols-grid .vl-item {
    flex: 1 1 calc(50% - 15px) !important;
    max-width: 100% !important; /* Разрешаем нечетному горизонтальному занять всю строку */
}

/* Возвращаем вертикальным видео их законные 50% ширины колонки, чтобы они стояли идеально ровно.
   При этом, если вертикальное останется одно, оно займет ровно половину и не растянется на 100%. */
.videolist-flex-grid.two-cols-grid .vl-item.is-vertical,
.videolist-flex-grid.two-cols-grid .vl-item.is-vertical-iframe {
    max-width: calc(50% - 15px) !important; 
}
@media (max-width: 768px) {
    .videolist-flex-grid.two-cols-grid .vl-item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* Страховка: если вертикальное видео всего одно, не даем ему стать гигантским */
.vl-item.is-vertical:only-child {
    max-width: 450px;
    margin: 0 auto;
}

/* Базовые пропорции (чтобы видео никогда не исчезали до загрузки JS) */
.vl-item.is-horizontal .vl-video-frame { aspect-ratio: 16 / 9; }
.vl-item.is-vertical .vl-video-frame { aspect-ratio: 9 / 16; }

/* =======================================================
   ЯВНОЕ УКАЗАНИЕ ВЕРТИКАЛЬНОГО ВИДЕО IFRAME
   Работает по галочке из админки. Полностью блокирует
   горизонтальную авто-математику скриптов.
   ======================================================= */
.vl-item.is-vertical-iframe {
    --v-ratio: 0.5625 !important;
    flex: 0.5625 1 calc(0.5625 * 35%) !important;
    max-width: 400px !important; /* Страховка: не даем стать гигантским, если оно одно в строке */
    margin: 0 auto; /* По центру, если осталось одно */
}
.vl-item.is-vertical-iframe .vl-video-frame {
    aspect-ratio: 9 / 16 !important;
}

/* Название */
.vl-item-title {
    margin: 0 !important; 
    padding: 12px 20px 2px 20px !important; /* Прижимаем текст снизу к описанию */
    font-size: 24px !important; 
    line-height: 1.3 !important; 
    font-weight: 300 !important; 
    background-color: var(--main-color); 
    color: #ffffff !important; 
    border: none !important; /* ЖЕСТКО УБИВАЕМ БЕЛУЮ ЛИНИЮ */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0 !important; 
    position: relative;
    z-index: 3;
}

/* Описание (Подложка) */
.vl-info {
    background-color: rgba(0, 0, 0, 0.4) !important; 
    padding: 0 20px 12px 20px !important; /* Прижимаем текст сверху к заголовку */
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important; 
    border: none !important; /* ЖЕСТКО УБИВАЕМ ЛИНИЮ */
    border-radius: 0 !important; 
    position: relative;
    z-index: 3;
}

/* Текст описания */
.vl-item-desc {
    margin: 0 !important; 
    font-size: 20px !important; /* ДЕЛАЕМ КРУПНЕЕ, КАК ТЕКСТ НА САЙТЕ */
    line-height: 1.4 !important; 
    font-weight: 300 !important; 
    color: rgba(255, 255, 255, 0.6) !important; /* Полупрозрачный, чтобы отличался от заголовка */
}

/* --- Цвета для Обычного режима --- */
.vl-default-mode .vl-info {
    background-color: transparent !important; /* Убрали серый фон */
    border: none !important; /* УБРАЛИ БОКОВЫЕ ЛИНИИ */
}
.vl-default-mode .vl-item-desc {
    color: #444 !important; 
}

/* --- АНИМИРОВАННАЯ БЕГУЩАЯ РАМКА --- */
.vl-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; 
    background: #080808 !important; 
    border: 2px solid var(--main-color) !important; /* Внешняя акцентная обводка */
    border-radius: 0 !important; 
    overflow: hidden;
    box-sizing: border-box !important;
}

/* Бегающие линии внутри обводки */
.vl-video-frame::before {
    content: '';
    position: absolute;
    top: -100%; left: -100%; width: 300%; height: 300%;
    background: conic-gradient(
        from 225deg, 
        transparent 0%, rgba(255,255,255,0.9) 10%, transparent 20%, 
        transparent 50%, rgba(255,255,255,0.9) 60%, transparent 70%
    );
    animation: border-spin 4s linear infinite;
    opacity: 1 !important; 
    z-index: 1;
    pointer-events: none;
}

/* Тёмная сердцевина (оставляет ровно 2px зазора для анимации) */
.vl-video-frame::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background-color: #080808;
    z-index: 2;
    pointer-events: none;
}

@keyframes border-spin {
    100% { transform: rotate(360deg); }
}

/* Добавляем базовую плавность анимации для рамки видео */
.vl-video-frame {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* При наведении слегка приподнимаем карточку видео */
.vl-item:hover .vl-video-frame {
    transform: translateY(-3px);
}

/* Внутренние блоки (Видео ложится строго поверх сердцевины) */
.vl-video-frame .custom-vcard, 
.vl-video-frame .videolist-iframe-box {
    position: absolute !important; 
    top: 2px; left: 2px; 
    width: calc(100% - 4px) !important; 
    height: calc(100% - 4px) !important;
    z-index: 3;
    background: #080808; 
    border-radius: 0 !important; 
    display: block;
    margin: 0 !important;
}

/* --- ФИКС СКРУГЛЕНИЙ ДЛЯ KINESCOPE --- */
.videolist-iframe-box {
    overflow: hidden !important;
}
.videolist-iframe-box iframe {
    width: 102% !important; /* По ширине прячем углы */
    height: 100% !important; /* ВОЗВРАЩАЕМ 100%, чтобы кнопки плеера не обрезались! */
    margin-top: 0 !important; /* Убираем сдвиг вверх */
    margin-left: -1%;
    border: none; 
    display: block;
    transform: none !important; /* Убиваем scale, который выталкивал панель за края */
}

/* Локальные видео */
.vl-video-frame .custom-vcard {
    min-height: 0 !important; 
    aspect-ratio: auto !important; 
    box-shadow: none !important; 
}
.vl-video-frame .custom-vcard-player, 
.vl-video-frame .custom-vcard-bg {
    position: absolute !important; 
    top: 0; left: 0; 
    width: 100% !important; height: 100% !important;
}
.vl-video-frame .native-vcard-video {
    position: absolute !important; 
    top: 0; left: 0; 
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; 
    background: transparent !important; 
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .videolist-wrapper { 
        margin: 30px -15px; 
        padding: 25px 15px; 
        border-radius: 0; 
    }
    .vl-item { flex: 1 1 100% !important; max-width: 100% !important; }
}

/* --- ОБЫЧНЫЙ РЕЖИМ (Сброс плашек, линии остаются) --- */
.vl-default-mode .vl-item-title {
    background-color: transparent !important;
    color: var(--main-color) !important; /* Акцентный цвет заголовка */
    padding: 0 0 4px 0 !important; /* Прижимаем к описанию */
    margin: 0 !important;
    border: none !important; /* ЖЕСТКО УБИВАЕМ СЕРУЮ ЛИНИЮ */
    border-radius: 0 !important;
}
.vl-default-mode .vl-info {
    background-color: transparent !important;
    padding: 0 0 12px 0 !important; /* Прижимаем к заголовку */
    margin: 0 !important;
    border: none !important; /* ЖЕСТКО УБИВАЕМ СЕРУЮ ЛИНИЮ */
    border-radius: 0 !important;
}
.vl-default-mode .vl-item-desc {
    color: rgba(0, 0, 0, 0.5) !important; /* Полупрозрачный темный цвет для отличия от заголовка */
}

/* --- МОБИЛЬНАЯ ИНВЕРСНАЯ ТЕМА (ФОН И КРОШКИ) --- */
@media (max-width: 1000px) {
    /* Жестко задаем темный фон вместо серого для всего сайта на смартфонах */
    body.inverse-site {
        background-color: var(--inv-bg-solid, #141414) !important;
        background-image: none !important;
    }
    /* Убираем белый фон контейнера */
    body.inverse-site main.container {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    /* Заменяем белое растворение крошек на темное */
    body.inverse-site .breadcrumbs::after {
        background: linear-gradient(to right, rgba(0,0,0,0), var(--inv-bg-solid, #141414)) !important;
    }
}