/**
 * gdm-event-color.css — Layouts color-list (et futur color-grid) du listing événements
 *
 * Cards aux couleurs du tag danse principal (--gdm-primary-dance-slug).
 * Trois variantes automatiques selon catégorie + disponibilité d'une photo :
 *
 *   --bg    : photo en fond avec overlay coloré       (soirée + photo)       → ambiance romantique
 *   --thumb : photo en vignette carrée à côté         (stage + photo)        → ambiance technique
 *   --flat  : fond coloré plein, aucune photo         (toute catégorie sans photo)
 *
 * Couleurs pilotées par --gdm-event-card-bg / --gdm-event-card-text
 * (injectés inline par le template, issus de Event::get_primary_dance()).
 *
 * Fallback quand aucune danse principale : gris (toutes-danses ou pas de danse).
 *
 * Dépendance : gdm-base.css (tokens, .gdm-avatar)
 */

/* =====================================================================
   HEADER — filtres gauche + CTA publier droite (layouts color uniquement)
   ===================================================================== */

.gdm-event-color-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0 24px;
}

/* En color-header, on neutralise les margins pour que le flex space-between aligne proprement */
.gdm-event-color-header .gdm-event-publish-cta,
.gdm-event-color-header .gdm-event-dance-tags {
    margin: 0;
}

/* =====================================================================
   CONTAINER
   ===================================================================== */

.gdm-event-color-list,
.gdm-event-color-grid {
    /* Variables ajustables pour le tuning visuel (override possible en theme ou inline).
       Réglage par défaut = celui calé avec François dans Figma : photo en mode
       "Superposition" (overlay CSS) à 100% opacité sur le fond de couleur plate.
       Si une danse a un color_bg trop pâle et que la photo domine trop, tu peux :
         - Réduire --photo-opacity à 0.6-0.8 pour que la couleur reprenne le dessus
         - Passer --photo-grayscale à 1 pour neutraliser les conflits chromatiques
         - Changer --blend-mode (overlay | multiply | soft-light | hard-light | color-dodge) */
    --gdm-event-color-blend-mode:       overlay;
    --gdm-event-color-photo-opacity:    1;
    --gdm-event-color-photo-saturation: 1;
    --gdm-event-color-photo-grayscale:  0;
    --gdm-event-color-card-radius: 18px;
    --gdm-event-color-card-gap: 16px;

    margin: 20px 0;
}

/* Layout LISTE : stack vertical, cards larges et basses */
.gdm-event-color-list {
    display: flex;
    flex-direction: column;
    gap: var(--gdm-event-color-card-gap);
}

/* Layout GRILLE : colonnes responsives, cards portrait */
.gdm-event-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--gdm-event-color-card-gap);
}

/* =====================================================================
   CARD — wrapper <a> cliquable en entier
   ===================================================================== */

.gdm-event-color-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 26px;
    border-radius: var(--gdm-event-color-card-radius);
    background: var(--gdm-event-card-bg, var(--gdm-bg-subtle));
    color: var(--gdm-event-card-text, var(--gdm-text-title)) !important;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    min-height: 180px;
    isolation: isolate; /* protège le z-index interne contre l'env. Kadence */
}

.gdm-event-color-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* =====================================================================
   LINK OVERLAY — le lien "toute la carte est cliquable"
   ===================================================================== */

/* =====================================================================
   STACKING ORDER (toutes variantes confondues)
   z-index 0  →  ::before photo (variante bg uniquement)
   z-index 1  →  <a class="link"> couvre toute la carte
   z-index 2  →  <div class="top"> contenu visible (pointer-events:none)
   z-index 3  →  <button class="heart"> (pointer-events:auto, intercepte ses clics)

   pointer-events:
     ::before    none (décoratif)
     link        auto (reçoit les clics)
     top         none (laisse traverser vers le link)
     children    none héritent du parent top
     heart       auto (override explicite, intercepte avant le link)
   ===================================================================== */

/* Lien overlay invisible : full-card, intercepte les clics */
.gdm-event-color-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none !important;
    /* Texte du aria-label accessible mais invisible */
    font-size: 0;
    color: transparent;
    /* Sécurise le pointer-events face à un éventuel hériter de Kadence */
    pointer-events: auto;
}

.gdm-event-color-card-link:focus-visible {
    outline: 3px solid var(--gdm-primary);
    outline-offset: -3px;
    border-radius: var(--gdm-event-color-card-radius);
}

