/* Lazy Loading Styles - optymalizacja wydajności */

/* Placeholder dla ładowanych obrazów */
.lazy-loading {
    background-color: #f3f4f6;
    background-image: 
        linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.5) 25%),
        linear-gradient(-45deg, transparent 25%, rgba(255,255,255,0.5) 25%),
        linear-gradient(45deg, rgba(255,255,255,0.5) 75%, transparent 75%),
        linear-gradient(-45deg, rgba(255,255,255,0.5) 75%, transparent 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: lazy-loading-shimmer 1.5s infinite;
    transition: opacity 0.3s ease;
}

/* Animacja shimmer dla placeholder */
@keyframes lazy-loading-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Załadowany obraz */
.lazy-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Błąd ładowania */
.lazy-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #991b1b;
    font-size: 0.875rem;
}

/* Optymalizacja dla reklam */
.ads img {
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

.ads img.lazy-loading {
    min-height: 200px; /* Minimalna wysokość dla banerów */
}

/* Optymalizacja dla banerów */
.banner img,
.advertisement img {
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

.banner img.lazy-loading,
.advertisement img.lazy-loading {
    min-height: 150px;
}

/* Responsywność */
@media (max-width: 768px) {
    .ads img.lazy-loading {
        min-height: 150px;
    }
    
    .banner img.lazy-loading,
    .advertisement img.lazy-loading {
        min-height: 100px;
    }
}

/* Ukryj obrazy podczas ładowania na bardzo małych ekranach */
@media (max-width: 480px) {
    .lazy-loading {
        opacity: 0.7;
    }
}

/* Optymalizacja dla obrazów w galerii */
.thumbnail img.lazy-loading {
    min-height: 80px;
    background-color: #f9fafb;
}

/* Optymalizacja dla obrazów artykułów */
.article img.lazy-loading {
    min-height: 200px;
    background-color: #f8fafc;
}

/* Smooth transition dla wszystkich lazy loaded obrazów */
img[loading="lazy"] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

img[loading="lazy"].lazy-loaded {
    opacity: 1;
    transform: scale(1);
}