/* Canopy Steps (cn-steps): Home "V3 Steps" photo cards and The place "M6 A considered arrival" timeline. */

/* Section rhythm: cards 64 / 64 / 48; timeline 96 / 64 / 64 on top and no bottom padding. */
.cn-steps--cards {
	--cn-section-pad: 64px;
}

.cn-steps--timeline.cn-pad {
	padding-bottom: var(--cn-pad-b, 0px);
}

.cn-steps .cn-heading {
	margin-bottom: 40px;
}

.cn-steps--timeline .cn-heading {
	margin-bottom: 32px;
}

/* ---------------------------------------------------------------- */
/* Photo cards                                                      */
/* ---------------------------------------------------------------- */

.cn-steps__scroll:focus-visible {
	outline: 2px solid var(--cn-accent);
	outline-offset: 4px;
}

.cn-steps__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
}

.cn-steps__card {
	min-width: 0;
}

.cn-steps__photo {
	aspect-ratio: 282 / 300;
	overflow: hidden;
	border-radius: var(--cn-radius);
	background: var(--cn-line);
}

.cn .cn-steps__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.cn-steps__photo + .cn-steps__body {
	margin-top: 16px;
}

.cn-steps__number {
	display: block;
	color: var(--cn-muted);
	text-transform: none;
}

.cn-steps__text {
	margin-top: 4px;
	color: var(--cn-text);
	font-size: 20px;
	line-height: 30px;
}

.cn-steps__card .cn-steps__title {
	margin-top: 4px;
	color: var(--cn-heading);
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
}

.cn-steps__card .cn-steps__meta {
	margin-top: 8px;
}

/* ---------------------------------------------------------------- */
/* Photos and timeline                                              */
/* ---------------------------------------------------------------- */

.cn-steps__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.cn-steps--has-photos .cn-steps__layout {
	grid-template-columns: minmax(0, 606fr) minmax(0, 546fr);
	gap: 48px;
	align-items: start;
}

.cn-steps__photos {
	display: grid;
	gap: 24px;
}

.cn-steps__figure .cn-figure__media {
	aspect-ratio: 606 / 472;
	border-radius: 0;
}

.cn-steps__figure .cn-figure__caption {
	margin-top: 12px;
	color: var(--cn-text);
}

.cn-steps__timeline {
	display: grid;
	gap: 36px;
}

.cn-steps__row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.cn-steps__big-number {
	flex: none;
	font-family: var(--cn-serif);
	font-weight: 400;
	font-size: var(--cn-fs-figure);
	line-height: var(--cn-lh-figure);
	color: var(--cn-heading);
	font-variant-numeric: lining-nums;
}

.cn-steps__instruction {
	flex: 1;
	min-width: 0;
}

.cn-steps__timeline .cn-steps__title {
	color: var(--cn-heading);
	font-family: var(--cn-sans);
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
}

.cn-steps__note {
	margin-top: 4px;
	color: var(--cn-text);
}

.cn-steps__timeline .cn-steps__title + .cn-steps__meta,
.cn-steps__note + .cn-steps__meta {
	margin-top: 8px;
}

.cn-steps__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
}

.cn-steps__tag {
	display: inline-block;
	padding: 4px 8px;
	border: 1px solid var(--cn-heading);
	border-radius: 4px;
	color: var(--cn-heading);
}

.cn-steps__time {
	color: var(--cn-muted);
	font-size: 16px;
	line-height: 24px;
}

/* ---------------------------------------------------------------- */
/* Tablet (834)                                                     */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.cn-steps .cn-heading {
		margin-bottom: 32px;
	}

	.cn-steps--timeline .cn-heading {
		margin-bottom: 24px;
	}

	/* Cards become a scroll row that bleeds to the right edge. */
	.cn-steps__scroll {
		margin-right: calc(-1 * var(--cn-gutter));
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.cn-steps__scroll::-webkit-scrollbar {
		display: none;
	}

	.cn-steps__cards {
		display: flex;
		gap: 24px;
		width: max-content;
		padding-right: var(--cn-gutter);
	}

	.cn-steps__card {
		flex: none;
		width: 300px;
		scroll-snap-align: start;
	}

	.cn-steps__photo {
		aspect-ratio: 300 / 360;
	}

	.cn-steps--has-photos .cn-steps__layout {
		grid-template-columns: minmax(0, 259fr) minmax(0, 487fr);
		gap: 24px;
	}

	.cn-steps__figure .cn-figure__media {
		aspect-ratio: 259 / 139;
	}

	.cn-steps__timeline {
		gap: 24px;
	}

	.cn-steps__big-number {
		min-width: 48px;
		font-size: var(--cn-fs-h3);
		line-height: var(--cn-lh-h3);
	}

	.cn-steps__timeline .cn-steps__title {
		font-size: 16px;
		line-height: 24px;
	}

	.cn-steps__time {
		font-size: 14px;
		line-height: 20px;
	}
}

/* ---------------------------------------------------------------- */
/* Phone (390)                                                      */
/* ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.cn-steps--cards {
		--cn-section-pad: 48px;
	}

	.cn-steps--timeline {
		--cn-section-pad: 64px;
	}

	.cn-steps .cn-heading,
	.cn-steps--timeline .cn-heading {
		margin-bottom: 24px;
	}

	.cn-steps__cards {
		gap: 16px;
	}

	.cn-steps__card {
		width: 260px;
	}

	.cn-steps__photo {
		aspect-ratio: 260 / 320;
	}

	.cn-steps--has-photos .cn-steps__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.cn-steps__photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.cn-steps__figure .cn-figure__media {
		aspect-ratio: 163 / 127;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-steps__scroll {
		scroll-snap-type: none;
	}
}