/**
 * KET-IA VIEW - Estilos Específicos para Videos Responsivos
 * Optimización adicional para garantizar adaptación en móviles
 */

/* Clase base para videos responsivos */
.responsive-video {
    position: relative !important;
    width: 100% !important;
    background: #2a2a2a !important;
    overflow: hidden !important;
}

/* Desktop y tablets grandes */
@media screen and (min-width: 1025px) {
    .responsive-video {
        padding-bottom: 56.25% !important;
        height: auto !important;
    }
}

/* Tablets en portrait */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .responsive-video {
        padding-bottom: 56.25% !important;
        height: auto !important;
    }
}

/* Tablets en landscape */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .responsive-video {
        padding-bottom: 0 !important;
        height: 60vh !important;
        max-height: 600px !important;
    }
}

/* Móviles en portrait */
@media screen and (max-width: 767px) and (orientation: portrait) {
    .responsive-video {
        padding-bottom: 56.25% !important;
        height: auto !important;
    }
}

/* Móviles en landscape - CRÍTICO */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .responsive-video {
        padding-bottom: 0 !important;
        height: 85vh !important;
        max-height: none !important;
        min-height: 280px !important;
    }
    
    .hole-item {
        padding: 15px !important;
    }
    
    .hole-header {
        margin-bottom: 8px !important;
    }
    
    .hole-description {
        font-size: 0.85rem !important;
        margin-top: 10px !important;
    }
    
    .modal-content {
        padding: 50px 15px 15px !important;
        max-height: 98vh !important;
    }
}

/* Móviles muy pequeños en landscape (altura < 400px) */
@media screen and (max-width: 767px) and (orientation: landscape) and (max-height: 400px) {
    .responsive-video {
        height: 90vh !important;
        min-height: 250px !important;
    }
    
    .course-detail-header {
        margin-bottom: 15px !important;
    }
    
    .course-detail-header h2 {
        font-size: 1.5rem !important;
        margin-bottom: 5px !important;
    }
    
    .course-detail-header p {
        font-size: 0.9rem !important;
    }
}

/* Móviles medianos en landscape (400-500px altura) */
@media screen and (max-width: 767px) and (orientation: landscape) and (min-height: 401px) and (max-height: 500px) {
    .responsive-video {
        height: 85vh !important;
    }
}

/* Móviles grandes en landscape (> 500px altura) */
@media screen and (max-width: 767px) and (orientation: landscape) and (min-height: 501px) {
    .responsive-video {
        height: 75vh !important;
    }
}

/* iPhone específico en landscape */
@media screen and (max-width: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    .responsive-video {
        height: 80vh !important;
    }
}

@media screen and (max-width: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    .responsive-video {
        height: 82vh !important;
    }
}

/* Android específico en landscape */
@media screen and (max-width: 767px) and (orientation: landscape) and (min-resolution: 2dppx) {
    .responsive-video {
        height: 85vh !important;
    }
}

/* iframes dentro de responsive-video - asegurar 100% cobertura */
.responsive-video iframe,
.responsive-video video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    object-fit: cover !important;
}

/* Optimización para scroll en modal cuando hay video grande */
@media screen and (orientation: landscape) and (max-height: 600px) {
    .modal-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .holes-grid {
        gap: 25px !important;
    }
}

/* Video wrapper ajustes en landscape */
@media screen and (orientation: landscape) and (max-width: 900px) {
    .video-wrapper {
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    
    .video-caption {
        padding: 12px !important;
        font-size: 0.9rem !important;
    }
}

/* Prevenir overflow en body cuando modal está abierto en landscape */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Estilos específicos para cuando el video está cargando */
.responsive-video.loading {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
}

.responsive-video.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(210, 167, 59, 0.3);
    border-top-color: #d2a73b;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Ajustes finales para garantizar que el video use todo el espacio disponible en landscape */
@media screen and (orientation: landscape) and (max-width: 900px) {
    .responsive-video {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Botón de pantalla completa personalizado */
.fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    color: #d2a73b;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    transform: scale(1.05);
}

.fullscreen-btn:active {
    transform: scale(0.95);
}

/* Ocultar en desktop */
@media screen and (min-width: 1025px) {
    .fullscreen-btn {
        display: none;
    }
}

/* Contenedor de video con botón */
.video-container-with-controls {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Mensaje de rotación eliminado - No es necesario, es intuitivo */

/* Estilos para cuando el contenedor está en pantalla completa */
.responsive-video:fullscreen,
.responsive-video:-webkit-full-screen,
.responsive-video:-moz-full-screen,
.responsive-video:-ms-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
}

.responsive-video:fullscreen iframe,
.responsive-video:-webkit-full-screen iframe,
.responsive-video:-moz-full-screen iframe,
.responsive-video:-ms-fullscreen iframe {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    object-fit: cover !important;
    transform: none !important;
}



/* Ajustar botón en fullscreen */
.responsive-video:fullscreen .fullscreen-btn,
.responsive-video:-webkit-full-screen .fullscreen-btn,
.responsive-video:-moz-full-screen .fullscreen-btn,
.responsive-video:-ms-fullscreen .fullscreen-btn {
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    padding: 15px 20px;
}

/* Forzar video a pantalla completa en landscape */
@media screen and (orientation: landscape) {
    .responsive-video:fullscreen,
    .responsive-video:-webkit-full-screen,
    .responsive-video:-moz-full-screen,
    .responsive-video:-ms-fullscreen {
        width: 100vw !important;
        height: 100vh !important;
    }
    
    .responsive-video:fullscreen iframe,
    .responsive-video:-webkit-full-screen iframe,
    .responsive-video:-moz-full-screen iframe,
    .responsive-video:-ms-fullscreen iframe {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
    }
}

/* Forzar video a pantalla completa en portrait */
@media screen and (orientation: portrait) {
    .responsive-video:fullscreen,
    .responsive-video:-webkit-full-screen,
    .responsive-video:-moz-full-screen,
    .responsive-video:-ms-fullscreen {
        width: 100vw !important;
        height: 100vh !important;
    }
    
    .responsive-video:fullscreen iframe,
    .responsive-video:-webkit-full-screen iframe,
    .responsive-video:-moz-full-screen iframe,
    .responsive-video:-ms-fullscreen iframe {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
    }
}