/**
 * Maison Lune Dishes (ml-dishes): Home "Plats".
 *
 * Desktop: title (44/49) and "See la carte" (Karla 16 medium, 48 target) on one line, 48px
 * above three 384 x 480 photos (radius 12), name 28/34 12px under, data line 15/23 4px under.
 * Tablet (834): 40/45 title, 32 above three 246 x 308 cards 16 apart, name 24/29, data 14/21.
 * Phone (390): 32/36 title, 32 above stacked 350 x 320 cards 32 apart, name 24/29, data 15/23.
 */

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

/* Header row */
.ml-dishes__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 48px;
}

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

.ml .ml-dishes__link {
	min-height: 48px;
	margin-left: auto;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	white-space: nowrap;
}

/* Cards */
.ml-dishes__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 24px;
}

.ml-dish {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ml-dish__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--ml-radius);
	background: var(--ml-c-sand);
}

.ml .ml-dish__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ml-dish__text {
	margin-top: 12px;
}

.ml .ml-dish__name {
	color: var(--ml-heading);
	font-family: var(--ml-serif);
	font-size: 28px;
	line-height: 34px;
	font-weight: 400;
	overflow-wrap: anywhere;
}

.ml-dish__meta {
	margin-top: 4px;
	color: var(--ml-muted);
	font-size: 15px;
	line-height: 23px;
}

/* Linked card: the name link covers the whole card. */
.ml .ml-dish__link {
	color: inherit;
	text-decoration: none;
}

.ml-dish__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ml-radius);
}

.ml .ml-dish__link:hover,
.ml .ml-dish__link:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.ml .ml-dish__link:focus-visible {
	outline: 0;
}

.ml-dish__link:focus-visible::after {
	outline: 2px solid var(--ml-c-wine);
	outline-offset: 4px;
}

.ml-dish--linked:hover .ml-dish__media img {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.ml .ml-dish__media img {
		transition: none;
	}

	.ml-dish--linked:hover .ml-dish__media img {
		transform: none;
	}
}

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

	.ml-dishes__header {
		margin-bottom: 32px;
	}

	.ml-dishes__list {
		gap: 32px 16px;
	}

	.ml .ml-dish__name {
		font-size: 24px;
		line-height: 29px;
	}

	.ml-dish__meta {
		font-size: 14px;
		line-height: 21px;
	}
}

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

	.ml-dishes__header {
		align-items: flex-end;
	}

	.ml-dishes .ml-section-title {
		font-size: var(--ml-fs-h2);
		line-height: var(--ml-lh-h2);
	}

	.ml-dishes__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ml-dish__media {
		aspect-ratio: 350 / 320;
	}

	.ml-dish__meta {
		font-size: 15px;
		line-height: 23px;
	}
}