/**
 * WooCommerce Product Video Gallery Styles
 * 
 * Responsive styles for video support in product galleries.
 * Mobile-first approach with breakpoints at 320px, 768px, 990px.
 */

@media only screen and (min-width: 320px) {
    
    /* Main gallery video */
    .woo-video-slide .woo-gallery-video-main {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        background: #000;
    }
    
    /* Main video slide wrapper */
    .woo-video-slide {
        position: relative;
        width: 100%;
        background: #000;
    }
    
    /* Thumbnail video wrapper */
    .flex-control-thumbs li .woo-video-thumb-wrapper {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
        cursor: pointer;
    }
    
    /* Thumbnail video element */
    .woo-gallery-video-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
    }
    
    /* Hide default video controls on thumbnails */
    .woo-gallery-video-thumb::-webkit-media-controls,
    .woo-gallery-video-thumb::-webkit-media-controls-panel {
        display: none !important;
    }

    /* Active thumbnail video */
    .flex-control-thumbs li.flex-active .woo-video-thumb-wrapper {
        opacity: 1;
    }
    
    /* Non-active thumbnail videos – match WooCommerce image thumb opacity */
    .flex-control-thumbs li:not(.flex-active) .woo-video-thumb-wrapper {
        opacity: 0.7;
    }
    
    /* Ensure videos don't break out of container */
    .woocommerce-product-gallery__wrapper .woo-gallery-video-main,
    .woocommerce-product-gallery__wrapper .woo-gallery-video-thumb {
        max-width: 100%;
    }
    
}

@media only screen and (min-width: 768px) {
    
    .woo-video-slide {
        aspect-ratio: 1 / 1;
    }

}

@media only screen and (min-width: 990px) {
    
    .flex-control-thumbs li:not(.flex-active) .woo-video-thumb-wrapper:hover {
        opacity: 0.85;
        transition: opacity 0.3s ease;
    }

}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .woo-gallery-video-thumb {
        animation: none !important;
    }
}

/* Focus states for accessibility */
.woo-gallery-video-main:focus,
.woo-video-thumb-wrapper:focus {
    outline: 2px solid var(--blue, #0073aa);
    outline-offset: 2px;
}