/* Featured Links Size Adjustments */
/* Ajustements pour harmoniser les tailles des featured links avec les autres éléments */

/* Harmonisation de la largeur avec la zone complète (main + sidebar) */
.np-featured-links-section {
    margin-bottom: var(--np-spacing-lg); /* Harmonise avec les autres sections */
}

.np-featured-links-section .np-featured-links-card {
    padding: var(--np-spacing-md); /* Harmonise avec les autres cartes (.np-card) */
    width: 100%; /* Assure que la carte prend toute la largeur du container */
    max-width: 100%; /* Garantit qu'elle ne dépasse pas le container */
}

.np-featured-links-section .np-featured-links-header {
    margin-bottom: var(--np-spacing-md); /* Harmonise avec les autres headers */
}

.np-featured-links-section .np-featured-links-title {
    font-size: 1.5rem; /* Harmonise avec h4 */
    margin-bottom: var(--np-spacing-sm);
}

/* Ajustement de la grille pour des cartes adaptatives */
.np-featured-links-section .np-featured-links-grid {
    gap: var(--np-spacing-md); /* Harmonise avec la grille des posts */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* S'adapte automatiquement */
    padding: var(--np-spacing-xs) 0;
    width: 100%; /* Prend toute la largeur disponible */
}

/* Ajustement des cartes individuelles */
.np-featured-links-section .np-featured-link-item {
    width: 100%; /* Prend toute la largeur disponible dans sa colonne */
    min-width: auto; /* Supprime la largeur minimale fixe */
    max-width: none; /* Supprime la largeur maximale fixe */
}

/* Ajustement de la hauteur des cartes */
.np-featured-links-section .np-featured-link-thumb {
    min-height: 80px; /* Plus compact */
    flex: 1; /* Prend l'espace disponible */
}

.np-featured-links-section .np-featured-link-card {
    height: 100%; /* Prend toute la hauteur disponible */
    min-height: 100px; /* Plus compact */
    margin-bottom: 0; /* Supprime la marge pour l'harmonisation */
    display: flex; /* Assure une disposition flexible */
    flex-direction: column; /* Disposition verticale */
}

/* Ajustement du contenu des cartes */
.np-featured-links-section .np-featured-link-content {
    padding: var(--np-spacing-sm); /* Harmonise avec les autres cartes */
    flex-shrink: 0; /* Empêche la réduction de taille */
    display: flex; /* Disposition flexible */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
}

.np-featured-links-section .np-featured-link-content .np-btn {
    display: inline-block;
    padding: .75rem 1.5rem;
    font-size: .95rem;
    font-weight: 600;
    color: #7289da;
    text-decoration: none;
    border-radius: 8px;
    background: #e0e5ec;
    box-shadow: 3px 3px 6px #caced6, -3px -3px 6px #fff;
    transition: all .2s ease;
    cursor: pointer;
    border: none;
    font-family: var(--np-font-family);
    min-width: 80px;
    width: 100%;
    max-width: 200px;
    text-align: center;
}

.np-featured-links-section .np-featured-link-content .np-btn:hover {
    color: #5865f2;
    box-shadow: inset 2px 2px 4px #caced6, inset -2px -2px 4px #fff;
}

.np-featured-links-section .np-featured-link-content .np-btn:active {
    color: #4752c4;
    box-shadow: inset 3px 3px 6px #caced6, inset -3px -3px 6px #fff;
}

/* Responsive adjustments */
@media (min-width: 1024px) {
    .np-featured-links-section .np-featured-links-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Plus d'espace sur desktop */
        gap: var(--np-spacing-md);
    }
    
    .np-featured-links-section .np-featured-link-thumb {
        min-height: 100px; /* Plus d'espace sur desktop */
    }
    
    .np-featured-links-section .np-featured-link-content {
        padding: var(--np-spacing-sm);
    }
    
    .np-featured-links-section .np-featured-link-content .np-btn {
        max-width: 180px; /* Plus large sur desktop */
    }
}

@media (max-width: 1023px) {
    .np-featured-links-section .np-featured-links-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Plus compact sur tablette */
        gap: var(--np-spacing-sm);
    }
    
    .np-featured-links-section .np-featured-link-thumb {
        min-height: 90px; /* Plus compact sur tablette */
    }
    
    .np-featured-links-section .np-featured-link-content {
        padding: var(--np-spacing-sm);
    }
    
    .np-featured-links-section .np-featured-link-content .np-btn {
        max-width: 150px; /* Plus compact sur tablette */
    }
}

