/* Event cards (get involved) — YMCA Midsize 2026
   3-col cards: 216px photo (r16 top), blue-dk 296px panel w/ meta rows. */

.bmg-event-card {
    width: calc((100% - 48px) / 3);
    border-radius: 16px;
    /* clip the photo to the card's rounded shape — without this a sub-pixel-wider
       featured image overhangs the rounded corners on the sides */
    overflow: hidden;
}

.bmg-event-card__photo {
    width: 100%;
    height: 216px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
    display: block;
}

.bmg-event-card__panel {
    flex: 1;
    width: 100%;
    min-height: 296px;
    border-radius: 0 0 16px 16px;
}

/* Event Location block (ymca/event-location): white pin + venue on the blue panel.
   Base layout/sizing lives in the block's own style.scss; only the on-card color
   overrides are here (mirrors how the date-time block is themed below). */
.bmg-event-card__panel .bmg-event-location.wp-block-ymca-event-location {
    color: var(--white);
}

.bmg-event-card__panel span.bmg-event-location__icon svg path {
    fill: var(--white);
}

.bmg-event-card__sep {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid var(--white);
    display: inline-block;
}

/* Query Loop version: the grid is the post-template <ul>, cards live in <li> */
ul.bmg-event-cards__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

ul.bmg-event-cards__grid > li {
    width: calc((100% - 48px) / 3);
    display: flex;
}

ul.bmg-event-cards__grid > li.is-hidden {
    display: none !important;
}

ul.bmg-event-cards__grid .bmg-event-card {
    width: 100%;
}

/* featured image block renders <figure class="bmg-event-card__photo">[<a>]<img> */
figure.bmg-event-card__photo {
    height: auto;
    margin: 0;
}

.bmg-event-card__photo img {
    width: 100%;
    height: 216px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
    display: block;
}

.bmg-event-card__title {
    text-wrap: pretty; /* Prevents orphaned single words on line breaks */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.bmg-event-card__excerpt p {
    margin: 0;
}

/* compact, on-blue variant of the Event Date & Time block inside cards */
.bmg-event-card__panel .bmg-event-date-time.wp-block-ymca-event-date-time {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--white);
    font-weight: 400;
}

.bmg-event-card__panel span.bmg-event-date-time__icon {
    flex: 0 0 16px;
    height: auto;
    display: flex;
}

.bmg-event-card__panel span.bmg-event-date-time__icon svg {
    width: 16px;
    height: 17px;
}

.bmg-event-card__panel span.bmg-event-date-time__icon svg path {
    fill: var(--white);
}

.bmg-event-card__panel span.bmg-event-date-time__text {
    flex-grow: 0;
    font-size: 18px;
}

/* shared: blue "Load more" text link with down caret */
.bmg-load-more-link a {
    color: var(--primary-dk);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.bmg-load-more-link a::after {
    content: "";
    display: inline-block;
    margin-left: 10px;
    width: 12px;
    height: 9px;
    background-color: var(--primary-dk);
    -webkit-mask-image: url(../../icons/sub_menu_icon.png);
    mask-image: url(../../icons/sub_menu_icon.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
}

/* shared: cards revealed by the "Load more" link (load-more.js) */
.bmg-event-card.fade-in,
.bmg-testimonial-card.fade-in,
ul.bmg-event-cards__grid > li.fade-in {
    animation: bmg-card-fade-in 0.35s ease;
}

@keyframes bmg-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/*mobile (out of 2026 desktop scope — keep usable)*/

@media (max-width: 1100px) {
    .bmg-event-card,
    ul.bmg-event-cards__grid > li {
        width: calc((100% - 24px) / 2);
    }

    ul.bmg-event-cards__grid .bmg-event-card {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .bmg-event-card,
    ul.bmg-event-cards__grid > li {
        width: 100%;
    }
}

/* EDITOR ONLY: the dynamic event blocks (date-time, location) render a labelled
   placeholder box in the editor. On the blue card panel that text is unreadable
   black — make it white, and give the date-time placeholder the same dashed box
   the location one already has. These .bmg-event-…-block classes exist only in
   the editor (edit.js), never in the front-end render, so the front end is unaffected. */
.bmg-event-card__panel .bmg-event-date-time-block,
.bmg-event-card__panel .bmg-event-location-block {
    color: var(--white);
}

.bmg-event-card__panel .bmg-event-date-time-block {
    padding: 12px;
    border: 1px dashed currentColor;
    opacity: 0.85;
}