/*
  Styles de la liste d'événements — shortcode [gilw_events_list].
  Nommage : gilw-<bloc>__<element>--<modifieur>, états en is-*.
*/

/* Wrapper : contexte du sticky (--gilw-sticky-top posé en JS) */
.gilw-events-wrapper {
    position: relative;
    width: 100%;
}

/* Filtres par taxonomie */
.gilw-events-filters__taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    margin-bottom: 56px;
}

/* Les selects se partagent la largeur disponible */
.gilw-events-filters__taxonomies select,
.gilw-events-filters__year-select {
    flex: 1 1 180px;
    min-width: 0;
    box-sizing: border-box;
    padding: 5px 10px;
    border: none;
    border-radius: var(--radius);
    background: var(--clr-4);
    color: var(--clr-1);
    font-weight: bold;
    cursor: pointer;
    appearance: base-select;

    &:hover,
    &:focus {
        background: #ccc;
    }

    &:disabled {
        opacity: 0.5;
        pointer-events: none;
    }

    /* Chevron du picker natif (appearance: base-select) */
    &::picker-icon {
        content: "➜";
        font-weight: 100;
        rotate: 90deg;
        transition: 0.25s ease-in-out;
    }

    &:open::picker-icon {
        rotate: -90deg;
    }

    &::picker(select) {
        appearance: base-select;
        background-color: var(--clr-4);
        border: none;
    }

    & option::checkmark {
        display: none;
    }

    & option:checked {
        color: var(--clr-3);
    }
}

/* Bouton reset : ne s'étire pas avec les selects */
.gilw-events-filters__reset {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid var(--clr-1);
    border-radius: var(--radius);
    background: var(--clr-1);
    color: var(--clr-4);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease-in-out;

    &:hover {
        background: var(--clr-4);
        color: var(--clr-1);
    }
}

/* Sélecteur d'année (mode archives) : rangée distincte car le choix est
   obligatoire et « Reset filters » ne doit pas le vider. */
.gilw-events-filters__year {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.gilw-events-filters__year-label {
    font-weight: bold;
}

/* Select d'année : ne s'étire pas (règle postérieure = prioritaire à spécificité égale) */
.gilw-events-filters__year-select {
    flex: 0 0 auto;
}

/* Navigation par date : pleine largeur, fixée juste sous le header */
.gilw-date-nav {
    display: flex;
    gap: 15px;
    width: 100%;
    position: sticky;
    top: var(--gilw-sticky-top, 0px);
    z-index: 10;
    margin-bottom: 56px;
    padding-bottom: 8px;

    /* is-stuck (posé en JS) : ombre portée par les boutons, barre transparente */
    &.is-stuck .gilw-date-nav__button {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    /* is-empty : aucune date pour l'année → on masque (marge comprise) */
    &.is-empty {
        display: none;
    }
}

.gilw-date-nav__button {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 20px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-color: var(--clr-4);
    color: var(--clr-1);
    cursor: pointer;
    transition: all 0.25s ease-in-out;

    &:hover {
        border-color: var(--clr-1);
    }

    /* is-active : posé par le scroll-spy (JS) */
    &.is-active {
        background-color: var(--clr-1);
        color: #fff;
    }
}

/* Ligne 1 : nom du jour complet */
.gilw-date-nav__day {
    font-size: 1.25em;
    line-height: 1.1;
}

/* Ligne 2 : jour + mois (bold, 2x la ligne du jour) */
.gilw-date-nav__daymonth {
    font-size: 2em;
    font-weight: bold;
    line-height: 1.1;
}

/* Mode archives : beaucoup de jours → défilement horizontal plutôt que d'écraser
   les boutons. L'overflow sur l'élément sticky lui-même ne casse pas l'adhérence
   (seul un ancêtre en overflow le ferait). */
.gilw-events-wrapper--archive .gilw-date-nav {
    overflow-x: auto;
    /* overflow-y passe à 'auto' avec overflow-x et rognerait l'ombre .is-stuck : on l'explicite */
    overflow-y: hidden;
    padding-bottom: 12px;
    scrollbar-width: thin;
}

.gilw-events-wrapper--archive .gilw-date-nav__button {
    flex: 0 0 auto;
    min-width: 96px;
}

/* État vide : rendu à la place de .gilw-events-list */
.gilw-events-empty {
    margin: 24px 0;
    padding: 20px 15px;
    border-radius: var(--radius);
    background: var(--clr-4);
    color: var(--clr-1);
    text-align: center;
}

/* Séparateur de jour : ancre de scroll entre deux journées */
.gilw-day-separator {
    width: 100%;
    box-sizing: border-box;
    margin-top: 48px;
    padding: 10px 15px;
    border-radius: var(--radius);
    background: var(--clr-4);
    color: var(--clr-1);
    font-size: 1.5em;
    text-align: left;
    scroll-margin-top: 80px;
}

/* Carte événement : colonne meta (1/5) + corps (4/5) */
.gilw-event-card {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 15px;
    margin: 15px 0;

    /* Les tags de type coiffent la colonne meta sur toute sa largeur */
    & .gilw-type-tag {
        width: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
    }

    /* Conteneurs vides non rendus (voir gilw_events_render_card) : sans ce
       modificateur, la grille réserverait la colonne disparue. */
    &.gilw-event-card--no-meta {
        grid-template-columns: 1fr;
    }
}

/* Événement sans organisateur : le contenu occupe tout le corps de la carte */
.gilw-event-card--no-organizer .gilw-event-card__body {
    grid-template-columns: 1fr;
}

.gilw-event-card__meta {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
    border-radius: var(--radius);
    background-color: var(--clr-4);
    text-align: center;

    & .gilw-event-card__date-time {
        margin: auto;
    }

    & .gilw-event-card__date {
        margin-bottom: 12px;
        font-size: 2em;
        font-weight: bold;
    }

    & .gilw-event-card__time {
        font-size: 1.5em;
    }
}

/* Corps de carte : contenu à gauche, organisateur sur 1/5 de la largeur à droite */
.gilw-event-card__body {
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius);
    background-color: var(--clr-4);

    & .gilw-event-card__content {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        flex-direction: column;
        justify-content: center;
    }
}

/* Variante par type (classe gilw-event-type-<slug> sur la carte) */

/* « Main Conference » : fond bleu clair. On surcharge les panneaux plutôt que
   redéfinir --clr-4 sur la carte, car cette variable sert aussi de couleur de
   texte aux pastilles de type. Le carré blanc de l'organisateur reste blanc. */
.gilw-event-card.gilw-event-type-main-conference .gilw-event-card__meta,
.gilw-event-card.gilw-event-type-main-conference .gilw-event-card__body {
    background-color: var(--clr-5);
}

.gilw-event-card__title {
    font-weight: bold;
}

.gilw-event-card__summary {
    margin-top: 16px;
    font-size: 18px;
}

.gilw-event-card__organizer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    min-width: 150px;
    padding: 8px;
    aspect-ratio: 1 / 1;
    background-color: #fff;

    /* Le logo suit la colonne : sans cette limite, sa largeur naturelle casserait le ratio */
    & .gilw-organizer__logo {
        max-width: 100%;
        height: auto;
    }
}

