/**
 * Events listing widget (Agenda).
 *
 * Shared listing shell: title card + content card, like the other listing
 * widgets. Figma desktop 890px: card padding 50px, type select 251x38 aligned
 * right, day groups spaced by 50px, event rows of 96px (visual 133px, flexible
 * identity, rule, time block). Figma mobile 400px: card padding 20px/15px,
 * "Filtrer" button in the title card, stacked rows with a full-width visual.
 *
 * The mobile filter dialog is styled by assets/css/listing-filters.css and the
 * action pills reuse .bivb-button from assets/css/design-system.css.
 */

.bivb-events,
.bivb-events *,
.bivb-events *::before,
.bivb-events *::after {
    box-sizing: border-box;
}

.bivb-events {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 1.25em;
    color: var(--bivb-color-text);
    font-family: var(--bivb-font-family-base-stack);
}

/* The parent theme owns this class; scope a copy so the widget never leaks
   assistive-only text when it renders outside a themed context. */
.bivb-events .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bivb-events__masthead,
.bivb-events__panel {
    border-radius: var(--bivb-radius-6);
    background: var(--bivb-color-surface);
}

/* Masthead ------------------------------------------------------------- */

.bivb-events__masthead {
    display: flex;
    min-height: 5.625em;
    align-items: center;
    justify-content: center;
    gap: 1.25em;
    padding: 1.625em 3.125em;
}

.bivb-events__page-title {
    min-width: 0;
    margin: 0;
    color: var(--bivb-color-black);
    font-size: 2em;
    font-weight: var(--bivb-font-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
}

/* The dialog trigger only exists in the mobile mockup. */
.bivb-events__filter-button {
    display: none;
}

/* Panel ---------------------------------------------------------------- */

.bivb-events__panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 3.125em;
}

/* Same filter control as the Équipe listing: shared field, Select2 adapter. */
.bivb-events__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25em;
}

/* Figma draws the type select at 251px; Équipe uses the same fixed basis. */
.bivb-events__toolbar .bivb-listing-field {
    flex: 0 0 15.6875em;
    max-width: 100%;
}

.bivb-events__toolbar select:focus-visible {
    outline: var(--bivb-control-focus-width) solid var(--bivb-color-primary);
    outline-offset: var(--bivb-control-focus-offset);
}

.bivb-events__results {
    min-width: 0;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.bivb-events__results[aria-busy="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.bivb-events__empty {
    margin: 0;
    color: var(--bivb-color-text-muted);
    font-size: 1em;
    line-height: 1.5;
}

/* Day groups ----------------------------------------------------------- */

.bivb-events__days {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3.125em;
}

.bivb-events__day {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.875em;
    scroll-margin-top: calc(var(--bivb-sticky-offset, 4em) + 1.25em);
}

.bivb-events__day-title {
    margin: 0;
    /* 30px under a 27px heading. */
    padding-bottom: 1.1111em;
    border-bottom: 1px solid var(--bivb-color-border-light);
    color: var(--bivb-color-black);
    font-size: 1.6875em;
    font-weight: var(--bivb-font-weight-semibold);
    line-height: 1.2;
}

.bivb-events__day-title:focus-visible {
    outline: var(--bivb-control-focus-width) solid var(--bivb-color-primary);
    outline-offset: var(--bivb-control-focus-offset);
}

/* Event row ------------------------------------------------------------ */

.bivb-events__list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.875em;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bivb-events__event {
    display: grid;
    min-width: 0;
    align-items: center;
    column-gap: 1.875em;
    row-gap: 0.625em;
    grid-template-areas:
        "image heading time"
        "image actions time";
    grid-template-columns: 8.3125em minmax(0, 1fr) max-content;
}

.bivb-events__event--no-time {
    grid-template-areas:
        "image heading"
        "image actions";
    grid-template-columns: 8.3125em minmax(0, 1fr);
}

.bivb-events__image-frame {
    position: relative;
    width: 8.3125em;
    overflow: hidden;
    border-radius: var(--bivb-radius-6);
    aspect-ratio: 133 / 96;
    background: var(--bivb-color-surface-muted);
    grid-area: image;
}

.bivb-events__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.bivb-events__event-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.1875em;
    grid-area: heading;
}

.bivb-events__event-title {
    margin: 0;
    color: var(--bivb-color-black);
    font-size: 1.125em;
    font-weight: var(--bivb-font-weight-medium);
    line-height: 1.2;
}

