/* EAFPS — Events listing (shortcode [eafps_events]) — design from Figma */

.eafps-events {
    --eafps-parme-tres-clair:      #F6F7FF;
    --eafps-parme-clair:           #E3E9F6;
    --eafps-contour-champs:        #DCE4F5;
    --eafps-parme:                 #7E93D8;
    --eafps-parme-fonce:           #4B61AA;
    --eafps-bleu-canard:           #128AA2;
    --eafps-bleu-turquoise-fonce:  #08AEC0;
    --eafps-bleu-turquoise:        #4BC1D0;
    --eafps-bg-canard:             #C4F6FD;
    --eafps-bg-parme:              #CFDBFF;
    --eafps-marine-fonce:          #272E47;
    --eafps-gris-fonce:            #4C4C4C;
    --eafps-gris-clair:            #949494;
    --eafps-blanc:                 #FFFFFF;

    color: var(--eafps-gris-fonce);
    font-family: "Inter", inherit;
}

/* ── Filters bar (Figma DEV-2 / node 573:801) ────────────────────────── */

.eafps-events__filters {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 40px;
    margin-bottom: 50px;
    background: var(--eafps-parme-tres-clair);
    border: 1px solid var(--eafps-parme-clair);
    border-radius: 12px;
}

/* Shared base for the month combo field + the search wrapper. Height 48px /
   border-radius 8px to align with the directory module. */
.eafps-events__field,
.eafps-events__search-wrap {
    height: 48px;
    background: #fff;
    border: 1px solid var(--eafps-contour-champs);
    border-radius: 8px;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: var(--eafps-marine-fonce);
    box-sizing: border-box;
    transition: border-color .15s ease;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.eafps-events__field--month {
    flex: 0 0 422px;
    max-width: 100%;
    position: relative;
}

/* ── Custom combobox (replaces native <select>) ──────────────────────── */

.eafps-events__combo {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.eafps-events__combo-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 7px;
    pointer-events: none;
    transition: transform 0.15s ease;
}
.eafps-events__combo-arrow svg { display: block; width: 100%; height: 100%; }
.eafps-events__combo.is-open .eafps-events__combo-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Same Salient override as the search input — kills the native border / gray
   bg so the combo blends inside its field wrapper. */
body .eafps-events .eafps-events__filters .eafps-events__combo input[type="text"],
body .eafps-events .eafps-events__filters .eafps-events__combo input[type="text"]:focus,
body .eafps-events .eafps-events__filters .eafps-events__combo input[type="text"]:focus-visible,
body .eafps-events .eafps-events__filters .eafps-events__combo input[type="text"]:hover {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 22px 0 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    font: 300 15px/1.6 "Inter", sans-serif !important;
    color: var(--eafps-marine-fonce) !important;
    cursor: pointer !important;
}
.eafps-events__combo-input::placeholder {
    color: var(--eafps-gris-clair) !important;
    opacity: 1 !important;
}

.eafps-events__combo-list {
    position: absolute;
    top: calc(100% + 8px);
    left: -16px;
    right: -16px;
    background: #fff;
    border: 1px solid var(--eafps-contour-champs);
    border-radius: 8px;
    max-height: 280px;
    overflow: auto;
    z-index: 30;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.eafps-events__combo-item {
    padding: 10px 16px;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--eafps-marine-fonce);
}
.eafps-events__combo-item:hover,
.eafps-events__combo-item.is-selected {
    background: var(--eafps-parme-tres-clair);
}

.eafps-events__search-wrap {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    min-width: 0;
}
.eafps-events__search ,
body.eafps-styled-forms .eafps-events__filters .eafps-events__search-row .eafps-events__search{
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border: none !important;
    /* The Salient theme forces a gray background on every input — override. */
    background: #fff !important;
    padding: 0;
    color: var(--eafps-marine-fonce);
}
.eafps-events__search::placeholder {
    color: var(--eafps-gris-clair);
    opacity: 1;
}
/* Same Salient override as the dropdown — kills the native border / gray bg
   inside the search wrapper so we only see the wrapper's own frame. */
body .eafps-events .eafps-events__filters .eafps-events__search-wrap input[type="text"],
body .eafps-events .eafps-events__filters .eafps-events__search-wrap input[type="text"]:focus,
body .eafps-events .eafps-events__filters .eafps-events__search-wrap input[type="text"]:focus-visible,
body .eafps-events .eafps-events__filters .eafps-events__search-wrap input[type="text"]:hover {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    width: 100% !important;
    height: 100% !important;
    font: inherit !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}

.eafps-events__search-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--eafps-gris-clair);
}
.eafps-events__search-icon svg { width: 100%; height: 100%; display: block; }

.eafps-events__search-row {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 25px;
    min-width: 0;
}

.eafps-events__field:focus-within,
.eafps-events__search-wrap:focus-within,
.eafps-events__combo.is-open ~ * .eafps-events__field,
.eafps-events__field:has(.eafps-events__combo.is-open) {
    border-color: var(--eafps-bleu-turquoise);
    outline: 0;
}

