/**
 * Styles pour [haeros_liste_campagnes] — grille de cards de précommandes.
 * Externalisé pour qu'Elementor/wpautop ne strippe pas la balise <style> inline.
 * Charge automatiquement via wp_enqueue_style dans liste-campagnes.php.
 *
 * Logique :
 *   - Variables Haeros définies sur .hr-campagnes-section (englobe tout)
 *   - Grille auto-fill : le nombre de colonnes découle de --hr-carte-min
 *   - Bannière de la campagne en plein cadre, format 16/9
 *   - Bouton "Voir plus" en bas avec spinner pendant l'AJAX
 *
 * Sert aussi de base à [haeros_campagnes_provisoires], complété par
 * features/campagne-teaser/assets/provisoires.css.
 */

.hr-campagnes-section {
    --hr-or: #DCA54A;
    --hr-or-fonce: #D09A40;
    --hr-noir: #222222;
    --hr-creme-clair: #FAF5E5;
    --hr-creme: #F0E6C5;
    --hr-bleu-nuit: #0F172A;
    --hr-bordure: #D3C4A7;
    --hr-blanc: #FFFFFF;
    --hr-vert: #639922;
    --hr-orange-urgent: #D85A30;
    --hr-gris-doux: #5F5E5A;

    /* Largeur minimale d'une carte. Surchargée en style inline par les
       shortcodes (attribut largeur="…"), d'où la valeur de repli ici. */
    --hr-carte-min: 340px;

    padding: 16px 0;
}

/* ============ GRILLE ============ */
/* Auto-fill avec largeur min : la grille s'adapte au conteneur (colonne Elementor
   étroite ou pleine largeur) et pose autant de colonnes qu'elle peut sans
   descendre sous --hr-carte-min.
   Cette largeur commande directement la taille de la bannière : le cadre étant
   en 16/9, une carte de 340 px donne une image de 191 px de haut. Trop étroite,
   la bannière devient une vignette illisible. */
.hr-campagnes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hr-carte-min, 340px)), 1fr));
    gap: 24px;
}

/* ============ CARD ============ */
.hr-campagne-card {
    background: var(--hr-blanc);
    border: 1px solid var(--hr-bordure);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.hr-campagne-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(15,23,42,0.18);
}
.hr-campagne-card--terminee {
    border-color: var(--hr-or);
}
.hr-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    height: 100%;
}

/* ============ BANNIÈRE (plein cadre, 16/9) ============
   Auparavant : présentoir de 200px avec la featured image floutée sous un voile
   crème, et la première de couverture en mockup portrait au centre. La bannière
   est désormais montrée telle quelle, en grand — c'est l'image que l'auteur
   compose pour représenter sa campagne. */
.hr-card-cover-wrapper {
    position: relative;
    background-color: var(--hr-creme);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.hr-card-banniere {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}
.hr-campagne-card:hover .hr-card-banniere {
    transform: scale(1.04);
}

/* Aucune image disponible : carton sobre plutôt qu'un trou crème. */
.hr-card-banniere--placeholder {
    background: var(--hr-bleu-nuit);
    color: var(--hr-or);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: Georgia, "Playfair Display", serif;
    font-size: 13px;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.35;
}
.hr-card-cover-divider {
    width: 40px;
    height: 1px;
    background: var(--hr-or);
    margin: 10px 0;
}
.hr-card-cover-author {
    font-size: 11px;
    color: var(--hr-creme-clair);
    letter-spacing: 1px;
}

/* ============ BADGE STATUT ============ */
.hr-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.hr-card-badge--en-cours { background: var(--hr-or); color: var(--hr-noir); }
.hr-card-badge--urgent   { background: var(--hr-orange-urgent); color: var(--hr-blanc); }
.hr-card-badge--terminee { background: var(--hr-vert); color: var(--hr-blanc); }

/* ============ CONTENU CARD ============ */
.hr-card-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.hr-card-title {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--hr-noir);
    font-family: Georgia, "Playfair Display", serif;
    font-weight: 500;
    line-height: 1.3;
}
.hr-card-subtitle {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--hr-gris-doux);
    line-height: 1.4;
    min-height: 17px;
}
/* Résumé du livre : 3 lignes max avec ellipsis pour ne pas casser la grille */
.hr-card-resume {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--hr-noir);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ BARRE DE PROGRESSION ============ */
.hr-card-progress {
    position: relative;
    height: 8px;
    background: var(--hr-creme);
    border-radius: 20px;
    margin-bottom: 4px;
}
.hr-card-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--hr-or);
    border-radius: 20px;
    transition: width 1s ease;
}
.hr-card-progress-fill.is-success {
    background: var(--hr-vert);
}
.hr-card-milestone {
    position: absolute;
    top: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--hr-bordure);
    border: 2px solid var(--hr-blanc);
    transform: translateX(-50%);
}
.hr-card-milestone.is-reached {
    background: var(--hr-vert);
}

/* ============ STATS ============ */
.hr-card-stats-main {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 13px;
}
.hr-card-stats-main--solo { justify-content: flex-start; }
.hr-card-amount  { color: var(--hr-or);  font-weight: 500; }
.hr-card-paliers { color: var(--hr-noir); }
.hr-card-paliers.is-success { color: var(--hr-vert); }

.hr-card-stats-secondary {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--hr-creme);
    font-size: 11px;
    color: var(--hr-gris-doux);
}
.hr-card-days.is-urgent {
    color: var(--hr-orange-urgent);
    font-weight: 500;
}

/* ============ BOUTON "VOIR PLUS" ============ */
.hr-campagnes-more {
    text-align: center;
    margin-top: 32px;
}
.hr-campagnes-more-btn {
    background: var(--hr-or);
    color: var(--hr-noir);
    border: none;
    border-radius: 50px;
    padding: 12px 32px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}
.hr-campagnes-more-btn:hover {
    background: var(--hr-or-fonce);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 165, 74, 0.35);
}
.hr-campagnes-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.hr-campagnes-more-status {
    display: inline-block;
    margin-left: 12px;
    font-size: 13px;
    color: var(--hr-gris-doux);
    font-style: italic;
}