/*
 * ILM Components -- editorial measure (1.36.0). See `Support\Measure`.
 *
 * Text at reading width, pictures and video wider, both centred in the
 * space the component is given. The two widths are the design system's:
 * 72ch, a `normal` Container's reading measure, and `--ilm-layout-wide`,
 * the site's wide width (with the Container's own fallback).
 *
 * Only `max-inline-size` and inline margins: what each block looks like
 * stays the block's. Logical properties throughout, so a right-to-left
 * page mirrors.
 */

/*
 * Registered lengths, so 72ch is counted once, where it is declared, and
 * inherited as that length: a heading's larger characters do not widen its
 * line. It is declared on the element that holds the content -- the
 * Container, a grid's entry -- so it is counted in the page's own text, the
 * font a `normal` Container counts its 72ch in, even when the content is
 * set a size larger: the text lines up with a reading-measure column above
 * it. Never declared, a measure is no limit at all (the initial value), so
 * nothing can collapse. A browser without `:has()` counts it in the
 * content's own font; one without `@property` counts it per element.
 */
@property --ilm-measure-text {
	syntax: "<length>";
	inherits: true;
	initial-value: 100000px;
}

@property --ilm-measure-media {
	syntax: "<length>";
	inherits: true;
	initial-value: 100000px;
}

.ilm-measure-scope,
:has(> .ilm-measure-editorial) {
	--ilm-measure-text: 72ch;
	--ilm-measure-media: var(--ilm-layout-wide, 1320px);
}

@supports not selector(:has(*)) {
	.ilm-measure-editorial {
		--ilm-measure-text: 72ch;
		--ilm-measure-media: var(--ilm-layout-wide, 1320px);
	}
}

/* The content takes the whole width it is given, whatever it holds; its blocks are measured inside it. */
.ilm-measure-editorial {
	inline-size: 100%;
}

/* Every block is text unless it is one of the kinds below. The lightbox's dialog is not content. */
.ilm-measure-editorial > :not(dialog),
.ilm-measure-scope .ilm-measure-text {
	max-inline-size: var(--ilm-measure-text);
	margin-inline: auto;
}

.ilm-measure-scope .ilm-measure-text {
	inline-size: 100%;
}

/* Pictures, video and what holds them side by side: the media measure. */
.ilm-measure-editorial > :is(
	figure,
	img,
	video,
	iframe,
	.wp-block-image,
	.wp-block-gallery,
	.wp-block-video,
	.wp-block-embed,
	.wp-block-columns,
	.wp-block-media-text,
	.wp-block-cover,
	.wp-block-table,
	.alignwide
) {
	max-inline-size: min(100%, var(--ilm-measure-media));
}

.ilm-measure-editorial > .alignfull {
	max-inline-size: none;
}

/* A nested flow passes the whole width on (a grid entry's content inside an editorial page part). */
.ilm-measure-editorial > .ilm-measure-editorial {
	max-inline-size: none;
}

/*
 * A single picture or video is never enlarged: the figure is as wide as
 * what it holds, up to the media measure, centred on the text. A caption
 * wraps to it rather than widening it.
 */
.ilm-measure-editorial > :is(.wp-block-image, .wp-block-video):not(.alignleft, .alignright, .alignwide, .alignfull) {
	inline-size: fit-content;
}

.ilm-measure-editorial > :is(.wp-block-image, .wp-block-video) > figcaption {
	contain: inline-size;
}

/*
 * A gallery of one picture is a picture WordPress stretches to the gallery's
 * width: it keeps the text's measure, so it is never enlarged either.
 */
.ilm-measure-editorial > .wp-block-gallery:has(> .wp-block-image:only-of-type) {
	max-inline-size: var(--ilm-measure-text);
}

/* A single picture taller than the window is held to it, keeping its shape. */
.ilm-measure-editorial > .wp-block-image img {
	inline-size: auto;
	max-block-size: 85svh;
	object-fit: contain;
}

/* A video plays at its own size, and one as tall as a phone's screen is held to the window's height, keeping its shape. */
.ilm-measure-editorial > .wp-block-video video {
	inline-size: auto;
	max-inline-size: 100%;
	max-block-size: 85svh;
}

/* A floated picture stays at the edge of the text, not of the page, with the text's space beside it. */
.ilm-measure-editorial > .alignleft {
	margin-inline: max(0px, (100% - var(--ilm-measure-text)) / 2) var(--ilm-c-space-md, 1.5rem);
}

.ilm-measure-editorial > .alignright {
	margin-inline: var(--ilm-c-space-md, 1.5rem) max(0px, (100% - var(--ilm-measure-text)) / 2);
}