/* Home hero (video) — YMCA 2026 Option B
   Sibling of home-hero.css for patterns/home-hero-video.php. The section keeps
   the .bmg-home-hero base class, so the 471px band, the dark left scrim, the
   overlaid copy column and every mobile/editor rule come from that file
   unchanged. This file only swaps what lives in the media layer:
     1. a core/video filling it instead of the photo slider
     2. a still image that takes the video's place below 900px
   Nothing in home-hero.css is edited. */

/* ----------------------------- */
/* 1. video fills the media layer. The base makes .bmg-home-hero__media
   position:absolute/inset:0 with z-index:auto — no stacking context — so these
   children sit in the HERO's stacking order: z-index 0 puts the video under the
   ::before scrim (1) and the overlaid copy (2), exactly where the slider's
   track sat. Child combinator (not a descendant) so this still applies in the
   editor canvas, where the block list wraps blocks in positioned elements. */

.bmg-home-hero-video__media > .bmg-home-hero-video__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.bmg-home-hero-video__video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* the hero band is far wider than 16:9 footage, so cover crops top and
       bottom — bias upward like the slider's head-safe focal point */
    object-position: center 15%;
}

/* ----------------------------- */
/* 2. the mobile still. Sits in the same layer, hidden while the video shows.
   assets/js/general/hero-video.js reads THIS rule's computed display to decide
   when to drop the video's src, so the breakpoint lives here only. 900px is the
   same breakpoint home-hero.css restacks the hero at. */

.bmg-home-hero-video__media > .bmg-home-hero-video__poster {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.bmg-home-hero-video__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}

@media (max-width: 900px) {
    .bmg-home-hero-video__media > .bmg-home-hero-video__video {
        display: none;
    }

    .bmg-home-hero-video__media > .bmg-home-hero-video__poster {
        display: block;
    }
}

/* Fallback while no video has been picked yet: core/video's save() writes the
   <video> only when it has a src, so an :empty figure is a reliable "no video"
   test. Show the still on desktop too rather than an empty band.
   (:has() is unsupported pre-2023 browsers — they get the empty band until a
   video is added, which is the state this only ever covers.) */
.bmg-home-hero-video__media:has(> .bmg-home-hero-video__video:empty) > .bmg-home-hero-video__poster {
    display: block;
}

/* ----------------------------- */
/* Block editor canvas only: on the front end the two media blocks are stacked
   absolutely and one of them is always display:none — which in the editor would
   leave the client with an invisible still and a video placeholder squashed
   under it. The base already un-stacks the hero in the canvas (.bmg-home-hero
   goes display:block on a purple background, media goes position:relative), so
   just let these two flow in it as well. The canvas <body> carries
   .editor-styles-wrapper; the front end does not, so this is inert live. */

.editor-styles-wrapper .bmg-home-hero-video__media {
    padding: 12px;
}

.editor-styles-wrapper .bmg-home-hero-video__media > .bmg-home-hero-video__video,
.editor-styles-wrapper .bmg-home-hero-video__media > .bmg-home-hero-video__poster {
    position: static;
    display: block;
    inset: auto;
    margin: 12px 0;
}

/* room for the whole media placeholder (its buttons sit ~200px down) */
.editor-styles-wrapper .bmg-home-hero-video__media > .bmg-home-hero-video__video {
    min-height: 240px;
}

/* the still is a reference in the canvas, not the main event */
.editor-styles-wrapper .bmg-home-hero-video__video video,
.editor-styles-wrapper .bmg-home-hero-video__poster img {
    width: auto;
    height: auto;
    max-height: 240px;
    object-position: center center;
}