/**
 * Komorebi Menu list (Figma "Seasonal menu", 18:6695 / 18:7412 / 18:8146).
 *
 * Desktop: legend, then groups 48 apart; a group is its title (Shippori 40/110), the intro
 * 20 under it (17/150, muted, 640 wide), and 20 under that the dishes (768) with the photo
 * (384 × 288, square corners) 48 to their right. A dish: a 1px rule, 12 under it the name
 * (Shippori 28/110), the price (18) and the marks (12, muted) on one line 12 apart, and 12
 * under them one line (16, muted); dishes 20 apart. The note (13) and the button follow, 48
 * apart. Tablet: photo 240 × 300, 32 from the dishes. Phone: title 32, dish 23, intro 16,
 * the photo (350 × 240) 24 under the dishes.
 */

.km-menu-list {
	--km-menu-gap: 48px;
	--km-menu-title: 40px;
	--km-menu-dish: 28px;
	--km-menu-intro: 17px;
	--km-menu-photo-w: 384px;
	--km-menu-photo-ratio: 384 / 288;
	--km-menu-photo-gap: 48px;
}

.km-menu-list__legend {
	color: var(--km-muted);
}

.km-menu-list__group,
.km-menu-list__note,
.km-menu-list__action {
	margin-top: var(--km-menu-gap);
}

.km-menu-list__group:first-child {
	margin-top: 0;
}

.km .km-menu-list__group-title {
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: var(--km-menu-title);
	font-weight: 400;
	line-height: 1.1;
}

.km-menu-list__intro {
	max-width: 640px;
	margin-top: 20px;
	color: var(--km-muted);
	font-size: var(--km-menu-intro);
	line-height: var(--km-lh-text);
}

.km-menu-list__body {
	margin-top: 20px;
}

.km-menu-list__body:first-child {
	margin-top: 0;
}

.km-menu-list__group--photo .km-menu-list__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--km-menu-photo-w);
	gap: var(--km-menu-photo-gap);
	align-items: start;
}

.km-menu-list__dishes {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.km-menu-list__dish {
	padding-top: 12px;
	border-top: 1px solid var(--km-line);
}

/* Name, price and marks on one line, on a common baseline, 12 apart (the price follows the
   name, as in Figma, not pushed to the right edge). */
.km-menu-list__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
}

.km .km-menu-list__name {
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: var(--km-menu-dish);
	font-weight: 400;
	line-height: 1.1;
}

.km-menu-list__price {
	color: var(--km-heading);
	font-size: var(--km-fs-body-lg);
	line-height: var(--km-lh-text);
}

.km-menu-list__marks {
	color: var(--km-muted);
	line-height: 1.3;
}

.km-menu-list__description {
	margin-top: 12px;
	color: var(--km-muted);
	font-size: var(--km-fs-body);
	line-height: var(--km-lh-text);
}

.km-menu-list__photo .km-figure__media {
	aspect-ratio: var(--km-menu-photo-ratio);
}

.km-menu-list__photo .km-figure__caption {
	margin-top: 10px;
}

.km-menu-list__note {
	color: var(--km-muted);
}

/* Tablet (834): the photo 240 × 300, 32 from the dishes; the intro on one line. */
@media (max-width: 1024px) {
	.km-menu-list {
		--km-menu-photo-w: 240px;
		--km-menu-photo-ratio: 240 / 300;
		--km-menu-photo-gap: 32px;
	}

	.km-menu-list__intro {
		max-width: none;
	}
}

/* Phone (390): one column, the photo 24 under the dishes. */
@media (max-width: 767px) {
	.km-menu-list {
		--km-menu-title: 32px;
		--km-menu-dish: 23px;
		--km-menu-intro: 16px;
		--km-menu-photo-ratio: 350 / 240;
	}

	.km-menu-list__group--photo .km-menu-list__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}