/* Event cards (Get Involved) — YMCA 2026 Option B (node 203:861)
   Light section: centered eyebrow + two-tone heading, then a 2-up grid of purple
   gradient cards (title, location, date/time, excerpt, cyan Learn More). */

.bmg-event-cards__head > * {
    margin: 0;
}

/* Carousel: the grid is centered and flanked by two round nav arrows. The arrows
   are drawn as pseudo-elements on this wrapper (no extra markup / wp:html). */
.bmg-event-cards__carousel {
    position: relative;
    /* room for the arrows outside the 2-card track */
    padding-inline: 64px;
}

/* round pale-lavender nav arrows (real, clickable elements wired by carousels.js) */
.bmg-event-cards__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    min-height: 0;
    border-radius: 50%;
    background-color: var(--accent-1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 14px;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.bmg-event-cards__arrow:hover {
    filter: brightness(0.95);
}

.bmg-event-cards__arrow.is-disabled {
    opacity: 0.4;
    cursor: default;
}

/* rounded play-style triangle — same glyph as the video play button
   (look-inside.css); prev is the same path mirrored in-SVG */
.bmg-event-cards__arrow--prev {
    left: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 46 51"><path fill="%235c2e91" transform="matrix(-1 0 0 1 44 0)" d="M0 5.1C0 1.2 4.2-1.2 7.6.8l33.4 19.4c3.3 1.9 3.3 6.7 0 8.6L7.6 48.2C4.2 50.2 0 47.8 0 43.9V5.1z"/></svg>');
}

.bmg-event-cards__arrow--next {
    right: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 46 51"><path fill="%235c2e91" d="M0 5.1C0 1.2 4.2-1.2 7.6.8l33.4 19.4c3.3 1.9 3.3 6.7 0 8.6L7.6 48.2C4.2 50.2 0 47.8 0 43.9V5.1z"/></svg>');
}

/* 2-up horizontal track: two cards visible at a time, the rest scroll */
.bmg-event-cards__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.bmg-event-cards__grid::-webkit-scrollbar {
    display: none;
}

/* post-template wraps each card in an <li>; size the li, card fills it */
.bmg-event-cards__grid > li {
    flex: 0 0 calc((100% - 24px) / 2);
    width: calc((100% - 24px) / 2);
    margin: 0;
    scroll-snap-align: start;
}

.bmg-event-card {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Legacy fallback for cards inserted before the native block attributes. */
:where(.bmg-event-card) {
    min-height: 327px;
    border-radius: 16px;
    background-image: linear-gradient(115deg, var(--primary-dk) 0%, var(--primary-dk) 55%, var(--primary-md) 100%);
}

/* Decorative official chevron-triangle watermark on the right of each card
   (replaces the old doubled --bmg-chevron-mask layers). The white low-opacity
   brand SVG reads as a soft double-chevron over the purple gradient; the card's
   overflow:hidden clips it. Content sits above via z-index. */
.bmg-event-card::after {
    content: "";
    position: absolute;
    inset: 0;              /* fill the card; SVG anchors to the right, full height */
    pointer-events: none;
    opacity: 0.24;
    background-image: url("../../images/chevron-trio-pattern-full-opacity.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    /* Mirror the chevron so its vertex points toward the card centre (matching the
       comp) instead of toward the edge. scaleX(-1) flips the whole layer, so
       background-position:left renders on the RIGHT and a to-right mask fades the
       (visual) centre side — the watermark still hugs the right edge and dissolves
       inward, just pointing the correct way. */
    transform: scaleX(-1);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 30px, transparent 150px);
    mask-image: linear-gradient(to right, #000 0, #000 30px, transparent 150px);
}

.bmg-event-card > * {
    position: relative;
    z-index: 1;
}

.bmg-event-card__title {
    margin: 0;
    line-height: 1.05;
    padding-right: 125px; /* clear the date badge in the top-right */
    /* Always reserve two lines of title, so the meta/time/excerpt/button below it
       start at the same height on every card whether the title wraps or not (and so
       carousel slides don't jump). Longer titles still grow past this. The em tracks
       whatever the h4-size preset computes to, so it holds at every breakpoint. */
    min-height: calc(2 * 1.05em);
}

.bmg-event-card__title a {
    text-decoration: none;
}

/* white month/day date badge, top-right of the card. Emitted by the
   event-date-time block (hidden by default in defaults.css); revealed + positioned
   here. position:static on the datetime wrapper so the badge anchors to the card. */
.bmg-event-card__datetime .bmg-event-date-time__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 28px !important;
    right: 24px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 2;
    width: 105px;
    height: 105px;
    background: var(--white);
    border-radius: 14px;
    line-height: 1;
}

.bmg-event-date-time__badge-month {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22.5px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--primary-dk);
}

