/* ============================================================================
 * aird-archive-event.css
 * Archive publique /event/ — grid de cards affiches (refonte 2026-05-23).
 *
 * Pattern simple inspiré des cards Elementor du screenshot user :
 *   - Image affiche en haut (object-fit cover, ratio 4/3)
 *   - Pill type overlay coin haut-gauche
 *   - Body : titre italique gras + date + ville
 *   - Toute la card est un <a> (block-level)
 *
 * Charge sur : is_post_type_archive('event') (cf. functions.php).
 * Aucune dépendance JS.
 * ============================================================================ */

.aird-archive-event {
    --aae-gold:        #c9962a;
    --aae-gold-light:  #f5d98a;
    --aae-gold-deep:   #d4a84a;
    --aae-cream:       #fff5dc;
    --aae-ink:         #1a1018;

    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: rgba(40, 30, 20, 0.92);
    box-sizing: border-box;
    width: 100%;
}
.aird-archive-event *,
.aird-archive-event *::before,
.aird-archive-event *::after { box-sizing: border-box; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.aird-archive-event__head {
    margin: 0 0 30px;
    text-align: center;
}
.aird-archive-event__title {
    margin: 0 0 8px;
    font-family: 'Cinzel', 'Plus Jakarta Sans', serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #fff5dc 0%, #f5d98a 40%, #d4a84a 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--aae-gold);
    line-height: 1.1;
}
.aird-archive-event__sub {
    margin: 0;
    color: rgba(40, 30, 20, 0.62);
    font-size: 0.95rem;
    font-weight: 500;
}

/* ─── Sélecteur "cartes par ligne" (desktop only, masqué mobile) ────────── */
.aird-archive-event__cols-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0 2px;
}
.aird-archive-event__cols-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(40, 30, 20, 0.5);
}
.aird-archive-event__cols-btns {
    display: inline-flex;
    border: 1px solid rgba(201, 150, 42, 0.32);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
}
.aird-archive-event__cols-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 7px 13px;
    min-width: 34px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(40, 30, 20, 0.55);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
}
.aird-archive-event__cols-btn + .aird-archive-event__cols-btn {
    border-left: 1px solid rgba(201, 150, 42, 0.22);
}
.aird-archive-event__cols-btn:hover {
    background: rgba(255, 245, 220, 0.7);
    color: rgba(40, 30, 20, 0.85);
}
.aird-archive-event__cols-btn.is-active {
    background: linear-gradient(135deg, #f5d98a 0%, #d4a84a 50%, #c9962a 100%);
    color: #1a1018;
}

/* ─── Grid ───────────────────────────────────────────────────────────────── */
.aird-archive-event__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

/* Variantes "cartes par ligne" — appliquées via JS (localStorage `aird_ae_cols`).
   La classe par défaut côté PHP est --cols-4 ; le JS swap selon préférence user. */
.aird-archive-event__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.aird-archive-event__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.aird-archive-event__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.aird-archive-event__grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }

/* Responsive : on bypass les variantes manuelles sous certains breakpoints
   (sinon 5 cols est illisible sur tablet, etc.). Force max selon viewport. */
@media (max-width: 1100px) {
    .aird-archive-event__grid--cols-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 900px) {
    .aird-archive-event__cols-control { display: none; }
    .aird-archive-event__grid,
    .aird-archive-event__grid--cols-2,
    .aird-archive-event__grid--cols-3,
    .aird-archive-event__grid--cols-4,
    .aird-archive-event__grid--cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    .aird-archive-event { padding: 22px 14px 48px; }
}
@media (max-width: 540px) {
    .aird-archive-event__grid,
    .aird-archive-event__grid--cols-2,
    .aird-archive-event__grid--cols-3,
    .aird-archive-event__grid--cols-4,
    .aird-archive-event__grid--cols-5 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ─── Card ───────────────────────────────────────────────────────────────── */
.aird-archive-event__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 18px rgba(20, 14, 30, 0.08), 0 1px 3px rgba(20, 14, 30, 0.06);
    border: 1px solid rgba(201, 150, 42, 0.12);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    position: relative;
}
.aird-archive-event__card:hover,
.aird-archive-event__card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(201, 150, 42, 0.4);
    box-shadow: 0 10px 28px rgba(20, 14, 30, 0.14), 0 2px 6px rgba(201, 150, 42, 0.18);
    text-decoration: none;
}
.aird-archive-event__card:focus-visible {
    outline: 2px solid var(--aae-gold);
    outline-offset: 2px;
}

