/*
 * Image block: one picture, a swipe slider, or a 2/3/4-across gallery.
 * Loaded only on pages that use it (inc/assets.php). Mobile first.
 *
 * Variables set inline on the section by image.php:
 *   --img-cols / --img-cols-m  pictures across on desktop / phones
 *   --img-gap                  space between pictures
 *   --img-h                    desktop height (absent = natural)
 *   --img-fit / --img-focal    cover or contain, and the focal point
 */

.image { padding-block: 28px; }
.image--w-full { padding-inline: 0; }

.image__list {
	display: grid;
	grid-template-columns: repeat(var(--img-cols-m, 1), minmax(0, 1fr));
	gap: var(--img-gap, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.image__item { min-width: 0; }
.image__item figure { margin: 0; overflow: hidden; border-radius: var(--img-r, 0); }
.image--rounded { --img-r: var(--card-r); }
.image--w-full.image--single .image__item figure { border-radius: 0; }

.image__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: var(--img-fit, cover);
	object-position: var(--img-focal, center);
}

/* A fixed height: phones get about two thirds of it. */
.image--h-fixed .image__img { height: calc(var(--img-h) * 0.66); }

/* Natural height in a grid or slider: an even 4:3 box, so the rows line up. */
.image--grid.image--h-auto .image__img,
.image--slider.image--h-auto .image__img { aspect-ratio: 4 / 3; }

.image__item figcaption { padding: 8px 2px 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }

/* ---------- One picture ---------- */
.image--single .image__list { grid-template-columns: minmax(0, 1fr); }

/* ---------- Slider ---------- */
.image__slider { position: relative; }

.image--slider .image__list {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.image--slider .image__list::-webkit-scrollbar { display: none; }
.image--slider .image__list:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.image--slider .image__item {
	flex: 0 0 calc((100% - (var(--img-cols-m, 1) - 1) * var(--img-gap, 16px)) / var(--img-cols-m, 1));
	scroll-snap-align: start;
}

.image__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.4);
	color: var(--ink);
	cursor: pointer;
}
.image__nav[hidden] { display: none; }
.image__nav--prev { left: 10px; }
.image__nav--next { right: 10px; }
.image__nav--prev .ico { transform: rotate(180deg); }
.image__nav:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---------- Desktop ---------- */
@media (min-width: 700px) {
	.image--h-fixed .image__img { height: var(--img-h); }
	.image--grid .image__list { grid-template-columns: repeat(var(--img-cols, 3), minmax(0, 1fr)); }
	.image--slider .image__item { flex-basis: calc((100% - (var(--img-cols, 3) - 1) * var(--img-gap, 16px)) / var(--img-cols, 3)); }
}