.bivb-events .bivb-events__event-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bivb-events .bivb-events__event-title a:hover,
.bivb-events .bivb-events__event-title a:focus-visible {
    color: var(--bivb-color-primary);
    text-decoration: underline;
}

.bivb-events__event-type {
    margin: 0;
    color: var(--bivb-color-primary);
    font-size: 0.8125em;
    font-weight: var(--bivb-font-weight-regular);
    line-height: 1.2;
}

/* Action pills --------------------------------------------------------- */

.bivb-events__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.625em;
    grid-area: actions;
}

.bivb-events .bivb-events__action {
    --bivb-button-background: var(--bivb-color-surface-muted);
    --bivb-button-border-color: var(--bivb-color-surface-muted);
    --bivb-button-color: var(--bivb-color-black);
    --bivb-button-hover-background: var(--bivb-color-surface-soft);
    --bivb-button-hover-border-color: var(--bivb-color-border-black-20);
    --bivb-button-hover-color: var(--bivb-color-black);

    gap: var(--bivb-button-gap);
    /* 6px / 15px at the 12px button size. */
    padding: 0.5em 1.25em;
}

.bivb-events__action-icon {
    display: block;
    flex: 0 0 auto;
    background: currentColor;
}

.bivb-events__action-icon--add {
    width: 0.75em;
    height: 0.75em;
    -webkit-mask: url("../../assets/img/plus.svg") center / contain no-repeat;
    mask: url("../../assets/img/plus.svg") center / contain no-repeat;
}

.bivb-events__action-icon--mail {
    width: 1.1667em;
    height: 1.1667em;
    -webkit-mask: url("../../assets/img/mail.svg") center / contain no-repeat;
    mask: url("../../assets/img/mail.svg") center / contain no-repeat;
}

/* Time block ----------------------------------------------------------- */

.bivb-events__event-time {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    margin: 0;
    padding-inline: 1.875em;
    color: var(--bivb-color-primary);
    grid-area: time;
    text-align: center;
    white-space: nowrap;
}

.bivb-events__event-time::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--bivb-color-border-light);
    content: "";
}

.bivb-events__hour {
    font-size: 1.25em;
    font-weight: var(--bivb-font-weight-semibold);
    line-height: 1.4;
}

/* Figma overlaps the three lines: 28 + 6 + 28 = the 62px time block. */
.bivb-events__time-separator {
    font-size: 1.5em;
    font-weight: var(--bivb-font-weight-regular);
    line-height: 0.25em;
}

/* Pagination ----------------------------------------------------------- */

.bivb-events__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.625em;
    margin-top: 3.125em;
}

.bivb-events__page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625em;
}

