/**
 * Meta Field Output Block — front + block editor.
 */

/*
 * Block settings (all Meta Field blocks): #007cba, uniform hairline (1px) like TextControl.
 * - Native <select>: single 1px solid border (no inset stack).
 * - Component text/number inputs: no border on input; edge = inset box-shadow only (matches manual field).
 * - Do not combine 1px border + inset on the same control (reads as 2px).
 */
.mfo-inspector-fields select,
.mfo-inspector-fields select.components-select-control__input,
.mfo-inspector-fields .components-select-control__input {
	border: 1px solid #007cba !important;
	border-width: 1px !important;
	box-shadow: none !important;
	outline: none !important;
}

.mfo-inspector-fields select:focus,
.mfo-inspector-fields select.components-select-control__input:focus {
	border-color: #007cba !important;
	box-shadow: 0 0 0 1px #007cba !important;
	outline: none !important;
}

/* InputControl: edge is only on the backdrop — do not also inset the <input> (would double the line). */
.mfo-inspector-fields .components-input-control .components-input-control__input,
.mfo-inspector-fields .components-input-control .components-text-control__input {
	border: none !important;
	box-shadow: none !important;
}

/* Text / number inputs (incl. Range value) when not using backdrop: single hairline */
.mfo-inspector-fields .components-range-control__input,
.mfo-inspector-fields .components-range-control input[type="number"],
.mfo-inspector-fields .components-range-control input[type="text"],
.mfo-inspector-fields .components-combobox-control__input,
.mfo-inspector-fields .components-form-token-field__input,
.mfo-inspector-fields textarea {
	border: none !important;
	border-width: 0 !important;
	box-shadow: inset 0 0 0 1px #007cba !important;
	outline: none !important;
}

.mfo-inspector-fields .components-text-control__input:not( .components-input-control__input ),
.mfo-inspector-fields input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="range"] ):not( [type="hidden"] ):not( .components-input-control__input ) {
	border: none !important;
	border-width: 0 !important;
	box-shadow: inset 0 0 0 1px #007cba !important;
	outline: none !important;
}

.mfo-inspector-fields .components-text-control__input:focus,
.mfo-inspector-fields .components-input-control__input:focus,
.mfo-inspector-fields .components-combobox-control__input:focus,
.mfo-inspector-fields .components-range-control__input:focus,
.mfo-inspector-fields .components-range-control input[type="number"]:focus,
.mfo-inspector-fields .components-range-control input[type="text"]:focus,
.mfo-inspector-fields input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="range"] ):not( [type="hidden"] ):focus,
.mfo-inspector-fields textarea:focus {
	box-shadow: inset 0 0 0 1px #007cba, 0 0 0 1px #007cba !important;
	outline: none !important;
}

.mfo-inspector-fields .components-input-control .components-input-control__input:focus,
.mfo-inspector-fields .components-input-control .components-text-control__input:focus {
	box-shadow: none !important;
}

.mfo-inspector-fields .components-input-control__backdrop,
.mfo-inspector-fields .components-input-base__backdrop {
	border: none !important;
	box-shadow: inset 0 0 0 1px #007cba !important;
}

.mfo-inspector-fields .components-input-control:focus-within .components-input-control__backdrop,
.mfo-inspector-fields .components-input-control:focus-within .components-input-base__backdrop {
	box-shadow: inset 0 0 0 1px #007cba, 0 0 0 1px #007cba !important;
}

.mfo-inspector-fields .components-range-control .components-range-control__thumb-wrapper,
.mfo-inspector-fields .components-range-control input[type="range"] {
	--wp-admin-theme-color: #007cba;
}

.mfo-inspector-fields .mfo-inspector-select-border-match select.components-select-control__input,
.mfo-inspector-fields .mfo-inspector-select-border-match select {
	border: 1px solid #007cba !important;
	border-width: 1px !important;
	box-shadow: none !important;
}

.mfo-inspector-fields .components-button.is-secondary {
	border-width: 1px !important;
	border-color: #007cba !important;
}

.mfo-inspector-fields .mfo-inspector-field-border input[type="range"] {
	accent-color: #007cba;
}

/*
 * Editor: Meta Field (text output) & (HTML — text & numbers) — force full row in flex layouts
 * so multiple blocks stack instead of sitting in one horizontal row.
 */
.block-editor-block-list__block[data-type="meta-field-output/text"],
.block-editor-block-list__block[data-type="meta-field-output/html-text"] {
	flex: 0 0 100% !important;
	flex-basis: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	align-self: stretch !important;
}

/*
 * Default block width (alignment "none", not float left/right on text block):
 * the list row is often as wide as "wide"; constrain the .wp-block root to match front content width.
 */
.block-editor-iframe__body
	.editor-styles-wrapper
	.wp-block-meta-field-output-text.mfo-block--editor-content-width,
.block-editor-iframe__body
	.editor-styles-wrapper
	.wp-block-meta-field-output-html-text.mfo-block--editor-content-width,
.block-editor-block-list__block
	.wp-block-meta-field-output-text.mfo-block--editor-content-width,
.block-editor-block-list__block
	.wp-block-meta-field-output-html-text.mfo-block--editor-content-width,
.editor-styles-wrapper
	.wp-block-meta-field-output-text.mfo-block--editor-content-width,
