/* RESPONSIVE IMAGES OPTIMIZATION */
/* WebP Support Detection */
.webp .responsive-img {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB2aWV3Qm94PSIwIDAgMSAxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InRyYW5zcGFyZW50Ii8+PC9zdmc+');
}

/* Responsive Image Classes */
.responsive-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.responsive-img.loading {
    opacity: 0.7;
}

.responsive-img.loaded {
    opacity: 1;
}

/* Lazy Loading Enhancement */
img[loading="lazy"] {
    transition: opacity 0.3s ease;
}

img[loading="lazy"]:not([data-loaded]) {
    opacity: 0.7;
}

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

/* Mobile Optimization */
@media (max-width: 768px) {
    .responsive-img {
        max-width: 100%;
        height: auto;
    }
    
    /* Touch-friendly image containers */
    .image-container {
        padding: 10px;
        touch-action: manipulation;
    }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .responsive-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* WebP Fallback */
.no-webp .responsive-img {
    /* Fallback for browsers that don't support WebP */
}

/* Performance Optimization */
.responsive-img {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}