/* Look inside (video split) — YMCA 2026 Option B (node 65:726)
   Centered header (eyebrow + two-tone "Take a Look Inside") above a two-up row:
   a purple gradient copy card on the left and a video still + play button on the
   right. Pale-lavender double-chevron clusters flank the row (bottom-left behind
   the card, and to the right of the video), mirroring the comp decorations. */

.bmg-look-inside {
    position: relative;
    z-index: 0; /* own stacking context so the -1 decorations sit above
                            the page background but behind this section's content */
    overflow-x: clip; /* clip the right cluster's off-canvas bleed; sticky-safe */
}

/* ---- centered header ---- */
.bmg-look-inside__head {
    align-items: center;
    text-align: center;
}

.bmg-look-inside__head > * {
    margin: 0;
}

/* Sibling section titles run h1-size (55px); this pattern's H2 shipped with no
   size preset and fell to the 44px h2 default — visibly small next to them.
   Guarded so any client-picked size (preset class or inline style) wins. */
.bmg-look-inside__head .wp-block-heading:not([class*="-font-size"]):not([style*="font-size"]) {
    font-size: var(--wp--preset--font-size--h-1-size, 55px);
}

/* ---- card + media row ---- */
.bmg-look-inside__row {
    position: relative;
    z-index: 1; /* above the decorative chevron clusters */
    align-items: stretch;
    gap: 23px;
}

/* ---- left: purple gradient copy card ---- */
.bmg-look-inside__card {
    position: relative;
    overflow: hidden; /* clip the brand watermark to the 16px radius */
    flex: 0 0 398px;
    max-width: 398px;
    /* gradient + radius come from the block's inline style so editors keep them */
    /* copy block centered vertically, left-aligned horizontally */
    justify-content: center;
    align-items: flex-start;
}

/* Official chevron-trio watermark on the card's left edge (comp node 65:726).
   White low-opacity brand SVG over the purple-diagonal gradient; content sits above. */
.bmg-look-inside__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-look-inside__card > * {
    position: relative;
    z-index: 1;
    margin: 0;
}

.bmg-look-inside__card-text:not(.has-body-font-family) {
    font-size: 16px;
    line-height: 1.31;
}

/* ---- right: video still + play button ---- */
.bmg-look-inside__media {
    position: relative;
    flex: 0 0 602px;
    max-width: 602px;
}

.bmg-look-inside__photo {
    margin: 0;
}

.bmg-look-inside__photo img {
    display: block;
    width: 602px;
    height: 340px;
    object-fit: cover;
    border-radius: 16px;
}

/* the play control is a real (editable) button link styled as the comp's
   translucent white disc; the cyan play triangle is a decorative CSS background */
.bmg-look-inside__play-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    pointer-events: none; /* only the disc itself should be clickable */
}

.bmg-look-inside__play.wp-block-button {
    margin: 0;
    pointer-events: auto;
}

.bmg-look-inside__play .wp-block-button__link {
    width: 119px;
    height: 119px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.75);
    /* cyan play triangle (#00aeef), nudged a hair right for optical centering */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 46 51"><path fill="%2300aeef" 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>');
    background-repeat: no-repeat;
    background-position: 54% center;
    background-size: 41px 45px;
    transition: background-color 0.25s ease;
}

.bmg-look-inside__play .wp-block-button__link:hover,
.bmg-look-inside__play .wp-block-button__link:focus {
    background-color: rgba(255, 255, 255, 0.95);
}

/* ---- decorative pale-lavender double-chevron clusters ---- */
/* Two canonical YMCA chevrons side by side, pointing right, in a subtle cool+warm
   two-tone pale lavender — matching the comp. Baked as a single two-path SVG
   (back/left cool #e6e0ee behind, front/right warm #f2e5f2 = --accent-1 on top) so
   the offset and z-order live in the vector — the same robust approach as
   image-button-cards.css. (The old two-background + two-mask technique unioned both
   chevron masks over the whole stacked background, so the top warm rectangle bled
   across and painted over the left chevron.) */
