/**
 * Fix pour l'affichage des miniatures d'articles
 * Problème : Les miniatures ne s'affichent pas sur la page d'accueil et blog
 * Solution : Forcer l'affichage avec des styles prioritaires
 */

/* ========================================
   FIX PRINCIPAL - FORCER L'AFFICHAGE
   ======================================== */

/* S'assurer que les miniatures sont visibles */
.article-thumbnail,
.post-thumbnail,
.wp-post-image,
.attachment-thumbnail,
.attachment-blog-thumb,
.attachment-medium,
.attachment-large,
img.size-thumbnail,
img.size-medium,
img.size-large {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Container des miniatures dans les articles */
.blog-article .article-thumbnail,
.article-card .article-thumbnail,
.post .post-thumbnail,
.type-post .article-thumbnail {
    display: block !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    position: relative !important;
}

/* Lien contenant la miniature */
a.article-thumbnail,
a.post-thumbnail {
    display: block !important;
    text-decoration: none !important;
    transition: transform 0.3s ease !important;
}

a.article-thumbnail:hover,
a.post-thumbnail:hover {
    transform: scale(1.02) !important;
}

/* Images dans les liens */
.article-thumbnail img,
.post-thumbnail img,
a.article-thumbnail img,
a.post-thumbnail img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    aspect-ratio: 16/9 !important;
}

/* ========================================
   STYLES POUR LA GRILLE D'ARTICLES
   ======================================== */

/* Grille sur la page blog */
.blog-grid,
.articles-grid,
.content-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    margin: 2rem 0 !important;
}

/* Article individuel dans la grille */
.blog-article,
.article-card {
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.blog-article:hover,
.article-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
}

/* ========================================
   FEATURED ARTICLES
   ======================================== */

.blog-article.featured .article-thumbnail img,
.featured-article .article-thumbnail img {
    aspect-ratio: 21/9 !important;
    min-height: 250px !important;
}

.featured-label {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    z-index: 10 !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .blog-grid,
    .articles-grid,
    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .article-thumbnail img,
    .post-thumbnail img {
        aspect-ratio: 4/3 !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .blog-grid,
    .articles-grid,
    .content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================
   FALLBACK SI PAS D'IMAGE
   ======================================== */

.article-thumbnail:empty::before,
.post-thumbnail:empty::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    position: relative !important;
}

.article-thumbnail:empty::after,
.post-thumbnail:empty::after {
    content: '📷' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 3rem !important;
    opacity: 0.3 !important;
}

/* ========================================
   ANIMATION DE CHARGEMENT
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.article-thumbnail img,
.post-thumbnail img {
    animation: fadeIn 0.5s ease-out !important;
}

/* ========================================
   DEBUG - À RETIRER APRÈS TEST
   ======================================== */

/* Bordure rouge pour identifier les conteneurs de miniatures */
.debug-mode .article-thumbnail,
.debug-mode .post-thumbnail {
    border: 3px solid red !important;
    min-height: 200px !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

/* Message si pas d'image */
.debug-mode .article-thumbnail:empty::after,
.debug-mode .post-thumbnail:empty::after {
    content: 'Pas de miniature trouvée' !important;
    color: red !important;
    font-weight: bold !important;
    font-size: 1rem !important;
}