/**
 * STYLES SPÉCIFIQUES PAGES DE LISTING
 * Ajustements pour /tag/xxx, /category/xxx, /event/xxx sans impacter l'accueil
 */

/* ========================================
   MASQUER LA RECHERCHE DU HEADER SUR PAGES DE LISTING
   (Pour éviter le conflit avec la recherche locale)
   ======================================== */
body[data-page-type="tag"] .search-box,
body[data-page-type="tag"] .search-toggle,
body[data-page-type="category"] .search-box,
body[data-page-type="category"] .search-toggle,
body[data-page-type="event"] .search-box,
body[data-page-type="event"] .search-toggle {
    display: none !important;
}

/* ========================================
   LARGEUR CONTENEUR - 75% sur les pages de listing
   ======================================== */
body[data-page-type="tag"] .main-content-wrapper,
body[data-page-type="category"] .main-content-wrapper,
body[data-page-type="event"] .main-content-wrapper {
    width: 75%;
    max-width: 75%;
}

/* ========================================
   CARDS SPÉCIFIQUES AUX PAGES TAGS
   Hérite de .news-card-modern mais avec ajustements
   ======================================== */

/* ========================================
   BOUTON CHARGER PLUS - Centré
   ======================================== */
.load-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    width: 100%;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #9E1514 0%, #7a0f0e 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(158, 21, 20, 0.3);
}

.load-more-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(158, 21, 20, 0.5);
    background: linear-gradient(135deg, #c41d1c 0%, #9E1514 100%);
}

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

.load-more-btn.loading .btn-loader {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.btn-loader {
    display: none;
}

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

/* On peut ajouter des modifications spécifiques ici */
/* Par exemple : */

/* Exemple : Ajuster la hauteur d'image sur les pages tags */
/*
body[data-page-type="tag"] .news-card-image {
    height: 220px;
}
*/

/* Exemple : Ajuster le padding du contenu */
/*
body[data-page-type="tag"] .news-card-content {
    padding: 1.5rem;
}
*/

/* Exemple : Ajuster la taille du titre */
/*
body[data-page-type="tag"] .news-card-title {
    font-size: 1.1rem;
}
*/

/* ========================================
   RESPONSIVE - Conserver 80% sur mobile/tablette
   ======================================== */
@media (max-width: 1024px) {
    body[data-page-type="tag"] .main-content-wrapper,
    body[data-page-type="category"] .main-content-wrapper,
    body[data-page-type="event"] .main-content-wrapper {
        width: 80%; /* Retour à 80% sur tablette */
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    body[data-page-type="tag"] .main-content-wrapper,
    body[data-page-type="category"] .main-content-wrapper,
    body[data-page-type="event"] .main-content-wrapper {
        width: 85%; /* Plus large sur mobile */
        max-width: 85%;
    }
}

@media (max-width: 480px) {
    body[data-page-type="tag"] .main-content-wrapper,
    body[data-page-type="category"] .main-content-wrapper,
    body[data-page-type="event"] .main-content-wrapper {
        width: 95%; /* Presque pleine largeur sur très petit écran */
        max-width: 95%;
    }
}