.bmg-look-inside__row::before,
.bmg-look-inside__row::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 205px;
    height: 205px;
    pointer-events: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.69 331.73077"><path fill="%23e6e0ee" d="m 185.30123,156.18301 -0.68,-1.19 -75.76,-134.220003 -1.32,-2.33 C 100.86123,6.8830065 88.461228,-0.16699349 75.111228,0.00300651 h -62.5 c -7.0499997,0.09 -12.68999971,5.86999999 -12.60999971,12.92000049 -0.03,2.14 0.49,4.25 1.51000001,6.13 L 77.771228,154.19301 c 7.2,12.63 7.31,28.1 0.3,40.84 l -66.3,117.59 c -1.02,1.87 -1.54,3.98 -1.51,6.11 -0.08,7.05 5.57,12.82 12.61,12.9 0,0 0,0 0,0 0,0 43.24,0.22 64.14,0 18.100002,-0.19 22.410002,-0.46 33.750002,-20.78 l 63.77,-113 1.19,-2.1 c 3.24,-5.93 4.88,-12.61 4.76,-19.37 0.04,-7.03 -1.73,-13.94 -5.15,-20.08"/><g transform="translate(158.2 0)"><path fill="%23f2e5f2" d="m 185.30123,156.18301 -0.68,-1.19 -75.76,-134.220003 -1.32,-2.33 C 100.86123,6.8830065 88.461228,-0.16699349 75.111228,0.00300651 h -62.5 c -7.0499997,0.09 -12.68999971,5.86999999 -12.60999971,12.92000049 -0.03,2.14 0.49,4.25 1.51000001,6.13 L 77.771228,154.19301 c 7.2,12.63 7.31,28.1 0.3,40.84 l -66.3,117.59 c -1.02,1.87 -1.54,3.98 -1.51,6.11 -0.08,7.05 5.57,12.82 12.61,12.9 0,0 0,0 0,0 0,0 43.24,0.22 64.14,0 18.100002,-0.19 22.410002,-0.46 33.750002,-20.78 l 63.77,-113 1.19,-2.1 c 3.24,-5.93 4.88,-12.61 4.76,-19.37 0.04,-7.03 -1.73,-13.94 -5.15,-20.08"/></g></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* far-right cluster, upper-middle to the right of the video */
.bmg-look-inside__row::after {
    right: -150px;
    top: -100px;
}

/* lower-left cluster, sitting behind the purple card */
.bmg-look-inside__row::before {
    left: -170px;
    bottom: -50px;
}

/* ---------- editor-only parity ---------- */
/* In the editor the button link has no visible label; keep the disc sizing so
   the play control previews like the front end. */
.editor-styles-wrapper .bmg-look-inside__play .wp-block-button__link {
    min-height: 119px;
}

/*tablet/mobile (out of 2026 desktop scope — keep usable)*/
@media (max-width: 1080px) {
    .bmg-look-inside__row {
        flex-wrap: wrap !important;
        justify-content: center;
    }
    .bmg-look-inside__card,
    .bmg-look-inside__media {
        flex: 1 1 100%;
        max-width: 602px;
    }
    .bmg-look-inside__photo img {
        /* keep the 602x340 shape when fluid — the markup's inline width/height
           squared it off on phones; media-query !important exception */
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 602 / 340;
    }
    .bmg-look-inside__row::before,
    .bmg-look-inside__row::after {
        display: none;
    }

    .bmg-look-inside__card {
        padding: 60px 28px !important;
    }
}

/* ---- video tour modal ---- */
/* Clip the square-cornered YouTube iframe to the modal's 12px radius, and
   drop the figure's default bottom margin (it read as a white bar under the
   video). The embed is the modal's only content, so it owns every edge. */
#ymca-video-tour {
    overflow: hidden;
}

#ymca-video-tour .wp-block-embed {
    margin: 0;
}