/**
 * An Nam Day timeline (Figma "Time", Story 25:6647 / 25:7400 / 25:8141). Sand section.
 *
 * Desktop: the text column (760): label, title (h2) 24 under it, the steps 24 under that; the
 * photo (376 × 470, radius 12, caption 12 under it) on the right, centred on the text column.
 * A step: 1px rule (line), padding 16 0, the time (Newsreader h3 28/34) in a 96 column, 24 to
 * its right the title (body-lg) and, 4 under it, the line (body, muted).
 * Tablet: text 418 and photo 320 × 400, 32 apart. Phone: one column, the photo (350 × 480)
 * between the title and the steps, 24 apart; time column 72, 16 to the text.
 */

.an-day-timeline {
	--an-time-w: 96px;
	--an-time-gap: 24px;
}

.an-day-timeline__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 24px;
}

.an-day-timeline__grid--photo {
	grid-template-columns: minmax(0, 760px) 376px;
	grid-template-areas:
		"head photo"
		"steps photo";
	grid-template-rows: auto 1fr;
	justify-content: space-between;
	column-gap: 64px;
}

.an-day-timeline__heading {
	grid-area: head;
}

.an-day-timeline .an-heading .an-eyebrow {
	margin-bottom: 24px;
}

.an-day-timeline__photo {
	grid-area: photo;
	align-self: center;
}

.an-day-timeline__photo .an-figure__media {
	height: 470px;
}

.an-day-timeline__steps {
	grid-area: steps;
}

.an-day-timeline__grid:not(.an-day-timeline__grid--photo) .an-day-timeline__heading,
.an-day-timeline__grid:not(.an-day-timeline__grid--photo) .an-day-timeline__steps {
	grid-area: auto;
}

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

.an .an-day-timeline__time {
	font-size: var(--an-fs-h3);
	line-height: var(--an-lh-h3);
}

.an-day-timeline__title {
	color: var(--an-heading);
	font-size: var(--an-fs-body-lg);
	line-height: var(--an-lh-body-lg);
}

.an-day-timeline__line {
	margin-top: 4px;
	color: var(--an-muted);
	font-size: var(--an-fs-body);
	line-height: var(--an-lh-body);
}

/* Tablet (834): text 418, photo 320 × 400, 32 apart. */
@media (max-width: 1024px) {
	.an-day-timeline__grid--photo {
		grid-template-columns: minmax(0, 418px) 320px;
		column-gap: 32px;
	}

	.an-day-timeline__photo .an-figure__media {
		height: 400px;
	}
}

/* Phone (390): one column, photo between the title and the steps. */
@media (max-width: 767px) {
	.an-day-timeline {
		--an-time-w: 72px;
		--an-time-gap: 16px;
	}

	.an-day-timeline__grid--photo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"photo"
			"steps";
		grid-template-rows: auto;
	}

	.an-day-timeline__photo .an-figure__media {
		height: 480px;
	}
}