.eafps-events__submit {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 32px;
    background: var(--eafps-bleu-turquoise);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s ease;
}
.eafps-events__submit:hover {
    background: var(--eafps-bleu-turquoise-fonce);
}

@media (max-width: 1000px) {
    .eafps-events__filters {
        flex-wrap: wrap;
        gap: 16px;
        padding: 24px;
    }
    .eafps-events__field--month {
        flex: 1 1 100%;
    }
    .eafps-events__search-row {
        flex: 1 1 100%;
    }
}

/* ── Grid : 3 cols ≥ 1300px, 2 cols < 1300px, 1 col (100%) < 690px ────── */

.eafps-events__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px;
    align-items: stretch;
}
@media (max-width: 1300px) {
    .eafps-events__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 690px) {
    .eafps-events__grid { grid-template-columns: 1fr; gap: 24px; }
}

.eafps-events__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--eafps-parme-fonce);
    padding: 40px 12px;
    font-style: italic;
}

/* ── Card ────────────────────────────────────────────────────────────── */

.eafps-event-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #E3E9F6;
    border-radius: 18px;
    padding-bottom: 30px;
    overflow: hidden;
    transition: transform 0.2s ease;
}
.eafps-event-card:hover {
    transform: translateY(-2px);
}

.eafps-event-card__cover-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.eafps-event-card__cover {
    display: block;
    width: 100%;
    height: 293px;
    border: 1px solid var(--eafps-parme-clair);
    border-radius: 18px;
    overflow: hidden;
    background: var(--eafps-parme-clair);
    margin-bottom: -19px;   /* allows the date badge to overlap */
    position: relative;
    z-index: 1;
}
/* Salient ascend.css ships `.container-wrap img { max-width: 100%; height: auto }`
   which overrides our `height: 100%` and breaks object-fit (image keeps its
   natural ratio inside the 293px-tall cover, leaves empty space). 4-class
   + !important override locks the dimensions so the cover always fills. */
body .eafps-events .eafps-event-card .eafps-event-card__cover-img,
body .eafps-events .eafps-event-card a.eafps-event-card__cover .eafps-event-card__cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.4s ease;
}
/* When the cover falls back to the ACF hero_image (no featured image set),
   anchor the crop top-left. Image fills the cover zone and is allowed to be
   cropped on the right/bottom — design choice asserted by the user. */
body .eafps-events .eafps-event-card .eafps-event-card__cover-img--event-fallback,
body .eafps-events .eafps-event-card a.eafps-event-card__cover .eafps-event-card__cover-img--event-fallback {
    object-position: top left !important;
}
.eafps-event-card:hover .eafps-event-card__cover-img {
    transform: scale(1.03);
}

.eafps-event-card__date-badge {
    position: relative;
    z-index: 2;
    padding: 10px 15px;
    border-radius: 50px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}
.eafps-event-card__date-badge--inperson {
    background: var(--eafps-bg-canard);
    color: var(--eafps-bleu-canard);
}
.eafps-event-card__date-badge--online {
    background: var(--eafps-bg-parme);
    color: var(--eafps-parme-fonce);
}

.eafps-event-card__body {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 30px;
    flex-grow: 1;
}

.eafps-event-card__heading {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.eafps-event-card__title {
    margin: 0;
    font-family: "Butler", serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    color: var(--eafps-bleu-turquoise-fonce);
    text-align: left;
}
/* Salient repaints content <h3> with its own heading font — force Butler with
   a body-scoped selector so the card title matches the design. */
body .eafps-events .eafps-event-card .eafps-event-card__title {
    font-family: "Butler", serif !important;
    font-weight: 400 !important;
}
.eafps-event-card__title a {
    color: inherit;
}
/* No underline on any card link (title, cover, CTA), incl. hover/focus —
   overrides Salient's underline-on-hover for content links. */
body .eafps-events .eafps-event-card a,
body .eafps-events .eafps-event-card a:hover,
body .eafps-events .eafps-event-card a:focus {
    text-decoration: none !important;
}

.eafps-event-card__location {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #4B61AA;
}
.eafps-event-card__location-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    /* (line-height 24px - icon 18px) / 2 = 3px → icon vertically centered on
       the first text line. */
    margin-top: 3px;
    color: #7E93D8;
}
.eafps-event-card__location-icon svg,
.eafps-event-card__location-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.eafps-event-card__excerpt {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: #4C4C4C;
    flex-grow: 1;
    text-align: left;
}

