/**
 * Video.js rendering mode: fitting a v10 player into a core/embed block.
 *
 * Three facts decide everything here, and getting any of them wrong produces
 * the same symptom — a black frame with a working player 150 pixels tall
 * inside it, while every event says the video is fine:
 *
 *   1. `<video-player>` is `display: contents` (v10 global.css). It cannot be
 *      sized, positioned, or given an aspect ratio. Style it and you are
 *      fighting the library.
 *   2. `<video-skin>` is the layout box. Its own styles are `display: grid;
 *      width: 100%` and no height at all, by design: the host page owns the
 *      height. That is us.
 *   3. The skin passes its height down to `<video>` and nothing else. The
 *      iframe-backed adapters carry `min-width: 300px; min-height: 150px` and
 *      wait to be told how big they are. That 150px is the black frame.
 *
 * WordPress already owns the aspect ratio, through `wp-embed-aspect-16-9` and
 * a padding-ratio box on the wrapper, so the skin's job is simply to fill what
 * core reserved. Where core reserved nothing — a theme without
 * `wp-embed-responsive`, or a block with no aspect class — the skin brings its
 * own ratio rather than collapsing.
 *
 * assets/js/videojs.js measures the result and reverts the block to a plain
 * iframe if this file did not arrive. Do not treat that as a reason to be
 * casual here; treat it as the reason a stylesheet failure is survivable.
 */

/* The skin fills the box core reserved… */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper > .vbmu-player > video-skin {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* …and brings its own where core reserved none. */
.vbmu-player > video-skin {
	display: grid;
	width: 100%;
	aspect-ratio: 16 / 9;
}

/*
 * The skin sizes `<video>` for us; every other media element has to be told.
 * `min-*: 0` overrides the adapters' 300x150 floor, which is not a sensible
 * fallback inside a reserved box — it is exactly the bug.
 */
.vbmu-media {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

/*
 * The iframe kept for visitors without scripts is no longer a direct child of
 * the wrapper, so core's own responsive rule no longer reaches it.
 */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper > noscript > iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
 * A player PHP left empty on purpose, because its media has to be resolved
 * over the network before it can exist. The skin draws its controls the
 * moment it upgrades, and driving them with nothing attached throws
 * `StoreError: NO_TARGET`, so the shell does not take clicks until
 * assets/js/videojs.js has filled it.
 */
.vbmu-pending > video-skin {
	pointer-events: none;
}