/* Callout card (One Membership) — YMCA 2026 Option B (node 215:1084)
   Purple gradient card on the LEFT, photo on the RIGHT, equal heights. */

.bmg-callout-card {
    box-sizing: border-box;
    /* Cap at the 1240 content width, but keep a gutter once the viewport nears it so
       the card never runs flush to the window edge. (This section is transparent and
       self-centers, so it takes a max-width inset rather than section padding.) */
    max-width: min(1240px, 100% - 2 * var(--bmg-section-gutter));
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

/* purple gradient copy card */
.bmg-callout-card__card {
    position: relative;
    overflow: hidden; /* clip the brand watermark to the 16px radius */
    flex: 0 0 505px;
    min-height: 350px;
    max-width: 505px;
    border-radius: 16px;
}

/* Official chevron-trio watermark on the card's left edge — same treatment as the
   home page's "Made for You To Thrive" card (look-inside.css). White low-opacity
   brand SVG over the purple gradient; the copy sits above it. */
.bmg-callout-card__card::before {
    content: "";
    position: absolute;
    inset: 0; /* fill the card; SVG anchors to the left, full height */
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
    background-image: url("../../images/chevron-trio-pattern-full-opacity.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    /* Fade anchored to the LEFT edge (same as the chevron) in px: the watermark
       stays left-weighted and dissolves to nothing before it reaches the copy. */
    -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-callout-card__card > * {
    position: relative;
    z-index: 1;
}

:where(.bmg-callout-card__card) {
    background-image: linear-gradient(125deg, var(--primary-md) 0%, var(--primary-dk) 60%);
}

:where(.bmg-callout-card__title) {
    line-height: 1.05;
}

:where(.bmg-callout-card__copy) {
    font-size: 16px;
    line-height: 1.35;
    max-width: 430px;
}

/* photo fills the rest, matches the card height */
.bmg-callout-card__photo {
    flex: 1 1 auto;
    margin: 0;
}

.bmg-callout-card__photo img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px;
}

/*tablet/mobile (out of 2026 desktop scope — keep usable)*/
@media (max-width: 992px) {
    .bmg-callout-card {
        flex-wrap: wrap !important;
    }
    .bmg-callout-card__card {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .bmg-callout-card__photo img {
        height: auto;
    }
}