/* ---------------------------------------------------------------------------
   Upcoming events
   Rendered from MedCycle's feed. Designed to look right with no image, because
   none of the events carry one, and with the date alone, because the feed's
   times are all-day placeholders rather than a real schedule.
   --------------------------------------------------------------------------- */

.ma-events {
    max-width: 1140px;
    margin: 0 auto;
}

.ma-events__title {
    color: var(--ma-navy, #1B2E4B);
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0 0 1.75rem;
    line-height: 1.25;
}

.ma-events__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.ma-event {
    display: flex;
    flex-direction: column;
    background: var(--ma-white, #fff);
    border: 1px solid rgba(27, 46, 75, .12);
    border-top: 4px solid var(--ma-secondary, #267CC0);
    border-radius: 12px;
    padding: 1.6rem;
    box-shadow: 0 8px 26px rgba(27, 46, 75, .08);
}

.ma-event__date {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ma-primary, #F58331);
    margin: 0 0 .5rem;
}

.ma-event__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ma-navy, #1B2E4B);
    margin: 0 0 .75rem;
    line-height: 1.35;
}

.ma-event__excerpt {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--ma-text, #383838);
    margin: 0 0 1.25rem;
    flex: 1 1 auto;
}

/* Matches the pill buttons used elsewhere on the site. */
.ma-event__cta {
    align-self: flex-start;
    display: inline-block;
    border-radius: 999px;
    padding: .6rem 1.5rem;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    background: var(--ma-secondary, #267CC0);
    color: var(--ma-white, #fff) !important;
    border: 2px solid var(--ma-secondary, #267CC0);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.ma-event__cta:hover {
    background: var(--ma-navy, #1B2E4B);
    border-color: var(--ma-navy, #1B2E4B);
    color: var(--ma-white, #fff) !important;
}

.ma-event__cta:focus-visible {
    outline: 3px solid var(--ma-primary, #F58331);
    outline-offset: 2px;
}

.ma-events__empty {
    color: var(--ma-text, #383838);
    font-size: 1.05rem;
    margin: 0;
}

@media (max-width: 921px) {
    .ma-events__list {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .ma-events__title {
        font-size: 1.6rem;
    }
}