/**
 * Komorebi Gallery (Figma "V7 Gallery": Home 18:6568 / 18:7324 / 18:8043; Gallery page
 * 18:9273 / 18:9364 / 18:9459).
 *
 * Each photo carries its Figma width and height per screen size (--km-w-d/t/m, --km-h-d/t/m,
 * unitless). A photo takes (w + gap) / (row width + gap) of the row, so the photos of a Figma
 * row fill the container exactly at any width: rows are 1200 / 770 / 350 wide with 24 / 16 /
 * 12 between photos (--km-gap). The photo keeps the w:h shape; the caption is 8 under it.
 *
 * - Rows (Home): title 48 / 36 / 32 above the rows; rows 16 / 16 / 12 apart; phones scroll each
 *   row sideways with the photos at their pixel size.
 * - Grid (Gallery page): one wrapping row; rows 40 / 28 / 28 apart.
 */

.km-gallery {
	--km-gallery-row: 1224; /* row width + gap, Figma px */
	--km-gallery-row-gap: 16px;
	--km-gallery-title-gap: 48px;
}

.km-gallery--grid {
	--km-gallery-row-gap: 40px;
}

.km-gallery__item {
	--km-w: var(--km-w-d, 300);
	--km-h: var(--km-h-d, 300);
	/* 0.5px less than the exact share, so rounding never pushes the last photo of a row down;
	   flex-grow takes the half pixel back. */
	flex: 1 1 calc((var(--km-w) + var(--km-gap-n, 24)) / var(--km-gallery-row) * (100% + var(--km-gap)) - var(--km-gap) - 0.5px);
	min-width: 0;
}

.km-gallery__item .km-figure__media {
	aspect-ratio: var(--km-w) / var(--km-h);
}

.km-gallery__title {
	margin-bottom: var(--km-gallery-title-gap);
}

.km-gallery__rows {
	display: flex;
	flex-direction: column;
	gap: var(--km-gallery-row-gap);
}

.km-gallery__row {
	display: flex;
	gap: var(--km-gap);
}

.km-gallery--grid .km-gallery__row {
	flex-wrap: wrap;
	row-gap: var(--km-gallery-row-gap);
}

/* Tablet (834). */
@media (max-width: 1024px) {
	.km-gallery {
		--km-gallery-row: 786;
		--km-gap-n: 16;
		--km-gallery-title-gap: 36px;
	}

	.km-gallery--grid {
		--km-gallery-row-gap: 28px;
	}

	.km-gallery__item {
		--km-w: var(--km-w-t, var(--km-w-d, 300));
		--km-h: var(--km-h-t, var(--km-h-d, 300));
	}
}

/* Phone (390). */
@media (max-width: 767px) {
	.km-gallery {
		--km-gallery-row: 362;
		--km-gap-n: 12;
		--km-gallery-row-gap: 12px;
		--km-gallery-title-gap: 32px;
	}

	.km-gallery--grid {
		--km-gallery-row-gap: 28px;
	}

	.km-gallery__item {
		--km-w: var(--km-w-m, var(--km-w-t, var(--km-w-d, 300)));
		--km-h: var(--km-h-m, var(--km-h-t, var(--km-h-d, 300)));
	}

	/* Home: each row scrolls sideways, edge to edge, photos at their Figma size. */
	.km-gallery__row--scroll {
		overflow-x: auto;
		margin-inline: calc(-1 * var(--km-gutter));
		padding-inline: var(--km-gutter);
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--km-gutter);
		scrollbar-width: none;
	}

	.km-gallery__row--scroll::-webkit-scrollbar {
		display: none;
	}

	.km-gallery__row--scroll .km-gallery__item {
		flex: none;
		width: calc(var(--km-w) * 1px);
		scroll-snap-align: start;
	}
}