/**
 * Komorebi Tea calendar (Figma "M8 Signature · Seasonal tea calendar", 18:6442 / 18:7203 /
 * 18:7914). No fill of its own in Figma: the paper palette matches the page.
 *
 * Desktop: heading (760: marker 12, title Shippori 52/112, intro 17 muted, 16 apart) and the
 * photo (392 × 262, square corners, caption 10 under it) 48 apart; 32 under them four cards
 * 16 apart (radius 12, 1px muted 35% rule, padding 24/24/28/24: season 12, tea Shippori 28/120,
 * soba 16, months 13, 8 apart; all muted; the active card forest with paper text and no rule);
 * the link (15, underlined) 32 under the cards.
 * Tablet: heading 422, photo 300 × 220, title 44 on one paragraph, tea 26, cards 2 × 2.
 * Phone: one column (heading, photo 350 × 220, cards, link 24 apart), title 34, intro 16,
 * marker 12 above the title, cards 12 apart with padding 20/20/22/20 and 6 between lines.
 */

.km-tea-calendar {
	--km-tea-text: var(--km-muted);
	--km-tea-border: rgb(82 98 86 / 0.35);
	--km-tea-active-bg: var(--km-c-forest);
	--km-tea-active-text: var(--km-c-paper);
	--km-tea-gap: 32px;
	--km-tea-head-gap: 16px;
	--km-tea-card-gap: 8px;
}

.km-tea-calendar__head {
	display: grid;
	grid-template-columns: minmax(0, 760fr) minmax(0, 392fr);
	gap: 48px;
	align-items: start;
}

.km-tea-calendar__marker {
	color: var(--km-muted);
}

.km .km-tea-calendar__title {
	margin-top: var(--km-tea-head-gap);
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: 52px;
	font-weight: 400;
	line-height: 1.12;
}

.km-tea-calendar__intro {
	margin-top: var(--km-tea-head-gap);
	color: var(--km-muted);
	font-size: 17px;
	line-height: var(--km-lh-text);
}

.km-tea-calendar__photo .km-figure__media {
	aspect-ratio: 392 / 262;
}

.km-tea-calendar__photo .km-figure__caption {
	margin-top: 10px;
}

.km-tea-calendar__seasons {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: var(--km-tea-gap);
}

.km-tea-calendar__season {
	display: flex;
	flex-direction: column;
	gap: var(--km-tea-card-gap);
	padding: 24px 24px 28px;
	border: 1px solid var(--km-tea-border);
	border-radius: var(--km-radius-card);
	color: var(--km-tea-text);
}

/* The active card has no rule in Figma. */
.km-tea-calendar__season.is-active {
	border: 0;
	background: var(--km-tea-active-bg);
	color: var(--km-tea-active-text);
}

.km-tea-calendar__name {
	color: inherit;
}

.km .km-tea-calendar__tea {
	color: inherit;
	font-family: var(--km-serif);
	font-size: 28px;
	line-height: 1.2;
}

.km-tea-calendar__soba {
	font-size: var(--km-fs-body);
	line-height: var(--km-lh-text);
}

.km-tea-calendar__action {
	margin-top: var(--km-tea-gap);
}

.km .km-tea-calendar__link {
	font-size: var(--km-fs-button);
}

/* Tablet (834): heading 422 + photo 300 × 220, title on one paragraph, cards 2 × 2. */
@media (max-width: 1024px) {
	.km-tea-calendar__head {
		grid-template-columns: minmax(0, 422fr) minmax(0, 300fr);
	}

	.km-tea-calendar__br {
		display: none;
	}

	.km .km-tea-calendar__title {
		font-size: 44px;
	}

	.km-tea-calendar__photo .km-figure__media {
		aspect-ratio: 300 / 220;
	}

	.km-tea-calendar__seasons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.km .km-tea-calendar__tea {
		font-size: 26px;
	}
}

/* Phone (390): one column. */
@media (max-width: 767px) {
	.km-tea-calendar {
		--km-tea-gap: 24px;
		--km-tea-head-gap: 12px;
		--km-tea-card-gap: 6px;
	}

	.km-tea-calendar__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.km .km-tea-calendar__title {
		font-size: 34px;
	}

	.km-tea-calendar__intro {
		font-size: var(--km-fs-body);
	}

	.km-tea-calendar__photo .km-figure__media {
		aspect-ratio: 350 / 220;
	}

	.km-tea-calendar__seasons {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.km-tea-calendar__season {
		padding: 20px 20px 22px;
	}
}