/**
 * core/media-text — the content-row pattern's 50/50 media-and-text row.
 *
 * Loaded by xperience_starter_enqueue_core_block_styles() in functions.php through
 * wp_enqueue_block_style( 'core/media-text', … ), the same mechanism and for the same reasons
 * as core-group.css beside it. SCOPED to `.content-row` — the className patterns/content-row.php
 * writes on the block's root — so nothing here can reach a core/media-text instance the source
 * never measured.
 *
 * WHY CSS AT ALL. The unit's rung is core-block-composition and it stays there: every one of
 * the three rules below reconciles a declaration core/media-text's OWN stylesheet
 * (wp-includes/blocks/media-text/style.css, read on this install) makes and the source does
 * not. None is expressible as a block attribute, and the source's own _content-row.scss makes
 * each of them in CSS too.
 *
 * 1. `min-height: 250px` — core, style.css:105, on `.is-image-fill-element > __media`. It is
 *    what set this row's height in the build: MEASURED before this file, the pattern's root
 *    was 1296x298 at 1440x900 and 696x298 at 768x1024, against a source root measured at
 *    1296x200 and 696x200 (unit contract `structure`, four viewports). 298 is 250 + the root's
 *    own 24+24. The source's row height is its CONTENT column's — 152 — and nothing about the
 *    image contributes to it, so the minimum is dropped rather than re-valued.
 *
 * 2. The image is absolutely positioned against the ROOT, not laid out in the grid cell. The
 *    source's image measures 648x200 at 1440x900 — the FULL root height, 24px taller at each
 *    end than the padding box the flex row sits in — because .content-row-image is
 *    position:absolute against .page-component.content-row, whose own padding is 0
 *    (_content-row.scss's first declaration for the class). Core lays the figure out as a grid
 *    cell INSIDE the root's padding box, which measured 648x152 and left a 24px band of page
 *    background above and below the plate that the source does not have. The 24px top/bottom
 *    on the block itself is the source's constant VerticalPadding and stays exactly where the
 *    unit contract's `structure` puts it; this rule is the image's own positioning, which is a
 *    thing no block attribute addresses.
 *
 * 3. Below the source's md breakpoint the image is GONE, not stacked. MobileImageRefs is not
 *    instantiated on any of the three source instances, and the source's desktop img is
 *    display:none below md — so, MEASURED on the source at 390x844, .content-row-image computes
 *    a 366x0 box and the row is text only at 366x200. Core stacks the media into its own grid
 *    row at 390x844 and rendered it 366x250, taking the built root to 366x450 against 366x200 —
 *    2.25x, the largest single difference this unit carried.
 *
 * THE BREAKPOINT IS 768px, WHICH IS THE SOURCE'S, NOT CORE'S 600. Bootstrap md is
 * `min-width: 768px` and that is where _content-row.scss switches the image between absolute
 * half and static full. Core's `is-stacked-on-mobile` rule fires at max-width 600 and is left
 * in place — it agrees with these rules everywhere it applies, and between 600 and 768 these
 * rules are what decide, which is the band the unit contract records as unmeasurable from
 * either capture. Writing the source's own breakpoint here is what makes that band right
 * rather than merely unmeasured.
 *
 * @package WordPress
 * @subpackage Xperience_Starter
 * @since Xperience Starter 1.0
 */

.wp-block-media-text.content-row > .wp-block-media-text__media {
	min-height: 0;
}

/*
 * 4. CORE PADS ITS OWN CONTENT AREA AND THE SOURCE DOES NOT — `padding: 0 8% 0 8%` on
 *    `.wp-block-media-text > .wp-block-media-text__content`, core's style.css:42-48 on this
 *    install, specificity (0,2,0). It is a percentage of the CONTENT HALF, so it scales with
 *    the viewport and the error is different at every one. MEASURED with core's rule in
 *    force, against the unit contract's own four-viewport reading of the source's
 *    `.content-row-content` box:
 *
 *      viewport   contract (source)   built, before this rule
 *      1440x900   648x152 @x=72       544x152 @x=124   (8% of 648 = 51.84 a side)
 *      1024x768   468x152 @x=44       393x152 @x=81
 *      768x1024   348x152 @x=36       292x152 @x=64
 *      390x844    366x152 @x=12       307x152 @x=41
 *
 *    The source's content column is the FULL half — _content-row.scss's own horizontal
 *    padding is the $spacer the unit contract puts on the inner core/group (16px, written
 *    there as var:preset|spacing|40), and core's 8% sits OUTSIDE that, indenting the whole
 *    column. The root's own box was already right at all four viewports, which is why this
 *    survived: the error is entirely inside the row and never moved its outline.
 *
 *    Zeroed on the horizontal axis only. Core declares no vertical padding here, so
 *    `padding: 0` would be a wider claim than the measurement supports.
 */
