/* Earthian Website - Responsive Image Optimization */

/* Responsive Background Images */
@media (max-width: 768px) {
    .ftco-cover-1[style*="images/optimized/large/"] {
        background-image: url('images/optimized/medium/IMG_1450.jpg') !important;
    }
    
    .ftco-cover-1[style*="IMG_1450"] {
        background-image: url('images/optimized/medium/IMG_1450.jpg') !important;
    }
    
    .ftco-cover-1[style*="bhingari01"] {
        background-image: url('images/optimized/medium/bhingari01.jpg') !important;
    }
    
    .ftco-cover-1[style*="group-photo"] {
        background-image: url('images/optimized/medium/group-photo.jpg') !important;
    }
}

@media (max-width: 480px) {
    .ftco-cover-1[style*="images/optimized/large/"] {
        background-image: url('images/optimized/thumbs/IMG_1450.jpg') !important;
    }
    
    .ftco-cover-1[style*="IMG_1450"] {
        background-image: url('images/optimized/thumbs/IMG_1450.jpg') !important;
    }
    
    .ftco-cover-1[style*="bhingari01"] {
        background-image: url('images/optimized/thumbs/bhingari01.jpg') !important;
    }
    
    .ftco-cover-1[style*="group-photo"] {
        background-image: url('images/optimized/thumbs/group-photo.jpg') !important;
    }
}

/* Background Images for Other Pages */
@media (max-width: 768px) {
    .donate[style*="wall2.jpg"] {
        background-image: url('images/backgrounds/optimized/medium/wall2.jpg') !important;
    }
    
    .site-section[style*="wall6.jpg"] {
        background-image: url('images/backgrounds/optimized/medium/wall6.jpg') !important;
    }
    
    .ftco-cover-1[style*="about-us-back.jpg"] {
        background-image: url('images/optimized/medium/about-us-back.jpg') !important;
    }
}

@media (max-width: 480px) {
    .donate[style*="wall2.jpg"] {
        background-image: url('images/backgrounds/optimized/thumbs/wall2.jpg') !important;
    }
    
    .site-section[style*="wall6.jpg"] {
        background-image: url('images/backgrounds/optimized/thumbs/wall6.jpg') !important;
    }
    
    .ftco-cover-1[style*="about-us-back.jpg"] {
        background-image: url('images/optimized/thumbs/about-us-back.jpg') !important;
    }
}

/* Image Loading Performance */
img {
    loading: lazy;
}

/* Gallery Optimizations */
.gallery img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

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

/* Team Images */
.team-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Workshop Cards */
.workshop-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* Collaborator Images */
.collaborator-logo {
    width: 100%;
    height: 120px;
    object-fit: contain;
    padding: 10px;
}

/* Performance Hints */
.hero-section,
.ftco-cover-1 {
    contain: layout style paint;
}

/* Preload Critical Images */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/optimized/large/IMG_1450.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

@media (max-width: 768px) {
    .hero-section::before {
        background-image: url('images/optimized/medium/IMG_1450.jpg');
    }
}

@media (max-width: 480px) {
    .hero-section::before {
        background-image: url('images/optimized/thumbs/IMG_1450.jpg');
    }
}

/* Loading States */
.img-loading {
    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; }
}

/* Print Styles */
@media print {
    .ftco-cover-1 {
        background-image: none !important;
    }
    
    .gallery img {
        max-width: 200px !important;
        height: auto !important;
    }
}