/*
 * ILM Components -- Gallery.
 *
 * A grid built from the same `--ilm-c-cols` and `--ilm-c-gap` tokens Grid and
 * Row use, so the column and spacing settings behave identically across the
 * library and the breakpoint classes in base.css already cover them.
 *
 * `minmax(0, 1fr)` rather than `1fr`: a grid track's default minimum is
 * `auto`, which is the content's intrinsic size, so a wide image refuses to
 * shrink below its natural width and pushes the whole row sideways.
 *
 * The list markers are removed here and not by the theme. A `<ul>` is the
 * right element for a collection and its bullets are not wanted; ILM Theme
 * stops its own list styling at `.ilm-root`, so under any other theme this
 * rule is what keeps the bullets away.
 */

.ilm-component--media-gallery {
	display: grid;
	grid-template-columns: repeat(var(--ilm-c-cols, 3), minmax(0, 1fr));
	row-gap: var(--ilm-c-gap, var(--ilm-c-space-md, 1rem));

	/* At most one column's share (1.23.0): the gaps can never outgrow the grid. See layout-row.css. */
	column-gap: min(var(--ilm-c-gap, var(--ilm-c-space-md, 1rem)), 100% / var(--ilm-c-cols, 3));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilm-component--media-gallery .ilm-gallery__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilm-component--media-gallery .ilm-gallery__figure {
	margin: 0;
}

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

.ilm-component--media-gallery:not(.ilm-ratio-auto) .ilm-gallery__img {
	aspect-ratio: var(--ilm-c-ratio, 1 / 1);
	block-size: 100%;
	object-fit: var(--ilm-c-fit, cover);
}

.ilm-component--media-gallery .ilm-gallery__caption {
	margin-block-start: var(--ilm-c-space-xs, 0.25rem);
	color: var(--ilm-color-fg-muted, #5c6670);
	font-size: var(--ilm-font-size-sm, 0.875rem);
	line-height: 1.4;
}

/*
 * A picture that opens larger (1.38.0): the trigger is the picture, so it
 * takes the picture's corners and the focus ring follows them.
 */
.ilm-component--media-gallery .ilm-gallery__zoom {
	border-radius: var(--ilm-radius-md, 0.375rem);
}

/*
 * Each picture's own text, under the pictures (1.51.0): one native
 * disclosure, outside the grid (it follows the list in the gallery's root).
 * The marker is the browser's and the focus ring is not suppressed; the
 * text keeps a reading measure and breaks a long word rather than the page.
 */
.ilm-gallery__texts {
	margin-block-start: var(--ilm-c-space-md, 1rem);
	border: 1px solid var(--ilm-color-border, #d9dde3);
	border-radius: var(--ilm-radius-md, 0.375rem);
}

.ilm-gallery__texts-label {
	padding: var(--ilm-c-space-sm, 0.5rem) var(--ilm-c-space-md, 1rem);
	cursor: pointer;
	font-weight: var(--ilm-font-weight-medium, 500);
}

.ilm-gallery__texts-label:focus-visible {
	outline: 2px solid var(--ilm-color-primary, #1d63c8);
	outline-offset: -2px;
}

.ilm-gallery__texts-list {
	max-inline-size: 70ch;
	margin: 0;
	padding: 0 var(--ilm-c-space-md, 1rem) var(--ilm-c-space-md, 1rem);
	overflow-wrap: anywhere;
}

.ilm-gallery__text + .ilm-gallery__text {
	margin-block-start: var(--ilm-c-space-md, 1rem);
}

.ilm-gallery__text-name {
	font-weight: var(--ilm-font-weight-semibold, 600);
}

.ilm-gallery__text-body {
	margin: var(--ilm-c-space-xs, 0.25rem) 0 0;
}

.ilm-gallery__text-body > p {
	margin: 0;
}

.ilm-gallery__text-body > p + p {
	margin-block-start: var(--ilm-c-space-sm, 0.5rem);
}