/* 
 * CSS para mostrar solo imágenes estáticas de videos (sin reproducción)
 * Para mejorar el rendimiento en todos los dispositivos
 */

/* Estilos base para contenedores de video */
.home-video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Ocultar videos en TODOS los dispositivos */
.home-video-thumbnail .desktop-video {
    display: none !important;
    visibility: hidden !important;
}

/* Mostrar imágenes estáticas en TODOS los dispositivos */
.home-video-thumbnail .mobile-thumbnail {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 8px;
}

/* Estilos para miniaturas de video - mismas dimensiones que imágenes normales */
.video-thumbnail-static {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    /* Asegurar que mantenga la relación de aspecto 3:2 (300x200) */
    aspect-ratio: 3/2 !important;
}

/* Para elementos SVG que contienen las miniaturas */
.item__svg .video-thumbnail-static {
    width: 300px !important;
    height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
}

.home-video-thumbnail .video-thumbnail-static {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

/* Asegurar que la imagen se muestre en todos los dispositivos */
@media (min-width: 769px) {
    .home-video-thumbnail .desktop-video {
        display: none !important;
        visibility: hidden !important;
    }
    
    .home-video-thumbnail .mobile-thumbnail {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Efectos hover para desktop */
    .card-ospl:hover .home-video-thumbnail .mobile-thumbnail {
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }
}

/* Móviles: eliminar transformaciones para mejor rendimiento */
@media (max-width: 768px) {
    .home-video-thumbnail .desktop-video {
        display: none !important;
        visibility: hidden !important;
    }
    
    .home-video-thumbnail .mobile-thumbnail {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Eliminar transformaciones en móviles para mejor rendimiento */
    .home-video-thumbnail .mobile-thumbnail,
    .card-ospl:hover .home-video-thumbnail .mobile-thumbnail {
        transform: none !important;
        transition: none !important;
    }
    
    /* Optimizar para touch en móviles */
    .card-ospl {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    .card-ospl:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Asegurar que el overlay de video funcione en ambos casos */
.home-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.home-video-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-video-play-icon svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease;
}

/* Optimizaciones adicionales para móviles */
@media (max-width: 768px) {
    /* Reducir el tamaño del icono de play en móviles */
    .home-video-play-icon svg {
        width: 45px !important;
        height: 45px !important;
    }
    
    /* Simplificar el overlay en móviles */
    .home-video-overlay {
        background: rgba(0, 0, 0, 0.3);
        transition: none;
    }
    
    /* Eliminar hover effects en móviles */
    .item:hover .home-video-overlay,
    .card-ospl:hover .home-video-overlay {
        background: rgba(0, 0, 0, 0.3);
        transform: none;
    }
    
    .item:hover .home-video-play-icon svg,
    .card-ospl:hover .home-video-play-icon svg {
        transform: none;
    }
}

/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
    .home-video-play-icon svg {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Fallback para casos donde no hay thumbnail disponible */
.home-video-thumbnail .mobile-thumbnail {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.home-video-thumbnail .mobile-thumbnail[src=""],
.home-video-thumbnail .mobile-thumbnail:not([src]),
.home-video-thumbnail .mobile-thumbnail.error {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}

.home-video-thumbnail .mobile-thumbnail[src=""]:after,
.home-video-thumbnail .mobile-thumbnail:not([src]):after,
.home-video-thumbnail .mobile-thumbnail.error:after {
    content: "📹";
    font-size: 2rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}