.editor-styles-wrapper
	.wp-block-meta-field-output-html-text.mfo-block--editor-content-width {
	width: 100% !important;
	max-width: var( --wp--style--global--content-size, 100% ) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* Inside a Group flex row, do not force 100% flex-basis — otherwise left/right items jump to the next row */
.wp-block-group .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group .block-editor-block-list__block[data-type="meta-field-output/text"] {
	flex: 0 1 auto !important;
	flex-basis: auto !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	align-self: auto !important;
}

/* Editor: HTML — text block inside Group (fixes right-aligned group: block staying inside). */
.editor-styles-wrapper .wp-block-meta-field-output-html-text,
.block-editor-block-list__block[data-type="meta-field-output/html-text"] .block-editor-block-list__block-edit {
	box-sizing: border-box;
	max-width: 100%;
}

.block-editor-block-list__block[data-type="meta-field-output/html-text"] {
	position: relative;
	inset: auto;
}

/* Editor: blocks with alignment should span the list row (avoid sitting side-by-side like flex items). */
.block-editor-block-list__block[data-type^="meta-field-output/"].alignleft,
.block-editor-block-list__block[data-type^="meta-field-output/"].alignright,
.block-editor-block-list__block[data-type^="meta-field-output/"].aligncenter {
	flex-basis: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Wide / full: do not cap at the list column — otherwise Wide looks like default and Full like Wide */
.block-editor-block-list__block[data-type^="meta-field-output/"].alignwide {
	flex-basis: auto !important;
	width: min(
		100%,
		var( --wp--style--global--wide-size, var( --mfo-layout-wide, 90rem ) )
	) !important;
	max-width: min(
		100%,
		var( --wp--style--global--wide-size, var( --mfo-layout-wide, 90rem ) )
	) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	min-width: 0 !important;
}

.block-editor-block-list__block[data-type^="meta-field-output/"].alignfull {
	flex-basis: 100% !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Editor preview: ServerSideRender next to sidebar — full width row */
.block-editor-block-list__block .mfo-editor-ssr-wrap,
.editor-styles-wrapper .mfo-editor-ssr-wrap {
	flex-basis: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
}

/*
 * Capped “content width” (px) + SSR: the rule above uses !important, so it beats inline
 * `width: max-content` on the wrap. Shrink the preview when PHP outputs .mfo-output-block--content-max
 * (standalone, vertical Group, etc.).
 */
.block-editor-block-list__block .mfo-editor-ssr-wrap:has( .mfo-output-block--content-max ),
.editor-styles-wrapper .mfo-editor-ssr-wrap:has( .mfo-output-block--content-max ) {
	flex-basis: auto !important;
	width: max-content !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/*
 * Editor: Group (flex row) — SSR preview must not behave like a full-width flex line.
 * Inline + nested .mfo-output-block from PHP otherwise get flex-basis:100% and the block
 * wraps below the group outline for left/right justification (center looked fine).
 */
.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-editor-ssr-wrap,
.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-editor-ssr-wrap,
.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-editor-ssr-wrap,
.wp-block-group.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-editor-ssr-wrap,
.wp-block-group.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-editor-ssr-wrap,
.wp-block-group.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-editor-ssr-wrap,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-editor-ssr-wrap,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-editor-ssr-wrap,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-editor-ssr-wrap,
.wp-block-group .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-editor-ssr-wrap,
.wp-block-group .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-editor-ssr-wrap,
.wp-block-group .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-editor-ssr-wrap {
	width: auto !important;
	flex-basis: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-output-block,
.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-output-block,
.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-output-block,
.wp-block-group.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-output-block,
.wp-block-group.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-output-block,
.wp-block-group.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-output-block,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-output-block,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-output-block,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-output-block,
.wp-block-group .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-output-block,
.wp-block-group .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-output-block,
.wp-block-group .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-output-block {
	flex-basis: auto !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Editor: match Group content-justification on the actual flex item (InnerBlocks sit between group and block) */
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-group.is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group.is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group.is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-group .is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group .is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group .is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/text"] {
	align-self: center;
}

.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-group.is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group.is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group.is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-group .is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group .is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group .is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/text"] {
	align-self: flex-end;
}

.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-group.is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group.is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group.is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-group .is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-group .is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-group .is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/text"] {
	align-self: flex-start;
}

/* Core Row block (horizontal flex) — same SSR width issue as Group row */
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-editor-ssr-wrap,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-editor-ssr-wrap,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-editor-ssr-wrap,
.wp-block-row.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-editor-ssr-wrap,
.wp-block-row.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-editor-ssr-wrap,
.wp-block-row.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-editor-ssr-wrap,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-editor-ssr-wrap,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-editor-ssr-wrap,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-editor-ssr-wrap,
.wp-block-row .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-editor-ssr-wrap,
.wp-block-row .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-editor-ssr-wrap,
.wp-block-row .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-editor-ssr-wrap {
	width: auto !important;
	flex-basis: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-output-block,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-output-block,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-output-block,
.wp-block-row.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-output-block,
.wp-block-row.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-output-block,
.wp-block-row.is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-output-block,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-output-block,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-output-block,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-output-block,
.wp-block-row .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-text"] .mfo-output-block,
.wp-block-row .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/html-media"] .mfo-output-block,
.wp-block-row .is-layout-flex.is-horizontal .block-editor-block-list__block[data-type="meta-field-output/text"] .mfo-output-block {
	flex-basis: auto !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-row.is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row.is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row.is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-row .is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row .is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row .is-layout-flex.is-horizontal.is-content-justification-center .block-editor-block-list__block[data-type="meta-field-output/text"] {
	align-self: center;
}

.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-row.is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row.is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row.is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-row .is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row .is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row .is-layout-flex.is-horizontal.is-content-justification-right .block-editor-block-list__block[data-type="meta-field-output/text"] {
	align-self: flex-end;
}

.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-row.is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row.is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row.is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/text"],
.wp-block-row .is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-text"],
.wp-block-row .is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/html-media"],
.wp-block-row .is-layout-flex.is-horizontal.is-content-justification-left .block-editor-block-list__block[data-type="meta-field-output/text"] {
	align-self: flex-start;
}

/* Editor: Wide / Full inside horizontal flex Group or Row must beat width:auto on the inner wrapper */
.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignwide .mfo-output-block,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignwide .mfo-output-block,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignwide .mfo-output-block,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignwide .mfo-output-block,
.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignwide .mfo-editor-ssr-wrap,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignwide .mfo-editor-ssr-wrap,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignwide .mfo-editor-ssr-wrap,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignwide .mfo-editor-ssr-wrap {
	width: min(
		100%,
		var( --wp--style--global--wide-size, var( --mfo-layout-wide, 90rem ) )
	) !important;
	max-width: min(
		100%,
		var( --wp--style--global--wide-size, var( --mfo-layout-wide, 90rem ) )
	) !important;
}

.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignfull .mfo-output-block,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignfull .mfo-output-block,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignfull .mfo-output-block,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignfull .mfo-output-block,
.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignfull .mfo-editor-ssr-wrap,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignfull .mfo-editor-ssr-wrap,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignfull .mfo-editor-ssr-wrap,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/html-media"].alignfull .mfo-editor-ssr-wrap {
	width: 100% !important;
	max-width: none !important;
}

.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/block"].alignwide .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/block"].alignwide .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/block"].alignwide .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/block"].alignwide .mfo-output-block.mfo-output-block--has-gallery {
	width: min(
		100%,
		var( --wp--style--global--wide-size, var( --mfo-layout-wide, 90rem ) )
	) !important;
	max-width: min(
		100%,
		var( --wp--style--global--wide-size, var( --mfo-layout-wide, 90rem ) )
	) !important;
}

.wp-block-group.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/block"].alignfull .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/block"].alignfull .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row.is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/block"].alignfull .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row .is-layout-flex:not( .is-vertical ) .block-editor-block-list__block[data-type="meta-field-output/block"].alignfull .mfo-output-block.mfo-output-block--has-gallery {
	width: 100% !important;
	max-width: none !important;
}

/*
 * Inspector “content width” (px): flex/grid `min-width` defaults to `auto` (content size).
 * A large image’s intrinsic min-width can size the block and the editor’s selection box to the
 * uncropped bitmap, and Group “justify” follows that — even though the image is visually capped
 * (max-width / --mfo-max-width). Break the min-content floor on the cap surface.
 */
.mfo-output-block--content-max {
	min-width: 0;
	box-sizing: border-box;
}

.mfo-output-block--content-max .mfo-output-inner,
.mfo-output-block--content-max .mfo-output.mfo-output--html,
.mfo-output-block--content-max .mfo-output.mfo-output--has-gallery,
.mfo-output-block--content-max .mfo-output-gallery {
	min-width: 0;
}

.mfo-output-block--content-max .mfo-output--html .mfo-single-image-aspect {
	max-width: 100%;
}

/*
 * Capped image: fill the inner up to the cap when “Align content” is not used (default band).
 * When “Align content” is set, width:auto + margins / fit block so left|center|right and Group flex work.
 */
.mfo-output-block--content-max:not( .has-text-align-left ):not( .has-text-align-center ):not(
		.has-text-align-right
	)
	.mfo-output--html
	> img,
.mfo-output-block--content-max:not( .has-text-align-left ):not( .has-text-align-center ):not(
		.has-text-align-right
	)
	.mfo-output--html
	.mfo-output-img,
.mfo-output-block--content-max:not( .has-text-align-left ):not( .has-text-align-center ):not(
		.has-text-align-right
	)
	.mfo-output--html
	.mfo-single-image-aspect
	> img {
	width: 100%;
}

.mfo-output-block--content-max.has-text-align-left .mfo-output--html > img,
.mfo-output-block--content-max.has-text-align-left .mfo-output--html .mfo-output-img,
.mfo-output-block--content-max.has-text-align-left .mfo-output--html .mfo-single-image-aspect,
.mfo-output-block--content-max.has-text-align-center .mfo-output--html > img,
.mfo-output-block--content-max.has-text-align-center .mfo-output--html .mfo-output-img,
.mfo-output-block--content-max.has-text-align-center .mfo-output--html .mfo-single-image-aspect,
.mfo-output-block--content-max.has-text-align-right .mfo-output--html > img,
.mfo-output-block--content-max.has-text-align-right .mfo-output--html .mfo-output-img,
.mfo-output-block--content-max.has-text-align-right .mfo-output--html .mfo-single-image-aspect {
	width: auto;
	max-width: min( 100%, var( --mfo-max-width, 100% ) ) !important;
}

.mfo-output-block--content-max.has-text-align-center {
	margin-left: auto !important;
	margin-right: auto !important;
	width: fit-content !important;
	max-width: min( 100%, var( --mfo-max-width, 100% ) ) !important;
	/* is-layout-constrained (column flex): default stretch would fill the content column */
	align-self: center;
}

.mfo-output-block--content-max.has-text-align-left {
	margin-right: auto !important;
	margin-left: 0 !important;
	width: fit-content !important;
	max-width: min( 100%, var( --mfo-max-width, 100% ) ) !important;
	align-self: flex-start;
}

.mfo-output-block--content-max.has-text-align-right {
	margin-left: auto !important;
	margin-right: 0 !important;
	width: fit-content !important;
	max-width: min( 100%, var( --mfo-max-width, 100% ) ) !important;
	align-self: flex-end;
}

/*
 * Images & Rich without a content max: :is(.is-layout-constrained) rules (below) do not cap the block when
 * has-text-align-* is set, so the inner stays 100% wide, images with max-width:100% grow to the line, and
 * margin:auto on the img has no effect. Shrink-wrap the block like content-max; Group/Row flex row rules
 * (higher specificity) still override for horizontal flex + justification.
 */
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-left {
	margin-right: auto !important;
	margin-left: 0 !important;
	width: fit-content !important;
	max-width: 100% !important;
	align-self: flex-start !important;
}

