/**
 * RESOURCE HUB IMPROVEMENTS - Frontend Afrokwary
 * ===============================================
 * Améliorations visuelles pour la page Resource Hub
 * Respecte 100% la charte graphique (couleurs, typographie, backgrounds)
 * Focus sur l'espacement, la hiérarchie et la disposition
 * 4 cards par ligne sur desktop (col-lg-3)
 */

/* ========================================================= */
/* FILTER HEADER - Amélioration de l'en-tête                */
/* ========================================================= */

.filter-header {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
    text-align: left;
    border-bottom: 2px solid rgba(69, 75, 27, 0.1);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.filter-header .txt-filter-title {
    color: var(--accent-green, #454b1b);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: clamp(0.75rem, 1.5vw, 1rem);
    text-wrap: balance;
}


.filter-header .txt-filter {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    line-height: 1.8;
    color: #212529;
    max-width: 900px;
    margin: 0;
    text-wrap: pretty;
}

/* ========================================================= */
/* FILTER BAR - Amélioration de la barre de filtres        */
/* ========================================================= */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: center;
    background: #ffffff;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    width: 100%;
}

.filter-selects {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2vw, 1.5rem);
    flex: 1;
    width: 100%;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--accent-green, #454b1b);
    color: #ffffff;
    border: none;
    padding: clamp(0.75rem, 1.8vw, 0.95rem) clamp(1.5rem, 3vw, 2rem);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.7vw, 1rem);
    cursor: pointer;
    transition: background 0.3s ease;
    min-height: 44px; /* Better touch target */
}

.filter-btn:hover {
    background: #000000;
}

.filter-btn i {
    font-size: clamp(1rem, 1.9vw, 1.15rem);
}

/* Form Controls in Filter Bar */
.filter-bar .form-select,
.filter-bar .form-control {
    border: 1px solid #E0DACE;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.9rem, 1.7vw, 1rem);
    color: #212529;
    background-color: #ffffff;
    transition: border-color 0.3s ease;
    min-width: 170px;
    flex: 1;
    font-weight: 500;
}

