/*
 * Elementor -> Inner Section
*/
.events-section {
    .elementor-column > .elementor-widget-wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    @media (max-width: 991px) {
        .elementor-column > .elementor-widget-wrap {
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
    }

    @media (max-width: 600px) {
        .elementor-column > .elementor-widget-wrap {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .elementor-widget-shortcode {
        border: 1px solid #1a1a1a;
        margin-block-end: 0 !important;
    }
}

/**/

.event-box__wrapper {
    .event-box__date {
        color: #fff;
        padding: .75rem 1rem;
        margin: 0;
        background-color: #1a1a1a;
    }

    .event-box__content {
        display: flex;
        flex-direction: column;
        gap: 1em;
        padding: 1rem .75rem;
    }

    .event-box__title {
        font-size: 1.25rem;
        line-height: 1.25;
        flex-grow: 1;
    }

    .event-box__address {
        flex-grow: 1;
    }

    .event-box__time-wrapper {
        white-space: nowrap;
        display: grid;
        grid-template-columns: auto 2px 1fr;
        column-gap: .35rem;
    }
}

/*  */

.no-events-label {
    display: none;
    grid-column: 1 / -1; /* spans from first to last column */
}

.e-preview--show-hidden-elements .no-events-label {
    display: block;
}

/* Hide the box, and its bordered Elementor parent via :has() so it isn't left as an
   empty box. CSS (not JS) avoids the flash before DOMContentLoaded; event-box.js is
   the fallback where :has() is unsupported. */
.past-event {
    display: none;
}

.events-section .elementor-widget-shortcode:has(.past-event) {
    display: none;
}