/*
 * ILM Components -- Image.
 *
 * The `<img>` itself is WordPress's, so this file styles the box around it and
 * leaves the image's own attributes alone.
 *
 * `max-inline-size: 100%` is set here rather than relied on. ILM Theme has a
 * global `img { max-width: 100% }` and most themes do, but "most themes" is
 * not a dependency this library is allowed to have (section 125) -- and the
 * rule is scoped to the component's own class rather than to `img`, because
 * redefining an element globally from a plugin is what section 126 refuses.
 *
 * The shape settings are two properties working together: `aspect-ratio` gives
 * the box a shape and `object-fit` decides what happens to an image that is
 * not that shape. With `ratio: auto` -- the default -- neither applies and the
 * image keeps its own proportions, which is why cropping is something an
 * author turns on rather than something they have to turn off.
 */

.ilm-component--media-image {
	display: block;
	text-align: var(--ilm-c-text, start);
}

.ilm-component--media-image.ilm-width-narrow { max-inline-size: 24rem; }
.ilm-component--media-image.ilm-width-normal { max-inline-size: 40rem; }
.ilm-component--media-image.ilm-width-wide { max-inline-size: 60rem; }
.ilm-component--media-image.ilm-width-full { max-inline-size: none; }

/* `start` and `end` are logical, so this mirrors under a right-to-left site
   with no second rule. `auto` on one side only is what pushes the block. */
.ilm-component--media-image.ilm-text-center { margin-inline: auto; }
.ilm-component--media-image.ilm-text-end { margin-inline-start: auto; }

.ilm-component--media-image .ilm-image__img {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--ilm-radius-md, 0.375rem);
}

/*
 * Only when a shape was asked for. An `aspect-ratio` of `auto` with
 * `block-size: 100%` would stretch every image to its container's height.
 */
.ilm-component--media-image:not(.ilm-ratio-auto) .ilm-image__img {
	aspect-ratio: var(--ilm-c-ratio, auto);
	block-size: 100%;
	object-fit: var(--ilm-c-fit, cover);
}

.ilm-component--media-image .ilm-image__link {
	display: block;
	text-decoration: none;
}

/*
 * A visible focus ring on the link, because the image inside it gives the
 * browser nothing to outline that a reader would notice.
 */
.ilm-component--media-image .ilm-image__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ilm-component--media-image .ilm-image__caption {
	margin-block-start: var(--ilm-c-space-sm, 0.5rem);
	color: var(--ilm-color-fg-muted, #5c6670);
	font-size: var(--ilm-font-size-sm, 0.875rem);
	line-height: 1.5;
}