.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-center {
	margin-left: auto !important;
	margin-right: auto !important;
	width: fit-content !important;
	max-width: 100% !important;
	align-self: center !important;
}

.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-right {
	margin-left: auto !important;
	margin-right: 0 !important;
	width: fit-content !important;
	max-width: 100% !important;
	align-self: flex-end !important;
}

/* Same case: do not let the image span 100% of the line; keeps margin + shrink-wrap meaningful */
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-left .mfo-output--html > img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-left .mfo-output--html .mfo-output-img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-left .mfo-output--html .mfo-single-image-aspect,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-center .mfo-output--html > img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-center .mfo-output--html .mfo-output-img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-center .mfo-output--html .mfo-single-image-aspect,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-right .mfo-output--html > img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-right .mfo-output--html .mfo-output-img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-right .mfo-output--html .mfo-single-image-aspect,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-left .mfo-output--html figure > img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-left .mfo-output--html .wp-block-image img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-center .mfo-output--html figure > img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-center .mfo-output--html .wp-block-image img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-right .mfo-output--html figure > img,
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-right .mfo-output--html .wp-block-image img {
	width: auto !important;
	max-width: 100% !important;
}

/* Gutenberg/figure: theme often width:100% the figure; shrink-wrap for align content (no content max) */
.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-center .mfo-output--html > figure:where( .wp-block-image, figure ) {
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
}

.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-left .mfo-output--html > figure:where( .wp-block-image, figure ) {
	margin-left: 0;
	margin-right: auto;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
}

.wp-block-meta-field-output-html-media.mfo-output-block:not( .mfo-output-block--content-max ).has-text-align-right .mfo-output--html > figure:where( .wp-block-image, figure ) {
	margin-left: auto;
	margin-right: 0;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * Horizontal flex Group/Row: flex “justify” only moves children whose width is not 100% of the row;
 * cap surface shrink-wraps so the box matches the image, not the group.
 */
.wp-block-group.is-layout-flex:not( .is-vertical ) .mfo-output-block--content-max,
.wp-block-group .is-layout-flex:not( .is-vertical ) .mfo-output-block--content-max,
.wp-block-row.is-layout-flex:not( .is-vertical ) .mfo-output-block--content-max,
.wp-block-row .is-layout-flex:not( .is-vertical ) .mfo-output-block--content-max {
	width: fit-content;
	max-width: min( 100%, var( --mfo-max-width, 100% ) );
}

/* Block edit root: ServerSideRender wrapper + flex parents (Row/Group) can still use list-item min-width */
.block-editor .mfo-block-editor-content-max,
.editor-styles-wrapper .mfo-block-editor-content-max {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Editor: shrink-wrap capped output so the blue frame + Group “justify” match the photo, not the full row */
.block-editor-iframe__body .mfo-editor-ssr-wrap .mfo-output-block--content-max,
.block-editor .mfo-editor-ssr-wrap .mfo-output-block--content-max,
.is-root-container .mfo-editor-ssr-wrap .mfo-output-block--content-max {
	width: fit-content;
	max-width: min( 100%, var( --mfo-max-width, 100% ) );
}

/*
 * Capped + Align content: the edit root should match the SSR (selection outline, centering) when not in a
 * flex Group row (those get align-self from the Group/Row rules above).
 */
.block-editor-iframe__body
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.mfo-block-editor-content-max.has-text-align-left,
.block-editor-iframe__body
	.block-editor-block-list__block[data-type="meta-field-output/html-text"]
	.mfo-block-editor-content-max.has-text-align-left,
.block-editor
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.mfo-block-editor-content-max.has-text-align-left,
.block-editor
	.block-editor-block-list__block[data-type="meta-field-output/html-text"]
	.mfo-block-editor-content-max.has-text-align-left,
.editor-styles-wrapper
	.mfo-block-editor-content-max.has-text-align-left {
	width: fit-content !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	align-self: flex-start;
}

.block-editor-iframe__body
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.mfo-block-editor-content-max.has-text-align-center,
.block-editor-iframe__body
	.block-editor-block-list__block[data-type="meta-field-output/html-text"]
	.mfo-block-editor-content-max.has-text-align-center,
.block-editor
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.mfo-block-editor-content-max.has-text-align-center,
.block-editor
	.block-editor-block-list__block[data-type="meta-field-output/html-text"]
	.mfo-block-editor-content-max.has-text-align-center,
.editor-styles-wrapper
	.mfo-block-editor-content-max.has-text-align-center {
	width: fit-content !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	align-self: center;
}

.block-editor-iframe__body
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.mfo-block-editor-content-max.has-text-align-right,
.block-editor-iframe__body
	.block-editor-block-list__block[data-type="meta-field-output/html-text"]
	.mfo-block-editor-content-max.has-text-align-right,
.block-editor
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.mfo-block-editor-content-max.has-text-align-right,
.block-editor
	.block-editor-block-list__block[data-type="meta-field-output/html-text"]
	.mfo-block-editor-content-max.has-text-align-right,
.editor-styles-wrapper
	.mfo-block-editor-content-max.has-text-align-right {
	width: fit-content !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	align-self: flex-end;
}

/* Editor: align content when no “content width” (no .mfo-block-editor-content-max) — mirror front / avoid full-width line */
.block-editor-iframe__body
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.wp-block-meta-field-output-html-media.has-text-align-left:not( .mfo-block-editor-content-max ),
.block-editor
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.wp-block-meta-field-output-html-media.has-text-align-left:not( .mfo-block-editor-content-max ),
.editor-styles-wrapper
	.wp-block-meta-field-output-html-media.has-text-align-left:not( .mfo-block-editor-content-max ) {
	width: fit-content !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	align-self: flex-start;
}

.block-editor-iframe__body
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.wp-block-meta-field-output-html-media.has-text-align-center:not( .mfo-block-editor-content-max ),
.block-editor
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.wp-block-meta-field-output-html-media.has-text-align-center:not( .mfo-block-editor-content-max ),
.editor-styles-wrapper
	.wp-block-meta-field-output-html-media.has-text-align-center:not( .mfo-block-editor-content-max ) {
	width: fit-content !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	align-self: center;
}

.block-editor-iframe__body
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.wp-block-meta-field-output-html-media.has-text-align-right:not( .mfo-block-editor-content-max ),
.block-editor
	.block-editor-block-list__block[data-type="meta-field-output/html-media"]
	.wp-block-meta-field-output-html-media.has-text-align-right:not( .mfo-block-editor-content-max ),
.editor-styles-wrapper
	.wp-block-meta-field-output-html-media.has-text-align-right:not( .mfo-block-editor-content-max ) {
	width: fit-content !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	align-self: flex-end;
}

.block-editor-block-list__block[data-type="meta-field-output/html-media"] {
	min-width: 0;
}

/*
 * Alignment: cancel float only for the legacy HTML block without a gallery.
 * Images & Rich, gallery output, and video must keep toolbar left/center/right (and theme margin rules).
 */
.mfo-output-block.alignleft:not( .mfo-video-block-root ):not( .mfo-output-block--has-gallery ):not( .wp-block-meta-field-output-html-media ),
.mfo-output-block.alignright:not( .mfo-video-block-root ):not( .mfo-output-block--has-gallery ):not( .wp-block-meta-field-output-html-media ),
.wp-block-meta-field-output-block.alignleft:not( .mfo-output-block--has-gallery ),
.wp-block-meta-field-output-block.alignright:not( .mfo-output-block--has-gallery ) {
	float: none !important;
	clear: both;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.mfo-output-block.aligncenter:not( .mfo-video-block-root ):not( .mfo-output-block--has-gallery ):not( .wp-block-meta-field-output-html-media ),
.wp-block-meta-field-output-block.aligncenter:not( .mfo-output-block--has-gallery ) {
	float: none !important;
	clear: both;
	width: 100% !important;
}

/* Toolbar left/center/right: block width follows content (like video), so margin auto / floats work. */
.wp-block-meta-field-output-html-media.mfo-output-block.alignleft,
.wp-block-meta-field-output-html-media.mfo-output-block.alignright,
.wp-block-meta-field-output-html-media.mfo-output-block.aligncenter,
.mfo-output-block.mfo-output-block--has-gallery.alignleft,
.mfo-output-block.mfo-output-block--has-gallery.alignright,
.mfo-output-block.mfo-output-block--has-gallery.aligncenter,
.wp-block-meta-field-output-block.mfo-output-block--has-gallery.alignleft,
.wp-block-meta-field-output-block.mfo-output-block--has-gallery.alignright,
.wp-block-meta-field-output-block.mfo-output-block--has-gallery.aligncenter {
	width: auto !important;
	max-width: 100% !important;
}

.wp-block-meta-field-output-html-media.mfo-output-block.aligncenter,
.mfo-output-block.mfo-output-block--has-gallery.aligncenter,
.wp-block-meta-field-output-block.mfo-output-block--has-gallery.aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

.mfo-output-block.alignwide,
.mfo-output-block.alignfull,
.wp-block-meta-field-output-block.alignwide,
.wp-block-meta-field-output-block.alignfull {
	float: none !important;
	clear: both;
}

/*
 * Images & Rich + gallery: wide / full (themes often only whitelist core blocks — mirror theme tokens).
 */
.wp-block-meta-field-output-html-media.mfo-output-block.alignwide,
.mfo-output-block.mfo-output-block--has-gallery.alignwide {
	max-width: min(
		100%,
		var( --wp--style--global--wide-size, var( --mfo-layout-wide, 90rem ) )
	) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

.wp-block-meta-field-output-html-media.mfo-output-block.alignfull,
.mfo-output-block.mfo-output-block--has-gallery.alignfull {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
}

/* Alignfull viewport breakout lives in mfo-block-align-front.css (front `style` only — not editor_style). */

.block-editor .wp-block-meta-field-output-html-media.mfo-output-block.alignfull,
.editor-styles-wrapper .wp-block-meta-field-output-html-media.mfo-output-block.alignfull,
.block-editor .mfo-output-block.mfo-output-block--has-gallery.alignfull,
.editor-styles-wrapper .mfo-output-block.mfo-output-block--has-gallery.alignfull {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Editor / Site Editor: parent columns use flex; without this the block can sit
 * beside the next block (e.g. heading) when alignment classes are applied.
 */
.block-editor-block-list__block .mfo-output-block:not( .mfo-video-block-root ):not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ),
.editor-styles-wrapper .mfo-output-block:not( .mfo-video-block-root ):not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ),
.is-root-container .mfo-output-block:not( .mfo-video-block-root ):not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ),
.wp-block-column .mfo-output-block:not( .mfo-video-block-root ):not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ),
.block-editor-block-list__block .wp-block-meta-field-output-block:not( .mfo-video-block-root ):not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ),
.editor-styles-wrapper .wp-block-meta-field-output-block:not( .mfo-video-block-root ):not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ),
.is-root-container .wp-block-meta-field-output-block:not( .mfo-video-block-root ):not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ),
.wp-block-column .wp-block-meta-field-output-block:not( .mfo-video-block-root ):not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ) {
	flex-basis: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
}

