/* Map + Locations — YMCA 2026 Option B. Light section: centered eyebrow + two-tone
   heading, then purple gradient location cards (event-card language) stacked beside
   a 16px-rounded map (photo or Google embed) at 65%. */

.bmg-map-location-head > * {
    margin: 0;
}

/* equal-height columns: the layout engine pins flex rows to align-items:center */
.bmg-map-location-row {
    align-items: stretch !important;
}

/* Official chevron-trio watermark on each purple card — same treatment as
   event-cards / callout-card. White low-opacity brand SVG over the gradient,
   hugging the right edge and dissolving inward; the card clips it to the radius. */
.bmg-map-location-stack {
    position: relative;
    overflow: hidden;
}

.bmg-map-location-stack::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image: url("../../images/chevron-trio-pattern-full-opacity.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    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-map-location-stack > * {
    position: relative;
    z-index: 1;
}

/* photo map: fill the 65% cell edge to edge at the row's height */
.bmg-map-location-image figure,
.bmg-map-location-image img {
    width: 100%;
    height: 100%;
}

.bmg-map-location-image img {
    object-fit: cover;
    object-position: center;
    /* cap the band height — otherwise the photo's natural aspect sets the row */
    max-height: 500px;
}

/* embed map: iframe fills the rounded cell whatever height the cards set */
.bmg-map-location-embed {
    position: relative;
    overflow: hidden;
    min-height: 450px;
    border-radius: 16px;
}

.bmg-map-location-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    display: block;
}

/*tablet/mobile (out of 2026 desktop scope — keep usable)*/
@media (max-width: 992px) {
    /* map directly under the heading, cards below, everything full width */
    .bmg-map-location-row {
        flex-direction: column-reverse;
    }

    /* reset the layout engine's 65% / fill flex sizing for the column direction */
    .bmg-map-location-row > .bmg-map-location-cards,
    .bmg-map-location-row > .bmg-map-location-image,
    .bmg-map-location-row > .bmg-map-location-embed {
        flex: 0 0 auto;
        width: 100%;
    }

    .bmg-map-location-image img {
        max-height: 320px;
    }

    .bmg-map-location-embed {
        min-height: 320px;
    }
}