/* Responsive Carousel Images - No Cropping/Zooming */

/* Main improvement: Change object-fit from 'cover' to 'contain' */
.slide-video,
.slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* Changed from 'cover' to 'contain' to prevent cropping */
    object-position: center;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Alternative responsive container approach */
.modern-banner-slider .carousel-item {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff; /* Pure white background instead of gradient */
}

/* Enhanced responsive breakpoints for better image scaling */
.modern-banner-slider {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 500px;
    overflow: hidden;
    background: #ffffff; /* Pure white background instead of gradient */
}

/* Ultra-wide screens */
@media (min-width: 1600px) {
    .modern-banner-slider {
        height: 85vh;
        min-height: 650px;
    }
}

/* Large desktop */
@media (max-width: 1400px) {
    .modern-banner-slider {
        height: 75vh;
        min-height: 550px;
    }
}

/* Desktop */
@media (max-width: 1200px) {
    .modern-banner-slider {
        height: 70vh;
        min-height: 500px;
    }
}

/* Tablet landscape */
@media (max-width: 992px) {
    .modern-banner-slider {
        height: 65vh;
        min-height: 450px;
    }
    
    /* Ensure images maintain aspect ratio on tablets */
    .slide-video,
    .slide-image {
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
    }
}

/* Tablet portrait */
@media (max-width: 768px) {
    .modern-banner-slider {
        height: 60vh;
        min-height: 400px;
    }
    
    /* Better image fitting for smaller screens */
    .slide-video,
    .slide-image {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
}

/* Mobile landscape */
@media (max-width: 576px) and (orientation: landscape) {
    .modern-banner-slider {
        height: 70vh;
        min-height: 300px;
    }
}

/* Mobile portrait */
@media (max-width: 576px) {
    .modern-banner-slider {
        height: 50vh;
        min-height: 350px;
    }
    
    /* Optimized for mobile screens */
    .slide-video,
    .slide-image {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
}

/* Extra small mobile */
@media (max-width: 375px) {
    .modern-banner-slider {
        height: 45vh;
        min-height: 300px;
    }
}

/* Fallback for browsers that don't support object-fit */
.no-object-fit .slide-video,
.no-object-fit .slide-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Enhanced responsive image handling */
.responsive-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff; /* Pure white background */
}

.responsive-image-wrapper .slide-video,
.responsive-image-wrapper .slide-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
}

/* Smooth transitions for responsive changes */
.slide-video,
.slide-image {
    transition: all 0.3s ease-in-out;
}

/* Improve image loading experience */
.slide-image {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.slide-image.loaded,
.slide-image:not([src=""]) {
    opacity: 1;
}

/* Loading placeholder for images */
.slide-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 1.2rem;
    z-index: 5;
}

/* Aspect ratio containers for better responsive behavior */
.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}

.aspect-ratio-4-3 {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
}

.aspect-ratio-16-9 .slide-video,
.aspect-ratio-16-9 .slide-image,
.aspect-ratio-4-3 .slide-video,
.aspect-ratio-4-3 .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .slide-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark mode considerations - maintaining white background as requested */
@media (prefers-color-scheme: dark) {
    .modern-banner-slider .carousel-item {
        background: #ffffff; /* Keep white background even in dark mode */
    }
}

/* Print styles */
@media print {
    .modern-banner-slider {
        height: auto;
        min-height: auto;
        page-break-inside: avoid;
    }
    
    .slide-video {
        display: none; /* Hide videos in print */
    }
    
    .slide-image {
        position: static;
        width: 100%;
        height: auto;
        object-fit: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .slide-overlay {
        opacity: 0.3; /* Reduce overlay opacity for better contrast */
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .slide-video,
    .slide-image {
        transition: none;
    }
}

/* Container query support (future-proofing) */
@supports (container-type: inline-size) {
    .modern-banner-slider {
        container-type: inline-size;
    }
    
    @container (max-width: 768px) {
        .slide-video,
        .slide-image {
            object-fit: contain;
        }
    }
}