/**
 * Komorebi Counter plan (Figma "V5 Signature · Counter plan": Home 18:6474 / 18:7235 /
 * 18:7945, Whole counter 18:8697 / 18:8887 / 18:9072). Sage section.
 *
 * Desktop: the title (h2) and its line (640) on the left, 80 to their right three figures
 * (150 each, 10 apart: Shippori 40/120, label 14 muted, 4 under it). 40 under them the plan
 * (760 × 380) with the link 8 under it, and 24 to its right the photo (416 × 380, caption 12
 * under it). Tablet: the figures 24 under the line, 3 columns 16 apart; the plan 32 under them
 * at full width; no photo. Phone: figures 12 apart (28, label 13); no link.
 *
 * The plan (paper, radius 16, padding 24 32 26): "KITCHEN SIDE" (12, muted); 14 under it two
 * stations (72 high, 24 apart, ink 40% rule, radius 8, Shippori 20/115, padding 12 16); 24
 * under them the counter bar (48 high, sage, ink 60% rule, radius 8, label 12 at 16); 24 under
 * it the seats, spread evenly (44 circles, paper, ink 50% rule, number 14); 22 under them the
 * two seat groups (13) under the stations; 26 under them "GUEST SIDE". Phone (padding 24 18):
 * stations 100 high, 10 apart, names centred; bar 45; seats 2 rows of 5, 18 × 12 apart; the
 * groups stacked; 12 between the parts.
 */

.km-counter-plan {
	--km-plan-bg: var(--km-c-paper);
	--km-plan-counter: var(--km-c-sage);
	--km-plan-ink: var(--km-c-ink);
	--km-plan-seat: var(--km-c-paper);
	--km-plan-space: 24px;
}

/* Heading and figures */

.km-counter-plan__top {
	display: grid;
	grid-template-columns: minmax(0, 640px) auto;
	column-gap: 80px;
	justify-content: start;
	align-items: start;
}

.km .km-counter-plan__heading {
	margin-bottom: 0;
}

.km-counter-plan__stats {
	display: grid;
	grid-template-columns: repeat(3, 150px);
	gap: 10px;
	margin: 0;
}

.km-counter-plan__stat {
	min-width: 0;
}

.km .km-counter-plan__value {
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: var(--km-fs-figure);
	line-height: var(--km-lh-figure);
}

.km .km-counter-plan__label {
	margin: 4px 0 0;
	color: var(--km-muted);
	font-size: 14px;
	line-height: var(--km-lh-text);
}

/* Plan, link and photo */

.km-counter-plan__row {
	margin-top: 40px;
}

.km-counter-plan__row--photo {
	display: grid;
	grid-template-columns: minmax(0, 760fr) minmax(0, 416fr);
	gap: 24px;
	align-items: start;
}

.km-counter-plan__main {
	min-width: 0;
}

.km-counter-plan__action {
	margin-top: 8px;
}

.km-counter-plan__photo .km-figure__media {
	aspect-ratio: 416 / 380;
}

.km-counter-plan__photo .km-figure__caption {
	margin-top: 12px;
}

.km-counter-plan__plan {
	padding: 24px 32px 26px;
	border-radius: var(--km-radius);
	background: var(--km-plan-bg);
	color: var(--km-plan-ink);
}

.km-counter-plan__side {
	color: var(--km-muted);
}

.km-counter-plan__plan > * + * {
	margin-top: var(--km-plan-space);
}

.km-counter-plan__plan > .km-counter-plan__stations {
	margin-top: 14px;
}

.km-counter-plan__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.km-counter-plan__station {
	min-height: 72px;
	padding: 12px 16px;
	border: 1px solid color-mix(in srgb, var(--km-plan-ink) 40%, transparent);
	border-radius: var(--km-radius-control);
	color: var(--km-plan-ink);
	font-family: var(--km-serif);
	font-size: 20px;
	line-height: 1.15;
}

.km-counter-plan__counter {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid color-mix(in srgb, var(--km-plan-ink) 60%, transparent);
	border-radius: var(--km-radius-control);
	background: var(--km-plan-counter);
	color: var(--km-plan-ink);
}

/* Each seat centred in an equal share of the bar (Figma: 69.6 a seat on a 696 bar). */
.km-counter-plan__seats {
	display: flex;
	justify-content: space-around;
}

.km-counter-plan__seat {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid color-mix(in srgb, var(--km-plan-ink) 50%, transparent);
	border-radius: 50%;
	background: var(--km-plan-seat);
	color: var(--km-plan-ink);
	font-size: 14px;
	line-height: var(--km-lh-text);
}

.km-counter-plan__plan > .km-counter-plan__groups {
	margin-top: 22px;
}

.km-counter-plan__group {
	color: var(--km-plan-ink);
}

.km-counter-plan__plan > .km-counter-plan__groups + .km-counter-plan__side {
	margin-top: 26px;
}

/* Tablet (834): one column, no photo (Figma); the photo control can show it again. */
@media (max-width: 1024px) {
	.km-counter-plan__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.km-counter-plan__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		margin-top: 24px;
	}

	.km-counter-plan__row {
		margin-top: 32px;
	}

	.km-counter-plan__row--photo {
		grid-template-columns: minmax(0, 1fr);
	}

	.km-counter-plan__photo {
		display: none;
	}
}

/* Phone (390): no link (Figma); a compact plan. */
@media (max-width: 767px) {
	.km-counter-plan {
		--km-plan-space: 12px;
	}

	.km-counter-plan__heading .km-heading__text {
		margin-top: 12px;
	}

	.km-counter-plan__stats {
		gap: 12px;
	}

	.km .km-counter-plan__label {
		font-size: var(--km-fs-small);
	}

	.km-counter-plan__action {
		display: none;
	}

	.km-counter-plan__plan {
		padding: 24px 18px;
	}

	.km-counter-plan__plan > .km-counter-plan__stations,
	.km-counter-plan__plan > .km-counter-plan__groups,
	.km-counter-plan__plan > .km-counter-plan__groups + .km-counter-plan__side {
		margin-top: 12px;
	}

	.km-counter-plan__stations {
		gap: 10px;
	}

	.km-counter-plan__station {
		min-height: 100px;
		padding: 13px 8px;
		text-align: center;
	}

	.km-counter-plan__counter {
		min-height: 45px;
		padding: 0 13px;
	}

	/* Two rows: half the seats a row. */
	.km-counter-plan__seats {
		display: grid;
		grid-template-columns: repeat(var(--km-plan-half, 5), 44px);
		gap: 12px 18px;
		justify-content: start;
	}

	.km-counter-plan__groups {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}