.wp-block-media-text.content-row > .wp-block-media-text__content {
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 768px) {

	.wp-block-media-text.content-row {
		position: relative;
	}

	/*
	 * grid-column/grid-row BACK TO auto, and it is load-bearing rather than tidy-up. Core
	 * places this figure at `grid-column: 2; grid-row: 1`, which is a DEFINITE grid position
	 * — and CSS Grid §9.1 says an absolutely-positioned child of a grid container with a
	 * definite grid position takes its GRID AREA as its containing block, not the grid
	 * container's padding box. MEASURED with core's placement left in: the figure resolved
	 * 324x0 (50% of the 648 area, and no height at all) instead of 648x200. Resetting both to
	 * auto makes the containing block the root's padding box, which is what the source's
	 * .content-row-image is positioned against.
	 *
	 * align-self: stretch IS THE SECOND HALF OF THE SAME FIX, and it is not a default. The
	 * block carries verticalAlignment: center, which core renders as `align-items: center` on
	 * the grid container — and CSS Box Alignment §5.3 says an absolutely-positioned box with
	 * BOTH block-axis offsets non-auto and an alignment other than normal/stretch is sized to
	 * its FIT-CONTENT and then aligned inside the inset rect. The img is itself absolute, so
	 * fit-content is 0: MEASURED without this line, the figure resolved 648x0 centred at
	 * y=386 inside a 200-tall root. `stretch` is what makes top/bottom size the box.
	 */
	.wp-block-media-text.content-row > .wp-block-media-text__media {
		position: absolute;
		grid-column: auto;
		grid-row: auto;
		align-self: stretch;
		top: 0;
		bottom: 0;
		width: 50%;
		height: auto;
	}

	.wp-block-media-text.content-row.has-media-on-the-right > .wp-block-media-text__media {
		right: 0;
	}

	/*
	 * THE MIRRORED VARIANT (ContentSide=right, the unit contract's `side-right`), AND THE
	 * SELECTOR CORRECTION IT FORCED. This rule read `.has-media-on-the-left` until 2026-09-10
	 * and MATCHED NOTHING: core/media-text's save() emits `has-media-on-the-right` and NOTHING
	 * AT ALL for the other side -- read on this install, in block-library.js's own
	 * `// packages/block-library/build-module/media-text/save.mjs` clsx call, whose class map
	 * has one entry for position and it is the right-hand one. Media-on-the-left is the
	 * ABSENCE of a class, not a class, so only a negation can name it.
	 *
	 * AND THE HONEST PART: CORRECTING IT CHANGED NOTHING MEASURABLE, MEASURED BOTH WAYS on the
	 * page-110 instance at 1440x900, 2026-09-10 -- dead selector and corrected selector both
	 * give the figure `position: absolute; left: 0px; right: 648px; width: 648px`, box 648x136
	 * at x=72. With both offsets auto an absolutely positioned box falls back to its STATIC
	 * position, and this figure's static position is already the left half: grid-column is
	 * reset to `auto` above, the figure is the FIRST child in the mirrored save order, so
	 * auto-placement lands it in track 1. The rule is kept because a selector that matches
	 * nothing is not coverage, and because relying on auto-placement to position an
	 * out-of-flow box is a fact about child ORDER that nothing states. It is not claimed as a
	 * fix for a visible defect; there was none to fix.
	 */
	.wp-block-media-text.content-row:not(.has-media-on-the-right) > .wp-block-media-text__media {
		left: 0;
	}
}

@media (max-width: 767.98px) {

	.wp-block-media-text.content-row {
		grid-template-columns: 100%;
	}

	.wp-block-media-text.content-row > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
		height: auto;
	}

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

	.wp-block-media-text.content-row > .wp-block-media-text__media img {
		display: none;
	}
}