/**
 * core/media-text — "Screen running past the edge" (`is-style-screen`).
 *
 * The design's device, still. `kg-product/sticky-list` draws the same 1108 × 600
 * black-bezelled screen running off the *right*-hand window edge while a
 * numbered index sticks beside it; this is one of those panels on its own —
 * mirrored, static, and built out of a core block instead of a custom one,
 * because with nothing to pin and nothing to track there is no JavaScript left
 * to write.
 *
 * Registered by `includes/styles/blocks/core-media-text-screen.php` and used by
 * `patterns/sector-copy-screen.php`.
 *
 * ## What it owns, and why none of it is an attribute
 *
 * - **The bezel, the radius and the device shadow.** The Border and Shadow
 *   panels write onto the block *wrapper*, which on `core/media-text` is a bare
 *   grid with nothing to paint — the default sheet already has to hand the
 *   radius down to the image by `inherit` for exactly that reason. A border
 *   would land around the whole two-column block, not around the screen.
 * - **The overhang.** No control expresses "wider than the column it sits in".
 * - **The screen's proportion.** The theme's own Media aspect ratio control
 *   (`src/editor/filters/media-text-aspect-ratio.js`) offers the nine ratios in
 *   `theme.json`, and 1108 / 600 is not one of them — nor should it be, being
 *   one device's shape rather than a ratio anyone would pick for a photograph.
 *   An editor who does set that control still wins: its rule in
 *   `media-text.css` is 0-4-1 against the 0-3-1 below.
 * - **The stacked layout**, which is `kg-product/sticky-list`'s static panel
 *   restated on a core block — see the media query at the bottom.
 *
 * Everything else is left to the block: the 50/50 split is `mediaWidth`, the
 * vertical centring is core's own default (`align-self: center` on both
 * children), the side is `mediaPosition`, and the copy's measure is a
 * `constrained` group an editor can see and drag.
 */

.wp-block-media-text.is-style-screen {
	/*
	 * The design's screen, straight out of Figma: 1108 × 600, bezel included.
	 *
	 * Left as the two numbers rather than collapsed to 1.84667 so the frame is
	 * checkable against the file without doing arithmetic first, which is the
	 * same call `src/blocks/sticky-list/style.scss` makes about the same device.
	 * `aspect-ratio` takes a ratio literal directly.
	 */
	--kg-media-text-screen-ratio: 1108 / 600;

	/*
	 * How far past its column the screen runs: the design's 1108px against the
	 * 670px media track it hangs off at 1440 — half of the 1340px wide rail.
	 *
	 * A ratio and not a width, so the overhang narrows with the rail instead of
	 * eating a fixed 438px out of every smaller window; the same decision
	 * `--kg-sticky-list-media-scale` makes, and it lands on the design exactly at
	 * the width the frame is drawn at.
	 */
	--kg-media-text-screen-scale: 1108 / 670;

	/*
	 * The design's own 1108px, as the ceiling. Inert at the widths the rail is
	 * drawn for — `wideSize` stops growing at 1440, so the scale above already
	 * holds the screen at 1108 above it — and there so that a `wideSize` raised
	 * later cannot inflate the device past the size it was drawn at.
	 *
	 * Its visible consequence is the far end of the ramp: past about 2216px the
	 * screen no longer reaches the window edge and sits inside it with room to
	 * spare, which is `sticky-list`'s behaviour too and is meant — a wide monitor
	 * reveals the rest of the device rather than being given a bigger one.
	 */
	--kg-media-text-screen-max: 69.25rem;

	/*
	 * The design's 8px bezel, as a property rather than as the one number the
	 * border declaration used to carry. The screen power-on overlays are inset
	 * by it — they cover the *picture*, not the device — and its inner corner
	 * radius is derived from it, so three declarations want the same 8px.
	 */
	--kg-media-text-screen-bezel: 0.5rem;

	/*
	 * The two numbers above, resolved into the screen's drawn width: the design's
	 * overhang, capped at the size the device was drawn at.
	 *
	 * A property rather than a declaration on the image because the power-on
	 * overlays need the same box, and because the stacked layout then has one
	 * value to override instead of a rule per box. The `100%` is substituted
	 * unresolved and settles against whichever element uses it — the image and
	 * the overlays both measure the figure, so they agree.
	 */
	--kg-media-text-screen-width: min(
		calc(100% * var(--kg-media-text-screen-scale)),
		var(--kg-media-text-screen-max)
	);

	/*
	 * The default sheet's bleed comes off, because this style positions the
	 * screen itself and the two would compound: that sheet pulls the *figure*
	 * out to the window edge with a negative margin, and the figure is the box
	 * the overhang below is measured from — leave it in and the screen starts
	 * half a gutter further out at every width.
	 *
	 * Setting the property rather than overriding the margin also zeroes
	 * `--kg-media-text-bleed-total`, which is what that sheet's editor rule
	 * widens the figure by. One declaration instead of three.
	 */
	--kg-media-text-bleed: 0px;
}

