/* Styles for lazy loading images */

/* Base styles for lazy loaded images */
img[loading="lazy"], img.lozad {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f0f0f0;
    min-height: 50px; /* Minimal height to prevent layout shift */
    max-width: 100%; /* Responsive but preserve proportions */
    height: auto; /* Maintain aspect ratio */
}

/* Loading state */
img[loading="lazy"].loading, img.lozad.loading {
    opacity: 0.3;
    background-color: #f5f5f5;
}

/* Loaded image state */
img[loading="lazy"].loaded, img.lozad.loaded, img.lozad--loaded {
    opacity: 1;
}

/* Loading error state */
img[loading="lazy"].error, img.lozad.error {
    opacity: 0.5;
    background-color: #ffeaea;
    position: relative;
}

/* Placeholder for loading errors */
img[loading="lazy"].error::after, img.lozad.error::after {
    content: "⚠ Loading error";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

/* Loading animation (optional) */
img[loading="lazy"]:not(.loaded):not(.error), 
img.lozad:not(.loaded):not(.error):not(.lozad--loaded) {
    background-image: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Responsive images - preserve original proportions */
img[loading="lazy"], img.lozad {
    max-width: 100%;
    height: auto;
    /* DO NOT set object-fit to preserve original image proportions */
}

/* Critical images optimization */
img[fetchpriority="high"], img.critical-image {
    font-display: block;
}

/* Optional aspect ratio containers for CLS prevention (use only when needed) */
.aspect-ratio-container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
}

.aspect-ratio-container.ratio-4-3 {
    padding-bottom: 75%;
}

.aspect-ratio-container.ratio-16-9 {
    padding-bottom: 56.25%;
}

.aspect-ratio-container.ratio-original {
    height: auto; /* Preserve original image ratio */
}

.aspect-ratio-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from 'cover' to 'contain' to preserve full image */
}

/* Mobile device enhancements */
@media (max-width: 768px) {
    img[loading="lazy"], img.lozad {
        min-height: 40px; /* Even smaller min-height on mobile to preserve proportions */
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    img[loading="lazy"], img.lozad {
        background-color: #2a2a2a;
    }
    
    img[loading="lazy"].error, img.lozad.error {
        background-color: #3a2a2a;
    }
    
    img[loading="lazy"]:not(.loaded):not(.error),
    img.lozad:not(.loaded):not(.error):not(.lozad--loaded) {
        background-image: linear-gradient(
            90deg,
            #2a2a2a 25%,
            #3a3a3a 50%,
            #2a2a2a 75%
        );
    }
    
    img[loading="lazy"].error::after, img.lozad.error::after {
        color: #ccc;
    }
}