/* ==========================================================================
   AD Events — Style d'affichage "Éditorial"
   N'utilise que les variables --ade-* (Réglages > Apparence) : ce fichier est
   générique, réutilisable sur n'importe quel site utilisant ce plugin. Les
   polices ne sont volontairement pas fixées ici : les titres (h2/h3) héritent
   du style de titres du thème actif du site.
   ========================================================================== */

.ade-ed-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    /* align-items: start (au lieu du stretch par défaut d'une grille) —
       sans ça, la colonne photo s'étire pour occuper toute la hauteur de la
       ligne, qui grandit avec le panneau invités/repas (stepper + repas du
       membre + un sélecteur par invité ajouté) : la photo s'allongeait donc
       à chaque invité ajouté. Même correctif que .ade-ed-single-hero
       (thème bbc, page événement) — la photo y a une hauteur fixe pour la
       même raison. */
    align-items: start;
    background: var(--ade-card-bg, #fff);
    border: 1px solid var(--ade-card-border, #e2e8f0);
    border-radius: var(--ade-card-radius, 12px);
    overflow: hidden;
}
@media (max-width: 782px) {
    .ade-ed-hero { grid-template-columns: 1fr; }
}
.ade-ed-hero__media { position: relative; background: var(--ade-accent-light, #fef3c7); height: 320px; }
.ade-ed-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ade-ed-hero__media-empty { width: 100%; height: 100%; background: var(--ade-accent-light, #fef3c7); }

.ade-ed-hero__content { padding: 44px; }
.ade-ed-hero__badges { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.ade-ed-badge {
    padding: 6px 12px;
    background: var(--ade-card-border, #e2e8f0);
    color: var(--ade-text-secondary, #64748b);
    font-size: 11px;
    font-weight: 600;
    border-radius: 16px;
    line-height: 1.4;
}
.ade-ed-badge--accent {
    background: var(--ade-accent-light, #fef3c7);
    color: var(--ade-accent-dark, #b45309);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ade-ed-hero__live-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ade-ed-hero__title {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 500;
    margin: 0 0 14px;
}
.ade-ed-hero__title a { color: var(--ade-text-primary, #0f172a); text-decoration: none; }
.ade-ed-hero__title a:hover { color: var(--ade-accent, #d97706); }
.ade-ed-hero__excerpt {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ade-text-secondary, #64748b);
    margin: 0 0 24px;
}
.ade-ed-hero__info { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.ade-ed-hero__info-row {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ade-text-primary, #0f172a);
}
.ade-ed-dot {
    display: block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    background: var(--ade-accent, #d97706);
}
.ade-ed-hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ade-ed-hero__actions .ade-cal-share-group { display: flex; gap: 14px; align-items: center; }

/* Boutons ronds icône-seule, comme la maquette Claude Design "BBC Evenement
   Detail" — on ne touche pas au JS/HTML du plugin (menu déroulant Google/
   Outlook/ICS et réseaux sociaux + copie de lien restent fonctionnels tels
   quels), seule l'apparence du bouton déclencheur est surchargée ici. Le
   libellé texte reste dans le DOM (accessibilité) mais visuellement masqué. */
.ade-ed-hero__actions .ade-cal-share-group .ade-cal-picker summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    gap: 0;
    font-size: 0;
    line-height: 1;
    color: var(--ade-text-primary, #0f172a);
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(22, 55, 92, .2);
    transition: color .15s, box-shadow .15s;
}
.ade-ed-hero__actions .ade-cal-share-group .ade-cal-picker summary svg {
    display: block;
    flex-shrink: 0;
}
/* Même traitement de survol que le bouton "Une question ?" (.ade-ed-btn-outline)
   — anneau et icône (stroke="currentColor") passent à la couleur d'accent. */
.ade-ed-hero__actions .ade-cal-share-group .ade-cal-picker summary:hover {
    background: #fff;
    color: var(--ade-accent, #d97706);
    box-shadow: inset 0 0 0 1.5px var(--ade-accent, #d97706);
}
.ade-ed-hero__actions .ade-cal-share-group .ade-cal-menu {
    font-size: 1rem;
}

/* Bouton "En savoir plus" — contour, réutilisé dans le hero et la liste "à venir" */
.ade-ed-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ade-btn-pv, 10px) var(--ade-btn-ph, 22px);
    color: var(--ade-text-primary, #0f172a);
    font-weight: 600;
    font-size: var(--ade-btn-font-size, 14px);
    border-radius: var(--ade-btn-radius, 6px);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ade-text-primary, #0f172a) 20%, transparent);
    text-decoration: none;
    white-space: nowrap;
}
.ade-ed-btn-outline:hover {
    box-shadow: inset 0 0 0 1.5px var(--ade-accent, #d97706);
    color: var(--ade-accent, #d97706);
}

/* Bouton d'inscription : plein "texte principal" (assorti à "En savoir plus"),
   pas la couleur d'accentuation — cohérent avec la maquette (bouton foncé, pas orange). */
.ade-ed-hero .ade-reg-btn--register,
.ade-ed-row .ade-reg-btn--register,
.ade-ed-single-hero .ade-reg-btn--register {
    background: var(--ade-text-primary, #0f172a);
    color: var(--ade-card-bg, #fff);
}
.ade-ed-hero .ade-reg-btn--register:hover,
.ade-ed-row .ade-reg-btn--register:hover,
.ade-ed-single-hero .ade-reg-btn--register:hover {
    background: var(--ade-accent, #d97706);
    color: var(--ade-card-bg, #fff);
    transform: none;
    box-shadow: none;
}
.ade-ed-hero .ade-reg-btn,
.ade-ed-row .ade-reg-btn,
.ade-ed-single-hero .ade-reg-btn {
    width: auto;
    border-radius: var(--ade-btn-radius, 6px);
    padding: var(--ade-btn-pv, 10px) var(--ade-btn-ph, 22px);
    /* Le CSS par défaut du plugin (class-registration-ui.php, enqueue_assets())
       fixe line-height:1!important sans définir de font-family, pour rester
       robuste dans n'importe quel contexte d'intégration (dashboard, cartes
       WP Grid Builder...) — ici, dans le hero éditorial, ça donnait un bouton
       "S'inscrire" plus bas que "Une question ?" (.ade-ed-btn-outline), qui
       hérite normalement la police/line-height du thème. On resynchronise les
       deux avec la même spécificité "!important" pour gagner sur cette règle. */
    font-family: inherit !important;
    line-height: inherit !important;
}

/* ── Liste "à venir" ([ad_events_app] en style éditorial) ───────────────── */
.ade-ed-list { display: flex; flex-direction: column; gap: 16px; }
.ade-ed-row {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 26px;
    align-items: center;
    background: var(--ade-card-bg, #fff);
    border: 1px solid var(--ade-card-border, #e2e8f0);
    border-radius: var(--ade-card-radius, 12px);
    padding: 22px 26px;
}
@media (max-width: 640px) {
    .ade-ed-row { grid-template-columns: 1fr; text-align: left; }
    .ade-ed-row__date { flex-direction: row !important; gap: 8px; border-right: none !important; padding-right: 0 !important; }
}
.ade-ed-row__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid var(--ade-card-border, #e2e8f0);
    padding-right: 20px;
}
.ade-ed-row__day {
    font-size: 32px;
    line-height: 1;
    font-weight: 500;
    color: var(--ade-text-primary, #0f172a);
}
.ade-ed-row__month {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--ade-accent, #d97706);
    margin-top: 4px;
    text-transform: uppercase;
}
.ade-ed-row__badges { margin-bottom: 8px; }
.ade-ed-row__title {
    font-size: 21px;
    font-weight: 600;
    margin: 0 0 4px;
}
.ade-ed-row__title a { color: var(--ade-text-primary, #0f172a); text-decoration: none; }
.ade-ed-row__title a:hover { color: var(--ade-accent, #d97706); }
.ade-ed-row__meta { font-size: 13px; font-weight: 500; color: var(--ade-text-secondary, #64748b); }
.ade-ed-list__empty { color: var(--ade-text-secondary, #64748b); font-size: 14px; }

/* ── Grille "passés" ([ad_events_app period="past"] en style éditorial) ─── */
.ade-ed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
@media (max-width: 900px) {
    .ade-ed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ade-ed-grid { grid-template-columns: 1fr; }
}
.ade-ed-card {
    display: block;
    background: var(--ade-card-bg, #fff);
    border: 1px solid var(--ade-card-border, #e2e8f0);
    border-radius: var(--ade-card-radius, 12px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.ade-ed-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--ade-accent-light, #fef3c7); }
.ade-ed-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ade-ed-card__img-empty { width: 100%; height: 100%; background: var(--ade-accent-light, #fef3c7); }
.ade-ed-card__badge { position: absolute; top: 14px; left: 14px; background: var(--ade-card-bg, #fff); }
.ade-ed-card__body { padding: 22px; }
.ade-ed-card__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ade-text-primary, #0f172a);
    margin: 0 0 6px;
}
.ade-ed-card:hover .ade-ed-card__title { color: var(--ade-accent, #d97706); }
.ade-ed-card__meta { font-size: 13px; font-weight: 500; color: var(--ade-text-secondary, #64748b); margin-bottom: 10px; }
.ade-ed-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--ade-text-secondary, #64748b); margin: 0; }

/* ── Carte "teaser" (prochains événements, ex. accueil) ──────────────────
   Même carcasse que .ade-ed-card (photo + corps), mais ligne date/heure
   avec puce au lieu du badge catégorie, et lieu en pied de carte. ── */
.ade-ed-card__date-line {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ade-accent, #d97706);
    margin-bottom: 12px;
}
.ade-ed-card__title--teaser { font-size: 22px; line-height: 1.25; margin-bottom: 10px; }
.ade-ed-card__location { font-size: 12.5px; font-weight: 500; color: var(--ade-text-secondary, #64748b); margin-top: 12px; }

/* ── Galerie photos (page événement passé, "Retour en images") ──────────── */
.ade-ed-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 900px) {
    .ade-ed-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .ade-ed-gallery { grid-template-columns: repeat(2, 1fr); }
}
.ade-ed-gallery__item {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--ade-card-radius, 12px);
    overflow: hidden;
}
.ade-ed-gallery__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.ade-ed-gallery__item:hover .ade-ed-gallery__img { transform: scale(1.04); }