/*
 * The figure is a flex line with one item on it, and that is the whole
 * positioning rule: a flex item wider than its container and aligned to the end
 * overflows at the *start* edge. So the screen's inner edge stays pinned to the
 * column the copy is measured against — the block's 50/50 seam — and everything
 * it gains in width leaves by the window's left-hand side.
 *
 * The two obvious alternatives both fail. `margin-inline-start: auto` is ignored
 * the moment the item overflows its container, so the screen would range left
 * and run past the *copy* instead. `justify-content: center` spills over both
 * edges, which puts the device under the paragraph.
 *
 * Nothing clips here, on purpose. `assets/css/global/reset.css` puts
 * `overflow-x: clip` on `html` and `body`, so the overhang is cut at the window
 * and never grows a horizontal scrollbar; clipping on the figure would crop the
 * screen at the rail instead, which is the opposite of the design.
 */
.wp-block-media-text.is-style-screen > figure.wp-block-media-text__media {
	display: flex;
	justify-content: flex-end;
}

/*
 * Mirrored. Core forces `direction: ltr` on the wrapper and hardcodes which grid
 * column the media takes, so `flex-start` is the block's left edge in RTL too —
 * which is the side away from the window edge the media is now against.
 */
.wp-block-media-text.is-style-screen.has-media-on-the-right
	> figure.wp-block-media-text__media {
	justify-content: flex-start;
}

/*
 * The screen itself.
 *
 * A descendant selector and not a child one: on the front end the media is the
 * figure's own `<img>`, but in the editor `MediaContainer` wraps it in a
 * `ResizableBox`, and a `>` here would leave the canvas without a device frame
 * at all. The default sheet hands the border radius down the same way.
 *
 * Sized by width, with the height following from the ratio — the way round that
 * keeps the section predictable, since the width is what the overhang is a
 * statement about.
 */
.wp-block-media-text.is-style-screen
	> figure.wp-block-media-text__media
	:is(img, video) {
	/*
	 * `aspect-ratio` measures whichever box `box-sizing` names, and the Figma
	 * pair is the *outer* one — so this has to be `border-box`, or the 8px bezel
	 * makes the frame 16px taller than its own proportion the moment it is on.
	 */
	box-sizing: border-box;
	/* Never shrink to fit: overflowing the figure is the point. */
	flex: none;
	inline-size: var(--kg-media-text-screen-width);
	/* Core's `width: 100%` and the theme's image cap both have to go. */
	max-inline-size: none;
	aspect-ratio: var(--kg-media-text-screen-ratio);
	block-size: auto;
	object-fit: cover;
	/*
	 * The bezel, the one radius this otherwise square-cornered design allows
	 * itself, and the heavy device shadow — theme presets rather than numbers
	 * repeated here, and the same three `sticky-list` puts on its screens.
	 */
	background-color: var(--wp--preset--color--neutral-100);
	border: var(--kg-media-text-screen-bezel) solid
		var(--wp--preset--color--black);
	border-radius: var(--wp--preset--border-radius--screen);
	box-shadow: var(--wp--preset--shadow--device);
}