/* Contenu visible : au-dessus du link mais transparent aux clics */
.gdm-event-color-card-top {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Force explicite : tous les descendants du top n'interceptent pas les clics.
   Seul le bouton cœur ré-active pointer-events:auto plus bas (override gagne grâce
   à la spécificité + à l'!important). Sans cette règle, certains éléments
   interactifs comme <a> internes ou <img> avec event listeners peuvent capturer
   le clic et empêcher la propagation vers le link overlay. */
.gdm-event-color-card-top * {
    pointer-events: none;
}

/* Assure que tout le texte hérite de la couleur de la carte */
.gdm-event-color-card h3,
.gdm-event-color-card p,
.gdm-event-color-card span,
.gdm-event-color-card svg {
    color: inherit;
}

/* =====================================================================
   VARIANTE --bg : photo en mode Superposition (Figma) sur fond de couleur
   Architecture :
     - Fond de couleur plate porté par la carte elle-même (background)
     - Photo en ::before par-dessus, en mix-blend-mode overlay
   Un seul calque suffit, la couleur est préservée partout où la photo est neutre.
   ===================================================================== */

.gdm-event-color-card--bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--gdm-event-card-photo, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    mix-blend-mode: var(--gdm-event-color-blend-mode);
    filter: saturate(var(--gdm-event-color-photo-saturation)) grayscale(var(--gdm-event-color-photo-grayscale));
    opacity: var(--gdm-event-color-photo-opacity);
    z-index: 0;
    pointer-events: none;
}

/* =====================================================================
   TOP ROW — date + [thumb optionnel] + body
   ===================================================================== */

.gdm-event-color-card-top {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex: 1;
}

/* ---- Bloc date (toutes variantes) -------------------------------- */

.gdm-event-color-card-date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    min-width: 8rem;
    padding-top: 4px;
}

.gdm-event-color-card-day {
    font-size: 5.5rem;
    font-weight:600;
    /*letter-spacing: -0.02em;*/
    line-height: 1;
}

.gdm-event-color-card-month {
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: lowercase;
    margin: 0px !important;
}

/* ---- Photo vignette (variante --thumb uniquement) ---------------- */

.gdm-event-color-card-thumb {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.08);
}

.gdm-event-color-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Body : titre + meta ----------------------------------------- */

.gdm-event-color-card-body {
    flex: 1;
    min-width: 0; /* autorise ellipsis/wrap dans titres longs */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gdm-event-color-card-title {
    font-size: 1.7rem;
    font-weight: 700;
    /*line-height: 1.2;*/
    margin: 0 !important;
    word-break: break-word;
}

/* Meta en liste : info, horaire, lieu.
   !important sur padding/margin/list-style : contre-mesure Kadence qui applique
   padding-left: 2em sur les <ul> via .single-content. */
.gdm-event-color-card-meta {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    line-height: 1.1;
}

.gdm-event-color-card-meta li {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Date / Horaire découpés pour permettre le wrap sur 2 lignes en grid.
   En color-list : inline sur une seule ligne, séparés par "@".
   En color-grid : empilés verticalement (date puis heure dessous). */
.gdm-event-color-card-meta-time {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 6px;
}

/* Heure : "@ 20:30" en list (par défaut, partagé par event-list ET hub_events).
   En color-grid, la place verticale autorise un retour à la ligne sans @. */
.gdm-event-color-card-meta-hour::before {
    content: '@\00a0';
}

.gdm-event-color-grid .gdm-event-color-card-meta-hour::before {
    content: none;
}

/* Adresse : même logique que date/heure, découpée en venue + ville.
   En color-list : inline sur une seule ligne, séparés par ", ".
   En color-grid : empilés verticalement (lieu puis ville dessous). */
.gdm-event-color-card-meta-place {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 6px;
}

.gdm-event-color-card-meta-city::before {
    content: ',\00a0';
}

.gdm-event-color-grid .gdm-event-color-card-meta-city::before {
    content: none;
}

.gdm-event-color-card-meta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke-width: 1.8;
}

/* =====================================================================
   BOTTOM ROW — avatars + heart count
   ===================================================================== */

/* Bottom : avatars + heart, rangé en bas du body via margin-top auto.
   En variante bg-grid, repositionné en absolute (voir plus bas). */
.gdm-event-color-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
}

/* ---- Stack d'avatars (gauche) ------------------------------------ */

.gdm-event-color-card-avatars {
    display: flex;
    align-items: center;
}

.gdm-event-color-card-avatars .gdm-avatar,
.gdm-event-color-card-avatars-more {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--gdm-event-card-bg, var(--gdm-bg-subtle));
    margin-left: -8px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.gdm-event-color-card-avatars .gdm-avatar:first-child {
    margin-left: 0;
}