@media (max-width: 768px) {
    .np-featured-links-section .np-featured-links-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Plus compact sur mobile */
        gap: var(--np-spacing-sm);
    }
    
    .np-featured-links-section .np-featured-link-thumb {
        min-height: 80px; /* Plus compact */
    }
    
    .np-featured-links-section .np-featured-link-content .np-btn {
        font-size: 0.8rem;
        padding: var(--np-spacing-xs) var(--np-spacing-sm);
        height: 32px;
        max-width: 120px; /* Plus compact sur mobile */
    }
}

@media (max-width: 480px) {
    .np-featured-links-section .np-featured-links-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Très compact sur petit mobile */
        gap: var(--np-spacing-xs);
    }
    
    .np-featured-links-section .np-featured-link-thumb {
        min-height: 70px; /* Plus compact */
    }
    
    .np-featured-links-section .np-featured-link-content .np-btn {
        font-size: 0.75rem;
        padding: var(--np-spacing-xs);
        height: 30px;
        min-width: 70px;
        max-width: 100px; /* Très compact sur petit mobile */
    }
    
    .np-featured-links-section .np-featured-links-title {
        font-size: 1.25rem; /* Plus compact sur mobile */
    }
}

/* Harmonisation avec les autres cartes du thème */
.np-featured-links-section .np-featured-link-card {
    background: var(--np-card-bg);
    border-radius: var(--np-border-radius-lg);
    box-shadow: var(--np-shadow-light);
    transition: all .3s ease; /* Harmonise avec les autres cartes */
}

.np-featured-links-section .np-featured-link-card:hover {
    box-shadow: var(--np-shadow-hover);
    transform: translateY(-4px); /* Harmonise avec les autres cartes */
}

/* Ajustement du placeholder pour les images manquantes */
.np-featured-links-section .np-featured-link-placeholder {
    font-size: 1rem; /* Plus compact */
}

/* Animation de défilement automatique - Gérée par JavaScript */
/* Les animations CSS sont maintenant générées dynamiquement par JavaScript */

/* Optimisation pour l'affichage en grille responsive avec défilement */
@media (min-width: 1024px) {
    .np-featured-links-section .np-featured-links-grid {
        /* Les styles sont maintenant gérés par JavaScript pour éviter les conflits */
        position: relative;
        width: 100%;
    }
    
    /* Assure que les éléments ont une taille fixe pour l'animation */
    .np-featured-links-section .np-featured-links-grid .np-featured-link-item {
        /* Les styles d'animation sont gérés par JavaScript */
        will-change: transform; /* Optimise les performances */
    }
}

/* Ajustement de l'espacement global */
.np-featured-links-section .np-featured-links-grid {
    padding: var(--np-spacing-xs) 0;
}

/* Harmonisation avec les variables du thème */
.np-featured-links-section {
    --np-featured-links-spacing: var(--np-spacing-lg);
}

/* Assure que la section prend toute la largeur du container */
.np-featured-links-section .container {
    max-width: var(--np-container-width);
    padding: var(--np-container-padding);
}

/* Suppression des styles fullwidth qui ne sont plus nécessaires */
.np-featured-links-section.np-featured-links-fullwidth,
.np-featured-links-section.np-featured-links-fullwidth .container,
.np-featured-links-section.np-featured-links-fullwidth .np-featured-links-card {
    max-width: none;
    padding: inherit;
    margin: inherit;
    border-radius: inherit;
}

/* Styles pour les contrôles de navigation */
.np-featured-links-controls {
    display: flex;
    justify-content: center;
    gap: var(--np-spacing-sm);
    margin-top: var(--np-spacing-md);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.np-featured-links-section:hover .np-featured-links-controls {
    opacity: 1;
}

.np-featured-links-controls button {
    background: var(--np-card-bg);
    border: none;
    border-radius: 50%;
    box-shadow: var(--np-shadow-light);
    color: var(--np-text-color);
    cursor: pointer;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.np-featured-links-controls button:hover {
    box-shadow: var(--np-shadow-hover);
    transform: translateY(-2px);
    color: var(--np-primary-color);
}

.np-featured-links-controls button:active {
    box-shadow: var(--np-shadow-pressed);
    transform: translateY(0);
}

.np-featured-links-controls button i {
    font-size: 0.9rem;
}

/* Masque les contrôles sur mobile */
@media (max-width: 1023px) {
    .np-featured-links-controls {
        display: none;
    }
}

/* Les media queries ci-dessus gèrent déjà l'affichage responsive */