/*
 * ILM Components -- Featured Image.
 *
 * The same shape as media-image.css, because a site that styled one and not
 * the other would have two kinds of image. The tokens are shared; the class
 * names are not, so neither component's stylesheet can break the other.
 */

.ilm-component--wordpress-featured-image {
	display: block;
	margin: 0;
	margin-inline: auto;
	max-width: var(--ilm-c-measure, 100%);
}

.ilm-featured-image__img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ilm-featured-image__link {
	display: block;
}

.ilm-component--wordpress-featured-image.ilm-width-narrow { --ilm-c-measure: 24rem; }
.ilm-component--wordpress-featured-image.ilm-width-normal { --ilm-c-measure: 40rem; }
.ilm-component--wordpress-featured-image.ilm-width-wide { --ilm-c-measure: 64rem; }
.ilm-component--wordpress-featured-image.ilm-width-full { --ilm-c-measure: 100%; }

/*
 * A ratio makes the box the shape and the image fill it. `auto` sets no ratio
 * at all, so the image's own dimensions decide -- which is why `object-fit`
 * only matters once a ratio is chosen.
 */
.ilm-component--wordpress-featured-image.ilm-ratio-square .ilm-featured-image__img { aspect-ratio: 1 / 1; }
.ilm-component--wordpress-featured-image.ilm-ratio-standard .ilm-featured-image__img { aspect-ratio: 4 / 3; }
.ilm-component--wordpress-featured-image.ilm-ratio-wide .ilm-featured-image__img { aspect-ratio: 16 / 9; }
.ilm-component--wordpress-featured-image.ilm-ratio-cinema .ilm-featured-image__img { aspect-ratio: 21 / 9; }

.ilm-component--wordpress-featured-image.ilm-fit-cover .ilm-featured-image__img { object-fit: cover; }
.ilm-component--wordpress-featured-image.ilm-fit-contain .ilm-featured-image__img { object-fit: contain; }

/*
 * A shape fills its frame (1.27.0). With a ratio chosen, the figure takes
 * the width its preset allows (`--ilm-c-measure`) and the image fills it, so
 * a small upload is not a small square in a wide column -- as a Posts grid
 * card's image already does. With the image's own proportions ("auto") the
 * figure still takes the image's width, as before. A placeholder has no
 * width of its own and always takes its preset's.
 */
.ilm-component--wordpress-featured-image.ilm-featured-image--placeholder,
.ilm-component--wordpress-featured-image:not(.ilm-ratio-auto):has(> .ilm-featured-image__img, > .ilm-featured-image__link) {
	inline-size: 100%;
}

.ilm-component--wordpress-featured-image:not(.ilm-ratio-auto) .ilm-featured-image__img {
	inline-size: 100%;
}