/*
 * Video block: visible in Group / Row; respect parent text-align / alignment.
 */
.wp-block-meta-field-output-video.mfo-output-block,
.mfo-video-block-root.mfo-output-block {
	float: none;
	clear: both;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	text-align: inherit;
	width: 100%;
}

/* Editor + front: never collapse to 0 width when Group flex uses width:auto on siblings */
.block-editor-block-list__block[data-type="meta-field-output/video"] .mfo-output-block,
.editor-styles-wrapper .wp-block-meta-field-output-video.mfo-output-block,
.wp-block-meta-field-output-video.mfo-output-block {
	width: 100% !important;
	max-width: 100% !important;
	min-width: min( 100%, 240px );
}

.wp-block-meta-field-output-video .mfo-output-inner {
	display: inline-block;
	width: auto;
	max-width: 100%;
	vertical-align: top;
	text-align: left;
	box-sizing: border-box;
}

.wp-block-meta-field-output-video.aligncenter .mfo-output-inner {
	margin-left: auto;
	margin-right: auto;
	display: table;
}

.wp-block-meta-field-output-video.alignleft .mfo-output-inner {
	margin-left: 0;
	margin-right: auto;
}

.wp-block-meta-field-output-video.alignright .mfo-output-inner {
	margin-left: auto;
	margin-right: 0;
}

/* Block alignment + video: do not force full viewport width — keeps alignment meaningful in Groups */
.wp-block-meta-field-output-video.mfo-output-block.alignleft,
.wp-block-meta-field-output-video.mfo-output-block.alignright,
.wp-block-meta-field-output-video.mfo-output-block.aligncenter {
	width: auto !important;
	max-width: 100% !important;
}

/*
 * Group / Row (flex): WordPress adds .is-content-justification-* on the flex container.
 * Text / media / legacy: shrink-to-fit. Video: full width of the group (width:auto collapsed the player).
 */
/*
 * Group flex + justification: inner blocks often sit under .wp-block-group__inner-container, not direct
 * children of .wp-block-group — use descendant selectors so center/right/left apply.
 */
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-html-text,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-html-media,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-text,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-block,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-html-text,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-html-media,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-text,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-block {
	align-self: center;
	width: auto !important;
	max-width: 100% !important;
}

.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-html-text,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-html-media,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-text,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-block,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-html-text,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-html-media,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-text,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-block {
	align-self: flex-end;
	width: auto !important;
	max-width: 100% !important;
}

.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-html-text,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-html-media,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-text,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-block,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-html-text,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-html-media,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-text,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-block {
	align-self: flex-start;
	width: auto !important;
	max-width: 100% !important;
}

/*
 * Stack (column flex): cross-axis was flex-end/start and crushed html-text; stretch + text align instead.
 */
.wp-block-group.is-layout-flex.is-vertical.is-content-justification-left
	> .wp-block-meta-field-output-html-text,
.wp-block-group.is-layout-flex.is-vertical.is-content-justification-center
	> .wp-block-meta-field-output-html-text,
.wp-block-group.is-layout-flex.is-vertical.is-content-justification-right
	> .wp-block-meta-field-output-html-text {
	align-self: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
}

.wp-block-group.is-layout-flex.is-content-justification-center > .wp-block-meta-field-output-video,
.wp-block-group.is-layout-flex.is-content-justification-right > .wp-block-meta-field-output-video,
.wp-block-group.is-layout-flex.is-content-justification-left > .wp-block-meta-field-output-video {
	align-self: stretch;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
}

/* Gallery in horizontal flex group only: shrink-wrap + justification (vertical stack must stay full width) */
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-center .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-right .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-left .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-center .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-right .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-left .mfo-output-block.mfo-output-block--has-gallery {
	flex: 0 1 auto !important;
	width: auto !important;
	max-width: 100% !important;
}

.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-center .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-center .mfo-output-block.mfo-output-block--has-gallery {
	align-self: center;
}

.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-right .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-right .mfo-output-block.mfo-output-block--has-gallery {
	align-self: flex-end;
}

.wp-block-group.is-layout-flex:not( .is-vertical ).is-content-justification-left .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-group .is-layout-flex:not( .is-vertical ).is-content-justification-left .mfo-output-block.mfo-output-block--has-gallery {
	align-self: flex-start;
}

/* Core Row (front): same flex + justification behaviour as Group (horizontal rows only) */
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-html-text,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-html-media,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-text,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-block,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-html-text,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-html-media,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-text,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-center .wp-block-meta-field-output-block {
	align-self: center;
	width: auto !important;
	max-width: 100% !important;
}

.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-html-text,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-html-media,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-text,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-block,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-html-text,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-html-media,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-text,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-right .wp-block-meta-field-output-block {
	align-self: flex-end;
	width: auto !important;
	max-width: 100% !important;
}

.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-html-text,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-html-media,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-text,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-block,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-html-text,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-html-media,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-text,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-left .wp-block-meta-field-output-block {
	align-self: flex-start;
	width: auto !important;
	max-width: 100% !important;
}

.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-center .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-right .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-left .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-center .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-right .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-left .mfo-output-block.mfo-output-block--has-gallery {
	flex: 0 1 auto !important;
	width: auto !important;
	max-width: 100% !important;
}

.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-center .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-center .mfo-output-block.mfo-output-block--has-gallery {
	align-self: center;
}

.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-right .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-right .mfo-output-block.mfo-output-block--has-gallery {
	align-self: flex-end;
}

.wp-block-row.is-layout-flex:not( .is-vertical ).is-content-justification-left .mfo-output-block.mfo-output-block--has-gallery,
.wp-block-row .is-layout-flex:not( .is-vertical ).is-content-justification-left .mfo-output-block.mfo-output-block--has-gallery {
	align-self: flex-start;
}

/*
 * Horizontal flex Group / Row: toolbar Wide must not lose to width:auto; Full spans the flex row.
 */
