/* Image Optimization CSS */

/* Lazy loading for images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

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

/* Responsive images */
.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
}

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

.image-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Specific aspect ratios */
.aspect-ratio-1-1::before {
    padding-top: 100%; /* 1:1 */
}

.aspect-ratio-4-3::before {
    padding-top: 75%; /* 4:3 */
}

.aspect-ratio-3-2::before {
    padding-top: 66.67%; /* 3:2 */
}

/* WebP support detection */
.webp .fallback-image {
    display: none;
}

.no-webp .webp-image {
    display: none;
}

/* Image placeholder while loading */
.image-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Optimize images for different screen sizes */
@media (max-width: 768px) {
    .mobile-optimized {
        max-width: 100vw;
        width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tablet-optimized {
        max-width: 50vw;
    }
}

@media (min-width: 1025px) {
    .desktop-optimized {
        max-width: 33vw;
    }
}