/* Program cards (something for everyone) — YMCA Midsize 2026
   2-col grid of horizontal cards: photo left (187px), blue-dk panel,
   3px white seam w/ 54px purple badge.

   Flex behavior, column sizing, and panel padding/colors live on the
   blocks' own attributes in the pattern markup; the :where() rules here
   are zero-specificity fallbacks for legacy content only, so any client
   edit (or the block's generated layout CSS) wins. Positioning for the
   floating badge is not block-expressible and stays plain CSS. */

.bmg-program-cards__copy {
    max-width: 819px;
    margin-left: auto;
    margin-right: auto;
}

.bmg-program-cards__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}

/* load-more mechanics (JS-toggled), not client-editable */
.wp-block-group.bmg-program-card.is-hidden {
    display: none !important;
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: cardFadeIn 0.4s ease forwards;
}

/* structural card box; flex layout comes from the block's own attributes */
.wp-block-group.bmg-program-card {
    position: relative;
    width: calc((100% - 24px) / 2);
    min-height: 245px;
    border-radius: 16px;
    overflow: visible; /* allow icon to float out */
}
:where(.wp-block-group.bmg-program-card) {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* photo column width: the block's flexSize attr generates the real rule;
   zero-specificity fallback for legacy content */
:where(.bmg-program-card__image) {
    width: 33%;
    flex: 0 0 33%;
}
.bmg-program-card__image {
    overflow: hidden;
}

/* the <img> fills/covers the photo column */
.bmg-program-card__image figure,
.bmg-program-card__image img {
    width: 100%;
    height: 100%;
    max-width: unset;
    object-fit: cover;
}

/* icon badge — floats over the photo/panel seam */
.wp-block-group.bmg-program-card__icon {
    position: absolute;
    left: 33%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    z-index: 10;

    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
}

/* keep the icon at its own size (a ymca/icon in a flex parent can otherwise
   stretch to full width in the editor canvas) */
.bmg-program-card__icon .wp-block-ymca-icon {
    flex: 0 0 auto;
    width: fit-content;
    margin: 0;
}

.wp-block-group.bmg-program-card__panel {
    border-radius: 0 16px 16px 0;
}
:where(.wp-block-group.bmg-program-card__panel) {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* keep text left aligned */
}

@media (max-width: 992px) {
    .wp-block-group.bmg-program-card {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .wp-block-group.bmg-program-card {
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .bmg-program-card__image {
        width: 100% !important;
        flex: 0 0 240px !important; /* height of the photo area on mobile */
        border-radius: 16px 16px 0 0 !important;
        border-right: none !important;
        border-bottom: 3px solid #ffffff !important;
    }

    .bmg-program-card__image figure,
    .bmg-program-card__image img {
        border-radius: 16px 16px 0 0 !important;
    }

    .wp-block-group.bmg-program-card__panel {
        border-radius: 0 0 16px 16px !important;
        padding: 40px 24px 24px !important; /* extra top padding to account for icon badge overlap */
    }

    .wp-block-group.bmg-program-card__icon {
        top: 240px !important; /* matches the flex-basis of the image area */
        left: 22px !important;
        transform: translate(0, -50%) !important;
        width: 58px !important; /* slightly larger or same as desktop */
        height: 58px !important;
    }
}