/* ===== Responsive Image System ===== */

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

/* Hero image optimization */
.hero-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Product images optimization */
.main-image {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

.thumbnail {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: cover;
}

/* Blog images optimization */
.blog-image img {
    max-width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
}

/* Service images optimization */
.service-image img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
}

/* Featured product images */
.featured-product-image img {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}

/* Related product images */
.related-product-image img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .main-image {
        max-height: 300px;
    }
    
    .blog-image img {
        max-height: 200px;
    }
    
    .service-image img {
        max-height: 250px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-img,
    .main-image,
    .blog-image img,
    .service-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print optimizations */
@media print {
    .hero-img,
    .main-image,
    .blog-image img,
    .service-image img {
        max-height: 200px;
        page-break-inside: avoid;
    }
}

/* Image compression and optimization */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: bicubic;
}

/* Reduce image quality for faster loading */
.hero-img,
.main-image,
.blog-image img,
.service-image img,
.featured-product-image img,
.related-product-image img {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

/* Lazy loading placeholder optimization */
.lazy-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    min-height: 200px;
}

/* Mobile image optimization */
@media (max-width: 480px) {
    .main-image {
        max-height: 250px;
    }
    
    .blog-image img {
        max-height: 150px;
    }
    
    .service-image img {
        max-height: 200px;
    }
    
    .featured-product-image img {
        max-height: 120px;
    }
    
    .related-product-image img {
        max-height: 100px;
    }
}