/* CSS per lazy loading - CSP compliant */
.img-hover-zoom {
    overflow: hidden !important;
    height: auto !important;
    position: relative;
    width: 100%;
}

/* Stato iniziale: placeholder bloccato con dimensione fissa */
img.preview.lazy-load {
    filter: blur(2px) !important;
    transition: filter 0.4s ease, opacity 0.2s ease !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 200px !important;
    /* Dimensione fissa per evitare layout shift */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    background-color: #f5f5f5;
}

/* Stato intermedio durante il caricamento */
img.preview.lazy-load.loading {
    filter: blur(1px) !important;
    opacity: 0.8 !important;
    height: 200px !important;
    /* Mantiene la dimensione fissa */
    object-fit: cover !important;
}

/* Stato finale: immagine caricata completamente */
img.preview.lazy-loaded {
    filter: blur(0) !important;
    opacity: 1 !important;
    height: auto !important;
    /* Solo ora permette dimensione auto */
    min-height: 200px !important;
    max-height: none !important;
    object-fit: contain !important;
    transition: all 0.3s ease !important;
}

/* Mobile specific adjustments */
@media screen and (max-width: 768px) {
    img.preview.lazy-load {
        height: 160px !important;
    }

    img.preview.lazy-load.loading {
        height: 160px !important;
    }

    img.preview.lazy-loaded {
        min-height: 160px !important;
    }
}