/* ═══════════════════════════════════════════════════════════════════════
 * CCBLA — Event Card (Template Commun)
 * data-compo="N" : 9 compositions aléatoires (JS event-card-compo.js)
 * Typo : agrandir-wide-medium (date, organisateur) + agrandir-tight-bold (titre)
 * Tags toujours collés en bas via height chain + margin-top:auto
 *
 * PALETTE COMPOSITIONS (bg / color+tag-bg / tag-c) :
 *   1 — #812b29 / #f5b5d3 / #812b29
 *   2 — #6b4796 / #b1dff5 / #6b4796
 *   3 — #f5b5d3 / #812b29 / #f5b5d3
 *   4 — #111111 / #f5b5d3 / #111111
 *   5 — #b1dff5 / #111111 / #b1dff5
 *   6 — #fff7b2 / #00726a / #fff7b2
 *   7 — #c6dfc4 / #164191 / #c6dfc4
 *   8 — #164191 / #b1dff5 / #164191
 *   9 — #f5b5d3 / #164191 / #f5b5d3
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Fallback (compo 4) — jamais blanc, jamais sans couleur ──────────── */
.ccbla-event-card {
    --_card-bg:     var(--ccbla-card-bg,     #111111);
    --_card-color:  var(--ccbla-card-color,  #f5b5d3);
    --_card-tag-bg: var(--ccbla-card-tag-bg, #f5b5d3);
    --_card-tag-c:  var(--ccbla-card-tag-c,  #111111);
    display: flex;
    flex-direction: column;
    background: transparent;
    height: 100%;
}

/* ─── Compo 1 — Bordeaux · rose ──────────────────────────────────────── */
.ccbla-event-card[data-compo="1"] { --_card-bg:#812b29; --_card-color:#f5b5d3; --_card-tag-bg:#f5b5d3; --_card-tag-c:#812b29; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-event-card[data-compo="1"] .ccbla-event-card__link:hover .ccbla-event-card__body,
.ccbla-event-card[data-compo="1"] .ccbla-event-card__link:focus-visible .ccbla-event-card__body { --_card-bg:#f5b5d3; --_card-color:#812b29; }
.ccbla-event-card[data-compo="1"] .ccbla-event-card__link:hover .ccbla-event-card__tag,
.ccbla-event-card[data-compo="1"] .ccbla-event-card__link:focus-visible .ccbla-event-card__tag { background:#812b29; color:#f5b5d3; }
*/

/* ─── Compo 2 — Violet · bleu ciel ───────────────────────────────────── */
.ccbla-event-card[data-compo="2"] { --_card-bg:#6b4796; --_card-color:#b1dff5; --_card-tag-bg:#b1dff5; --_card-tag-c:#6b4796; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-event-card[data-compo="2"] .ccbla-event-card__link:hover .ccbla-event-card__body,
.ccbla-event-card[data-compo="2"] .ccbla-event-card__link:focus-visible .ccbla-event-card__body { --_card-bg:#b1dff5; --_card-color:#6b4796; }
.ccbla-event-card[data-compo="2"] .ccbla-event-card__link:hover .ccbla-event-card__tag,
.ccbla-event-card[data-compo="2"] .ccbla-event-card__link:focus-visible .ccbla-event-card__tag { background:#6b4796; color:#b1dff5; }
*/

/* ─── Compo 3 — Rose · bordeaux ──────────────────────────────────────── */
.ccbla-event-card[data-compo="3"] { --_card-bg:#f5b5d3; --_card-color:#812b29; --_card-tag-bg:#812b29; --_card-tag-c:#f5b5d3; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-event-card[data-compo="3"] .ccbla-event-card__link:hover .ccbla-event-card__body,
.ccbla-event-card[data-compo="3"] .ccbla-event-card__link:focus-visible .ccbla-event-card__body { --_card-bg:#812b29; --_card-color:#f5b5d3; }
.ccbla-event-card[data-compo="3"] .ccbla-event-card__link:hover .ccbla-event-card__tag,
.ccbla-event-card[data-compo="3"] .ccbla-event-card__link:focus-visible .ccbla-event-card__tag { background:#f5b5d3; color:#812b29; }
*/

/* ─── Compo 4 — Noir · rose ──────────────────────────────────────────── */
.ccbla-event-card[data-compo="4"] { --_card-bg:#111111; --_card-color:#f5b5d3; --_card-tag-bg:#f5b5d3; --_card-tag-c:#111111; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-event-card[data-compo="4"] .ccbla-event-card__link:hover .ccbla-event-card__body,
.ccbla-event-card[data-compo="4"] .ccbla-event-card__link:focus-visible .ccbla-event-card__body { --_card-bg:#f5b5d3; --_card-color:#111111; }
.ccbla-event-card[data-compo="4"] .ccbla-event-card__link:hover .ccbla-event-card__tag,
.ccbla-event-card[data-compo="4"] .ccbla-event-card__link:focus-visible .ccbla-event-card__tag { background:#111111; color:#f5b5d3; }
*/

/* ─── Compo 5 — Bleu ciel · noir ─────────────────────────────────────── */
.ccbla-event-card[data-compo="5"] { --_card-bg:#b1dff5; --_card-color:#111111; --_card-tag-bg:#111111; --_card-tag-c:#b1dff5; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-event-card[data-compo="5"] .ccbla-event-card__link:hover .ccbla-event-card__body,
.ccbla-event-card[data-compo="5"] .ccbla-event-card__link:focus-visible .ccbla-event-card__body { --_card-bg:#111111; --_card-color:#b1dff5; }
.ccbla-event-card[data-compo="5"] .ccbla-event-card__link:hover .ccbla-event-card__tag,
.ccbla-event-card[data-compo="5"] .ccbla-event-card__link:focus-visible .ccbla-event-card__tag { background:#b1dff5; color:#111111; }
*/

/* ─── Compo 6 — Jaune pastel · vert foncé ────────────────────────────── */
.ccbla-event-card[data-compo="6"] { --_card-bg:#fff7b2; --_card-color:#00726a; --_card-tag-bg:#00726a; --_card-tag-c:#fff7b2; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-event-card[data-compo="6"] .ccbla-event-card__link:hover .ccbla-event-card__body,
.ccbla-event-card[data-compo="6"] .ccbla-event-card__link:focus-visible .ccbla-event-card__body { --_card-bg:#00726a; --_card-color:#fff7b2; }
.ccbla-event-card[data-compo="6"] .ccbla-event-card__link:hover .ccbla-event-card__tag,
.ccbla-event-card[data-compo="6"] .ccbla-event-card__link:focus-visible .ccbla-event-card__tag { background:#fff7b2; color:#00726a; }
*/

/* ─── Compo 7 — Vert pastel · bleu marine ────────────────────────────── */
.ccbla-event-card[data-compo="7"] { --_card-bg:#c6dfc4; --_card-color:#164191; --_card-tag-bg:#164191; --_card-tag-c:#c6dfc4; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-event-card[data-compo="7"] .ccbla-event-card__link:hover .ccbla-event-card__body,
.ccbla-event-card[data-compo="7"] .ccbla-event-card__link:focus-visible .ccbla-event-card__body { --_card-bg:#164191; --_card-color:#c6dfc4; }
.ccbla-event-card[data-compo="7"] .ccbla-event-card__link:hover .ccbla-event-card__tag,
.ccbla-event-card[data-compo="7"] .ccbla-event-card__link:focus-visible .ccbla-event-card__tag { background:#c6dfc4; color:#164191; }
*/

/* ─── Compo 8 — Bleu marine · bleu ciel ─────────────────────────────── */
.ccbla-event-card[data-compo="8"] { --_card-bg:#164191; --_card-color:#b1dff5; --_card-tag-bg:#b1dff5; --_card-tag-c:#164191; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-event-card[data-compo="8"] .ccbla-event-card__link:hover .ccbla-event-card__body,
.ccbla-event-card[data-compo="8"] .ccbla-event-card__link:focus-visible .ccbla-event-card__body { --_card-bg:#b1dff5; --_card-color:#164191; }
.ccbla-event-card[data-compo="8"] .ccbla-event-card__link:hover .ccbla-event-card__tag,
.ccbla-event-card[data-compo="8"] .ccbla-event-card__link:focus-visible .ccbla-event-card__tag { background:#164191; color:#b1dff5; }
*/

/* ─── Compo 9 — Rose · bleu marine ──────────────────────────────────── */
.ccbla-event-card[data-compo="9"] { --_card-bg:#f5b5d3; --_card-color:#164191; --_card-tag-bg:#164191; --_card-tag-c:#f5b5d3; }
/* HOVER INVERSION — décommenter pour réactiver l'inversion bg↔color
.ccbla-event-card[data-compo="9"] .ccbla-event-card__link:hover .ccbla-event-card__body,
.ccbla-event-card[data-compo="9"] .ccbla-event-card__link:focus-visible .ccbla-event-card__body { --_card-bg:#164191; --_card-color:#f5b5d3; }
.ccbla-event-card[data-compo="9"] .ccbla-event-card__link:hover .ccbla-event-card__tag,
.ccbla-event-card[data-compo="9"] .ccbla-event-card__link:focus-visible .ccbla-event-card__tag { background:#f5b5d3; color:#164191; }
*/


/* ── Structure ───────────────────────────────────────────────────────── */
.ccbla-event-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: inherit;
    outline-offset: 3px;
}
.ccbla-event-card__link:focus-visible {
    outline: 3px solid var(--wp--preset--color--pop-primary, #6b4796);
    outline-offset: 3px;
}
.ccbla-event-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
    background: #111;
}
.ccbla-event-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .45s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
/* Zoom accentué (1.09) — inversion body supprimée, zoom image seul subsiste */
.ccbla-event-card__link:hover .ccbla-event-card__img,
.ccbla-event-card__link:focus-visible .ccbla-event-card__img { transform: scale(1.09); }

.ccbla-event-card__img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    color: #555;
}
.ccbla-event-card__img-placeholder svg { width: 48px; height: 64px; }

/* ── Body ─────────────────────────────────────────────────────────────── */
.ccbla-event-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--_card-bg);
    color: var(--_card-color);
    padding: 15px 15px 20px 15px;
    gap: 0;
    transition: background-color .25s ease, color .25s ease;
}

.ccbla-event-card__date {
    padding: 0;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 18px;
    color: inherit;
    margin-bottom:20px!important;
}
.ccbla-event-card__date time { display: block; }

/* 2026-05-13 (demande Nic) — Mode range scolaire: override de l'inline default `time { display: block }` pour rendre first > last sur une ligne (avec wrap si le titre est court ou le viewport étroit). Le > visuel est espacé pour respirer. */
.ccbla-event-card__date--range {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .35em;
}
.ccbla-event-card__date--range time { display: inline; }
.ccbla-event-card__date-sep {
    font-weight: 400;
    opacity: .8;
}

.ccbla-event-card__title {
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
    font-family: var(--wp--preset--font-family--agrandir-tight-bold, 'Agrandir Tight Bold', sans-serif) !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 1.0 !important;
    color: inherit !important;
}

.ccbla-event-card__organizer {
    margin: 0 0 25px 0;
    padding: 0;
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 18px !important;   /* demande graphiste : 18px (override des 20px globaux potentiels) */
    font-weight: 400;
    line-height: 1.1 !important;  /* demande graphiste : 110% */
    color: inherit;
}

/* ── Tags — desktop & tablette ────────────────────────────────────────── */
.ccbla-event-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}
.ccbla-event-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 125px;
    height: 30px;
    padding-top: 2px;
    border: 1.5px solid currentColor; /* 2026-05-09 (demande Nic — version print) : border = couleur typo */
    border-radius: 50%;
    overflow: hidden;
    background: var(--_card-tag-bg);
    color: var(--_card-tag-c);
    font-family: var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 0;
    text-transform: lowercase; /* 2026-05-09 (demande Nic — version print) */
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* 2026-05-09 (demande Nic — version print) — Pill PUBLIC inversée Concerne les pills issues de: • ext_public (event_externe) • int-public (event-interne-ok) • utick_attraction_agelimit (event-utick — postmeta texte libre) Inversion exacte des vars compo: bg ← tag-c, color ← tag-bg. Le bg fait office de "border" par contraste avec le card body. Hover/focus: les compositions data-compo[N] swappent bg↔color au hover (lignes 36-110), ce qui inverse à nouveau la pill public → comportement cohérent (la pill catégorie devient claire, la pill public devient pâle). */
.ccbla-event-card__tag--public {
    background: var(--_card-tag-c);
    color: var(--_card-tag-bg);
}

/* ── Mobile (<768px) — typo réduite + tags agrandis ──────────────────── */
@media (max-width: 767px) {
    .ccbla-event-card__body {
        padding: 25px 15px 25px 15px; /* demande graphiste : 25 top/bot, 15 left/right */
    }
    .ccbla-event-card__date {
        font-size: 16px !important;        /* demande graphiste : 14 → 16 */
        line-height: 1.1 !important;
        margin-bottom: 25px !important;    /* écart date/titre = 25 */
    }
    .ccbla-event-card__title {
        font-size: 30px !important;
        line-height: 1.05 !important;
        margin: 0 0 25px 0 !important;     /* écart titre/organizer = 25 */
    }
    .ccbla-event-card__organizer {
        font-size: 16px !important;
        line-height: 1.1 !important;
        margin: 0 0 25px 0;                /* écart organizer/tags = 25 */
    }
    .ccbla-event-card__tags {
        gap: 18px;
        margin-top: auto;
    }
    .ccbla-event-card__tag {
        height: 32px;
        padding-top: 0;
        padding: 18px;
        font-size: 16px;
        line-height: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * 2026-05-11 — Variante --no-link (dashboard membre « Gérer mes événements »)
 * Le wrapper <a> est remplacé par <div> côté template event-card.php.
 * On annule le pointer du curseur et les états :hover/:focus-visible qui
 * n'ont plus de sens (le wrapper inert n'est plus focusable). Les CTA
 * (bouton « Modifier » overlay, bandeau modération) restent fonctionnels.
 *
 * 2026-05-14 v1 — RENFORCEMENT spécificité : les règles compo (L33-115)
 * utilisent `.ccbla-event-card[data-compo="X"] .ccbla-event-card__link:hover`
 * = 5 atomes de spécificité. Ajout `[data-compo]` dans le sélecteur
 * d'override pour égaler les atomes et gagner par ordre dans la cascade.
 *
 * 2026-05-14 v2 — BULLETPROOF (Nic, hover persiste malgré v1) : la
 * tentative par spécificité ne suffit pas (probablement un override
 * Kadence Pro ou un side-effect de cascade tiers). Solution radicale :
 * `pointer-events: none` sur le wrapper inert → le navigateur n'émet
 * PLUS l'event :hover, donc aucune règle CSS ciblant :hover ne peut
 * matcher, peu importe la spécificité ou les !important d'un autre
 * stylesheet.
 *
 * Scope strict : `.ccbla-events-tab` ancestor → la neutralisation
 * s'applique UNIQUEMENT dans le dashboard membre "Gérer mes événements"
 * (cf. um-tab-evenements.php wrapper L104). Les cartes du même type sur
 * le reste du site (agendas publics, etc.) gardent leur hover normal.
 *
 * Le bouton « Modifier » (.ccbla-events-tab__card-edit) et le bandeau
 * modération (.ccbla-mod-card-banner) sont FRÈRES de .ccbla-event-card
 * dans le DOM (cf. um-tab-evenements.php L234-280), donc gardent leurs
 * pointer-events normaux et restent cliquables.
 * ───────────────────────────────────────────────────────────────────── */
.ccbla-event-card--no-link .ccbla-event-card__link--inert {
    cursor: default;
}

/* v2 bulletproof — désactivation totale des pointer events sur le wrapper inert dans le contexte espace membre. Empêche:hover de tirer. */
.ccbla-events-tab .ccbla-event-card--no-link .ccbla-event-card__link--inert {
    pointer-events: none;
}

/* v1 conservé en filet de sécurité: si jamais.ccbla-events-tab ancestor change ou disparaît (refactor UM tab futur), l'override couleurs reste actif via spécificité égale (5 atomes) + cascade. Double ceinture. */
.ccbla-event-card--no-link[data-compo] .ccbla-event-card__link--inert:hover .ccbla-event-card__body,
.ccbla-event-card--no-link[data-compo] .ccbla-event-card__link--inert:hover .ccbla-event-card__tag,
.ccbla-event-card--no-link .ccbla-event-card__link--inert:hover .ccbla-event-card__body,
.ccbla-event-card--no-link .ccbla-event-card__link--inert:hover .ccbla-event-card__tag {
    background: inherit;
    color: inherit;
    --_card-bg: var(--ccbla-card-bg, #111111);
    --_card-color: var(--ccbla-card-color, #f5b5d3);
}
.ccbla-event-card--no-link .ccbla-event-card__link--inert:hover .ccbla-event-card__img,
.ccbla-event-card--no-link .ccbla-event-card__link--inert:focus-visible .ccbla-event-card__img {
    transform: none;
}