.wp-block-group.is-layout-flex:not( .is-vertical ) .wp-block-meta-field-output-html-media.mfo-output-block.alignwide,
.wp-block-group .is-layout-flex:not( .is-vertical ) .wp-block-meta-field-output-html-media.mfo-output-block.alignwide,
.wp-block-row.is-layout-flex:not( .is-vertical ) .wp-block-meta-field-output-html-media.mfo-output-block.alignwide,
.wp-block-row .is-layout-flex:not( .is-vertical ) .wp-block-meta-field-output-html-media.mfo-output-block.alignwide,
.wp-block-group.is-layout-flex:not( .is-vertical ) .mfo-output-block.mfo-output-block--has-gallery.alignwide,
.wp-block-group .is-layout-flex:not( .is-vertical ) .mfo-output-block.mfo-output-block--has-gallery.alignwide,
.wp-block-row.is-layout-flex:not( .is-vertical ) .mfo-output-block.mfo-output-block--has-gallery.alignwide,
.wp-block-row .is-layout-flex:not( .is-vertical ) .mfo-output-block.mfo-output-block--has-gallery.alignwide {
	width: min(
		100%,
		var( --wp--style--global--wide-size, var( --mfo-layout-wide, 90rem ) )
	) !important;
	max-width: min(
		100%,
		var( --wp--style--global--wide-size, var( --mfo-layout-wide, 90rem ) )
	) !important;
}

.wp-block-group.is-layout-flex:not( .is-vertical ) .wp-block-meta-field-output-html-media.mfo-output-block.alignfull,
.wp-block-group .is-layout-flex:not( .is-vertical ) .wp-block-meta-field-output-html-media.mfo-output-block.alignfull,
.wp-block-row.is-layout-flex:not( .is-vertical ) .wp-block-meta-field-output-html-media.mfo-output-block.alignfull,
.wp-block-row .is-layout-flex:not( .is-vertical ) .wp-block-meta-field-output-html-media.mfo-output-block.alignfull,
.wp-block-group.is-layout-flex:not( .is-vertical ) .mfo-output-block.mfo-output-block--has-gallery.alignfull,
.wp-block-group .is-layout-flex:not( .is-vertical ) .mfo-output-block.mfo-output-block--has-gallery.alignfull,
.wp-block-row.is-layout-flex:not( .is-vertical ) .mfo-output-block.mfo-output-block--has-gallery.alignfull,
.wp-block-row .is-layout-flex:not( .is-vertical ) .mfo-output-block.mfo-output-block--has-gallery.alignfull {
	align-self: stretch !important;
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}

/*
 * Constrained / block theme layouts: if the theme only applies max-width to a whitelist of core blocks,
 * the HTML — images & rich block (and gallery variant of the legacy block) can span full-bleed like
 * a Group with “use content width” off. Cap to the global content size; min() keeps sidebars/columns safe.
 */
:where( .is-layout-constrained, .is-layout-constrained * ) :where(
	.wp-block-meta-field-output-html-text,
	.wp-block-meta-field-output-html-media,
	.wp-block-meta-field-output-block.mfo-output-block--has-gallery
):not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ) {
	max-width: min(
		100%,
		var( --mfo-layout-content, var( --wp--style--global--content-size, 100% ) )
	) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

:where( .is-layout-constrained, .is-layout-constrained * ) :where(
	.wp-block-meta-field-output-html-text.alignwide,
	.wp-block-meta-field-output-html-media.alignwide,
	.wp-block-meta-field-output-text.alignwide,
	.wp-block-meta-field-output-video.alignwide,
	.wp-block-meta-field-output-block.alignwide
) {
	max-width: min(
		100%,
		var(
			--mfo-layout-wide,
			var( --wp--style--global--wide-size, var( --mfo-layout-content, 100% ) )
		)
	) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

:where( .is-layout-constrained, .is-layout-constrained * ) :where(
	.wp-block-meta-field-output-html-text.alignfull,
	.wp-block-meta-field-output-html-media.alignfull,
	.wp-block-meta-field-output-text.alignfull,
	.wp-block-meta-field-output-block.alignfull
) {
	max-width: none !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* Video: keep capped full inside layouts (avoid forced viewport bleed in Groups/columns) */
:where( .is-layout-constrained, .is-layout-constrained * ) :where(
	.wp-block-meta-field-output-video.alignfull
) {
	max-width: min(
		100%,
		var( --mfo-layout-full, var( --mfo-layout-wide, 100% ) )
	) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/*
 * Wide / full Group (or Row): Images & Rich + gallery default width should follow the group band,
 * not the inner content column (constrained rules above still apply inside plain constrained layouts).
 * Must not match alignleft / alignright / aligncenter — those use margins we must not zero with !important.
 */
.wp-block-group.alignfull .wp-block-meta-field-output-html-media.mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ),
.wp-block-group.alignwide .wp-block-meta-field-output-html-media.mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ),
.wp-block-group.alignfull .mfo-output-block.mfo-output-block--has-gallery:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ),
.wp-block-group.alignwide .mfo-output-block.mfo-output-block--has-gallery:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ),
.wp-block-row.alignfull .wp-block-meta-field-output-html-media.mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ),
.wp-block-row.alignwide .wp-block-meta-field-output-html-media.mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ),
.wp-block-row.alignfull .mfo-output-block.mfo-output-block--has-gallery:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ),
.wp-block-row.alignwide .mfo-output-block.mfo-output-block--has-gallery:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ) {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

.block-editor-iframe__body .wp-block-group.alignfull .block-editor-block-list__block[data-type="meta-field-output/html-media"]:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ):not( [data-align="left"] ):not( [data-align="right"] ):not( [data-align="center"] ),
.block-editor-iframe__body .wp-block-group.alignwide .block-editor-block-list__block[data-type="meta-field-output/html-media"]:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ):not( [data-align="left"] ):not( [data-align="right"] ):not( [data-align="center"] ),
.block-editor-iframe__body .wp-block-row.alignfull .block-editor-block-list__block[data-type="meta-field-output/html-media"]:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ):not( [data-align="left"] ):not( [data-align="right"] ):not( [data-align="center"] ),
.block-editor-iframe__body .wp-block-row.alignwide .block-editor-block-list__block[data-type="meta-field-output/html-media"]:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ):not( [data-align="left"] ):not( [data-align="right"] ):not( [data-align="center"] ),
.block-editor-iframe__body .wp-block-group.alignfull .block-editor-block-list__block[data-type="meta-field-output/block"]:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ):not( [data-align="left"] ):not( [data-align="right"] ):not( [data-align="center"] ) .mfo-output-block.mfo-output-block--has-gallery,
.block-editor-iframe__body .wp-block-group.alignwide .block-editor-block-list__block[data-type="meta-field-output/block"]:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ):not( [data-align="left"] ):not( [data-align="right"] ):not( [data-align="center"] ) .mfo-output-block.mfo-output-block--has-gallery {
	max-width: none !important;
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box;
}

/*
 * When Settings → Meta Field Output widths defines --mfo-layout-*, also cap blocks inside Groups
 * that are not “inner blocks use content width” (no .is-layout-constrained on ancestors).
 */
