/**
 * Fix pour les images floues sur les pages catégorie/blog
 * DTAH Construires Theme
 */

/* Fix pour les images des cartes d'articles */
.article-card .card-image {
    height: 220px;
    overflow: hidden;
    background: #f0f0f0;
    position: relative;
}

.article-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Amélioration de la netteté */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Transition pour effet hover */
    transition: transform 0.3s ease;
}

/* Hover effect pour les images */
.article-card:hover .card-image img {
    transform: scale(1.05);
}

/* Pour les images de mauvaise qualité, on applique un filtre */
.article-card .card-image img[width],
.article-card .card-image img[height] {
    /* Désactiver les attributs width/height qui peuvent causer du flou */
    width: 100% !important;
    height: 100% !important;
}

/* Optimisation pour les thumbnails WordPress */
.article-card img.attachment-blog-thumb,
.article-card img.size-blog-thumb {
    /* Force la taille correcte */
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Fallback pour les images manquantes ou trop petites */
.article-card .card-image:not(:has(img)),
.article-card .card-image img[src=""] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-card .card-image:not(:has(img))::after,
.article-card .card-image img[src=""]::after {
    content: "📷";
    font-size: 3rem;
    opacity: 0.3;
    color: white;
}

/* Amélioration de la qualité d'affichage */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 2dppx) {
    .article-card .card-image img {
        image-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Responsive - adapter la hauteur selon l'écran */
@media (max-width: 768px) {
    .article-card .card-image {
        height: 180px;
    }
}

@media (min-width: 1200px) {
    .article-card .card-image {
        height: 250px;
    }
}

/* Fix pour éviter le lazy loading qui peut causer du flou */
.article-card .card-image img.lazyload,
.article-card .card-image img.lazyloading {
    filter: blur(5px);
    transition: filter 0.3s;
}

.article-card .card-image img.lazyloaded {
    filter: blur(0);
}

/* Forcer le chargement immédiat des images visibles */
.article-card:nth-child(-n+6) .card-image img {
    loading: eager !important;
}