.bivb-events .bivb-events__page {
    display: inline-flex;
    min-height: var(--bivb-button-height-sm);
    align-items: center;
    justify-content: center;
    gap: 0.8333em;
    padding: 0.5em 1.25em;
    border: 1px solid var(--bivb-color-border-black-20);
    border-radius: var(--bivb-radius-50);
    color: var(--bivb-color-black);
    background: var(--bivb-color-surface);
    box-shadow: none;
    font-family: inherit;
    font-size: var(--bivb-button-font-size);
    font-weight: var(--bivb-font-weight-semibold);
    line-height: normal;
    text-transform: uppercase;
    appearance: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.bivb-events .bivb-events__page--number {
    min-width: var(--bivb-button-height-sm);
    padding-inline: 0.5em;
}

.bivb-events button.bivb-events__page {
    cursor: pointer;
}

.bivb-events button.bivb-events__page:hover,
.bivb-events .bivb-events__page.is-current {
    border-color: var(--bivb-color-primary);
    color: var(--bivb-color-text-inverse);
    background: var(--bivb-color-primary);
}

.bivb-events .bivb-events__page:focus-visible {
    outline: var(--bivb-control-focus-width) solid var(--bivb-color-primary);
    outline-offset: var(--bivb-control-focus-offset);
}

.bivb-events__page-arrow {
    display: block;
    /* 9.5 x 5.5px at the 12px button size. */
    width: 0.7917em;
    height: 0.4583em;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("../../assets/img/chevron-down.svg") center / contain no-repeat;
    mask: url("../../assets/img/chevron-down.svg") center / contain no-repeat;
}

.bivb-events__page-arrow--previous {
    transform: rotate(90deg);
}

.bivb-events__page-arrow--next {
    transform: rotate(-90deg);
}

/* phone */
@media (max-width: 767px) {
}

/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {
}

/* mobile and tablet */
@media (max-width: 1023px) {
    .bivb-events {
        gap: 0.625em;
    }

    .bivb-events__masthead {
        min-height: 4.75em;
        justify-content: space-between;
        gap: 0.625em;
        padding: 1.25em 0.9375em;
    }

    .bivb-events__page-title {
        flex: 1 1 auto;
        font-size: 1.4375em;
        text-align: left;
    }

    /* Identical to the Équipe listing trigger. */
    .bivb-events__filter-button {
        display: inline-flex;
        min-height: 2.5em;
        flex: 0 0 auto;
        align-items: center;
        gap: 0.4375em;
        padding: 0.5em 0.75em;
        border: 1px solid var(--bivb-color-primary);
        border-radius: var(--bivb-radius-50);
        color: var(--bivb-color-primary);
        background: transparent;
        font: inherit;
        font-size: 0.875em;
        font-weight: var(--bivb-font-weight-semibold);
        cursor: pointer;
        appearance: none;
    }

    .bivb-events__filter-button::before {
        width: 1em;
        height: 1em;
        background: currentColor;
        content: "";
        -webkit-mask: url("../../assets/img/filter.svg") center / contain no-repeat;
        mask: url("../../assets/img/filter.svg") center / contain no-repeat;
    }

    .bivb-events__filter-button:focus-visible {
        outline: var(--bivb-control-focus-width) solid var(--bivb-color-primary);
        outline-offset: var(--bivb-control-focus-offset);
    }

    .bivb-events__panel {
        padding: 1.25em 0.9375em 1.875em;
    }

    /* The desktop select is replaced by the shared filter dialog. */
    .bivb-events__toolbar {
        display: none;
    }

    .bivb-events__days,
    .bivb-events__day,
    .bivb-events__list {
        gap: 1.875em;
    }

    .bivb-events__day-title {
        /* 11px under a 20px heading. */
        padding-bottom: 0.55em;
        font-size: 1.25em;
    }

    .bivb-events__event,
    .bivb-events__event--no-time {
        column-gap: 1.25em;
        grid-template-areas:
            "image image"
            "time heading"
            "actions actions";
        grid-template-columns: max-content minmax(0, 1fr);
    }

    .bivb-events__image-frame {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .bivb-events__event-type {
        font-size: 0.875em;
    }

    .bivb-events__event-time {
        /* Figma: 60px column, rule at 80px, identity at 100px. */
        min-width: 5em;
        align-self: center;
        padding-right: 1.25em;
        padding-left: 0;
    }

    .bivb-events__event-time::before {
        top: 0.3437em;
        right: 0;
        bottom: 0.3437em;
        left: auto;
    }

    .bivb-events__hour {
        font-size: 1.1875em;
        line-height: 1.42;
    }

    .bivb-events__time-separator {
        font-size: 1.0625em;
        line-height: 0.2353em;
    }

    /*
     * Both pills stay on one line. Figma draws them at 14px/25px inside a 340px
     * column; the real column is 320px at the widest breakpoint and 280px on a
     * small phone, so the size/gutter pair is reduced to never wrap.
     */
    .bivb-events__actions {
        flex-wrap: nowrap;
    }

    .bivb-events .bivb-events__action {
        min-height: var(--bivb-button-height-md);
        /* 14px / 20px at the 12px button size. */
        padding: 1.1667em 1.6667em;
    }

    /* The second pill is icon-only in the mobile mockup. */
    .bivb-events__action--share .bivb-events__action-label {
        display: none;
    }

    .bivb-events__action-icon--mail {
        width: 1.5em;
        height: 1.5em;
    }

    .bivb-events__pagination {
        margin-top: 1.875em;
    }

    /*
     * The calendar is moved into the filter dialog by events.js. The dialog
     * body already provides the card and its padding, so the sidebar chrome
     * comes off and the grid uses the full width.
     */
    .bivb-events .bivb-listing-filter__slot .bivb-events-calendar {
        max-width: none;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
}

/* desktop */
@media (min-width: 1025px) {
}

/* laptop 1 */
@media (min-width: 1024px) and (max-width: 1439px) {
}

/* laptop 2 */
@media (min-width: 1440px) and (max-width: 1700px) {
}

@media (prefers-reduced-motion: reduce) {
    .bivb-events__results,
    .bivb-events .bivb-events__event-title a,
    .bivb-events .bivb-events__page {
        transition: none;
    }
}