body.mfo-layout-widths-active
	.wp-block-group
	:where(
		.wp-block-meta-field-output-html-text,
		.wp-block-meta-field-output-html-media,
		.wp-block-meta-field-output-text,
		.wp-block-meta-field-output-video,
		.wp-block-meta-field-output-block
	).mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ) {
	max-width: min(
		100%,
		var( --mfo-layout-content, var( --wp--style--global--content-size, 100% ) )
	) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

body.mfo-layout-widths-active
	.wp-block-group
	:where(
		.wp-block-meta-field-output-html-text,
		.wp-block-meta-field-output-html-media,
		.wp-block-meta-field-output-text,
		.wp-block-meta-field-output-video,
		.wp-block-meta-field-output-block
	).mfo-output-block.alignwide {
	max-width: min(
		100%,
		var(
			--mfo-layout-wide,
			var( --wp--style--global--wide-size, var( --mfo-layout-content, 100% ) )
		)
	) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

body.mfo-layout-widths-active
	.wp-block-group
	:where(
		.wp-block-meta-field-output-html-text,
		.wp-block-meta-field-output-html-media,
		.wp-block-meta-field-output-text,
		.wp-block-meta-field-output-block
	).mfo-output-block.alignfull {
	max-width: none !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

body.mfo-layout-widths-active
	.wp-block-group
	.wp-block-meta-field-output-video.mfo-output-block.alignfull {
	max-width: min(
		100%,
		var( --mfo-layout-full, var( --mfo-layout-wide, 100% ) )
	) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* HTML — text & numbers / Images & Rich: inherit group text alignment (block is not full-bleed by default) */
.wp-block-meta-field-output-html-text.mfo-output-block,
.wp-block-meta-field-output-html-media.mfo-output-block {
	text-align: inherit;
}

.wp-block-meta-field-output-html-text .mfo-output-inner,
.wp-block-meta-field-output-html-media .mfo-output-inner {
	display: inline-block;
	width: auto;
	max-width: 100%;
	vertical-align: top;
	text-align: inherit;
	box-sizing: border-box;
}

/*
 * textAlign (AlignmentControl) — like core Paragraph: width is wide/full in block toolbar; this sets text flow.
 * Keeps a full-width inner so alignment matches the field width in the group.
 */
.wp-block-meta-field-output-html-text .mfo-output-inner.has-text-align-left,
.wp-block-meta-field-output-html-text .mfo-output-inner.has-text-align-center,
.wp-block-meta-field-output-html-text .mfo-output-inner.has-text-align-right,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-left,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-center,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-right {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.wp-block-meta-field-output-html-text .mfo-output-inner.has-text-align-left,
.wp-block-meta-field-output-html-text.has-text-align-left,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-left,
.wp-block-meta-field-output-html-media.has-text-align-left {
	text-align: left;
}

.wp-block-meta-field-output-html-text .mfo-output-inner.has-text-align-center,
.wp-block-meta-field-output-html-text.has-text-align-center,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-center,
.wp-block-meta-field-output-html-media.has-text-align-center {
	text-align: center;
}

.wp-block-meta-field-output-html-text .mfo-output-inner.has-text-align-right,
.wp-block-meta-field-output-html-text.has-text-align-right,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-right,
.wp-block-meta-field-output-html-media.has-text-align-right {
	text-align: right;
}

/*
 * Images & Rich: block-level images do not follow text-align — use margins (wraps / figures still use text-align above).
 */
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-center .mfo-output--html > img,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-center .mfo-output--html figure > img,
.wp-block-meta-field-output-html-media.has-text-align-center .mfo-output--html > img,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-center img.mfo-output-img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-right .mfo-output--html > img,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-right .mfo-output--html figure > img,
.wp-block-meta-field-output-html-media.has-text-align-right .mfo-output--html > img,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-right img.mfo-output-img {
	display: block;
	margin-left: auto;
	margin-right: 0;
}

.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-left .mfo-output--html > img,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-left .mfo-output--html figure > img,
.wp-block-meta-field-output-html-media.has-text-align-left .mfo-output--html > img,
.wp-block-meta-field-output-html-media .mfo-output-inner.has-text-align-left img.mfo-output-img {
	display: block;
	margin-left: 0;
	margin-right: auto;
}

/* Editor: default block width = theme content size (avoids “looks like wide” when it should be content) */
.block-editor
	.block-editor-block-list__block[
		data-type="meta-field-output/html-text"
	].mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ):not( [data-align="left"] ):not( [data-align="right"] ):not( [data-align="center"] ),
.block-editor
	.block-editor-block-list__block[
		data-type="meta-field-output/html-media"
	].mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ):not( [data-align="left"] ):not( [data-align="right"] ):not( [data-align="center"] ),
.block-editor
	.block-editor-block-list__block[
		data-type="meta-field-output/block"
	].mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ):not( [data-align="left"] ):not( [data-align="right"] ):not( [data-align="center"] ),
.editor-styles-wrapper
	.wp-block-meta-field-output-html-text.mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ),
.editor-styles-wrapper
	.wp-block-meta-field-output-html-media.mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ),
