/* Structure principale du blog */
.blog-grid {
    @apply max-w-7xl mx-auto py-12;
}

/* Configuration de base des articles */
.blog-grid article {
    @apply transform will-change-transform transition-all duration-500;
    transform-style: preserve-3d;
}

/* Effet de profondeur au hover */
.blog-grid article:hover {
    @apply translate-y-[-8px];
    box-shadow: 
        0 20px 40px -15px rgba(0,0,0,0.1),
        0 0 20px -5px rgba(0,0,0,0.05);
}

/* Effet glassmorphism moderne */
.blog-grid article::before {
    content: '';
    @apply absolute inset-0 opacity-0 transition-opacity duration-300;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.2) 0%,
        rgba(255,255,255,0.05) 100%
    );
    backdrop-filter: blur(10px);
}

/* Optimisation des images */
.blog-grid img {
    @apply w-full h-full object-cover transition-transform duration-700;
    transform: scale(1.01);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Animation zoom image au hover */
.blog-grid article:hover img {
    transform: scale(1.05);
}

/* Style moderne des badges de catégorie */
.blog-grid .category-badge {
    @apply px-4 py-1.5 rounded-full 
           bg-white/10 backdrop-blur-md 
           border border-white/20 
           font-medium tracking-wide;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Animation de la flèche de navigation */
.blog-grid .group:hover .group-hover\:translate-x-1 {
    @apply translate-x-1;
}

/* Styles de flou d'arrière-plan */
.blog-grid .backdrop-blur-md {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Gestion du texte multiligne */
.blog-grid .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-grid .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animation des titres */
.blog-grid h3 {
    @apply transform transition-all duration-500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.blog-grid article:hover h3 {
    @apply translate-y-[-4px];
    text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Responsive design */
@media (max-width: 768px) {
    .blog-grid .grid {
        grid-template-columns: 1fr;
    }
    
    .blog-grid article {
        grid-column: span 12;
        height: 240px;
    }
}

/* Animation de l'indicateur de lien */
.blog-grid article:hover .group-hover\:opacity-100 {
    @apply opacity-100 translate-y-0;
}

/* Rotation de la flèche au hover */
.blog-grid article:hover .group-hover\:opacity-100 span {
    @apply transform rotate-[45deg] transition-transform duration-300;
}

/* Style pour les articles sans image */
.blog-grid article:not(:has(img)) {
    @apply bg-gradient-to-br from-white to-gray-50;
}

/* Style spécifique pour le premier article */
.blog-grid article:first-child .flex.flex-col.justify-end {
    @apply bg-white rounded-3xl p-8 mt-auto mx-4 mb-4 relative z-30;
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.1);
}

/* Titre du premier article */
.blog-grid article:first-child h3 {
    @apply text-black text-3xl font-bold;
    letter-spacing: -0.02em;
}

/* Métadonnées du premier article */
.blog-grid article:first-child time,
.blog-grid article:first-child .flex.items-center.text-sm {
    @apply text-gray-600;
}

/* Overlay du premier article */
.blog-grid article:first-child .bg-gradient-to-b {
    @apply opacity-50;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.3) 50%,
        rgba(0,0,0,0.8) 100%
    );
}

/* Effet d'ombre pour les icônes */
.blog-grid article:first-child svg {
    filter: drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.05));
}

/* Animation au hover du premier article */
.blog-grid article:first-child:hover svg {
    transform: translateY(-4px);
    transition: transform 0.3s ease;
}

/* Animation smooth des catégories */
.blog-grid .category-badge {
    @apply transform transition-all duration-300;
}

.blog-grid article:hover .category-badge {
    @apply translate-y-[-2px] bg-white/20;
}

/* Effet de brillance au hover */
.blog-grid article::after {
    content: '';
    @apply absolute inset-0 opacity-0 transition-opacity duration-500;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255,255,255,0.1) 50%,
        transparent 100%
    );
}

.blog-grid article:hover::after {
    @apply opacity-100;
}
/* Responsive Design Amélioré */
@media (max-width: 768px) {
    /* Structure globale du blog */
    .blog-grid {
        @apply py-6 px-4;
    }

    /* Ajustement de la grille */
    .blog-grid .grid {
        @apply grid gap-4;
        grid-template-columns: 1fr;
    }

    /* Style des articles */
    .blog-grid article {
        @apply col-span-12 !important; /* Force l'occupation totale */
        height: auto !important; /* Hauteur adaptative */
        min-height: 280px; /* Hauteur minimum pour le contenu */
    }

    /* Style spécifique pour le premier article */
    .blog-grid article:first-child {
        @apply min-h-[400px]; /* Plus grand pour l'article principal */
    }

    /* Ajustement du contenu des articles */
    .blog-grid article .flex.flex-col.justify-end {
        @apply p-4; /* Padding réduit sur mobile */
    }

    /* Typographie responsive */
    .blog-grid h3 {
        @apply text-lg; /* Taille de texte adaptée au mobile */
        line-height: 1.4;
    }

    /* Style spécial pour le premier article en mobile */
    .blog-grid article:first-child h3 {
        @apply text-xl mb-2; /* Taille légèrement plus grande */
    }

    /* Optimisation des badges catégorie */
    .blog-grid .category-badge {
        @apply text-xs px-3 py-1; /* Plus compact sur mobile */
    }

    /* Ajustement des métadonnées */
    .blog-grid time,
    .blog-grid .flex.items-center.text-sm {
        @apply text-xs; /* Texte plus petit */
    }

    /* Amélioration de la navigation */
    .blog-grid .flex.justify-between.items-center {
        @apply flex-col gap-4;
    }

    .blog-grid .flex.justify-between.items-center h2 {
        @apply text-2xl;
    }

    /* Optimisation des images */
    .blog-grid img {
        @apply h-full object-cover;
        aspect-ratio: 16/9;
    }

    /* Gestion de l'espacement entre les articles */
    .blog-grid article + article {
        @apply mt-4;
    }
}

/* Breakpoint tablette pour une meilleure transition */
@media (min-width: 769px) and (max-width: 1024px) {
    .blog-grid {
        @apply px-6;
    }

    .blog-grid .grid {
        @apply grid-cols-6 gap-5;
    }

    /* Ajustement des tailles pour tablette */
    .blog-grid article:first-child {
        @apply col-span-6;
        height: 400px;
    }

    .blog-grid article:not(:first-child) {
        @apply col-span-3;
        height: 280px;
    }
}

/* Petits ajustements pour les très petits écrans */
@media (max-width: 375px) {
    .blog-grid article {
        @apply min-h-[240px];
    }

    .blog-grid article:first-child {
        @apply min-h-[320px];
    }

    .blog-grid h3 {
        @apply text-base;
    }
}