/* ══════════════════════════════════════════════════════════════
   Listing /agenda — cards image-background + grille
   ══════════════════════════════════════════════════════════════
   Le layout principal (sidebar, toolbar, header dropdown, pagination,
   filter chips, empty state) est porté par `zones/content.css`. Ce
   fichier porte la grille agenda + la card image-background propre
   aux événements.

   Pattern visuel aligné sur `.article-card` (zones/articles.css)
   pour cohérence inter-listings ; la teinte secondaire (vert ANCESU)
   différencie les partenaires de l'ANCESU (bleu primary).

   Convention de nommage : `.event-agenda-card`, partagé par la home
   (`home-agenda__grid`), /agenda et /evenements via `_card_agenda.html.twig`.
   ══════════════════════════════════════════════════════════════ */

/* ── Grille — 1 colonne mobile, 2 colonnes ≥ 640px ── */
.content-list__grid--agenda {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 40em) {
    .content-list__grid--agenda {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

/* Header de groupe (année / mois / type) — variante /agenda plus
   présente que la base `.content-list__group-header` (qui reste un
   repère discret pour /ressources). Ici, le regroupement structure
   vraiment la lecture (Année 2026 → 12 events → Année 2025 → …) et
   doit s'imposer comme un point de bascule visuel.

   Structure : un eyebrow (« Année », « Mois », « Type ») en small caps
   au-dessus, et un label majeur (« 2026 », « Mars 2026 », « Colloque »)
   en titre H2 généreux, avec un séparateur de couleur d'accent en
   dessous. Premier header collé en haut, suivants avec marge top
   substantielle. */
.content-list__group-header--agenda {
    /* Override de la règle base — on repart d'un H2 plein, pas du
       repère discret par défaut. */
    margin: var(--spacing-2xl) 0 var(--spacing-lg);
    padding: 0 0 var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary, #1e40af);
    /* Annule les overrides de l'override base (uppercase + tracking +
       color light) qui ne s'appliquent plus ici. */
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-navy, #0f172a);

    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    /* Largeur cappée pour laisser respirer côté droit même sur grand
       écran : le titre est éditorial, pas une barre pleine largeur. */
    max-width: 32rem;
}

.content-list__group-header--agenda:first-of-type,
.content-list__main > .content-list__group-header--agenda:first-child {
    margin-top: var(--spacing-md);
}

.content-list__group-header-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary, #1e40af);
    line-height: 1;
}

.content-list__group-header-label {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-navy, #0f172a);
}

@media (min-width: 40em) {
    .content-list__group-header-label {
        font-size: var(--font-size-3xl);
    }
}

/* ── Card événement — image background + overlay teinté ── */

.event-agenda-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    /* Teinte par défaut : bleu primary (ANCESU). Modificateur `--partner`
       bascule sur le vert secondaire pour signaler un événement organisé
       par un partenaire externe. */
    --agenda-accent: var(--color-primary, #1e40af);
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.event-agenda-card--partner {
    --agenda-accent: var(--color-secondary, #047857);
}

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

/* Média en haut — la bannière event est affichée INTÉGRALEMENT (contain)
   sur un fond clair neutre, ratio 16/9. Les visuels sont des affiches
   pré-composées de ratios variés (texte intégré) : `contain` évite tout
   rognage, le fond neutre remplace l'ancien overlay teinté trop présent. */
.event-agenda-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-light, #f1f5f9);
    overflow: hidden;
}

.event-agenda-card__background {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Fallback sans visuel : icône calendrier centrée, teinte accent discrète. */
.event-agenda-card__media-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--agenda-accent) 45%, transparent);
}

.event-agenda-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    flex: 1;
}

/* ── Bloc haut : date pastille + type/format ── */
.event-agenda-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Pastille date — fond blanc translucide + texte centré, lisible
   par-dessus n'importe quelle image de fond. */
.event-agenda-card__date {
    align-self: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--agenda-accent) 12%, #fff);
    color: var(--agenda-accent);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
}

.event-agenda-card__day {
    font-size: var(--font-size-lg);
    font-weight: 800;
    line-height: 1;
}

.event-agenda-card__month {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-agenda-card__date-sep {
    opacity: 0.6;
    font-weight: 500;
}

.event-agenda-card__year {
    font-size: 0.625rem;
    opacity: 0.7;
    margin-left: 0.25rem;
}

/* Eyebrow type + format — pills blanches translucides. */
.event-agenda-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--agenda-accent);
}

.event-agenda-card__type,
.event-agenda-card__format {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    background: color-mix(in srgb, var(--agenda-accent) 12%, #fff);
}

/* ── Bloc bas : titre + lieu + chevron ── */
.event-agenda-card__bottom {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: auto;
}

.event-agenda-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.event-agenda-card__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-text, #0f172a);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 40em) {
    .event-agenda-card__title {
        font-size: var(--font-size-lg);
    }
}