.editor-styles-wrapper
	.wp-block-meta-field-output-block.mfo-output-block:not( .alignwide ):not( .alignfull ):not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ) {
	max-width: min( 100%, var( --wp--style--global--content-size, 40rem ) ) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* Editor: full width = full, not the same as wide */
.block-editor .wp-block-meta-field-output-html-text.mfo-output-block.alignfull,
.editor-styles-wrapper .wp-block-meta-field-output-html-text.mfo-output-block.alignfull {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* Stack (vertical) Group: stretch block (avoids flex-end width + zero-height / missing Group background in editor) */
.wp-block-group.is-layout-flex.is-vertical
	> .wp-block-meta-field-output-html-text.mfo-output-block,
.block-editor
	.wp-block-group.is-layout-flex.is-vertical
	> .wp-block-meta-field-output-html-text.mfo-output-block,
.editor-styles-wrapper
	.wp-block-group.is-layout-flex.is-vertical
	> .wp-block-meta-field-output-html-text {
	align-self: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
}

/* Column block text alignment (Row / Columns layout) */
.wp-block-column.has-text-align-center .mfo-output-block,
.wp-block-column.has-text-align-center .mfo-output-inner {
	text-align: center;
}

.wp-block-column.has-text-align-right .mfo-output-block,
.wp-block-column.has-text-align-right .mfo-output-inner {
	text-align: right;
}

.wp-block-column.has-text-align-left .mfo-output-block,
.wp-block-column.has-text-align-left .mfo-output-inner {
	text-align: left;
}

.mfo-output-block.alignright:not( .mfo-video-block-root ) .mfo-output-inner.mfo-block-root,
.wp-block-meta-field-output-block.alignright:not( .mfo-video-block-root ) .mfo-output-inner.mfo-block-root,
.wp-block-meta-field-output-html-media.alignright:not( .mfo-video-block-root ) .mfo-output-inner.mfo-block-root {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.mfo-output-block.alignleft:not( .mfo-video-block-root ) .mfo-output-inner.mfo-block-root,
.wp-block-meta-field-output-block.alignleft:not( .mfo-video-block-root ) .mfo-output-inner.mfo-block-root,
.wp-block-meta-field-output-html-media.alignleft:not( .mfo-video-block-root ) .mfo-output-inner.mfo-block-root {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.mfo-output-block.aligncenter:not( .mfo-video-block-root ) .mfo-output-inner.mfo-block-root,
.wp-block-meta-field-output-block.aligncenter:not( .mfo-video-block-root ) .mfo-output-inner.mfo-block-root,
.wp-block-meta-field-output-html-media.aligncenter:not( .mfo-video-block-root ) .mfo-output-inner.mfo-block-root {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.mfo-output-block.alignright:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output,
.wp-block-meta-field-output-block.alignright:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output,
.wp-block-meta-field-output-html-media.alignright:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output {
	align-self: flex-end;
	max-width: 100%;
}

.mfo-output-block.alignleft:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output,
.wp-block-meta-field-output-block.alignleft:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output,
.wp-block-meta-field-output-html-media.alignleft:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output {
	align-self: flex-start;
	max-width: 100%;
}

.mfo-output-block.aligncenter:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output,
.wp-block-meta-field-output-block.aligncenter:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output,
.wp-block-meta-field-output-html-media.aligncenter:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output {
	align-self: center;
	max-width: 100%;
}

/*
 * Gallery: .mfo-output is a span; without a definite width the grid can shrink-wrap.
 * Class mfo-output--has-gallery is added in PHP (no :has() dependency).
 */
.mfo-output-inner .mfo-output.mfo-output--has-gallery {
	display: block;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* WYSIWYG and other rich HTML: block container so <p>, <img>, <figure> stack (invalid inside <span>) */
.mfo-output-inner .mfo-output.mfo-output--html {
	display: block;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/*
 * ACF/TinyMCE often stores a line of text and an <img> without <p> wrappers; both are inline in one
 * block box, so they sit on the same row. Block-level images match the editor and avoid that.
 */
.mfo-output-inner .mfo-output--html > img,
.mfo-output-inner .mfo-output--html p > img,
.mfo-output-inner .mfo-output--html .wp-block-image img,
.mfo-output-inner .mfo-output--html figure img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Do not break gallery grid cells (images already block in grid) */

.mfo-output-block.alignleft:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output.mfo-output--has-gallery,
.wp-block-meta-field-output-block.alignleft:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output.mfo-output--has-gallery,
.wp-block-meta-field-output-html-media.alignleft:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output.mfo-output--has-gallery,
.mfo-output-block.alignright:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output.mfo-output--has-gallery,
.wp-block-meta-field-output-block.alignright:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output.mfo-output--has-gallery,
.wp-block-meta-field-output-html-media.alignright:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output.mfo-output--has-gallery,
.mfo-output-block.aligncenter:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output.mfo-output--has-gallery,
.wp-block-meta-field-output-block.aligncenter:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output.mfo-output--has-gallery,
.wp-block-meta-field-output-html-media.aligncenter:not( .mfo-video-block-root ) .mfo-output-inner .mfo-output.mfo-output--has-gallery {
	align-self: stretch;
}

.mfo-block-root .mfo-output-inner,
.mfo-output-block .mfo-output-inner,
.wp-block-meta-field-output-block .mfo-output-inner {
	width: 100%;
	max-width: var(--mfo-max-width, none);
	box-sizing: border-box;
}

.mfo-block-root .mfo-output-inner .mfo-output-img,
.mfo-block-root .mfo-output-inner img,
.mfo-output-block .mfo-output-inner .mfo-output-img,
.mfo-output-block .mfo-output-inner img,
.wp-block-meta-field-output-block .mfo-output-inner .mfo-output-img,
.wp-block-meta-field-output-block .mfo-output-inner img {
	height: auto;
}

/*
 * Gallery: full width in container when not explicitly aligned (toolbar left/center/right uses width:auto on the block wrapper).
 */
.mfo-output-block.mfo-output-block--has-gallery:not( .alignleft ):not( .alignright ):not( .aligncenter ):not( .has-text-align-left ):not( .has-text-align-center ):not( .has-text-align-right ) {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Third-party / nested columns: grid must span the column content box */
.wp-block-column .mfo-output-block.mfo-output-block--has-gallery,
[class*="wp-block-kadence"] .mfo-output-block.mfo-output-block--has-gallery,
[class*="greenshift"] .mfo-output-block.mfo-output-block--has-gallery,
[class*="Greenshift"] .mfo-output-block.mfo-output-block--has-gallery,
.kadence-column .mfo-output-block.mfo-output-block--has-gallery,
[class*="gspb"] .mfo-output-block.mfo-output-block--has-gallery {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.wp-block-column .mfo-output-inner .mfo-output-gallery,
.kadence-column .mfo-output-gallery,
[class*="wp-block-kadence"] .mfo-output-gallery,
[class*="greenshift"] .mfo-output-gallery,
[class*="Greenshift"] .mfo-output-gallery,
[class*="gspb"] .mfo-output-gallery {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Gallery */
.mfo-block-root .mfo-output-gallery,
.mfo-output-block .mfo-output-gallery,
.wp-block-meta-field-output-block .mfo-output-gallery,
.wp-block-meta-field-output-html-media .mfo-output-gallery {
	/* !important: Kadence/Greenshift columns often set flex on inner wrappers and override grid */
	display: grid !important;
	width: 100%;
	min-width: 0;
	column-gap: var( --mfo-gallery-gap, 15px );
	row-gap: var( --mfo-gallery-gap, 15px );
	align-items: start;
	justify-content: start;
}

.mfo-block-root .mfo-output-gallery--cols-2,
.mfo-output-block .mfo-output-gallery--cols-2,
.wp-block-meta-field-output-block .mfo-output-gallery--cols-2,
.wp-block-meta-field-output-html-media .mfo-output-gallery--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.mfo-block-root .mfo-output-gallery--cols-3,
.mfo-output-block .mfo-output-gallery--cols-3,
.wp-block-meta-field-output-block .mfo-output-gallery--cols-3,
.wp-block-meta-field-output-html-media .mfo-output-gallery--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.mfo-block-root .mfo-output-gallery--cols-4,
.mfo-output-block .mfo-output-gallery--cols-4,
.wp-block-meta-field-output-block .mfo-output-gallery--cols-4,
.wp-block-meta-field-output-html-media .mfo-output-gallery--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.mfo-block-root .mfo-output-gallery--cols-5,
.mfo-output-block .mfo-output-gallery--cols-5,
.wp-block-meta-field-output-block .mfo-output-gallery--cols-5,
.wp-block-meta-field-output-html-media .mfo-output-gallery--cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Block flow per cell — avoids flex “centering” gaps when the grid track is wider than content */
.mfo-block-root .mfo-output-gallery .mfo-gallery-item,
.mfo-output-block .mfo-output-gallery .mfo-gallery-item,
.wp-block-meta-field-output-block .mfo-output-gallery .mfo-gallery-item,
.wp-block-meta-field-output-html-media .mfo-output-gallery .mfo-gallery-item {
	min-width: 0;
	display: block;
}

/* Optional aspect wrappers inside gallery (legacy / fluid) — fill the track */
.mfo-block-root .mfo-output-gallery .mfo-gallery-item-aspect,
.mfo-output-block .mfo-output-gallery .mfo-gallery-item-aspect,
.wp-block-meta-field-output-block .mfo-output-gallery .mfo-gallery-item-aspect,
.wp-block-meta-field-output-html-media .mfo-output-gallery .mfo-gallery-item-aspect {
	width: 100%;
	min-width: 0;
	display: block;
	box-sizing: border-box;
}

.mfo-gallery-item-aspect,
.mfo-single-image-aspect {
	max-width: 100%;
}

.mfo-block-root .mfo-output-gallery .mfo-gallery-item img,
.mfo-block-root .mfo-output-gallery img.mfo-output-img,
.mfo-output-block .mfo-output-gallery .mfo-gallery-item img,
.mfo-output-block .mfo-output-gallery img.mfo-output-img,
.wp-block-meta-field-output-block .mfo-output-gallery .mfo-gallery-item img,
.wp-block-meta-field-output-block .mfo-output-gallery img.mfo-output-img,
.wp-block-meta-field-output-html-media .mfo-output-gallery .mfo-gallery-item img,
.wp-block-meta-field-output-html-media .mfo-output-gallery img.mfo-output-img {
	width: 100%;
	height: auto;
	display: block;
}

/*
 * Gallery row height (px): --mfo-gallery-h is a maximum, not a forced track height. Fixed height + object-fit
 * in a wide cell left empty bands when the grid became narrower; auto cell height + max-height on images fixes that.
 * PHP sets --mfo-gallery-h-d/t/m on the block wrapper; --mfo-gallery-h follows viewport.
 */
.mfo-output-block.mfo-output-block--gallery-row-h,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h,
.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h {
	--mfo-gallery-h: var( --mfo-gallery-h-m );
}

@media ( min-width: 601px ) {
	.mfo-output-block.mfo-output-block--gallery-row-h,
	.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h,
	.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h {
		--mfo-gallery-h: var( --mfo-gallery-h-t );
	}
}

@media ( min-width: 1025px ) {
	.mfo-output-block.mfo-output-block--gallery-row-h,
	.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h,
	.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h {
		--mfo-gallery-h: var( --mfo-gallery-h-d );
	}
}

.mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item,
.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item {
	display: block;
	/* not width:100% — with max-content tracks that fights column sizing and keeps “space-between” gaps */
	width: auto;
	max-width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	max-height: var( --mfo-gallery-h, 200px );
	box-sizing: border-box;
	overflow: visible;
}

/* Per-cell aspect frame: cap height like direct images so narrow columns don’t keep a tall empty band */
.mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item-aspect,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item-aspect,
.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item-aspect {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	max-height: var( --mfo-gallery-h, 200px );
	min-height: 0;
	box-sizing: border-box;
}

/* Direct images only: items with .mfo-gallery-item-aspect keep 1656+ (fill the aspect box, cap that box with max-height on the item) */
.mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item > img,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item > img,
.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item > img,
.mfo-block-root .mfo-output-block--gallery-row-h .mfo-output-gallery .mfo-gallery-item > img {
	/* width:auto: column max-content = bitmap width (no 1fr “pillars”). height follows image, capped by --mfo-gallery-h. */
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: var( --mfo-gallery-h, 200px ) !important;
	display: block;
	object-fit: contain;
	object-position: left center;
}

/*
 * 1fr columns with max row height + object-fit:contain make each track equally wide, so the bitmap
 * sits in the middle with empty “pillars” beside it (Space-between / huge gaps). Tight: column = image width.
 */
.mfo-output-block--gallery-row-h .mfo-output-gallery,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery,
.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery {
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	justify-content: start;
	justify-items: start;
}

/*
 * Editor: height-mode uses width:fit-content so tracks follow bitmap width; the canvas is often narrower
 * than that total — the grid overflows and the first column clips. Use full editor width like a fluid row.
 */
.block-editor .mfo-output-block--gallery-row-h .mfo-output-gallery,
.editor-styles-wrapper .mfo-output-block--gallery-row-h .mfo-output-gallery,
.block-editor .wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery,
.editor-styles-wrapper .wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery,
.block-editor .wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery,
.editor-styles-wrapper .wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-2,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-2,
.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-2 {
	grid-template-columns: repeat( 2, minmax( 0, max-content ) ) !important;
}

.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-3,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-3,
.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-3 {
	grid-template-columns: repeat( 3, minmax( 0, max-content ) ) !important;
}

.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-4,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-4,
.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-4 {
	grid-template-columns: repeat( 4, minmax( 0, max-content ) ) !important;
}

.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-5,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-5,
.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery--cols-5 {
	grid-template-columns: repeat( 5, minmax( 0, max-content ) ) !important;
}

/* Gallery column width mode (--mfo-gallery-col-w from PHP): fixed track per column; row height follows images */
.mfo-output-block--gallery-col-w .mfo-output-gallery,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-col-w .mfo-output-gallery,
.wp-block-meta-field-output-block.mfo-output-block--gallery-col-w .mfo-output-gallery {
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	justify-content: start;
	justify-items: start;
}

.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-2,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-2,
.wp-block-meta-field-output-block.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-2 {
	grid-template-columns: repeat( 2, minmax( 0, var( --mfo-gallery-col-w, 1fr ) ) ) !important;
}

.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-3,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-3,
.wp-block-meta-field-output-block.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-3 {
	grid-template-columns: repeat( 3, minmax( 0, var( --mfo-gallery-col-w, 1fr ) ) ) !important;
}

.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-4,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-4,
.wp-block-meta-field-output-block.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-4 {
	grid-template-columns: repeat( 4, minmax( 0, var( --mfo-gallery-col-w, 1fr ) ) ) !important;
}

.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-5,
.wp-block-meta-field-output-html-media.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-5,
.wp-block-meta-field-output-block.mfo-output-block--gallery-col-w .mfo-output-gallery--cols-5 {
	grid-template-columns: repeat( 5, minmax( 0, var( --mfo-gallery-col-w, 1fr ) ) ) !important;
}

/* When inside aspect frame, height comes from the box; object-fit handles image */
.mfo-output-inner .mfo-output-gallery .mfo-gallery-item-aspect img,
.mfo-output-inner .mfo-single-image-aspect img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ---------- Embeds: backgrounds (no dark bars from our UI) ---------- */
.mfo-output-embed {
	width: 100%;
	max-width: var(--mfo-max-width, none);
	box-sizing: border-box;
}

.mfo-output-embed figure.wp-block-embed,
.mfo-output-embed .wp-block-embed__wrapper {
	background-color: transparent !important;
	background: transparent !important;
	color-scheme: light;
}

/* Some themes paint video embed wrappers black */
.mfo-output-embed.is-type-video .wp-block-embed__wrapper,
.mfo-output-embed .wp-block-embed.is-type-video .wp-block-embed__wrapper {
	background-color: transparent !important;
}

/* oEmbed (Vimeo, YouTube, …): do NOT set height:auto on iframe — that collapses to ~150px */
.mfo-output-embed figure.wp-block-embed {
	margin: 0;
	max-width: 100%;
}

.mfo-output-embed .wp-block-embed__wrapper iframe {
	max-width: 100%;
	border: 0;
	background-color: transparent !important;
	vertical-align: bottom;
	display: block;
	/* height comes from WP responsive embed (padding-box) or inline — do not override with auto */
}

/* Bunny / Mediadelivery: responsive frame + fill iframe */
.mfo-embed-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	background: transparent !important;
}

.mfo-embed-ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.mfo-embed-ratio-4-3 {
	aspect-ratio: 4 / 3;
}

.mfo-embed-ratio-1-1 {
	aspect-ratio: 1 / 1;
}

.mfo-embed-ratio-9-16 {
	aspect-ratio: 9 / 16;
}

.mfo-embed-ratio-21-9 {
	aspect-ratio: 21 / 9;
}

.mfo-embed-ratio-fluid {
	aspect-ratio: auto;
	min-height: min(85vh, 1200px);
	height: auto;
}

.mfo-embed-frame .mfo-embed-fill-iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	background: transparent !important;
}

/* Fluid: iframe fills the tall box */
.mfo-embed-ratio-fluid .mfo-embed-fill-iframe {
	min-height: 100%;
}

/* oEmbed fluid: override WP padding trick when using fluid preset */
.mfo-output-embed.mfo-embed-aspect--fluid .wp-block-embed__wrapper {
	padding-bottom: 0 !important;
	height: auto !important;
	min-height: min(85vh, 1200px);
	position: relative;
}

.mfo-output-embed.mfo-embed-aspect--fluid .wp-block-embed__wrapper iframe {
	position: relative !important;
	width: 100% !important;
	height: min(85vh, 1200px) !important;
	min-height: 280px;
	max-height: 95vh;
}

/* Editor: video block SSR placeholder (no iframe load) */
.mfo-video-preview-placeholder {
	display: block;
	padding: 0.75em 1em;
	border: 1px dashed var(--wp-admin-border-color, #c3c4c7);
	border-radius: 2px;
	background: var(--wp-admin-color-gray-100, #f6f7f7);
	color: var(--wp-admin-color-gray-800, #2c3338);
	font-size: 12px;
	line-height: 1.5;
	max-width: 100%;
	box-sizing: border-box;
}

.mfo-video-preview-placeholder--empty {
	opacity: 0.85;
}

/* Editor: video preview (poster + caption, no iframe) */
.mfo-video-editor-preview {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: #d0d0d0;
	min-height: 12rem;
	aspect-ratio: 16 / 9;
}

/* CSS-only placeholder when no poster (avoids broken “missing image” icon) */
.mfo-video-editor-preview__fallback {
	position: absolute;
	inset: 0;
	display: block;
	background: #d0d0d0;
}

.mfo-video-editor-preview__img {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.mfo-video-editor-preview__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 6px 8px;
	font-size: 11px;
	line-height: 1.3;
	background: rgba( 0, 0, 0, 0.5 );
	color: #fff;
	box-sizing: border-box;
}

/* Front end: oEmbed poster overlay (click to show player; see mfo-video-facade.js) */
.mfo-video-facade {
	position: relative;
	width: 100%;
	max-width: var(--mfo-max-width, none);
	overflow: hidden;
	min-height: 0;
	box-sizing: border-box;
}

.mfo-video-facade .mfo-video-facade__embed .mfo-output-embed,
.mfo-video-facade .mfo-video-facade__embed .mfo-output-embed > * {
	width: 100%;
}

.mfo-video-facade__poster {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	cursor: pointer;
	background: transparent;
}

.mfo-video-facade__poster[ hidden ] {
	display: none !important;
}

/* Solid fill when no custom poster — no &lt;img&gt;, no broken icon */
.mfo-video-facade__poster-fallback {
	position: absolute;
	inset: 0;
	display: block;
	background: #3a3a3a;
}

.mfo-video-facade__poster-img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
}

.mfo-video-facade__play {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: #111;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.35 );
}

.mfo-video-facade__play-icon {
	font-size: 1rem;
	line-height: 1;
	margin-left: 2px;
}

.mfo-video-facade.is-playing .mfo-video-facade__poster {
	display: none !important;
}

.mfo-video-facade__embed {
	position: relative;
	z-index: 1;
	width: 100%;
}

@media (max-width: 600px) {
	.mfo-block-root .mfo-output-gallery--cols-2,
	.mfo-block-root .mfo-output-gallery--cols-3,
	.mfo-block-root .mfo-output-gallery--cols-4,
	.mfo-block-root .mfo-output-gallery--cols-5,
	.mfo-output-block .mfo-output-gallery--cols-2,
	.mfo-output-block .mfo-output-gallery--cols-3,
	.mfo-output-block .mfo-output-gallery--cols-4,
	.mfo-output-block .mfo-output-gallery--cols-5,
	.wp-block-meta-field-output-block .mfo-output-gallery--cols-2,
	.wp-block-meta-field-output-block .mfo-output-gallery--cols-3,
	.wp-block-meta-field-output-block .mfo-output-gallery--cols-4,
	.wp-block-meta-field-output-block .mfo-output-gallery--cols-5,
	.wp-block-meta-field-output-html-media .mfo-output-gallery--cols-2,
	.wp-block-meta-field-output-html-media .mfo-output-gallery--cols-3,
	.wp-block-meta-field-output-html-media .mfo-output-gallery--cols-4,
	.wp-block-meta-field-output-html-media .mfo-output-gallery--cols-5 {
		grid-template-columns: 1fr !important;
	}
	.mfo-output-block--gallery-row-h .mfo-output-gallery,
	.wp-block-meta-field-output-html-media.mfo-output-block--gallery-row-h .mfo-output-gallery,
	.wp-block-meta-field-output-block.mfo-output-block--gallery-row-h .mfo-output-gallery,
	.mfo-output-block--gallery-col-w .mfo-output-gallery,
	.wp-block-meta-field-output-html-media.mfo-output-block--gallery-col-w .mfo-output-gallery,
	.wp-block-meta-field-output-block.mfo-output-block--gallery-col-w .mfo-output-gallery {
		width: 100% !important;
	}
}