/**
 * Komorebi Day timeline (Figma "M6 Day · First dough to last seating", 18:6810 / 18:7527 /
 * 18:8262). Sage section.
 *
 * Desktop: the photo (504 × 575, caption 12 under it) is the left column; 72 to its right the
 * title (h2), the line 24 under it (body-lg, muted) and 24 under that the steps. A step: a 1px
 * rule (#637368) on top, padding 16 0, the time (Shippori 28) in a 96 column, 24 to its right
 * the title (16) and the line (13, muted). Tablet: one column, title, line (20), photo
 * 770 × 440 (20), steps (20). Phone: photo 350 × 300, time 24 in a 72 column, 16 to the text.
 */

.km-day {
	--km-day-rule: var(--km-c-line);
	--km-day-gap: 24px;
	--km-day-time: 28px;
	--km-day-time-w: 96px;
	--km-day-time-gap: 24px;
}

.km-day__grid {
	display: grid;
	grid-template-columns: minmax(0, 504fr) minmax(0, 624fr);
	grid-template-areas:
		"photo head"
		"photo steps";
	grid-template-rows: auto 1fr;
	gap: var(--km-day-gap) 72px;
	align-items: start;
}

.km-day__head {
	grid-area: head;
}

.km-day__text {
	margin-top: var(--km-day-gap);
	color: var(--km-muted);
}

.km-day__photo {
	grid-area: photo;
}

.km-day__photo .km-figure__media {
	aspect-ratio: 504 / 575;
}

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

.km-day__steps {
	grid-area: steps;
}

.km-day__step {
	display: grid;
	grid-template-columns: var(--km-day-time-w) minmax(0, 1fr);
	gap: var(--km-day-time-gap);
	padding: 16px 0;
	border-top: 1px solid var(--km-day-rule);
}

.km-day__time {
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: var(--km-day-time);
	line-height: 1.45;
}

.km-day__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

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

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

/* Tablet (834): one column; the photo between the heading and the steps. */
@media (max-width: 1024px) {
	.km-day {
		--km-day-gap: 20px;
	}

	.km-day__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"photo"
			"steps";
		grid-template-rows: none;
	}

	.km-day__photo .km-figure__media {
		aspect-ratio: 770 / 440;
	}
}

/* Phone (390). */
@media (max-width: 767px) {
	.km-day {
		--km-day-time: 24px;
		--km-day-time-w: 72px;
		--km-day-time-gap: 16px;
	}

	.km-day__photo .km-figure__media {
		aspect-ratio: 350 / 300;
	}
}