.gdm-event-color-card-avatars .gdm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Badge "+N" pour les participants au-delà du preview */
.gdm-event-color-card-avatars-more {
    background: rgba(255, 255, 255, 0.22);
    font-weight: 700;
    color: inherit;
}

/* Variante --bg (photo fond) : les avatars ont une bordure plus contrastée */
.gdm-event-color-card--bg .gdm-event-color-card-avatars .gdm-avatar,
.gdm-event-color-card--bg .gdm-event-color-card-avatars-more {
    border-color: rgba(255, 255, 255, 0.35);
}

/* =====================================================================
   HEART BUTTON — bouton cœur cliquable (loggé : toggle AJAX, guest : lien login)
   ===================================================================== */

/* Le bouton a pointer-events auto pour ré-activer les clics (parent a none).
   !important pour battre la règle wildcard `.gdm-event-color-card-top *`.
   z-index 3 pour passer au-dessus du lien overlay.
   Reset des styles button par défaut. */
.gdm-event-color-card-heart {
    pointer-events: auto !important;
    position: relative;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin: -6px -10px; /* annule le padding pour garder le même encombrement visuel */
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    text-decoration: none !important;

    transition: background 0.15s ease, transform 0.15s ease;
}

.gdm-event-color-card-heart:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* Variante --bg (photo en fond) : hover plus contrasté sur fond variable */
.gdm-event-color-card--bg .gdm-event-color-card-heart:hover {
    background: rgba(255, 255, 255, 0.22);
}

.gdm-event-color-card-heart:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gdm-event-color-card-heart.is-busy {
    cursor: wait;
}

/* Animation pulse quand le cœur passe à l'état liké */
.gdm-event-color-card-heart.is-liked .gdm-event-color-card-heart-icon {
    animation: gdm-heart-pulse 0.35s ease-out;
}

@keyframes gdm-heart-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.gdm-event-color-card-heart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
}

.gdm-event-color-card-heart-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
    display: block;
}

/* État liké : le svg rempli apparaît. Couleur = inherit (couleur de la carte).
   Alternative : forcer un rouge vif si on veut que ça pop davantage. */
.gdm-event-color-card-heart.is-liked .gdm-event-color-card-heart-icon svg {
    /* Le SVG 'heart-filled' a déjà fill=currentColor donc il hérite automatiquement */
}

.gdm-event-color-card-heart-count {
    font-variant-numeric: tabular-nums;
    min-width: 1ch; /* évite le micro-jump quand on passe de 0 à 1 à 10 */
}

/* =====================================================================
   LAYOUT GRID — overrides pour le layout color-grid
   Principe : mêmes classes internes, on change juste l'orientation de la
   partie "top" (date + thumb + body) de ligne horizontale à colonne verticale.
   Résultat : carte portrait façon "carte à jouer", plus compacte.
   ===================================================================== */

.gdm-event-color-grid .gdm-event-color-card {
    min-height: 380px;
    padding: 14px 22px;
    gap: 16px;
}

/* La zone "top" empile verticalement : date → thumb → body (titre + meta) */
.gdm-event-color-grid .gdm-event-color-card-top {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

/* Date : alignée à gauche, pas centrée, pour le haut de la carte */
.gdm-event-color-grid .gdm-event-color-card-date {
    /* flex-direction: row;
       gap: 8px; */
    align-items: baseline;
    min-width: 0;
    padding-top: 0;
}

.gdm-event-color-grid .gdm-event-color-card-day {
    font-size: 5rem;
}

.gdm-event-color-grid .gdm-event-color-card-month {
    font-size: 1.4rem;
    margin-top: 0;
}

/* Vignette photo : pleine largeur au centre, ratio 4:3 pour un rendu "card" */
.gdm-event-color-grid .gdm-event-color-card-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
}

/* Body : titre et meta empilés, titre plus contenu */
.gdm-event-color-grid .gdm-event-color-card-title {
    font-size: 1.5rem;
}

.gdm-event-color-grid .gdm-event-color-card-meta {
    font-size: 0.85rem;
}

/* En grid : place économisée, on casse la ligne entre la date et l'heure.
   align-items: flex-start garde l'icône alignée en haut quand le texte
   se répand sur plusieurs lignes (date + heure, adresse longue, etc.). */
.gdm-event-color-grid .gdm-event-color-card-meta li {
    align-items: flex-start;
}

.gdm-event-color-grid .gdm-event-color-card-meta-time {
    flex-direction: column;
    gap: 2px;
}

.gdm-event-color-grid .gdm-event-color-card-meta-place {
    flex-direction: column;
    gap: 2px;
}

