/**
 * Video Player Size Fix
 * Critical CSS to prevent video player from being oversized
 */

/* ===== CRITICAL VIDEO PLAYER SIZE CONSTRAINTS ===== */

/* Main container constraints */
.jwplayer-container,
[data-jwplayer-container],
[data-enhanced-player] {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    aspect-ratio: 16/9 !important;
    background: #000 !important;
    overflow: hidden !important;
}

/* Aspect video utility override */
.aspect-video {
    aspect-ratio: 16/9 !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}

/* JWPlayer instance constraints */
div[id^="jwplayer-"] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16/9 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* JWPlayer wrapper */
.jwplayer {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
}

/* JWPlayer media elements */
.jwplayer .jw-media,
.jwplayer .jw-video,
div[id^="jwplayer-"] video,
div[id^="jwplayer-"] iframe {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border: none !important;
}

/* ===== RESPONSIVE CONSTRAINTS ===== */

/* Large screens */
@media (min-width: 1200px) {
    .jwplayer-container,
    [data-jwplayer-container],
    [data-enhanced-player],
    .aspect-video,
    div[id^="jwplayer-"],
    .jwplayer {
        max-height: 70vh !important;
    }
}

/* Desktop */
@media (max-width: 1199px) and (min-width: 1025px) {
    .jwplayer-container,
    [data-jwplayer-container],
    [data-enhanced-player],
    .aspect-video,
    div[id^="jwplayer-"],
    .jwplayer {
        max-height: 65vh !important;
    }
}

/* Tablets */
@media (max-width: 1024px) and (min-width: 769px) {
    .jwplayer-container,
    [data-jwplayer-container],
    [data-enhanced-player],
    .aspect-video,
    div[id^="jwplayer-"],
    .jwplayer {
        max-height: 60vh !important;
    }
}

/* Small tablets */
@media (max-width: 768px) and (min-width: 641px) {
    .jwplayer-container,
    [data-jwplayer-container],
    [data-enhanced-player],
    .aspect-video,
    div[id^="jwplayer-"],
    .jwplayer {
        max-height: 50vh !important;
    }
}

/* Mobile */
@media (max-width: 640px) and (min-width: 481px) {
    .jwplayer-container,
    [data-jwplayer-container],
    [data-enhanced-player],
    .aspect-video,
    div[id^="jwplayer-"],
    .jwplayer {
        max-height: 40vh !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .jwplayer-container,
    [data-jwplayer-container],
    [data-enhanced-player],
    .aspect-video,
    div[id^="jwplayer-"],
    .jwplayer {
        max-height: 35vh !important;
    }
}

/* ===== FULLSCREEN MODE ===== */
/* Remove constraints when in fullscreen */
.jwplayer-container:fullscreen,
.jwplayer-container:-webkit-full-screen,
.jwplayer-container:-moz-full-screen,
.jwplayer-container:-ms-fullscreen,
[data-jwplayer-container]:fullscreen,
[data-jwplayer-container]:-webkit-full-screen,
[data-jwplayer-container]:-moz-full-screen,
[data-jwplayer-container]:-ms-fullscreen {
    max-height: 100vh !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: unset !important;
}

.jwplayer-container:fullscreen div[id^="jwplayer-"],
.jwplayer-container:-webkit-full-screen div[id^="jwplayer-"],
.jwplayer-container:-moz-full-screen div[id^="jwplayer-"],
.jwplayer-container:-ms-fullscreen div[id^="jwplayer-"],
[data-jwplayer-container]:fullscreen div[id^="jwplayer-"],
[data-jwplayer-container]:-webkit-full-screen div[id^="jwplayer-"],
[data-jwplayer-container]:-moz-full-screen div[id^="jwplayer-"],
[data-jwplayer-container]:-ms-fullscreen div[id^="jwplayer-"] {
    max-height: 100vh !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: unset !important;
}

/* ===== IFRAME SPECIFIC FIXES ===== */
/* For embed/iframe players */
iframe[src*="embed"],
iframe[src*="player"],
iframe[src*="stream"] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border: none !important;
    object-fit: contain !important;
}

/* ===== CONTAINER PARENT CONSTRAINTS ===== */
/* Ensure parent containers don't allow overflow */
.bg-theme-secondary,
.rounded-xl {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Grid column constraints */
.lg\\:col-span-2 {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ===== DEBUG STYLES (Remove in production) ===== */
.debug-video-size .jwplayer-container {
    border: 3px solid red !important;
}

.debug-video-size div[id^="jwplayer-"] {
    border: 3px solid blue !important;
}

.debug-video-size .jwplayer {
    border: 3px solid green !important;
}

/* ===== LOADING OVERLAY CONSTRAINTS ===== */
.jwplayer-loading {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* ===== PREVENT SCROLL ISSUES ===== */
/* Ensure video doesn't cause horizontal scroll */
body {
    overflow-x: hidden !important;
}

.jwplayer-container,
[data-jwplayer-container],
[data-enhanced-player] {
    box-sizing: border-box !important;
}

/* ===== ASPECT RATIO FALLBACK ===== */
/* For browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 16/9) {
    .jwplayer-container::before,
    [data-jwplayer-container]::before,
    [data-enhanced-player]::before,
    .aspect-video::before {
        content: '';
        display: block;
        padding-top: 56.25%; /* 16:9 aspect ratio */
    }
    
    .jwplayer-container > *,
    [data-jwplayer-container] > *,
    [data-enhanced-player] > *,
    .aspect-video > * {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}