/* Internal hero — YMCA 2026 Option B (Programs "Sports", node 361:1154) Full-bleed photo with the eyebrow + H1 + CTA overlaid BOTTOM-LEFT over a dark scrim (mirrors home-hero.css). Option A's solid left panel + baked-in chevron sweep is gone; the photo is plain and the inner content sits bottom-left. (.bmg-eyebrow + is-style-bmg-* buttons are shared, defined in defaults.css.) */ .bmg-internal-hero { overflow: hidden; } /* dark scrim anchored bottom-left so the white overlay text stays legible over the photo (the comp darkens the lower-left corner under the text) */ .bmg-internal-hero::after { content: ""; position: absolute; inset: 0; top: unset; bottom: 0; z-index: 1; height: 50%; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 83.46%); mix-blend-mode: multiply; } /* Inner container sits above the scrim. Core shrink-wraps it bottom-left (custom content position), which at the 1440 comp width lands the copy on the 1240px content column via the cover's 100px padding — but wider than that it hugged the viewport edge. Push it to the column edge with the same math as home-hero. (Core prints its block styles after ours and its margin:0 selector doubles .has-custom-content-position, so this must out-specify it.) */ .wp-block-cover.bmg-internal-hero .wp-block-cover__inner-container, .wp-block-cover.bmg-internal-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container { position: relative; z-index: 2; margin-left: max(0px, calc((100% - 1240px) / 2)); } /* left-aligned overlay stack, tight eyebrow→title spacing per the comp */ .bmg-internal-hero__overlay { max-width: 760px; text-align: left; } .bmg-internal-hero .bmg-eyebrow { text-shadow: 1px 1px 4px #00000066; } :where(.bmg-internal-hero__overlay) > * { margin: 0; } :where(.bmg-internal-hero__overlay) :where(.bmg-hero-title) { margin: 0; line-height: 0.98; } .bmg-internal-hero .bmg-hero-buttons { justify-content: start; } /* mobile (out of 2026 desktop scope — keep usable) */ @media (max-width: 768px) { .bmg-internal-hero { padding-left: 30px !important; padding-right: 30px !important; min-height: 60vh !important; } .bmg-internal-hero::after { height: 80%; } } /* ----------------------------- */ /* Block editor: the scrim sits over the photo for the front-end look. Neutralize it in the editor so the photo + blocks stay easy to see and select. The editor canvas carries .editor-styles-wrapper; the front end does not. */ .editor-styles-wrapper .bmg-internal-hero::after { display: none !important; }