/**
 * Maison Lune Photos (ml-photos): captioned photo rows and grids.
 *
 * Desktop: each row is a 12-column grid and a photo spans --ml-span columns.
 * - row:    4:5 photos, radius 12, 13/20 captions 12px under (Menu, Story, Le Salon);
 * - pair:   square-cornered photos 380 high, one footnote 24px under (Story, sand);
 * - mosaic: square-cornered photos, rows alternately 560 and 400 high, 12/17 captions 8px
 *           under, rows 32 apart, credit line 32 under (Gallery page).
 * Tablet (834) and phone (390): the rows dissolve into one grid (row: 4 then 2 columns,
 * pair: 2 then 1, mosaic: 2 then 1 with an odd last photo across both tablet columns).
 */

/* ------------------------------------------------------------------ */
/* Section                                                            */
/* ------------------------------------------------------------------ */

.ml-photos.ml-pad {
	padding-top: var(--ml-pad-t, 80px);
	padding-bottom: var(--ml-pad-b, 80px);
}

.ml-photos .ml-photos__heading {
	margin-bottom: 40px;
}

/* ------------------------------------------------------------------ */
/* Desktop grid                                                       */
/* ------------------------------------------------------------------ */

.ml-photos__rows {
	display: grid;
	gap: 24px;
}

.ml-photos__row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

.ml-photos__item {
	grid-column: span var(--ml-span, 3);
}

.ml-photos .ml-photos__media {
	height: var(--ml-row-h, auto);
	border-radius: var(--ml-photos-radius, var(--ml-radius));
}

.ml-photos__caption {
	overflow-wrap: anywhere;
}

/* Row: 4:5 photos (282 x 353), unless a desktop height is set. */
.ml-photos--row .ml-photos__media {
	aspect-ratio: 282 / 353;
}

.ml-photos--row .ml-photos__row {
	--ml-row-h: var(--ml-photos-h1, auto);
}

/* Pair: two 588 x 380 photos, square corners. */
.ml-photos--pair .ml-photos__row {
	--ml-row-h: var(--ml-photos-h1, 380px);
}

.ml-photos--pair .ml-photos__media,
.ml-photos--mosaic .ml-photos__media {
	border-radius: var(--ml-photos-radius, 0);
}

/* Mosaic: rows alternately 560 and 400 high, 32 apart; 12/17 captions 8px under. */
.ml-photos--mosaic .ml-photos__rows {
	row-gap: 32px;
}

.ml-photos--mosaic .ml-photos__row:nth-child(odd) {
	--ml-row-h: var(--ml-photos-h1, 560px);
}

.ml-photos--mosaic .ml-photos__row:nth-child(even) {
	--ml-row-h: var(--ml-photos-h2, 400px);
}

.ml-photos--mosaic .ml-photos__caption {
	margin-top: 8px;
	font-size: 12px;
	line-height: 17px;
}

/* ------------------------------------------------------------------ */
/* Link and footnote                                                  */
/* ------------------------------------------------------------------ */

.ml-photos__more {
	margin-top: 40px;
}

/* Figma "Link / See the gallery": 14px text at the top of a 44px target. */
.ml .ml-photos__link {
	align-items: flex-start;
	font-size: 14px;
	line-height: 16px;
}

.ml-photos__footnote {
	margin-top: 24px;
	color: var(--ml-muted);
	font-size: 13px;
	line-height: 20px;
}

.ml-photos__more + .ml-photos__footnote {
	margin-top: 8px;
}

.ml-photos--mosaic .ml-photos__footnote {
	margin-top: 32px;
	line-height: 18px;
}

/* ------------------------------------------------------------------ */
/* Tablet (834)                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ml-photos.ml-pad {
		padding-top: var(--ml-pad-t, 56px);
		padding-bottom: var(--ml-pad-b, 56px);
	}

	.ml-photos .ml-photos__heading {
		margin-bottom: 24px;
	}

	/* One grid for all photos; the desktop rows step aside. */
	.ml-photos__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.ml-photos__row {
		display: contents;
	}

	.ml-photos__item {
		grid-column: auto;
	}

	/* Row: four 180 x 226 columns, 16 apart, 12/18 captions. */
	.ml-photos--row .ml-photos__rows {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 16px;
	}

	.ml-photos--row .ml-photos__media {
		height: auto;
	}

	.ml-photos--row .ml-photos__caption {
		font-size: 12px;
		line-height: 18px;
	}

	/* Pair: 373 x 380. */
	.ml-photos--pair .ml-photos__media {
		height: var(--ml-photos-h1, 380px);
	}

	/* Mosaic: 373 x 300 photos; an odd last photo runs across both columns (770 x 420). */
	.ml-photos--mosaic .ml-photos__rows {
		row-gap: 24px;
	}

	.ml-photos--mosaic .ml-photos__media {
		height: auto;
		aspect-ratio: 373 / 300;
	}

	.ml-photos--mosaic .ml-photos__item.is-last-odd {
		grid-column: 1 / -1;
	}

	.ml-photos--mosaic .ml-photos__item.is-last-odd .ml-photos__media {
		aspect-ratio: 770 / 420;
	}

	.ml-photos__more {
		margin-top: 24px;
	}

	.ml-photos--mosaic .ml-photos__footnote {
		margin-top: 24px;
	}
}

/* ------------------------------------------------------------------ */
/* Phone (390)                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.ml-photos.ml-pad {
		padding-top: var(--ml-pad-t, 32px);
		padding-bottom: var(--ml-pad-b, 32px);
	}

	/* Figma 390: the section titles are 32/36. */
	.ml-photos .ml-section-title {
		font-size: var(--ml-fs-h2);
		line-height: var(--ml-lh-h2);
	}

	.ml-photos__rows {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Row: two 169 x 211 columns, 12 apart, rows 24 apart. */
	.ml-photos--row .ml-photos__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 12px;
	}

	/* Pair: stacked, 280 high. */
	.ml-photos--pair .ml-photos__media {
		height: 280px;
	}

	/* Mosaic: one 350 x 263 photo per row. */
	.ml-photos--mosaic .ml-photos__media,
	.ml-photos--mosaic .ml-photos__item.is-last-odd .ml-photos__media {
		aspect-ratio: 350 / 263;
	}
}