/*
 * =============================================================
 * Video banner
 * Component: .wp-block-uagb-container.is-style-video-banner
 *            .wp-block-uagb-container.is-style-video-banner-caption
 *
 * Full-bleed video band with a caption laid over it. Sidebar-selectable
 * under Styles on any Spectra container, so it renders in the editor
 * canvas as well as on the front end.
 *
 * Everything about the band - background, padding, gaps, caption typography
 * and alignment - is a block attribute, the height included: it comes from
 * the container's own Minimum Height, which the overlay wrapper is stretched
 * to fill. A 480px default stands in at any breakpoint where that control is
 * left unset.
 *
 * Only what no sidebar control can express lives here: that stretching (the
 * wrapper is built by the render_block filter in
 * inc/blocks/video-overlay.php, which replaces the whole <figure> and strips
 * the block's className, so no attribute can reach inside it), the scrim, and
 * the caption's absolute positioning - Spectra's position control is
 * sticky-only and core exposes none.
 *
 * Plain CSS on purpose: served raw by wp_enqueue_block_style() so it
 * loads in the editor too, which puts it outside the Tailwind pipeline.
 * Same arrangement as heading-styles.css.
 * =============================================================
 */

/*
 * Default band height, for when the container's own Minimum Height is unset at
 * the current breakpoint. It is also what the overlay wrapper inherits, so this
 * is the single place the band's fallback size is expressed.
 *
 * :where() keeps this at zero specificity: whatever Spectra generates for the
 * Minimum Height control always wins, whichever order the sheets load in.
 */
:where(.wp-block-uagb-container.is-style-video-banner) {
    min-height: 480px;
}

@media (max-width: 767px) {
    :where(.wp-block-uagb-container.is-style-video-banner) {
        min-height: min(480px, 56.25vw);
    }
}

.wp-block-uagb-container.is-style-video-banner {

    /* Carry the band's height down to the overlay wrapper, which is what makes
       the container's Minimum Height drive the video.

       Matched by ancestry, not by depth: the wrapper sits directly in
       .uagb-container-inner-blocks-wrap on the front end, but two layers deeper
       in the editor canvas, because the container's edit() uses the legacy
       InnerBlocks component rather than useInnerBlocksProps -
       .block-editor-inner-blocks > .block-editor-block-list__layout > the video
       block's own useBlockProps div (which is where the editor preview in
       blocks/youtube-overlay/index.js puts the wrapper). A fixed-depth selector
       matches one frame or the other, never both.

       min-height: inherit copies each parent's computed value down the chain;
       flex-grow lets the wrapper take up any height beyond that minimum. */
    & :has(.rothcocpa-video-overlay-wrapper),
    & .rothcocpa-video-overlay-wrapper {
        min-height: inherit;
        flex-grow: 1;
        overflow: hidden;
    }

    /* Left in normal flow on purpose: taking it out collapses every ancestor
       above it, and in the editor the wrapper would then resolve against a
       zero-height block div. */
    & .rothcocpa-video-overlay-wrapper {
        border-radius: 0;

        /* The wrapper's own 16:9 spacer, which would add ~860px at full width
           on top of the inherited height. */
        &::before {
            padding-bottom: 0;
        }

        /* Cover, not the global `contain`: the band's height is set
           independently of the video's aspect ratio, so `contain` would
           letterbox at most sizes. */
        & .rothcocpa-video-overlay-video-container video {
            object-fit: cover;
        }

        /* Dark scrim the caption sits on. Dropped once playback starts so it
           never dims the video itself. A Spectra container's own overlay
           renders behind child blocks, so it cannot do this. */
        &:not(:has(.rothcocpa-video-overlay-trigger.is-hidden))::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 10;
            background: rgb(5 10 10 / 0.5);
        }

        &.wp-block-video {
            margin-bottom: 0;
        }
    }

    /* Caption would otherwise float over the playing video. */
    &:has(.rothcocpa-video-overlay-trigger.is-hidden) {
        & .is-style-video-banner-caption {
            display: none;
        }
    }
}

/* Inset, gap and alignment are Spectra attributes; only the positioning
   itself is here. `!important` is required: Spectra forces
   `position: relative` on every direct child of
   .uagb-container-inner-blocks-wrap at higher specificity. */
.wp-block-uagb-container.is-style-video-banner-caption {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    pointer-events: none;
}