/* Canopy Seasons (cn-seasons): Home "V9 Seasons" photo cards and The place "M8 The forest through the year". */

/* Section rhythm: cards 64 / 64 / 48; columns 96 / 64 / 64. */
.cn-seasons--cards {
	--cn-section-pad: 64px;
}

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

.cn-seasons__months {
	color: var(--cn-muted);
}

.cn-seasons__name {
	margin-top: 4px;
}

.cn-seasons__price {
	margin-top: 12px;
	color: var(--cn-text);
	font-weight: 600;
}

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

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

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

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

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

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

.cn-seasons__photo + .cn-seasons__body {
	margin-top: 16px;
}

/* ---------------------------------------------------------------- */
/* Photos above season columns                                      */
/* ---------------------------------------------------------------- */

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

.cn-seasons__figure .cn-figure__media {
	aspect-ratio: 588 / 360;
	border-radius: 0;
}

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

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

.cn-seasons__photos + .cn-seasons__columns {
	margin-top: 32px;
}

.cn-seasons__column {
	min-width: 0;
	padding-top: 12px;
	border-top: 1px solid var(--cn-heading);
}

.cn-seasons__column .cn-seasons__months {
	color: var(--cn-text);
}

.cn-seasons__column .cn-seasons__name {
	margin-top: 12px;
}

/* Only the phone layout shows the note (design 390). */
.cn-seasons__hint {
	display: none;
	margin-top: 24px;
	color: var(--cn-muted);
}

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

@media (max-width: 1024px) {
	.cn-seasons--columns .cn-heading {
		margin-bottom: 24px;
	}

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

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

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

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

	.cn-seasons__photo {
		aspect-ratio: 300 / 240;
	}

	.cn-seasons__figure .cn-figure__media {
		aspect-ratio: 373 / 231;
	}

	.cn-seasons__photos + .cn-seasons__columns {
		margin-top: 24px;
	}

	.cn-seasons__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

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

	.cn-seasons--columns {
		--cn-section-pad: 64px;
	}

	.cn-seasons .cn-heading,
	.cn-seasons--columns .cn-heading {
		margin-bottom: 24px;
	}

	/* Two columns of cards instead of the scroll row. */
	.cn-seasons__scroll {
		margin-right: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.cn-seasons__cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
		width: auto;
		padding-right: 0;
	}

	.cn-seasons__card {
		width: auto;
	}

	.cn-seasons__photo {
		aspect-ratio: 163 / 200;
	}

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

	.cn-seasons__photos--reverse {
		display: flex;
		flex-direction: column-reverse;
	}

	.cn-seasons__figure .cn-figure__media {
		aspect-ratio: 350 / 217;
	}

	.cn-seasons__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.cn-seasons__hint {
		display: block;
	}
}