/* Home hero (video) — YMCA Midsize 2026
   Sibling of home-hero.css for patterns/home-hero-video.php. The section keeps
   the .bmg-home-hero base class, so the 518px row, the chevron sweep, the
   bottom gradient, the slider-free panel styling and the <=900px stack all come
   from that file unchanged. This file adds ONLY the three differences:
     1. a thinner copy panel, so the media side is wider
     2. a core/video filling the media column instead of the photo slider
     3. a still image that takes the video's place below the stack breakpoint
   Nothing in home-hero.css is edited. */

/* ----------------------------- */
/* 1. thinner panel (base: flex: 0 0 35%).
   Scoped to the desktop side of the base's 900px stack breakpoint — an
   unscoped .bmg-home-hero-video .bmg-home-hero__panel (0,2,0) would out-specify
   the base's stacked flex: 1 1 100% (0,1,0) and break the mobile layout. */

@media (min-width: 901px) {
    .bmg-home-hero-video .bmg-home-hero__panel {
        flex-basis: 30%;
        /* a flex item's automatic minimum size is its content's min-content
           width, and .bmg-hero-title is white-space:nowrap — without this the
           title alone decides the panel width (576px on the homepage hero) and
           flex-basis never gets a say. Letting it shrink is what actually hands
           the space to the media side; the base already runs the title over the
           chevron sweep on purpose (overflow:visible). */
        min-width: 0;
    }
}

/* ----------------------------- */
/* 2. video fills the media column. The base column is position:relative and
   518px tall, so both media blocks stack on top of each other in it. Child
   combinator (not a descendant) so this still applies in the editor canvas,
   where the block list wraps blocks in their own 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;
}

/* ----------------------------- */
/* 3. the mobile still. Sits in the same column, 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. */

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

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

@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 black 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. Let them flow normally in the canvas 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__media {
    height: auto;
    padding: 12px;
}

/* plain block flow, NOT a flex column: as flex items these two shrink to share
   the column's height, and the video block's placeholder is overflow:hidden —
   it clipped its own Upload / Media Library / Insert from URL buttons. */
.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;
}

/* the gradient the base paints over the bottom of the column would cover the
   still's Replace toolbar target in the canvas */
.editor-styles-wrapper .bmg-home-hero-video .bmg-home-hero__media::after {
    display: none;
}