/**
 * core/video: native file size, capped by the text column (max-width: 100%).
 *
 * Editor: the block wrapper is `figure.wp-block.wp-block-video`.
 * Do not set max-width: 100% on that wrapper — it fills the canvas
 * instead of the 840px paragraph column.
 */

/* -------------------------------------------------------------------------
 * Frontend
 * ------------------------------------------------------------------------- */

.post_content figure.wp-block-video {
	display: table;
	width: auto;
	max-width: 100%;
	float: none;
	margin: 0 0 2rem;
}

.post_content figure.wp-block-video > video,
.post_content .wp-block-video video {
	display: block;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
}

.post_content figure.wp-block-video figcaption {
	caption-side: bottom;
	display: table-caption;
	margin-top: 0.5em;
	text-align: center;
	color: #818181;
}

.post_content figure.wp-block-video:not(.alignleft):not(.alignright):not(.aligncenter) {
	float: none;
	margin-left: 0;
	margin-right: auto;
}

.post_content figure.wp-block-video.aligncenter {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.post_content figure.wp-block-video.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.post_content figure.wp-block-video.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}

.post_content .wp-block-video .wp-video,
.post_content .wp-block-video .mejs-container,
.post_content .wp-block-video .mejs-video {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
}

/* -------------------------------------------------------------------------
 * Gutenberg iframe: same 840px column as paragraphs
 * ------------------------------------------------------------------------- */

.is-root-container > .wp-block[data-type="core/video"]:not([data-align]),
.is-root-container > .wp-block.wp-block-video:not([data-align]),
.is-root-container > .wp-block[data-align="center"][data-type="core/video"],
.is-root-container > .wp-block.wp-block-video[data-align="center"] {
	max-width: 840px !important;
	width: 100% !important;
	height: auto !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Nested video (group/column): follow the parent, not the canvas */
.wp-block .wp-block[data-type="core/video"]:not([data-align]),
.wp-block .wp-block.wp-block-video:not([data-align]) {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.is-root-container .wp-block[data-type="core/video"] video,
.is-root-container .wp-block.wp-block-video video {
	display: block;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
}

.is-root-container > .wp-block[data-type="core/video"]:not([data-align]) video,
.is-root-container > .wp-block.wp-block-video:not([data-align]) video {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.is-root-container > .wp-block[data-align="center"][data-type="core/video"] video,
.is-root-container > .wp-block.wp-block-video[data-align="center"] video {
	margin-left: auto !important;
	margin-right: auto !important;
}