/*
 * core/media-text.
 *
 * Loaded only on pages that contain a media-text block. Typography and colour
 * live in theme.json under styles.blocks.core/media-text; this file holds the
 * grid, which core cannot express.
 *
 * The rules target core's own class rather than a theme class, so a media-text
 * block added from the inserter gets the same treatment as an imported one.
 *
 * Ported from _media-with-text.scss: one column on mobile, two only from lg
 * (1024px) — core stacks at 600px and has no setting for a different
 * breakpoint. Text always comes first when stacked, matching the source's DOM
 * order.
 *
 * Core's own media-text stylesheet uses single-class selectors
 * (.wp-block-media-text, .wp-block-media-text.has-media-on-the-right), so
 * matching that specificity would leave the winner up to load order. The rules
 * below are prefixed with :root, which is how core's own Global Styles raise
 * specificity, and beat the block defaults regardless of order.
 */

:root .wp-block-media-text {
	display: grid;
	grid-template-columns: 100%;
	gap: 2rem;
}

:root .wp-block-media-text > .wp-block-media-text__content {
	grid-column: 1;
	grid-row: 1;
	padding: 0;
	text-align: left;
}

/* A square media area, as in .media-text__media--image. The aspect ratio
   belongs to the figure and the image is taken out of normal flow: otherwise
   WordPress's width and height attributes give the container the image's
   natural height and the aspect ratio has no effect. */
:root .wp-block-media-text > .wp-block-media-text__media {
	display: block;
	grid-column: 1;
	grid-row: 2;
	position: relative;
	overflow: hidden;

	/* $color-gray-100, the base showing while the image loads. Not in the
	   palette, because it is not a colour an editor picks. */
	background-color: #f3f4f6;
	aspect-ratio: 1;
	block-size: auto;
	align-self: center;
}

:root .wp-block-media-text > .wp-block-media-text__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;

	/* The focal point from the imported hotspot data, centre by default. */
	object-position: var( --vml-focal, 50% 50% );
}

@media (min-width: 768px) {

	:root .wp-block-media-text {
		gap: 3rem;
	}
}

@media (min-width: 1024px) {

	:root .wp-block-media-text {
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
	}

	/* Core's default is media on the left; the reversed order is marked with
	   has-media-on-the-right. There is no has-media-on-the-left class, so a
	   rule expecting one never matched and the image stayed on the right in
	   both variants. */
	:root .wp-block-media-text > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
	}

	:root .wp-block-media-text > .wp-block-media-text__content {
		grid-column: 2;
		grid-row: 1;
	}

	:root .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
		grid-column: 2;
	}

	:root .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
		grid-column: 1;
	}
}