/**
 * Still Water Seasons (Figma "V9 Seasons": Home 10:6218 / 10:7327 / 10:8428; cabin pages
 * 10:6829 / 10:7940 / 10:9033). White section, padding 72 on desktop.
 *
 * Desktop: title (h1) at the left, the line (body-lg, muted, 400) at the right, level with the
 * title's bottom. 32 under them twelve month columns, 8 apart, standing on a common baseline:
 * the value (small, ink) 8 over the bar, the bar (radius 4, sun; the closed month line), the
 * month (label, muted) 8 under it; the tallest bar is 160. The source (small, muted) 16 under
 * the months. 32 under it four season tiles, 24 apart: photo 190 high (radius 12), 12 under it
 * the name (h3) and, 2 under it, the months and rate (small, muted); the name sits 16 under the
 * photo.
 * Tablet: the bars fill 770; Home tiles share the row (photo 103), cabin page tiles scroll at
 * 280 (photo 160). Phone: the months scroll (56 columns), the tiles scroll at 260 (photo 200).
 */

.sw-seasons {
	--sw-seasons-bar: var(--sw-c-sun);
	--sw-seasons-closed: var(--sw-c-line);
}

.sw-seasons.sw-pad {
	padding-top: var(--sw-pad-t, 72px);
	padding-bottom: var(--sw-pad-b, 72px);
}

.sw-seasons__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px 56px;
	margin-bottom: 32px;
}

.sw-seasons__head .sw-section-title {
	max-width: 744px;
}

.sw-seasons__text {
	flex: 0 0 400px;
}

.sw-seasons__chart {
	overflow-x: auto;
	scrollbar-width: none;
}

.sw-seasons__chart::-webkit-scrollbar {
	display: none;
}

.sw-seasons__months {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	gap: 8px;
}

.sw-seasons__month {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sw-seasons__value {
	margin-bottom: 8px;
	color: var(--sw-heading);
	white-space: nowrap;
}

.sw-seasons__bar {
	display: block;
	border-radius: 4px;
	background: var(--sw-seasons-bar);
}

.sw-seasons__month--closed .sw-seasons__bar {
	background: var(--sw-seasons-closed);
}

.sw-seasons__label {
	margin-top: 8px;
}

.sw-seasons__source {
	margin-top: 16px;
}

.sw-seasons__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.sw-seasons__tile {
	--sw-tile-photo: 190px;
	min-width: 0;
}

/* Figma "Text" frame: 4 under the photo, padding top 12; the line 2 under the name. */
.sw-seasons__photo {
	overflow: hidden;
	height: var(--sw-tile-photo);
	margin-bottom: 16px;
	border-radius: var(--sw-radius);
	background: var(--sw-c-line);
}

.sw-seasons__name + p {
	margin-top: 2px;
}

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

/* Tablet (834). */
@media (max-width: 1024px) {
	.sw-seasons.sw-pad {
		padding-top: var(--sw-pad-t, var(--sw-section-pad));
		padding-bottom: var(--sw-pad-b, var(--sw-section-pad));
	}

	.sw-seasons__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.sw-seasons__text {
		flex: none;
	}

	.sw-seasons__tile {
		--sw-tile-photo: 103px;
	}

	.sw-seasons--tablet-scroll .sw-seasons__tiles {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sw-gutter);
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--sw-gutter));
		padding-inline: var(--sw-gutter);
	}

	.sw-seasons--tablet-scroll .sw-seasons__tile {
		--sw-tile-photo: 160px;
		flex: none;
		width: 280px;
		scroll-snap-align: start;
	}
}

/* Phone (390): months and seasons scroll sideways (Q11). */
@media (max-width: 767px) {
	.sw-seasons__chart {
		margin-inline: calc(-1 * var(--sw-gutter));
		padding-inline: var(--sw-gutter);
	}

	.sw-seasons__months {
		grid-template-columns: repeat(12, 56px);
		width: max-content;
	}

	.sw-seasons__tiles,
	.sw-seasons--tablet-scroll .sw-seasons__tiles {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sw-gutter);
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--sw-gutter));
		padding-inline: var(--sw-gutter);
	}

	.sw-seasons__tiles::-webkit-scrollbar {
		display: none;
	}

	.sw-seasons__tile,
	.sw-seasons--tablet-scroll .sw-seasons__tile {
		--sw-tile-photo: 200px;
		flex: none;
		width: 260px;
		scroll-snap-align: start;
	}
}