.filter-bar .form-select:hover,
.filter-bar .form-control:hover {
    border-color: var(--accent-green, #454b1b);
}

.filter-bar .form-select:focus,
.filter-bar .form-control:focus {
    border-color: var(--accent-green, #454b1b);
    outline: none;
}

.filter-bar .form-control::placeholder {
    color: #6c757d;
    font-weight: 400;
}

/* Search/Clear Button */
.filter-bar .search-btn {
    background: #6c757d;
    color: #ffffff;
    border: none;
    padding: clamp(0.75rem, 1.8vw, 0.95rem) clamp(1.5rem, 3vw, 2rem);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.7vw, 1rem);
    cursor: pointer;
    transition: background 0.3s ease;
}

.filter-bar .search-btn:hover {
    background: #5a6268;
}

/* ========================================================= */
/* RESOURCE COUNT INDICATOR                                  */
/* ========================================================= */

.resource-count-indicator {
    background-color: rgba(69, 75, 27, 0.05);
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.resource-count-indicator p {
    margin: 0;
    font-size: clamp(0.9rem, 1.7vw, 1rem);
    color: #495057;
    font-family: 'Poppins', sans-serif;
}

.resource-count-indicator strong {
    color: var(--accent-green, #454b1b);
    font-weight: 600;
}

/* ========================================================= */
/* RESOURCES GRID - 4 cards layout avec CSS Grid           */
/* ========================================================= */

.resources-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    width: 100%;
}

.resource-card-wrapper {
    width: 100%;
    min-width: 0;
    display: block;
}

.empty-state-wrapper {
    grid-column: 1 / -1;
    width: 100%;
}

/* ========================================================= */
/* RESOURCE CARDS - Design amélioré pour 4 cards           */
/* ========================================================= */

.resource-card {
    background-color: #ffffff;
    border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.resource-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--accent-green, #454b1b);
    transition: width 0.3s ease;
}

.resource-card:hover {
    border-color: var(--accent-green, #454b1b);
}

.resource-card:hover::before {
    width: 100%;
}

/* Card Overlay - Visible only on hover */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(69, 75, 27, 0.7); /* Accent green with transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 5;
    padding: 1.5rem;
}

.resource-card:hover .card-overlay {
    opacity: 1;
    visibility: visible;
}

.card-overlay .btn {
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-top: 0 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    min-width: 140px;
}

.resource-card:hover .card-overlay .btn {
    transform: translateY(0);
}

/* Card Image */
.resource-card .card-img-top {
    width: 100%;
    height: clamp(160px, 20vw, 180px);
    object-fit: cover;
}

/* Card Body */
.resource-card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Card Title */
.resource-card .card-title {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 600;
    color: #000000;
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Roboto Condensed', sans-serif;
    text-wrap: balance;
}

/* Card Meta Information - Simplified */
.resource-card .card-meta {
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

.resource-card .card-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.85rem, 1.6vw, 0.95rem);
    color: #495057;
}

.resource-card .card-meta .meta-item i {
    color: var(--accent-green, #454b1b);
    font-size: clamp(0.9rem, 1.7vw, 1rem);
    min-width: 1rem;
    text-align: center;
}

.resource-card .card-meta .meta-item span {
    color: #495057;
    font-weight: 400;
}

/* Card Button */
.resource-card .btn {
    background-color: var(--accent-green, #454b1b);
    color: #ffffff !important;
    padding: clamp(0.6rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.25rem);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(0.85rem, 1.6vw, 0.95rem);
    transition: background 0.3s ease;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid #ffffff; /* Add border to make it pop on the overlay */
}

.resource-card .btn:hover {
    background-color: #ffffff;
    color: var(--accent-green, #454b1b) !important;
}

.resource-card .btn i {
    font-size: clamp(0.85rem, 1.6vw, 0.95rem);
}

/* ========================================================= */
/* EMPTY STATE - État vide amélioré                        */
/* ========================================================= */

.text-center.py-5 {
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2rem);
    background-color: #fafafa;
    border-left: 4px solid var(--accent-green, #454b1b);
}

.text-center.py-5 .fa-folder-open {
    color: rgba(69, 75, 27, 0.2) !important;
    font-size: clamp(3rem, 6vw, 4rem) !important;
    margin-bottom: 1.5rem !important;
}

.text-center.py-5 .h5 {
    color: #495057;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    margin-bottom: 1rem;
}

.text-center.py-5 .btn-outline-primary {
    border: 1px solid var(--accent-green, #454b1b);
    color: var(--accent-green, #454b1b);
    background-color: transparent;
    padding: clamp(0.6rem, 1.5vw, 0.75rem) clamp(1.2rem, 2.5vw, 1.5rem);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: background 0.3s ease, color 0.3s ease;
}

.text-center.py-5 .btn-outline-primary:hover {
    background-color: var(--accent-green, #454b1b);
    color: #ffffff;
}

/* ========================================================= */
/* LOAD MORE BUTTON - Bouton "Charger plus de ressources"  */
/* ========================================================= */

.load-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 2px solid rgba(69, 75, 27, 0.1);
    margin-top: clamp(2rem, 4vw, 3rem);
}

.btn-load-more {
    background-color: var(--accent-green, #454b1b);
    color: #ffffff;
    border: none;
    padding: clamp(0.75rem, 1.8vw, 1rem) clamp(2rem, 4vw, 3rem);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: clamp(250px, 40vw, 350px);
}

.btn-load-more:hover {
    background-color: #000000;
}

.btn-load-more:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-load-more:disabled:hover {
    background-color: var(--accent-green, #454b1b);
}

.btn-load-more .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ========================================================= */
/* RESPONSIVE - Mobile et Tablette                         */
/* ========================================================= */

/* Large Desktop (> 1200px) : 4 cards par ligne (default) */
@media (min-width: 1200px) {
    .resources-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Tablette Large (992px - 1199px) : 3 cards par ligne */
@media (min-width: 992px) and (max-width: 1199px) {
    .resources-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablette (768px - 991px) : 2 cards par ligne */
@media (min-width: 768px) and (max-width: 991px) {
    .resources-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(0.75rem, 1.5vw, 1rem);
    }

    .resource-card .card-img-top {
        height: clamp(160px, 22vw, 180px);
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-selects {
        width: 100%;
    }

    .filter-bar .form-select,
    .filter-bar .form-control {
        min-width: unset;
    }

    .btn-load-more {
        min-width: clamp(200px, 50vw, 300px);
    }
}

/* Mobile Large (576px - 767px) : 2 cards par ligne */
@media (min-width: 576px) and (max-width: 767px) {
    .resources-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(0.75rem, 1.5vw, 1rem);
    }

    .resource-card .card-img-top {
        height: clamp(150px, 30vw, 180px);
    }

    .filter-header {
        padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(1rem, 2vw, 1.5rem);
    }

    .filter-header .txt-filter {
        text-align: left;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: clamp(1rem, 2vw, 1.5rem);
        gap: 0.75rem;
    }

    .filter-selects {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .filter-bar .form-select,
    .filter-bar .form-control {
        width: 100%;
        min-width: unset;
    }

    .filter-btn,
    .filter-bar .search-btn {
        width: 100%;
        justify-content: center;
    }

    .resource-card .btn {
        padding: 0.7rem 1rem;
    }

    .btn-load-more {
        min-width: 100%;
        padding: 0.85rem 1.5rem;
    }
}

/* Mobile (< 576px) : 1 card par ligne */
@media (max-width: 575px) {
    .resources-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(1rem, 2vw, 1.5rem);
    }
    .filter-header {
        padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(1rem, 2vw, 1.5rem);
    }

    .filter-header .txt-filter {
        text-align: left;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: clamp(1rem, 2vw, 1.5rem);
        gap: 0.75rem;
    }

    .filter-selects {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .filter-bar .form-select,
    .filter-bar .form-control {
        width: 100%;
        min-width: unset;
    }

    .filter-btn,
    .filter-bar .search-btn {
        width: 100%;
        justify-content: center;
    }

    .resource-card .card-img-top {
        height: clamp(180px, 35vw, 220px);
    }

    .resource-card .btn {
        padding: 0.75rem 1rem;
    }
}


/* ========================================================= */
/* ANIMATIONS ET TRANSITIONS                                */
/* ========================================================= */

/* Fade in animation pour les cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.resource-card {
    animation: fadeInUp 0.5s ease-out;
}

/* Stagger animation pour plusieurs cards */
.resource-card:nth-child(1) { animation-delay: 0s; }
.resource-card:nth-child(2) { animation-delay: 0.1s; }
.resource-card:nth-child(3) { animation-delay: 0.2s; }
.resource-card:nth-child(4) { animation-delay: 0.3s; }
.resource-card:nth-child(5) { animation-delay: 0.4s; }
.resource-card:nth-child(6) { animation-delay: 0.5s; }
.resource-card:nth-child(7) { animation-delay: 0.6s; }
.resource-card:nth-child(8) { animation-delay: 0.7s; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .resource-card,
    .resource-card .card-img-top,
    .resource-card .btn,
    .filter-btn,
    .filter-bar .search-btn {
        animation: none;
        transition: none;
    }
}

/* ========================================================= */
/* ACCESSIBILITY                                             */
/* ========================================================= */

/* Focus states */
.resource-card:focus-within {
    outline: 3px solid var(--accent-green, #454b1b);
    outline-offset: 4px;
}

.filter-btn:focus,
.filter-bar .search-btn:focus,
.resource-card .btn:focus {
    outline: 3px solid var(--accent-green, #454b1b);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .resource-card {
        border-width: 3px;
    }

    .resource-card::before {
        height: 4px;
    }

    .filter-bar {
        border-left-width: 6px;
    }
}

/* ========================================================= */
/* PRINT STYLES                                              */
/* ========================================================= */

@media print {
    .filter-bar,
    .pagination {
        display: none;
    }

    .resource-card {
        page-break-inside: avoid;
        border: 2px solid #000000;
        box-shadow: none;
    }

    .resource-card .btn {
        display: none;
    }

    .resource-card::before {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ========================================================= */
/* NOTES                                                     */
/* ========================================================= */

/*
AMÉLIORATIONS APPLIQUÉES :

LAYOUT :
- 4 cards par ligne sur desktop (≥ 1200px) - CSS Grid
- 3 cards par ligne sur tablette large (992px - 1199px)
- 2 cards par ligne sur tablette (768px - 991px)
- 2 cards par ligne sur mobile large (576px - 767px)
- 1 card par ligne sur mobile (< 576px)

RESOURCE COUNT INDICATOR :
- Affichage du nombre de ressources visibles / total
- Background vert clair avec bordure gauche verte
- Strong numbers en vert accent
- Layout responsive

FILTER HEADER :
- Titre avec ligne verte en dessous
- Bordure inférieure pour séparation
- Espacement responsive optimisé

FILTER BAR :
- Design en carte avec bordure gauche verte
- Layout flex responsive
- Form controls améliorés avec focus vert
- Boutons avec hover effects

RESOURCE CARDS (Simplifié) :
- Bordure supérieure verte au hover (::before)
- Image avec zoom au hover
- Titre limité à 3 lignes (plus d'espace sans description)
- Meta info simplifiée : Auteur + Date uniquement
- Icons verts pour meta (user, calendar)
- Boutons avec hover effects (translateX)
- Shadow et transform au hover
- Pas de catégorie badge
- Pas de description
- Pas de topic

PAGINATION INTELLIGENTE :
- Affichage initial : 15 ressources
- Bouton "Charger plus de ressources"
- Charge 15 ressources supplémentaires à chaque clic
- Disparaît quand toutes les ressources sont affichées
- Spinner de chargement pendant le loading
- Hover effect avec ripple circulaire (::before)
- Transform et shadow au hover

ANIMATIONS :
- Fade in avec stagger delay
- Hover transitions fluides
- Respect de prefers-reduced-motion
- Spin animation pour spinner de chargement

ACCESSIBILITÉ :
- Focus states visibles
- High contrast mode support
- Print styles optimisés

COULEURS, TYPOGRAPHIE, BACKGROUNDS : 100% INCHANGÉS
- Vert accent : #454b1b (var(--accent-green))
- Noir : #000000
- Blanc : #ffffff
- Gris : #6c757d, #495057
- Fonts : Poppins, Roboto Condensed

Seuls la disposition (4 cards + grille CSS), l'espacement,
la pagination (Load More) et les accents visuels ont été améliorés.
*/