/**
 * Stacked.
 *
 * One panel of `kg-product/sticky-list`'s static layout and nothing else — the
 * section this is the still sibling of, as that block draws it on a phone. So
 * the screen sits on the rail at its full width with no overhang, the step under
 * it is that block's `xxl`, and the copy takes that block's own 335px measure.
 *
 * **The threshold is `72rem`, not `sticky-list`'s `48rem`.** It is core's grid
 * that collapses here and `media-text.css` is what moved it; a third threshold
 * in between would only buy a band in which the two halves of one block disagree
 * about which layout they are in. Below 48rem — the width the phone frame is
 * drawn at, and where the rail is already narrower than every measure below —
 * the two sections render identically.
 */
@media (width <= 72rem) {
	/*
	 * The gap between the screen and the copy under it. Core's grid has no row
	 * gap and `core/media-text` exposes no Block spacing control, so there is
	 * nothing to set from the editor.
	 */
	.wp-block-media-text.is-stacked-on-mobile.is-style-screen {
		row-gap: var(--wp--preset--spacing--xxl);

		/*
		 * No overhang: the screen sits on the rail at its full width. One
		 * property, so the image and the power-on overlays restack together.
		 */
		--kg-media-text-screen-width: 100%;
	}

	/*
	 * The copy column's own measure goes with the split, and so does its
	 * centring: stacked, the heading runs the width of the rail and everything
	 * under it is ranged left, which is how `sticky-list` draws the same panel.
	 *
	 * `> * > *` releases whatever `constrained` container the pattern put in the
	 * column without naming it — core writes that cap as
	 * `.wp-container-… > :where(…)`, which is 0-1-0, so the four classes here
	 * outrank it outright. With no container in the column the selector matches
	 * whatever is nested one deeper and has nothing to undo.
	 *
	 * **The `!important` is not optional and the `max-inline-size` does not need
	 * one.** Core writes that layout rule as `max-width: 27.125rem;
	 * margin-left: auto !important; margin-right: auto !important` — the cap
	 * plain, the centring forced — so specificity settles the first and nothing
	 * short of `!important` settles the second. Check the emitted CSS
	 * (`wp_style_engine_get_stylesheet_from_context('block-supports')`) before
	 * assuming a layout declaration can be outranked; half of this one can.
	 */
	.wp-block-media-text.is-stacked-on-mobile.is-style-screen
		> .wp-block-media-text__content
		> *
		> * {
		max-inline-size: none;
		margin-inline: 0 !important;
	}

	/*
	 * …and then the paragraph and the call to action take `sticky-list`'s own
	 * 335px. The margins are already zeroed by the rule above, which matches
	 * these two as well.
	 */
	.wp-block-media-text.is-stacked-on-mobile.is-style-screen
		.wp-block-media-text__content
		:is(p, .wp-block-buttons) {
		max-inline-size: 20.9375rem;
	}

	/* The button fills that measure, which on a phone rail is the full width. */
	.wp-block-media-text.is-stacked-on-mobile.is-style-screen
		.wp-block-media-text__content
		:is(.wp-block-button, .wp-block-button__link) {
		inline-size: 100%;
	}
}

