/* Base Container Styles */
.vcs-container {
    width: 100%;
    background: #000;
    position: relative;
    overflow: hidden;
    /* Default Aspect Ratio for Desktop */
    aspect-ratio: 16/9; 
}

.vcs-video-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vcs-video-wrapper video,
.vcs-video-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Ensures video fills the area without stretching */
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE BREAKPOINTS - Industry Standard Best Practices                  */
/* -------------------------------------------------------------------------- */

/* 
 * 1. Large Desktops (No changes needed, defaults apply) 
 */

/* 
 * 2. Laptops and Small Desktops (1024px and down) 
 */
@media only screen and (max-width: 1024px) {
    .vcs-container .swiper-button-next,
    .vcs-container .swiper-button-prev {
        /* Slightly reduce button size for smaller screens */
        width: 40px;
        height: 40px;
    }
    
    .vcs-container .swiper-button-next::after,
    .vcs-container .swiper-button-prev::after {
        font-size: 16px !important; /* Force smaller icon */
    }
}

/* 
 * 3. Tablets (768px and down) 
 */
@media only screen and (max-width: 768px) {
    /* Adjust Aspect Ratio for Tablets if desired (e.g., slightly taller) */
    /* Uncomment below if you want a taller slider on tablets */
    /* .vcs-container { aspect-ratio: 4/3; } */

    .vcs-container .swiper-button-next,
    .vcs-container .swiper-button-prev {
        width: 35px;
        height: 35px;
        background: rgba(0, 0, 0, 0.6); /* Darker background for clarity */
    }

    .vcs-container .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
}

/* 
 * 4. Mobile Phones (480px and down) 
 */
@media only screen and (max-width: 480px) {
    /* Mobile often benefits from a taller aspect ratio or fixed height */
    .vcs-container {
        /* Example: Force a specific height on very small phones to ensure visibility */
        min-height: 250px; 
        aspect-ratio: auto; /* Override 16/9 to prevent it being too short */
        height: 250px;
    }

    /* Navigation buttons on mobile are often intrusive. 
       Options: Hide them (rely on swipe) or shrink them significantly. 
       Here we shrink them to be minimal. */
    .vcs-container .swiper-button-next,
    .vcs-container .swiper-button-prev {
        width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, 0.7);
    }

    .vcs-container .swiper-button-next::after,
    .vcs-container .swiper-button-prev::after {
        font-size: 12px !important;
    }

    /* Pagination Dots - smaller for mobile */
    .vcs-container .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 4px !important; /* Spacing between dots */
    }
}

/* -------------------------------------------------------------------------- */
/* UI POLISH & TOUCH OPTIMIZATION                                             */
/* -------------------------------------------------------------------------- */

/* Swiper Navigation Buttons - Shared Base Styles */
.vcs-container .swiper-button-next,
.vcs-container .swiper-button-prev {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 0; /* Padding is handled by width/height centering */
    border-radius: 50%;
    transition: all 0.3s ease;
    /* Center the icon */
    display: flex;
    align-items: center;
    justify-content: center;
}

.vcs-container .swiper-button-next:hover,
.vcs-container .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Swiper Pagination - Base Styles */
.vcs-container .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.vcs-container .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
}

/* Fix for Touch Devices: Prevent text selection during swipe */
.vcs-container.swiper {
    touch-action: pan-y;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}