/**
 * AR Media & Text Image Height
 *
 * The custom minimum height is desktop/tablet only. At WordPress's mobile
 * breakpoint (600px and below), this stylesheet does not alter the Media &
 * Text block or its media. Core WordPress/theme mobile styling therefore
 * controls the block exactly as it normally would.
 */

@media (min-width: 601px) {
	/* Front end: make the complete Media & Text block grow to the selected height. */
	.wp-block-media-text.has-ar-media-min-height {
		min-height: var(--ar-media-min-height);
	}

	.wp-block-media-text.has-ar-media-min-height > .wp-block-media-text__media {
		align-self: stretch;
		min-height: var(--ar-media-min-height);
		overflow: hidden;
	}

	.wp-block-media-text.has-ar-media-min-height > .wp-block-media-text__media img,
	.wp-block-media-text.has-ar-media-min-height > .wp-block-media-text__media video {
		display: block;
		width: 100%;
		height: 100%;
		min-height: var(--ar-media-min-height);
		object-fit: cover;
	}

	/*
	 * Block editor preview.
	 * Applying the height to the outer editor wrapper makes the selection box
	 * and following blocks move as the selected image height changes.
	 */
	.block-editor-block-list__block.has-ar-media-min-height-editor,
	.has-ar-media-min-height-editor {
		min-height: var(--ar-media-min-height);
	}

	.has-ar-media-min-height-editor > .wp-block-media-text,
	.has-ar-media-min-height-editor .wp-block-media-text {
		min-height: var(--ar-media-min-height);
	}

	.has-ar-media-min-height-editor .wp-block-media-text__media {
		align-self: stretch;
		min-height: var(--ar-media-min-height);
		overflow: hidden;
	}

	.has-ar-media-min-height-editor .wp-block-media-text__media img,
	.has-ar-media-min-height-editor .wp-block-media-text__media video {
		display: block;
		width: 100%;
		height: 100%;
		min-height: var(--ar-media-min-height);
		object-fit: cover;
	}
}