/**
 * Stream Block Component Styles
 */

.stream-block {
    position: relative;
    background: black;  /* Match legacy */
    border-radius: 0.6vh;  /* Match legacy */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Account for border in sizing */
    box-sizing: border-box;
    /* Ensure smooth transitions during resize */
    transition: width 0.3s ease, height 0.3s ease;
    /* For carousel layout, use the calculated dimensions */
    width: var(--streamblock-width, auto);
    height: var(--streamblock-height, auto);
    /* TIER 3: Advanced stream block optimizations */
    /* SIZE containment is critical for preventing CLS */
    contain: strict; /* Equivalent to: size layout style paint */
    content-visibility: auto;
    contain-intrinsic-size: 33vw 18.5vw;
    /* Remove will-change for width/height to prevent layout thrashing */
    will-change: transform;
    transform: translateZ(0); /* GPU acceleration */
    isolation: isolate; /* Create stacking context for performance */
}

.stream-block-video {
    position: relative;
    background: #000;
    border-radius: 0.3vh;  /* Match other border radii */
    overflow: hidden;
    /* TIER 3: Video container optimizations */
    /* Critical: SIZE containment prevents dimension queries from causing reflows */
    contain: strict; /* size layout style paint */
    /* Set explicit aspect ratio to prevent shifts */
    aspect-ratio: 16/9;
    /* Remove will-change to prevent continuous updates */
    transform: translateZ(0); /* Force GPU layer */
    backface-visibility: hidden; /* Prevent flickering */
}

.stream-block-carousel .stream-block-video {
    width: 100%;
    /* Height will be set via JavaScript for exact 3/5 proportion */
    height: var(--video-height, 60%);  /* Fallback to 60% if JS fails */
    flex-shrink: 0;  /* Don't shrink */
}

/* Carousel-specific monitor sizing */
.stream-block-carousel .stream-block-monitors-top,
.stream-block-carousel .stream-block-monitors-bottom {
    height: var(--scoring-height, 20%);  /* Exact 1/5 height from legacy */
}

/* Ensure video maintains proper aspect ratio within its container */
.stream-block-carousel .stream-block-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Maintain aspect ratio */
}

/* Overlay Layout */
.stream-block-overlay {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.stream-block-overlay .stream-block-video {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
}

.stream-block-overlay .stream-block-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.overlay-monitor {
    position: absolute;
    width: var(--monitor-size, 30%);  /* Better default - matches legacy 2x2/3x3 average */
    aspect-ratio: 16 / 9;
    pointer-events: auto;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0.65;  /* Default opacity to match legacy prototype */
}

.overlay-monitor-top-left {
    top: 0.8vw;
    left: 0.8vw;
}

.overlay-monitor-top-right {
    top: 0.8vw;
    right: 0.8vw;
}

.overlay-monitor-bottom-left {
    bottom: 0.8vw;
    left: 0.8vw;
}

.overlay-monitor-bottom-right {
    bottom: 0.8vw;
    right: 0.8vw;
}

/* Hover effect for overlay monitors */
.stream-block-overlay:hover .overlay-monitor {
    opacity: 1 !important;
}

/* Stream label */
.stream-block-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.stream-block-label-overlay {
    z-index: 10;
}

/* Video player customization */
.stream-block .stream-video {
    width: 100%;
    height: 100%;
    /* Ensure video maintains aspect ratio during resize */
    position: absolute;
    top: 0;
    left: 0;
    /* TIER 3: Video performance optimizations */
    /* SIZE containment prevents dimension queries from causing reflows */
    contain: strict;
    /* Explicitly set aspect ratio */
    aspect-ratio: 16/9;
    /* Remove will-change to prevent continuous updates */
    transform: translateZ(0);
    backface-visibility: hidden;
    /* Show native controls */
    controls: true;
}

/* Ensure video element scales properly */
.stream-block video {
    width: 100%;
    height: 100%;
    object-fit: fill; /* Fill container completely for maximum size */
    /* TIER 3: Video element optimizations */
    /* No will-change to prevent continuous updates */
    transform: translateZ(0); /* GPU acceleration for video */
    backface-visibility: hidden;
    /* Optimize video decoding */
    image-rendering: optimizeSpeed;
    image-rendering: -webkit-optimize-contrast;
    /* Prevent video from triggering layout */
    position: absolute;
    top: 0;
    left: 0;
}

/* Native video controls styling */
.stream-block video::-webkit-media-controls-panel {
    background: rgba(0, 0, 0, 0.7);
}

/* Video error state */
.video-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 5;
}

.video-error i {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 0.5rem;
}

.video-error p {
    font-size: 1rem;
    margin: 0;
}

/* Center color border */
.stream-block {
    border: 0.3vh solid var(--center-color, var(--primary-color));
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .overlay-monitor {
        width: 20%;
    }
    
    .stream-block-label {
        font-size: 0.75rem;
        padding: 0.25rem;
    }
}

/* High resolution display adjustments */
@media (min-width: 2560px) {
    .overlay-monitor {
        /* Slightly smaller percentage on larger screens */
        width: var(--monitor-size, 25%);
    }
}

@media (min-width: 3840px) {
    .overlay-monitor {
        /* Even smaller percentage on 4K+ screens */
        width: var(--monitor-size, 20%);
    }
}

/* Loading animation */
.stream-block-video::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
}

.stream-block.loading .stream-block-video::before {
    opacity: 1;
}

/* Carousel specific sizing */
.layout-carousel .stream-block {
    flex-shrink: 0;
    width: var(--streamblock-width);
    height: var(--streamblock-height);
    /* Ensure grid display for carousel layout - no !important needed */
    display: grid;
}

/* Overlay grid specific sizing - removed to allow JS-calculated sizes */

/* Video controls visibility - auto-hide handled by browser natively */

/* Smooth transitions with performance optimizations */
.stream-block {
    transition: transform 0.3s, box-shadow 0.3s;
    /* PERFORMANCE: Optimize rendering */
    /* No will-change by default to prevent continuous updates */
    transform: translateZ(0); /* Create layer for GPU acceleration */
}

/* Only apply will-change during hover */
.stream-block:hover {
    will-change: transform, box-shadow;
}

.stream-block:hover {
    transform: translate3d(0, -2px, 0); /* Use 3D transform for GPU */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Disable hover effects in carousel layout - inappropriate for this context */
.layout-carousel .stream-block:hover {
    transform: translateZ(0); /* Reset to base transform */
    box-shadow: none;
}

/* TIER 3: Advanced video rendering optimizations */
/* Removed duplicate - already defined above with strict containment */

/* TIER 3: Advanced overlay monitor optimizations */
.overlay-monitor {
    /* Only will-change on hover to prevent continuous updates */
    transform: translateZ(0);
    contain: size layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 30% auto;
    backface-visibility: hidden;
    isolation: isolate;
}

/* Apply will-change only during hover transitions */
.stream-block-overlay:hover .overlay-monitor {
    will-change: opacity, transform;
}

/* PERFORMANCE: Reduce animation overhead on load */
@media (prefers-reduced-motion: no-preference) {
    .stream-block,
    .overlay-monitor {
        animation: fadeIn 0.3s ease-out;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}