/* Card "passée" : noir et blanc total + bandeau "Event passé" plaqué bas d'image.
   Hover : retour couleur progressif (signal "cliquable et toujours disponible"). */
.aird-archive-event__card.is-past .aird-archive-event__card-img {
    filter: grayscale(1) contrast(0.95);
    transition: filter 0.35s ease, transform 0.5s ease;
}
.aird-archive-event__card.is-past:hover .aird-archive-event__card-img {
    filter: grayscale(0) contrast(1);
}
/* Le pill type reste lisible en N&B → on désature aussi sa colorimétrie au repos */
.aird-archive-event__card.is-past .aird-archive-event__card-pill {
    filter: grayscale(0.7);
    transition: filter 0.3s ease;
}
.aird-archive-event__card.is-past:hover .aird-archive-event__card-pill {
    filter: grayscale(0);
}

/* ─── Card media (image + pill + cancel banner) ──────────────────────────── */
.aird-archive-event__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #f3ead3 0%, #fff5dc 60%, #f3ead3 100%);
}
.aird-archive-event__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.aird-archive-event__card:hover .aird-archive-event__card-img {
    transform: scale(1.04);
}
.aird-archive-event__card-img--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(201, 150, 42, 0.45);
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    font-weight: 700;
}

/* Pill overlay coin haut-gauche */
.aird-archive-event__card-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aae-ink);
    background: linear-gradient(135deg, #f5d98a 0%, #d4a84a 50%, #c9962a 100%);
    box-shadow: 0 2px 8px rgba(20, 14, 30, 0.22), 0 0 0 1px rgba(255, 245, 220, 0.4) inset;
    line-height: 1;
}
/* Variantes type — couleurs distinctes pour repérage rapide */
.aird-archive-event__card-pill--festival {
    background: linear-gradient(135deg, #f5d98a 0%, #d4a84a 50%, #c9962a 100%);
    color: #1a1018;
}
.aird-archive-event__card-pill--social {
    background: linear-gradient(135deg, #ffd6c9 0%, #ff8a3d 50%, #d9602a 100%);
    color: #fff;
}
.aird-archive-event__card-pill--stage {
    background: linear-gradient(135deg, #d6c9ff 0%, #7c4dff 50%, #5a2bdb 100%);
    color: #fff;
}

/* Bandeau "Event passé" — plaqué bas de l'image, full-width.
   Fond sombre semi-transparent + texte cream uppercase letter-spaced. */
.aird-archive-event__card-past-banner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 7px 12px;
    background: linear-gradient(180deg, rgba(20, 14, 26, 0.55) 0%, rgba(20, 14, 26, 0.92) 100%);
    color: var(--aae-gold-light);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-top: 1px solid rgba(245, 217, 138, 0.4);
    box-shadow: 0 -1px 8px rgba(245, 217, 138, 0.15);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.aird-archive-event__card:hover .aird-archive-event__card-past-banner {
    opacity: 0;
}

/* Bandeau ANNULÉ */
.aird-archive-event__card-cancel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    padding: 8px 28px;
    background: rgba(220, 40, 40, 0.92);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(220, 40, 40, 0.4);
    text-transform: uppercase;
}

/* ─── Card body ──────────────────────────────────────────────────────────── */
.aird-archive-event__card-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.aird-archive-event__card-title {
    margin: 0 0 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.25;
    color: var(--aae-ink);
    /* Cap 2 lignes pour homogénéité visuelle */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aird-archive-event__card-date {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(40, 30, 20, 0.62);
    text-align: center;
}
.aird-archive-event__card-city {
    margin: 4px 0 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(40, 30, 20, 0.78);
    text-align: center;
}

/* Centrage du titre comme sur le screenshot */
.aird-archive-event__card-title {
    text-align: center;
}

/* ─── Empty state ────────────────────────────────────────────────────────── */
.aird-archive-event__empty {
    margin: 40px auto;
    max-width: 560px;
    text-align: center;
    padding: 36px 28px;
    border: 1px solid rgba(201, 150, 42, 0.2);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(252, 247, 235, 0.88));
}
.aird-archive-event__empty-title {
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(26, 16, 24, 0.88);
}
.aird-archive-event__empty-sub {
    margin: 0;
    color: rgba(40, 30, 20, 0.62);
    font-size: 0.9rem;
}