/* Cantonné à la carte : [event_organizers] réutilise .gilw-organizer__name autrement */

/* Le nom double le logo : masqué tant que le logo est affiché (voir le responsive) */
.gilw-event-card__organizer .gilw-organizer__logo + .gilw-organizer__name {
    display: none;
}

/* Libellé "Organizer:" réservé au mobile, où le nom remplace le logo */
.gilw-event-card__organizer .gilw-organizer__label {
    display: none;
}

/* Le bloc gilw-type-tag(s) vit dans style-event-shared.css ; seule sa variante carte est ici */

/* Responsive */
@media (max-width: 860px) {
    /* La carte passe en colonne : meta et corps abandonnent leur grille */
    .gilw-event-card,
    .gilw-event-card__body,
    .gilw-event-card__organizer {
        display: block;
    }

    /* Titre à 20px (le h2 Divi à 26px déborde en colonne). Deux classes (0,2,0)
       pour battre .et_pb_column_1_3 h2 (0,1,1) si la liste est en colonne étroite. */
    .gilw-event-card .gilw-event-card__title {
        font-size: 20px;
    }

    /* Plus de carré blanc : la case ne contient que du texte */
    .gilw-event-card__organizer {
        aspect-ratio: auto;
        padding: 0;
        background-color: transparent;
    }

    /* Le logo cède la place au nom des organisateurs, préfixé de son libellé */
    .gilw-event-card__organizer .gilw-organizer__logo {
        display: none;
    }

    .gilw-event-card__organizer .gilw-organizer__logo + .gilw-organizer__name,
    .gilw-event-card__organizer .gilw-organizer__label {
        display: inline;
    }

    /* Seul le libellé est en gras, le nom des organisateurs reste normal */
    .gilw-event-card__organizer .gilw-organizer__label {
        font-weight: bold;
    }

    /* Boutons de dates plus compacts sur une rangée (la ligne 2 suit via em) */
    .gilw-date-nav {
        gap: 8px;
    }

    .gilw-date-nav__button {
        padding: 10px 6px;
        font-size: 13px;
    }
}

@media (max-width: 520px) {
    .gilw-date-nav {
        gap: 5px;
    }

    .gilw-date-nav__button {
        padding: 8px 4px;
        font-size: 11px;
    }

    .gilw-day-separator {
        font-size: 15px;
    }
}