/**
 * Events With Filters block, The Moran Hotel (Figma "The Moran Hotel - Happenings" node 1:26, desktop 1440).
 * Markup: flexible-content/sections/events_with_filters.php + inc/events-with-filters.php (ewf_render_card).
 *
 * Fonts, colours and sizes follow the Figma (Benton Modern Display + Gibson, both loaded by the theme via Typekit).
 * The theme sets rules on h2/h3/p/a/button, so the block's own classes are prefixed with `.ewf` and re-declare
 * font-family / weight / spacing with !important where the theme wins. Change the --ewf-* variables to restyle.
 */

.ewf {
    --ewf-navy: #002b3d;
    --ewf-sand: #eed9b2;
    --ewf-sand-hover: #e6cd9d;
    --ewf-ink: #000;
    --ewf-font-body: 'canada-type-gibson', sans-serif;
    --ewf-font-heading: 'benton-modern-display', serif;

    padding: 103px 20px 132px;
    background: #fff;
    color: var(--ewf-ink);
    font-family: var(--ewf-font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}

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

.ewf .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

.ewf__inner {
    max-width: 1040px;
    margin: 0 auto;
}

/* ---- Heading --------------------------------------------------------- */

.ewf__head {
    text-align: center;
}

.ewf .ewf__title {
    margin: 0;
    padding: 0;
    color: var(--ewf-navy) !important;
    font-family: var(--ewf-font-heading) !important;
    font-size: 38px;
    font-weight: 400 !important;
    letter-spacing: 2.66px !important;
    line-height: 48px !important;
    text-transform: none;
}

.ewf .ewf__intro {
    max-width: 769px;
    margin: 17px auto 0;
    color: var(--ewf-ink);
    font-family: var(--ewf-font-body) !important;
    font-size: 18px;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    line-height: 22px !important;
}

/* ---- Filters --------------------------------------------------------- */

.ewf__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 20.5px;
    margin: 59px 0 0;
}

.ewf-select {
    position: relative;
    width: 201.5px;
    height: 43px;
}

.ewf .ewf-select__control {
    display: block;
    width: 100%;
    height: 43px;
    margin: 0;
    padding: 0 40px 0 18px;
    border: 1px solid var(--ewf-navy);
    border-radius: 0;
    background: #fff url('../images/events/chevron-down.svg') no-repeat right 20px center / 14.7px 8px;
    color: var(--ewf-navy);
    font-family: var(--ewf-font-body) !important;
    font-size: 14px;
    font-weight: 500 !important;
    letter-spacing: 1.54px;
    line-height: 41px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ewf .ewf-select__control::-ms-expand {
    display: none;
}

.ewf-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 174px;
    height: 43px;
    padding: 0 7px;
    border: 1px solid var(--ewf-navy);
    background: #fff;
    color: var(--ewf-navy);
}

.ewf .ewf-month__label {
    flex: 1 1 auto;
    color: var(--ewf-navy);
    font-family: var(--ewf-font-body) !important;
    font-size: 14px;
    font-weight: 500 !important;
    letter-spacing: 1.54px;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
}

.ewf .ewf-month__btn {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 41px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.ewf .ewf-month__btn img {
    display: block;
    width: 11.7px;
    height: 7.1px;
}

.ewf .ewf-month__btn--prev img {
    transform: rotate(90deg);
}

.ewf .ewf-month__btn--next img {
    transform: rotate(-90deg);
}

.ewf .ewf-select__control:focus-visible,
.ewf .ewf-month__btn:focus-visible,
.ewf .ewf-btn:focus-visible,
.ewf .ewf-card__title a:focus-visible {
    outline: 2px solid var(--ewf-navy);
    outline-offset: 3px;
}

/* ---- Grid + cards ---------------------------------------------------- */

.ewf-grid {
    display: grid;
    grid-template-columns: repeat(3, 320px);
    gap: 59px 40px;
    justify-content: center;
    margin-top: 74px;
}

.ewf-grid[aria-busy='true'] {
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.ewf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 320px;
    max-width: 100%;
    margin: 0;
}

.ewf-card__media {
    position: relative;
    display: block;
    width: 100%;
    height: 362px;
    overflow: hidden;
    background: #dfe5e8;
}

.ewf-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The bar on top of the image: frequency / dates */
.ewf .ewf-card__label {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 9px 12px;
    background: rgba(0, 43, 61, 0.9);
    color: #fff;
    font-family: var(--ewf-font-body) !important;
    font-size: 14px;
    font-weight: 500 !important;
    letter-spacing: 1.54px !important;
    line-height: 22px !important;
    text-align: center;
    pointer-events: none;
}

.ewf .ewf-card__title {
    width: 100%;
    min-height: 69px;
    margin: 18px 0 0;
    padding: 0;
    color: var(--ewf-navy) !important;
    font-family: var(--ewf-font-heading) !important;
    font-size: 26px;
    font-weight: 400 !important;
    letter-spacing: 0.52px !important;
    line-height: 34.5px !important;
    text-transform: none;
}

.ewf .ewf-card__title a {
    color: inherit !important;
    text-decoration: none !important;
}

.ewf .ewf-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    width: 302px;
    max-width: 100%;
    min-height: 66px;
    margin: 0 0 21px;
    overflow: hidden;
    color: var(--ewf-ink);
    font-family: var(--ewf-font-body) !important;
    font-size: 16px;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    line-height: 22px !important;
}

/* ---- Buttons --------------------------------------------------------- */

.ewf .ewf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    height: 43px;
    margin: auto 0 0;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: var(--ewf-sand);
    color: var(--ewf-navy) !important;
    font-family: var(--ewf-font-body) !important;
    font-size: 14px;
    font-weight: 500 !important;
    letter-spacing: 1.54px !important;
    line-height: 22px !important;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ewf .ewf-btn:hover,
.ewf .ewf-btn:focus-visible {
    background: var(--ewf-sand-hover);
}

.ewf .ewf-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.ewf__more {
    margin-top: 59px;
    text-align: center;
}

.ewf__more[hidden],
.ewf__empty[hidden] {
    display: none;
}

.ewf .ewf__empty {
    margin: 74px 0 0;
    color: var(--ewf-navy);
    font-family: var(--ewf-font-body) !important;
    font-size: 18px;
    font-weight: 300 !important;
    text-align: center;
}

/* ---- Smaller screens (no Figma frames below desktop) ----------------- */

@media (max-width: 1099.98px) {
    .ewf-grid {
        grid-template-columns: repeat(2, 320px);
    }
}

@media (max-width: 767.98px) {
    .ewf {
        padding: 56px 20px 72px;
    }

    .ewf .ewf__title {
        font-size: 30px;
        letter-spacing: 1.5px !important;
        line-height: 38px !important;
    }

    .ewf .ewf__intro {
        font-size: 16px;
    }

    .ewf__filters {
        margin-top: 36px;
    }

    .ewf-grid {
        grid-template-columns: minmax(0, 320px);
        margin-top: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ewf-grid[aria-busy='true'],
    .ewf .ewf-btn {
        transition: none;
    }
}