/* Maison Lune Facts (ml-facts): Home "Glance" (ruled numbers + photos) and Le Salon "Numbers" (large). */

/* Section padding 80 / 56 / 32. */
@media (max-width: 767px) {
	.ml-facts {
		--ml-section-pad: 32px;
	}
}

/* Heading 44/49 → 40/45 → 32/36, 48 above the numbers (32 on tablet and phone). */
.ml-facts__title {
	margin-bottom: 48px;
}

/* ---------------------------------------------------------------- */
/* Numbers                                                          */
/* ---------------------------------------------------------------- */

.ml-facts__numbers {
	display: grid;
	grid-template-columns: repeat(var(--ml-facts-cols, 4), minmax(0, 1fr));
	gap: 24px;
}

.ml-facts__number {
	min-width: 0;
}

.ml-facts__value {
	font-family: var(--ml-serif);
	font-weight: 400;
	color: var(--ml-heading);
	overflow-wrap: break-word;
}

.ml-facts__label {
	color: var(--ml-muted);
	font-size: 14px;
}

/* Ruled (Home): 1px rule, 16 above a 48/54 value, 4 above a 14/21 label. */
.ml-facts--ruled .ml-facts__number {
	padding-top: 16px;
	border-top: 1px solid var(--ml-line);
}

.ml-facts--ruled .ml-facts__value {
	font-size: 48px;
	line-height: 54px;
}

.ml-facts--ruled .ml-facts__label {
	margin-top: 4px;
	line-height: 21px;
}

/* Large (Le Salon): 56/62 value, 8 above a 14/20 label. */
.ml-facts--large .ml-facts__value {
	font-size: 56px;
	line-height: 62px;
}

.ml-facts--large .ml-facts__label {
	margin-top: 8px;
	line-height: 20px;
}

.ml-facts__numbers + .ml-facts__photos {
	margin-top: 48px;
}

/* ---------------------------------------------------------------- */
/* Photos: 282 × 400 (radius 12), caption 12 under                  */
/* ---------------------------------------------------------------- */

.ml-facts__photos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.ml-facts__tile {
	min-width: 0;
}

.ml-facts__photo .ml-figure__media {
	aspect-ratio: 282 / 400;
}

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

@media (max-width: 1024px) {
	.ml-facts__title {
		margin-bottom: 32px;
	}

	.ml-facts--ruled .ml-facts__numbers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ml-facts--ruled .ml-facts__value {
		font-size: 40px;
		line-height: 45px;
	}

	/* Le Salon numbers are centred on tablet. */
	.ml-facts--large :where(.ml-facts__number) {
		text-align: center;
	}

	.ml-facts--large .ml-facts__value {
		font-size: 48px;
		line-height: 53px;
	}

	.ml-facts__numbers + .ml-facts__photos {
		margin-top: 32px;
	}

	.ml-facts__photos {
		gap: 16px;
	}

	.ml-facts__photo .ml-figure__media {
		aspect-ratio: 4 / 5;
	}

	.ml-facts__photo .ml-figure__caption {
		font-size: 12px;
		line-height: 18px;
	}
}

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

@media (max-width: 767px) {
	.ml-facts__title {
		font-size: 32px;
		line-height: 36px;
	}

	.ml-facts--ruled .ml-facts__value {
		font-size: 36px;
		line-height: 40px;
	}

	.ml-facts--large .ml-facts__numbers {
		gap: 16px;
	}

	.ml-facts--large :where(.ml-facts__number) {
		text-align: left;
	}

	.ml-facts--large .ml-facts__value {
		font-size: 40px;
		line-height: 44px;
	}

	.ml-facts--large .ml-facts__label {
		font-size: 13px;
		line-height: 18px;
	}

	.ml-facts__photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 12px;
	}
}