.eafps-event-card__cta-zone {
    display: flex;
    justify-content: flex-end;
    padding: 0 25px;
}
.eafps-event-card__cta {
    display: inline-block;
    padding: 8px 20px;
    background: #fff;
    border: 1px solid var(--eafps-bleu-turquoise);
    border-radius: 50px;
    color: var(--nectar-accent-color) !important;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.eafps-event-card__cta:hover {
    background: var(--eafps-bleu-turquoise);
    color: #fff !important;
}
/* Salient repaints content links, so the CTA text colour needs higher
   specificity to keep the theme accent. NB: __cta-zone is a sibling of
   __body (not a child), so the real chain is card → cta-zone → cta. The
   :hover override keeps the text white once the pill fills on hover. */
body .eafps-event-card .eafps-event-card__cta-zone .eafps-event-card__cta {
    color: var(--nectar-accent-color);
}
body .eafps-event-card .eafps-event-card__cta-zone .eafps-event-card__cta:hover {
    color: #fff;
}

/* ── Load more (navy pill, uppercase) ────────────────────────────────── */

.eafps-events__more-wrap {
    text-align: center;
    margin-top: 50px;
}
.eafps-events__more {
    background: var(--eafps-marine-fonce);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 50px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.eafps-events__more:hover {
    background: #1a1f30;
}
.eafps-events__more[disabled],
.eafps-events__more.is-loading {
    opacity: 0.6;
    cursor: wait;
}

/* ── [eafps_upcoming_events] — compact home grid ─────────────────────── */

.eafps-upcoming-events {
    --eafps-upc-card-bg:   #5DBCC9;
    --eafps-upc-card-bg-2: #4BC1D0;
    --eafps-upc-pill-bg:   #C4F6FD;
    --eafps-upc-pill-fg:   #128AA2;
    --eafps-upc-arrow-bg:  rgba(255, 255, 255, 0.22);
    color: var(--eafps-blanc);
    font-family: "Inter", sans-serif;
}

.eafps-upcoming-events__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}
@media (max-width: 1000px) {
    .eafps-upcoming-events__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 690px) {
    .eafps-upcoming-events__grid { grid-template-columns: 1fr; gap: 20px; }
}

.eafps-upcoming-card {
    display: flex;
    min-height: 280px;
    background: var(--eafps-upc-card-bg);
    border-radius: 22px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.eafps-upcoming-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(8, 174, 192, 0.18);
}

.eafps-upcoming-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 28px 32px;
    color: var(--eafps-blanc);
    text-decoration: none;
    position: relative;
    gap: 10px;
}
.eafps-upcoming-card__link:hover,
.eafps-upcoming-card__link:focus {
    color: var(--eafps-blanc);
    text-decoration: none;
}

.eafps-upcoming-card__date {
    align-self: flex-end;
    padding: 8px 16px;
    background: var(--eafps-upc-pill-bg);
    color: var(--eafps-upc-pill-fg);
    border-radius: 50px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.eafps-upcoming-card__title {
    /* `margin-top: auto` + `margin-bottom: auto` on the next element pushes
       title+location to vertically center as a group inside the flex link. */
    margin: auto 0 10px;
    padding-right: 40px;
    font-family: "Butler", serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.25;
}

.eafps-upcoming-card__location {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 auto;
    padding-right: 56px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
}
.eafps-upcoming-card__pin {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--eafps-blanc);
}
.eafps-upcoming-card__pin svg { width: 100%; height: 100%; display: block; }

/* Salient ascend.css repaints h3/p/a/svg inside .container-wrap with its own
   colors. The 4-class + !important pattern forces white on the title, the
   location and the arrow icon regardless of theme rules. */
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__title,
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__link .eafps-upcoming-card__title,
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__location,
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__location span,
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__arrow,
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__pin {
    color: #fff !important;
}
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__arrow svg,
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__arrow svg *,
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__pin svg,
body .eafps-upcoming-events .eafps-upcoming-card .eafps-upcoming-card__pin svg * {
    stroke: #fff !important;
    color: #fff !important;
}

.eafps-upcoming-card__arrow {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--eafps-upc-arrow-bg);
    color: var(--eafps-blanc);
    transition: background 0.15s ease, transform 0.15s ease;
}
.eafps-upcoming-card__arrow svg { width: 18px; height: 18px; display: block; }
.eafps-upcoming-card__link:hover .eafps-upcoming-card__arrow {
    background: rgba(255, 255, 255, 0.35);
    transform: translateX(2px);
}


@media (max-width: 1300px) {
    .eafps-upcoming-card .eafps-upcoming-card__link .eafps-upcoming-card__title{
        font-size: 20px;
        line-height: 1.25em;
        text-align: left;
    }
}
@media (max-width: 1000px) {
    .eafps-upcoming-card .eafps-upcoming-card__link .eafps-upcoming-card__title{
        font-size: 18px;
    }
}
@media (max-width: 690px) {
    .eafps-upcoming-card .eafps-upcoming-card__link .eafps-upcoming-card__title{
        font-size: 17px;
    }
    .eafps-events__search-row {
        flex-direction: column;
        gap: 15px;
    }
    .eafps-events__search-row .eafps-events__search-wrap{
        width: 100%;
        padding: 10px;
    }
}

/* Client-side filtering : the `hidden` attribute (toggled by events-list.js on
   cards / load-more / empty-state) must win over the flex/grid display rules. */
.eafps-events [hidden] {
    display: none !important;
}