/**
 * gdm-widgets.css — Widgets communauté (shortcode [gdm_widget])
 * Depend on gdm-base.css for tokens (couleurs, radius, shadows, typo).
 *
 * Rendus gérés :
 *   - Card conteneur unique (.gdm-widget-card)
 *   - Sections empilables (.gdm-widget-section)
 *   - Items membres : avatar rond + nom + rôle•ville
 *   - Items événements : image carrée arrondie + label coloré + titre + date
 *
 * @since 2.9.0
 */

/* ==========================================================================
   Card conteneur
   ========================================================================== */

.gdm-widget-card {
   /* background: var(--gdm-white);
    border-radius: var(--gdm-radius);
    box-shadow: var(--gdm-shadow-card);
    padding: 1.25rem 1.5rem;*/
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: var(--gdm-font-body);
    color: var(--gdm-text);
    max-width: 420px;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.gdm-widget-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Séparateur subtil entre sections (sauf première) */
.gdm-widget-section + .gdm-widget-section {
    padding-top: 1.25rem;
    border-top: 1px solid var(--gdm-border);
}

.gdm-widget-section-title {
    font-family: var(--gdm-font-heading, var(--gdm-font-body));
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gdm-text-title);
    margin: 0;
    line-height: 1.3;
}

/* ==========================================================================
   Listes d'items (reset ul)
   !important neutralise le padding-left: 2em injecté par Kadence sur
   .single-content ul,ol dans global.min.css (cf. pattern Kadence-mitigation).
   ========================================================================== */

.gdm-widget-list {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gdm-widget-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gdm-widget-item-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    color: var(--gdm-text);
    border-radius: var(--gdm-radius-sm);
    padding: 0.25rem;
    margin: -0.25rem;
    transition: background-color 0.15s ease;
}

.gdm-widget-item-link:hover,
.gdm-widget-item-link:focus-visible {
    background: var(--gdm-bg-light);
    text-decoration: none;
    color: var(--gdm-text);
}

.gdm-widget-item-link:focus-visible {
    outline: 2px solid var(--gdm-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Avatars — membre (rond via .gdm-avatar canonique) et événement (carré arrondi)
   ========================================================================== */

/* Membre : dimensions + font-size de l'initiale.
   La classe canonique .gdm-avatar (gdm-base.css) fournit : border-radius 50%,
   centrage flex, color #fff, overflow hidden, et .gdm-avatar--initial pour
   le fallback initiale sur fond coloré (couleur de la danse du membre). */
.gdm-widget-avatar-member {
    width: 48px;
    height: 48px;
    font-size: 1rem;
    font-weight: 600;
    flex: 0 0 auto;
}

/* Événement : carré arrondi 56px, pas d'initiale (c'est une image featured) */
.gdm-widget-avatar {
    flex: 0 0 auto;
    display: block;
    overflow: hidden;
    background: var(--gdm-bg-subtle);
    position: relative;
}

.gdm-widget-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gdm-widget-avatar--square {
    width: 56px;
    height: 56px;
    border-radius: 12px;
}

/* ==========================================================================
   Corps de l'item (texte à droite de l'avatar)
   ========================================================================== */

.gdm-widget-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
}

.gdm-widget-item-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gdm-text-title);
    line-height: 1.25;
    /* Empêche le débordement sur les très longs titres d'événements */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gdm-widget-item-meta {
    font-size: 0.82rem;
    color: var(--gdm-text-mid);
    line-height: 1.3;
}

/* ==========================================================================
   Label catégorie / première danse (texte rose sobre)
   Affiche : "Danses de salon" (1 tag) ou "Danses de salon +" (plusieurs),
   fallback sur le nom de catégorie si aucun tag de danse.
   ========================================================================== */

.gdm-widget-item-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gdm-widget-label-color, var(--gdm-primary));
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

/* ==========================================================================
   Responsive : pas de comportement spécial mobile nécessaire
   (la card passe en pleine largeur de son conteneur)
   ========================================================================== */

@media (max-width: 480px) {
    .gdm-widget-card {
        padding: 1rem 1.125rem;
        gap: 1rem;
    }
    .gdm-widget-section + .gdm-widget-section {
        padding-top: 1rem;
    }
}