/**
 * Casa Terra Seasons (Figma "V9 Seasons · When to come", 7:698): title and line on the left,
 * three prices on the right (desktop), then the twelve months in one row, the legend with the
 * source. Tablet: the prices move under the legend. Phone: the months wrap into 2 × 6 and the
 * prices stack. The rates list is the Canopy Rates one (price above its label).
 */

.ct-seasons__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 584px);
	grid-template-areas:
		"head rates"
		"months months"
		"foot foot";
	column-gap: 40px;
}

.ct-seasons .ct-seasons__heading {
	grid-area: head;
	margin-bottom: 0;
}

.ct-seasons .ct-heading__text {
	margin-top: 12px;
}

/* ---------------------------------------------------------------- */
/* Prices                                                           */
/* ---------------------------------------------------------------- */

.ct-seasons__rates {
	grid-area: rates;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-self: start;
	margin: 0;
	padding-top: 8px;
}

.ct-seasons__rate {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 4px;
	min-width: 0;
}

.ct-seasons__rate-value {
	margin: 0;
	color: var(--ct-heading);
}

.ct-seasons__rate-label {
	margin: 0;
	color: var(--ct-muted);
}

/* ---------------------------------------------------------------- */
/* Months                                                           */
/* ---------------------------------------------------------------- */

.ct-seasons__months {
	grid-area: months;
	display: grid;
	grid-template-columns: repeat(var(--ct-seasons-cols, 12), minmax(0, 1fr));
	gap: 8px;
	margin-top: 36px;
}

.ct-seasons__month {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 12px 12px 20px;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-radius-control);
	color: var(--ct-heading);
}

.ct-seasons__month-label {
	text-transform: none;
}

.ct-seasons__value {
	font-family: var(--ct-serif);
	font-size: var(--ct-fs-h3);
	line-height: var(--ct-lh-h3);
	white-space: nowrap;
}

.ct-seasons__month--best {
	border-color: transparent;
	background: var(--ct-seasons-best, var(--ct-accent));
	color: var(--ct-seasons-best-text, var(--ct-on-accent));
}

.ct-seasons__month--closed {
	border-style: dashed;
	color: var(--ct-muted);
}

.ct-seasons__month--closed .ct-seasons__value {
	font-family: var(--ct-sans);
	font-size: var(--ct-fs-small);
	line-height: var(--ct-lh-small);
}

/* ---------------------------------------------------------------- */
/* Legend and source                                                */
/* ---------------------------------------------------------------- */

.ct-seasons__foot {
	grid-area: foot;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 40px;
	margin-top: 16px;
}

.ct-seasons__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	color: var(--ct-heading);
	font-size: var(--ct-fs-small);
	line-height: var(--ct-lh-small);
}

.ct-seasons__key {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ct-seasons__swatch {
	flex: none;
	width: 20px;
	height: 14px;
	border: 1px solid var(--ct-line);
	border-radius: 3px;
}

.ct-seasons__key--best .ct-seasons__swatch {
	border-color: transparent;
	background: var(--ct-seasons-best, var(--ct-accent));
}

.ct-seasons__key--closed .ct-seasons__swatch {
	border-style: dashed;
}

.ct-seasons__source {
	max-width: 560px;
	color: var(--ct-muted);
	text-align: right;
}

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

@media (max-width: 1024px) {
	.ct-seasons__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"months"
			"foot"
			"rates";
	}

	.ct-seasons__rates {
		grid-template-columns: repeat(3, minmax(0, 240px));
		margin-top: 24px;
		padding-top: 0;
	}

	.ct-seasons__months {
		gap: 6px;
		margin-top: 32px;
	}

	.ct-seasons__month {
		gap: 10px;
		padding: 10px 8px 16px;
	}

	.ct-seasons__foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.ct-seasons__source {
		text-align: left;
	}
}

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

@media (max-width: 767px) {
	.ct-seasons .ct-heading__text {
		margin-top: 8px;
	}

	.ct-seasons__months {
		grid-template-columns: repeat(var(--ct-seasons-cols, 6), minmax(0, 1fr));
		margin-top: 24px;
	}

	.ct-seasons__month {
		padding: 8px 6px 10px;
	}

	.ct-seasons__legend {
		gap: 8px 16px;
	}

	/* Figma leaves no space between a label and the next price; 16 like the columns above. */
	.ct-seasons__rates {
		grid-template-columns: minmax(0, 1fr);
	}
}