/**
 * The screen turning on — this frame's share of it.
 *
 * `assets/css/blocks/screen-power-on.css` owns the effect and is registered as
 * this sheet's dependency, so it is already on the page and printed before this
 * file. Everything it gives the other three frames applies here too: the
 * timeline on the figure, the two overlays, the keyframes. What it cannot get
 * right is the *box*, and this is the one frame where that is not `inset: 0`.
 *
 * Two reasons, both from the style's own design. The bezel is a border on the
 * `<img>` rather than on a wrapper, so the overlays have to be inset by it or
 * the ignition line would strike across the black frame as well as the picture.
 * And the image is wider than the figure it hangs off — that is the whole point
 * of the style — so an overlay stretched to the figure would cover the copy
 * column instead of the screen.
 *
 * The figure's height *is* the image's height, which is what makes this exact
 * rather than approximate: core centres both grid children (`align-self:
 * center`), so the figure never stretches to the row, and its only content is
 * the image. Measured on the built page at 1500px wide: figure 670 × 600 at the
 * same top as an image of 1108 × 600, its inner edge on the block's seam.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/*
		 * The overlays' containing block. The figure is `position: static` by
		 * default and nothing else here needs it positioned, so this goes inside
		 * the guard with the elements that want it.
		 *
		 * An absolutely positioned pseudo-element is out of flow, so it is *not*
		 * a second flex item on the figure's line — the image keeps the whole
		 * line to itself and stays ranged against the window edge.
		 */
		.wp-block-media-text.is-style-screen
			> figure.wp-block-media-text__media {
			position: relative;
		}

		/*
		 * The picture, not the device: the image's own box less the bezel on
		 * every side. `inset-inline: auto <bezel>` puts it against the figure's
		 * inner edge, which is the edge `justify-content: flex-end` puts the
		 * image on, and the width does the rest — so the overlay overflows at
		 * the same start edge, by the same distance.
		 */
		.wp-block-media-text.is-style-screen
			> figure.wp-block-media-text__media::before,
		.wp-block-media-text.is-style-screen
			> figure.wp-block-media-text__media::after {
			inset-inline: auto var(--kg-media-text-screen-bezel);
			inline-size: calc(
				var(--kg-media-text-screen-width) - 2 *
					var(--kg-media-text-screen-bezel)
			);
		}

		/* Mirrored with the screen. Same reasoning as the figure's own rule. */
		.wp-block-media-text.is-style-screen.has-media-on-the-right
			> figure.wp-block-media-text__media::before,
		.wp-block-media-text.is-style-screen.has-media-on-the-right
			> figure.wp-block-media-text__media::after {
			inset-inline: var(--kg-media-text-screen-bezel) auto;
		}

		/*
		 * The bands, vertically. `inset-block: 0` would put black over the top
		 * and bottom bezel as well, which is invisible while the screen is off —
		 * black on black — and is a squared corner the moment the bands retract
		 * past the radius.
		 *
		 * The radius is the bezel's *inner* curve, which is what the picture
		 * behind the overlay is already cut to.
		 */
		.wp-block-media-text.is-style-screen
			> figure.wp-block-media-text__media::after {
			inset-block: var(--kg-media-text-screen-bezel);
			border-radius: calc(
				var(--wp--preset--border-radius--screen) -
					var(--kg-media-text-screen-bezel)
			);
		}
	}
}

/*
 * Editor only.
 *
 * `MediaContainer` wraps the media in a `ResizableBox` that writes
 * `width: 50%; max-width: 100%` as an *inline* style, and that box — not the
 * figure — is then what the screen's percentage width is a percentage of, so the
 * device comes out half the size it should be and ranged against the wrong edge.
 * Nothing but `!important` beats an inline style, and the class is one only the
 * editor has, so the front end never sees this rule.
 *
 * The Media width handle keeps working: it sits on the media's inner edge, and
 * dragging it re-renders the block's `grid-template-columns` on every tick, so
 * the figure — and with it the `100%` above — follows the cursor live.
 */
.block-editor-block-list__block.wp-block-media-text.is-style-screen
	> figure.wp-block-media-text__media
	.components-resizable-box__container {
	inline-size: 100% !important;
}

/*
 * …and the screen is never off in the canvas.
 *
 * Every condition the power-on guard tests is true in an editor iframe: it
 * supports scroll-driven animation and has no motion preference of its own. So
 * without this the block is edited in its *first* frame — a black rectangle
 * where the photograph should be, turning on only if the canvas happens to be
 * scrolled far enough. That reads as a broken block rather than as an animation
 * seen from the wrong end, which is the same call
 * `src/blocks/split-reveal/editor.scss` makes.
 *
 * `content: none` and not `animation: none`: with no animation the overlays hold
 * their *declared* value, and the declared value is the screen off. Suppressing
 * the boxes is the only thing that leaves the picture alone.
 *
 * The three custom blocks do this in their own `editor.scss`, which is loaded in
 * the canvas and nowhere else; this sheet is one file for both contexts, so the
 * rule is scoped by a class only the editor puts on a block.
 */
.block-editor-block-list__block.wp-block-media-text.is-style-screen
	> figure.wp-block-media-text__media::before,
.block-editor-block-list__block.wp-block-media-text.is-style-screen
	> figure.wp-block-media-text__media::after {
	content: none;
}