/**
 * Maison Lune La carte (ml-carte): Menu "Seasonal menu".
 * Desktop: formule card (dark, radius 16, padding 32), then each course as a 616 list beside
 * a 520×390 square-cornered photo (64 apart), courses 48 apart, footnote, button.
 * Tablet: list beside a 300×240 photo (32 apart). Phone: photo under the list.
 */

.ml-carte__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* Formule déjeuner card ------------------------------------------------ */

.ml-carte__formule {
	padding: 32px;
	border-radius: var(--ml-radius-panel);
	background: var(--ml-bg);
	color: var(--ml-text);
}

.ml-carte__formule-label {
	color: var(--ml-muted);
	font-size: var(--ml-fs-label);
	line-height: var(--ml-lh-label);
	text-transform: uppercase;
}

.ml-carte__formule-title {
	margin-top: 12px;
	font-family: var(--ml-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 40px;
	line-height: 45px;
	color: var(--ml-heading);
}

.ml-carte__formule-prices {
	margin-top: 12px;
	color: var(--ml-text);
}

.ml-carte__formule-text {
	margin-top: 12px;
	color: var(--ml-muted);
}

/* Courses -------------------------------------------------------------- */

.ml-carte__course {
	display: grid;
	grid-template-columns: minmax(0, 616fr) minmax(0, 520fr);
	column-gap: 64px;
	align-items: start;
}

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

.ml-carte__title {
	font-family: var(--ml-serif);
	font-weight: 400;
	font-size: 40px;
	line-height: 44px;
	color: var(--ml-heading);
}

.ml-carte__intro {
	margin-top: 16px;
	color: var(--ml-muted);
}

.ml-carte__dishes {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

.ml-carte__title + .ml-carte__dishes {
	margin-top: 24px;
}

.ml-carte__dish {
	padding-top: 12px;
	border-top: 1px solid var(--ml-line);
}

.ml-carte__line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
}

.ml-carte__name {
	font-family: var(--ml-serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 31px;
	color: var(--ml-heading);
}

.ml-carte__price {
	font-size: 18px;
	line-height: 27px;
	color: var(--ml-text);
	white-space: nowrap;
}

.ml-carte__marks {
	font-size: 12px;
	line-height: 18px;
	color: var(--ml-muted);
	white-space: nowrap;
}

.ml-carte__marks abbr {
	text-decoration: none;
	cursor: help;
}

.ml-carte__desc {
	margin-top: 12px;
	color: var(--ml-muted);
}

.ml-carte .ml-carte__figure .ml-figure__media {
	aspect-ratio: 520 / 390;
	border-radius: 0;
}

.ml-carte .ml-carte__figure .ml-figure__caption {
	margin-top: 8px;
}

/* Footnote and button -------------------------------------------------- */

.ml-carte__footnote {
	color: var(--ml-muted);
	font-size: var(--ml-fs-caption);
	line-height: var(--ml-lh-caption);
}

.ml-carte__footnote + .ml-carte__action {
	margin-top: 48px;
}

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

@media (max-width: 1024px) {
	.ml-carte__course {
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
		column-gap: 32px;
	}

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

	.ml-carte .ml-carte__figure .ml-figure__media {
		aspect-ratio: 300 / 240;
	}
}

/* Phone (390): photo under the list ------------------------------------ */

@media (max-width: 767px) {
	.ml-carte {
		--ml-section-pad: 32px;
	}

	.ml-carte__formule {
		padding: 24px;
	}

	.ml-carte__formule-title {
		font-size: 32px;
		line-height: 36px;
	}

	.ml-carte__course {
		display: block;
	}

	/* Padding, not margin: Elementor zeroes figure margins inside widgets with a stronger selector. */
	.ml-carte__course .ml-carte__figure {
		padding-top: 32px;
	}

	.ml-carte__title {
		font-size: 32px;
		line-height: 35px;
	}

	.ml-carte__name {
		font-size: 23px;
		line-height: 25px;
	}

	.ml-carte .ml-carte__figure .ml-figure__media {
		aspect-ratio: 350 / 263;
	}

	.ml-carte .ml-carte__button {
		display: flex;
		width: 100%;
	}
}