/* Home hero (video) — for patterns/home-hero-video.php.
   Sibling of home-hero.css: the section keeps the .bmg-home-hero class, so the
   cover, its 40% dim, the location/heading/sub-heading/button rows and every
   responsive rule in that file still apply unchanged. This file only styles the
   media layer that replaced the photo slider:
     1. a core/video filling the cover behind the copy
     2. a still image that takes the video's place at tablet and below
   Nothing in home-hero.css is edited. */

/* ----------------------------- */
/* 0. the cover must be its own stacking context, so the media layer's negative
   z-index below stays inside the hero.
   ymca/home-hero gets that from its has-background-slider class, but the rule
   behind it (.wp-block-group.has-background-slider > :not(.wp-block-ymca-slider)
   in src/blocks/slider/style.scss) ships in the SLIDER BLOCK's stylesheet, and
   WordPress only enqueues a block's CSS on pages that contain that block. A
   page whose hero is this variant has no slider, so that rule is absent, the
   cover stays z-index:auto, and a -1 layer escapes to the root stacking context
   to paint behind the page background: invisible. Same values as the slider
   rule, so both heroes layer identically against neighbouring sections. */

.bmg-home-hero-video > .wp-block-cover {
    position: relative;
    z-index: 2;
}

/* ----------------------------- */
/* 1. the media layer occupies the exact slot the background slider had.
   z-index -1 is what .splide__track used (src/blocks/slider/style.scss): the
   cover above is the stacking context, its dim <span> and the copy sit at
   auto inside it, so -1 paints the media behind both. The cover's own background is
   transparent, so nothing hides it.
   max-width/margin: the cover's inner container is a constrained layout, which
   would otherwise cap this child at the 1230px content width and centre it
   instead of letting inset:0 fill the cover. */

.bmg-home-hero-video .bmg-home-hero-video__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
}

/* Child combinator (not a descendant) so these still apply in the editor
   canvas, where the block list wraps every block in a positioned element. */
.bmg-home-hero-video__media > .bmg-home-hero-video__video {
    position: absolute;
    inset: 0;
    margin: 0;
}

.bmg-home-hero-video__video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------- */
/* 2. the mobile still. 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. 992px is
   this theme's tablet tier (see home-hero.css), so tablets get the still too. */

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

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

@media (max-width: 992px) {
    .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 in pre-2023 browsers. They get the empty band until a
   video is added, which is the only state this 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 behind the copy and one of them is always display:none, which in
   the editor would leave the client with an invisible still and a video
   placeholder buried under the heading. Let them flow at the top of the cover
   instead, so both stay visible, selectable and editable. The canvas <body>
   carries .editor-styles-wrapper; the front end does not, so this is inert on
   the live site. */

.editor-styles-wrapper .bmg-home-hero-video .bmg-home-hero-video__media {
    position: static;
    z-index: auto;
    height: auto;
    inset: auto;
    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;
}