.bmg-event-date-time__badge-day {
    margin-top: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 54.6875px;
    letter-spacing: -0.04em;
    color: var(--primary-dk);
}

/* location row with a CSS pin glyph (no inline markup).
   Comp: Verdana Bold 16/21, same as the time row below it. */
.bmg-event-card__meta {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: -0.01em;
}

.bmg-event-card__meta::before {
    content: "";
    flex: none;
    width: 14px;
    height: 19px;
    background-color: var(--white);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="black" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="black" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* event date/time block (clock + date/time) — strip the block's default gray
   card (var(--gray-lt) bg + 20px padding) so it reads as a white line on purple */
.bmg-event-card__datetime.bmg-event-date-time {
    margin: 0;
    position: static; /* let the absolute date badge anchor to the card */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.bmg-event-card__datetime .bmg-event-date-time__line {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: -0.01em;
}

/* the block's base stylesheet sizes these spans for its standalone gray-card
   look (24px text, 45px icon box) — pull them back to the comp's inline row */
.bmg-event-card__datetime .bmg-event-date-time__text {
    flex-grow: 0;
    font-size: inherit;
}

.bmg-event-card__datetime .bmg-event-date-time__icon {
    flex: 0 0 18px;
    height: 18px;
}

.bmg-event-card__datetime .bmg-event-date-time__icon svg {
    width: 18px;
    height: 18px;
    fill: var(--white);
    display: block;
}

/* the block paints the clock PATH pale lavender (--accent-1), which read as a
   washed-out glyph on the purple card — force it white like the pin glyph */
.bmg-event-card__datetime .bmg-event-date-time__icon svg path {
    fill: var(--white);
}

:where(.bmg-event-card__excerpt) {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.31;
}

.bmg-event-card .wp-block-buttons {
    margin-top: 12px;
}

/*tablet/mobile (out of 2026 desktop scope — keep usable)*/
@media (max-width: 992px) {
    .bmg-event-card {
        width: 100%;
    }
}

/* Phone: the 2-up track squeezed each card to ~150px and they grew absurdly
   tall. One full-width card per view; swipe (scroll-snap) replaces the arrows. */
@media (max-width: 760px) {
    .bmg-event-cards__carousel {
        padding-inline: 0;
        padding-bottom: 60px;
    }

    .bmg-event-cards .bmg-event-cards__arrow {
        top: auto;
        bottom: 0;
        transform: none;
    }

    .bmg-event-cards__arrow--prev {
        left: calc(50% - 52px);
    }

    .bmg-event-cards__arrow--next {
        right: calc(50% - 52px);
    }

    .bmg-event-cards__grid > li {
        flex: 0 0 100%;
        width: 100%;
    }

    .bmg-event-card {
        padding: 24px !important;
    }

    .bmg-event-card__title {
        margin-top: 100px !important;
        padding-right: 0 !important;
        min-height: 0;
    }

    .bmg-event-card__datetime .bmg-event-date-time__badge {
        top: 24px !important;
        left: 24px !important;
        right: auto !important;
        width: 84px;
        height: 84px;
        border-radius: 12px;
    }

    .bmg-event-date-time__badge-month {
        font-size: 18px;
    }

    .bmg-event-date-time__badge-day {
        font-size: 40px;
        margin-top: 2px;
    }
}