/**
 * Image Optimization & Modern CSS Enhancements
 * 
 * Critical image styles for responsive images, lazy loading,
 * and modern performance attributes throughout the theme.
 */

/* =============================================================================
   Global Image Optimizations
   ============================================================================= */

/* Baseline responsive image styling */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Modern image containment for performance */
.img-fluid,
.responsive-image,
img[srcset] {
    contain: layout style paint;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Lazy loading states - Browser native lazy loading */
img[loading="lazy"] {
    opacity: 1; /* Let browser handle lazy loading natively */
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img.lazy-loaded {
    opacity: 1;
}

/* Critical images (above fold) */
img[fetchpriority="high"],
.hero-image,
.critical-image {
    object-fit: contain;
    image-rendering: crisp-edges;
}

/* =============================================================================
   Responsive Image Helpers
   ============================================================================= */

/* Aspect ratio containers for consistent sizing */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* Image containers with proper sizing */
.image-container {
    position: relative;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =============================================================================
   Modern Image Format Support
   ============================================================================= */

/* WebP support detection and fallbacks */
.webp .bg-image {
    background-image: url('data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==');
}

.no-webp .bg-image {
    background-image: url('fallback.jpg');
}

/* AVIF support for ultra-modern browsers */
@supports (background-image: url('data:image/avif;base64,')) {
    .avif-supported {
        /* AVIF backgrounds would go here */
    }
}

/* =============================================================================
   Theme-Specific Image Optimizations
   ============================================================================= */

/* Hero Images - Enhanced */
.section-black-hero .hero-image,
.section-home-hero .hero-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Footer Logos - Optimized */
.footer_logos img {
    max-width: 150px;
    height: auto;
    filter: grayscale(1);
    transition: filter 0.3s ease;
    object-fit: contain;
}

.footer_logos a:hover img {
    filter: none;
}

/* Review Band Images */
.section-review-band .review-rating img {
    width: auto;
    max-width: 43px;
    height: auto;
    object-fit: contain;
}

.section-review-band .review-img img {
    width: auto;
    max-width: 107px;
    height: auto;
    object-fit: contain;
}

/* Icon Images */
img.icon-image,
.icon-list-entry img {
    width: auto;
    height: auto;
    max-width: 75px;
    object-fit: contain;
    image-rendering: crisp-edges;
}

/* Three Column Band Icons */
.three-column-icon-and-text-band .band-columns img {
    margin-bottom: 19px;
    max-height: 66px;
    width: auto;
    object-fit: contain;
}

/* =============================================================================
   Performance Optimizations
   ============================================================================= */

/* Prevent layout shift with explicit dimensions */
.prevent-cls {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

/* Optimize carousel images */
.owl-carousel img,
.flickity-slider img {
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Image galleries */
.gallery img {
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.02);
}

/* =============================================================================
   Responsive Breakpoints for Images
   ============================================================================= */

@media (max-width: 576px) {
    /* Mobile optimization */
    .hero-image {
        max-height: 300px;
        object-fit: cover;
    }
    
    .footer_logos img {
        max-width: 100px;
    }
    
    .icon-image {
        max-width: 50px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    /* Tablet optimization */
    .hero-image {
        max-height: 400px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Desktop small optimization */
    .hero-image {
        max-height: 500px;
    }
}

@media (min-width: 1025px) {
    /* Desktop large optimization */
    .hero-image {
        max-height: 600px;
    }
    
    .three-column-icon-and-text-band .band-columns img {
        max-height: 80px;
    }
}

/* =============================================================================
   Print Styles for Images
   ============================================================================= */

@media print {
    img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        page-break-inside: avoid;
    }
    
    .hero-image,
    .background-image {
        display: none;
    }
}

/* =============================================================================
   Accessibility Enhancements
   ============================================================================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
    img {
        filter: contrast(1.2);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    img {
        transition: none !important;
        animation: none !important;
    }
    
    .gallery img:hover {
        transform: none;
    }
}

/* Dark mode image adjustments */
@media (prefers-color-scheme: dark) {
    .footer_logos img {
        filter: grayscale(1) brightness(0.8);
    }
    
    .footer_logos a:hover img {
        filter: none;
    }
}