/* Sous-titre — sous le titre, plus discret. Distinct de l'eyebrow type. */
.event-agenda-card__subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: var(--line-height-tight);
    color: var(--color-text-light);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-agenda-card__location {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.event-agenda-card__location svg {
    flex-shrink: 0;
}

/* Chevron en pastille blanche translucide, animé au hover. */
.event-agenda-card__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agenda-accent) 12%, #fff);
    color: var(--agenda-accent);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.event-agenda-card:hover .event-agenda-card__chevron {
    background: color-mix(in srgb, var(--agenda-accent) 22%, #fff);
    transform: translateX(2px);
}

/* Pills thématiques en bas de card — pattern aligné `article-card__tag`
   (pills outline blanc translucide, backdrop-blur). Max 3 affichés
   côté Twig pour ne pas saturer la card. */
.event-agenda-card__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.event-agenda-card__tag {
    display: inline-flex;
    padding: 0.0625rem 0.5rem;
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 600;
    background: var(--color-bg-light, #f1f5f9);
    color: var(--color-text-light);
}

/* ══════════════════════════════════════════════════════════════
   Impression — cards stackées simplifiées noir/blanc
   ══════════════════════════════════════════════════════════════
   Le pattern écran (image-bg + overlay + chevron pastille) ne se
   prête pas au papier. En print on dégrade vers une liste compacte
   noir/blanc avec :
     - grille → 1 colonne pleine (lecture linéaire)
     - card → rangée flex (date pastille à gauche, contenu à droite)
     - image background + overlay + chevron → masqués
     - texte → noir, sans text-shadow ni backdrop-filter
     - séparateur entre cards → bordure simple
   Les `.content-list__group-header--agenda` gardent leur style écran
   (déjà très lisible en noir sur blanc, juste le séparateur primary
   passe en noir pour économiser l'encre couleur).
   ══════════════════════════════════════════════════════════════ */
@media print {
    /* Grille → liste verticale 1 colonne, sans gap horizontal. */
    .content-list__grid--agenda {
        display: block;
    }

    /* Card → rangée horizontale épurée. Empêche le saut de page
       au milieu d'une card (break-inside: avoid). */
    .event-agenda-card {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
        padding: 0.6rem 0;
        margin: 0;
        border: 0;
        border-bottom: 1px solid #000;
        border-radius: 0;
        background: transparent !important;
        color: #000;
        box-shadow: none;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Variante partenaire — pas de couleur en print, signalé en
       libellé inline dans la meta (cf. règle dédiée plus bas). */
    .event-agenda-card--partner {
        background: transparent !important;
    }

    /* Masque la bande média (image/bannière) et le chevron : sans valeur sur papier. */
    .event-agenda-card__media,
    .event-agenda-card__chevron {
        display: none !important;
    }

    /* Contenu → empilement vertical normal, plus de fond. */
    .event-agenda-card__content {
        position: static;
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: flex-start;
        height: auto;
        padding: 0;
        flex: 1;
        min-width: 0;
    }

    .event-agenda-card__top {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        min-width: 6rem;
    }

    .event-agenda-card__bottom {
        flex: 1;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    /* Pastille date → bloc sobre, encadré simple noir. */
    .event-agenda-card__date {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        border: 1px solid #000;
        border-radius: 0.25rem;
        background: transparent;
        color: #000;
        backdrop-filter: none;
        font-size: 9pt;
    }

    .event-agenda-card__day {
        font-size: 11pt;
        font-weight: 700;
    }

    .event-agenda-card__month,
    .event-agenda-card__year {
        font-size: 8pt;
        font-weight: 600;
        color: #000;
        opacity: 1;
    }

    /* Meta (type + format) → texte simple inline, plus de pills. */
    .event-agenda-card__meta {
        gap: 0.5rem;
        color: #000;
        text-shadow: none;
        font-size: 8.5pt;
    }

    .event-agenda-card__type,
    .event-agenda-card__format {
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        text-transform: none;
        letter-spacing: normal;
        font-weight: 600;
    }

    /* Préfixe « Type : » / « Format : » pour la lisibilité hors contexte. */
    .event-agenda-card__type::before {
        content: 'Type : ';
        font-weight: 400;
    }

    .event-agenda-card__format::before {
        content: 'Format : ';
        font-weight: 400;
    }

    /* Titre → texte standard, plus de text-shadow. */
    .event-agenda-card__title {
        font-size: 11pt;
        font-weight: 700;
        color: #000;
        text-shadow: none;
        line-height: 1.3;
        /* Annule le clamp 3 lignes — sur papier on veut le titre complet. */
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
    }

    /* Sous-titre → texte standard noir, clamp annulé. */
    .event-agenda-card__subtitle {
        font-size: 9.5pt;
        font-weight: 500;
        color: #000;
        text-shadow: none;
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
    }

    .event-agenda-card__location {
        font-size: 9pt;
        color: #000;
        text-shadow: none;
    }

    .event-agenda-card__location svg {
        /* L'icône map-pin reste visible mais en noir. */
        color: #000;
    }

    /* Pills thématiques → liste inline texte, séparées par puces. */
    .event-agenda-card__tags {
        gap: 0;
        font-size: 8.5pt;
        color: #000;
    }

    .event-agenda-card__tag {
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        color: #000;
        font-size: 8.5pt;
        font-weight: 600;
    }

    .event-agenda-card__tag::before {
        content: '· ';
        font-weight: 400;
    }

    .event-agenda-card__tag:first-child::before {
        content: 'Thématiques : ';
        font-weight: 400;
    }

    /* Group header → garde la structure, séparateur passe en noir. */
    .content-list__group-header--agenda {
        margin-top: 1.2rem;
        margin-bottom: 0.5rem;
        border-bottom-color: #000;
        page-break-after: avoid;
        break-after: avoid;
    }

    .content-list__group-header-eyebrow {
        color: #000;
    }

    .content-list__group-header-label {
        color: #000;
        font-size: 14pt;
    }
}