/* En variante bg (soirée + photo en fond) du grid, on sort le bottom du body
   pour qu'il vienne coller en bas de la carte, pleine largeur sur la photo.
   Les autres variantes (thumb, flat) gardent le bottom dans le body. */
.gdm-event-color-grid .gdm-event-color-card--bg .gdm-event-color-card-bottom {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 10px;
    margin-top: 0;
}

/* Pour compenser l'absolute, on réserve de la place en bas du body */
.gdm-event-color-grid .gdm-event-color-card--bg .gdm-event-color-card-body {
    padding-bottom: 48px;
}

/* =====================================================================
   RESPONSIVE — tablette et mobile
   ===================================================================== */

@media (max-width: 768px) {
    .gdm-event-color-card {
        padding: 18px 20px;
        min-height: auto;
    }

    .gdm-event-color-card-top {
        gap: 16px;
    }

    .gdm-event-color-card-day {
        font-size: 2.6rem;
    }

    .gdm-event-color-card-month {
        font-size: 0.85rem;
        margin-top: 4px;
    }

    .gdm-event-color-card-date {
        min-width: 56px;
    }

    .gdm-event-color-card-thumb {
        width: 96px;
        height: 96px;
    }

    .gdm-event-color-card-title {
        font-size: 1.3rem;
    }

    .gdm-event-color-card-meta {
        font-size: 0.88rem;
    }
}

@media (max-width: 480px) {
    .gdm-event-color-card {
        padding: 16px 16px;
    }

    /* Sur très petit écran, on masque la vignette (variante --thumb).
       La photo peut toujours être vue sur la page single-event. */
    .gdm-event-color-card--thumb .gdm-event-color-card-thumb {
        display: none;
    }

    .gdm-event-color-card-day {
        font-size: 2.2rem;
    }

    .gdm-event-color-card-date {
        min-width: 48px;
    }
}


/* ============================================================================
 * RANGÉE COMPACTE — color-card + event-actions côte à côte
 *
 * Utilisée par :
 *   - [gdm_hub_events]   (HubShortcodes::render_events_shortcode)
 *   - profile-view.php   (section "Mes événements")
 *
 * Réutilise event-color-card.php (variante color-list) + event-actions.php
 * (layout compact). Quelques ajustements scopés à .gdm-hub-event-row :
 *   - Cacher le cœur natif de event-actions (doublon avec celui du color-card)
 *   - Réduire un peu la hauteur de la carte (date XL plus petite)
 *   - Aligner la rangée d'actions à droite de la carte
 * ============================================================================ */

/* Conteneur de chaque event : color-card à gauche, actions à droite.
   On définit ici les variables CSS du color-card (normalement portées par
   .gdm-event-color-list) pour activer la teinte couleur sur la photo. */
.gdm-hub-event-row {
    --gdm-event-color-blend-mode:       overlay;
    --gdm-event-color-photo-opacity:    1;
    --gdm-event-color-photo-saturation: 1;
    --gdm-event-color-photo-grayscale:  0;
    --gdm-event-color-card-radius:      18px;
    --gdm-event-color-card-gap:         16px;

    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.gdm-hub-event-row:last-child {
    margin-bottom: 0;
}

/* La color-card prend tout l'espace disponible */
.gdm-hub-event-row .gdm-event-color-card {
    flex: 1 1 auto;
    min-width: 0; /* permet au contenu de rétrécir si nécessaire */
}

/* Cacher le cœur natif de event-actions pour éviter le doublon
   avec celui du color-card. On garde uniquement participe + annoncer
   + avatars-row qu'on remontera autrement. */
.gdm-hub-event-row .gdm-event-actions .gdm-event-action-heart {
    display: none;
}

/* Cacher aussi l'avatars-row du compact (les avatars sont déjà dans
   event-color-card-bottom). Ne reste plus que les boutons participe + annoncer. */
.gdm-hub-event-row .gdm-event-actions .gdm-event-avatars-row {
    display: none;
}

/* Boutons d'actions : empilés verticalement à droite de la carte */
.gdm-hub-event-row .gdm-event-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 0.5rem;
}

/* Boutons d'actions empilés verticalement (participe + annoncer) */
.gdm-hub-event-row .gdm-event-actions-btns {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Mobile : carte au-dessus, actions dessous (au lieu de carte + actions côte à côte) */
@media (max-width: 600px) {
    .gdm-hub-event-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .gdm-hub-event-row .gdm-event-actions,
    .gdm-hub-event-row .gdm-event-actions-btns {
        flex-direction: row;
        justify-content: flex-end;
    }
}