/**
 * 年間行事ページの季節カードと「行事で育む力」の表示を管理する。
 *
 * 学校生活ページ群の共通トークンはassets/css/pages/school-life/base.cssを利用し、
 * このファイルでは年間の時系列を追うカード構造と年間行事固有のレスポンシブ配置だけを定義する。
 */

/* 導入見出しと本文は、年間行事ページの実表示幅に合わせて意味単位で改行する。 */

.shs-school-life-events .sl-child-intro__copy > .section-title {
	font-size: clamp(30px, 2.7vw, 34px);
	letter-spacing: 0.02em;
}

.shs-school-life-events .sl-child-intro__title-line,
.shs-school-life-events .sl-child-intro__paragraph-line {
	display: block;
	white-space: nowrap;
}

/**
 * 1.0 季節別年間行事
 *
 * 4〜6月などの期間、季節名、月別行事を1枚のカードへまとめ、年間の流れを上から順に追えるようにする。
 */

.sl-season {
	padding: 110px 0 122px;
	background: radial-gradient( circle at 94% 5%, rgba(239, 120, 188, 0.075), transparent 19% ), rgba(239, 120, 188, .030);
	border-block: 1px solid rgba(239, 120, 188, 0.75);
}

.sl-season__list {
	display: grid;
	gap: 30px;
}

.sl-season-card {
	--sl-season-accent: #ef78bc;
	--sl-season-accent-strong: #9e5369;
	--sl-season-accent-soft: rgba(239, 120, 188, 0.16);
	--sl-season-overlay: rgba(158, 83, 105, 0.5);
	overflow: hidden;
	display: grid;
	grid-template-columns: 36% minmax(0, 1fr);
	min-height: 410px;
	background: #fff;
	border: 1px solid var(--sl-season-accent-soft);
	border-radius: 20px;
	box-shadow: 0 14px 42px rgba(17, 24, 39, 0.06);
}

.sl-season-card--spring {
	--sl-season-accent: #ef78bc;
	--sl-season-accent-strong: #ef78bc;
	--sl-season-accent-soft: rgba(239, 120, 188, 0.32);
	--sl-season-overlay: rgba(239, 120, 188, 0.46);
}

.sl-season-card--summer {
	--sl-season-accent: #56d1ca;
	--sl-season-accent-strong: #18aaa2;
	--sl-season-accent-soft: rgba(86, 209, 202, 0.38);
	--sl-season-overlay: rgba(24, 170, 162, 0.58);
}

.sl-season-card--autumn {
	--sl-season-accent: #ff9f1c;
	--sl-season-accent-strong: #e87500;
	--sl-season-accent-soft: rgba(255, 159, 28, 0.40);
	--sl-season-overlay: rgba(232, 117, 0, 0.60);
}

.sl-season-card--winter {
	--sl-season-accent: #65a8ff;
	--sl-season-accent-strong: #347bd1;
	--sl-season-accent-soft: rgba(101, 168, 255, 0.38);
	--sl-season-overlay: rgba(52, 123, 209, 0.58);
}

.sl-season-card:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) 36%;
}

.sl-season-card:nth-child(even) .sl-season-card__visual {
	order: 2;
}

.sl-season-card__visual {
	position: relative;
	overflow: hidden;
	min-height: 410px;
}

.sl-season-card__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 58%, var(--sl-season-overlay));
}

.sl-season-card__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sl-season-card__visual > span {
	position: absolute;
	z-index: 2;
	right: 24px;
	bottom: 18px;
	color: rgba(255, 255, 255, 0.94);
	font-family: Georgia, serif;
	font-size: 26px;
	letter-spacing: 0.16em;
}

.sl-season-card__body {
	padding: 38px 44px 34px;
}

.sl-season-card__body header {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--sl-season-accent-soft);
}

.sl-season-card__body header > span {
	color: var(--sl-season-accent-strong);
	font-family: Georgia, serif;
	font-size: 24px;
	line-height: 1.1;
}

.sl-season-card__body header small {
	color: var(--sl-season-accent-strong);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.sl-season-card__body h3 {
	margin: 4px 0 0;
	color: var(--sl-season-accent-strong);
	font-family: "Yu Mincho", serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.55;
}

.sl-season-card__body ul {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.sl-season-card__body li {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 18px;
	padding: 17px 0;
	border-bottom: 1px solid var(--sl-season-accent-soft);
}

.sl-season-card__body li:last-child {
	border-bottom: 0;
}

.sl-season-card__body time {
	color: var(--sl-season-accent);
	font-family: "Yu Mincho", serif;
	font-size: 16px;
	font-weight: 600;
}

.sl-season-card__body strong {
	color: var(--sl-season-accent-strong);
	font-size: 14px;
}

.sl-season-card__body li p {
	margin: 4px 0 0;
	color: var(--sl-muted);
	font-size: 12px;
	line-height: 1.7;
}

/**
 * 2.0 年間行事で大切にするポイント
 *
 * 行事を単なる予定ではなく学びの機会として理解できるよう、3つの観点を補足する。
 */

.sl-event-points {
	padding: 106px 0 112px;
	background: #fff;
}

.sl-event-points .container {
	display: grid;
	grid-template-columns: minmax(300px, 0.65fr) minmax(0, 1.35fr);
	gap: 76px;
	align-items: start;
}

.sl-event-points__grid {
	display: grid;
	gap: 14px;
}

.sl-event-points__grid article {
	display: grid;
	grid-template-columns: 66px 180px minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	min-height: 116px;
	padding: 22px 26px;
	background: #fffafc;
	border: 1px solid rgba(239, 120, 188, 0.9);
	border-radius: 14px;
}

.sl-event-points__grid article > span {
	color: var(--sl-rose);
	font-family: Georgia, serif;
	font-size: 27px;
}

.sl-event-points__grid h3 {
	margin: 0;
	color: #9e5369;
	font-family: "Yu Mincho", serif;
	font-size: 20px;
	font-weight: 500;
}

.sl-event-points__grid p {
	margin: 0;
	color: var(--sl-muted);
	font-size: 12px;
	line-height: 1.8;
}

/**
 * 1050px以下では季節カードの画像と本文を縦方向へ再配置する。
 * 760px以下では期間表示を1行で読める構造へ変え、月別予定の視認性を保つ。
 */

@media (max-width: 1050px) {
	.sl-event-points .container {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.sl-event-points__copy {
		max-width: 720px;
	}
}

@media (max-width: 900px) {
	.sl-season-card {
		grid-template-columns: 1fr;
	}

	.sl-season-card:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.sl-season-card:nth-child(even) .sl-season-card__visual {
		order: 0;
	}

	.sl-season-card__visual {
		min-height: 300px;
	}
}

@media (max-width: 760px) {
	.shs-school-life-events .sl-child-intro__title-line,
	.shs-school-life-events .sl-child-intro__paragraph-line {
		white-space: normal;
	}

	.sl-season {
		padding: 74px 0 82px;
	}

	.sl-event-points {
		padding: 74px 0 82px;
	}

	.sl-season-card__visual {
		min-height: 240px;
	}

	.sl-season-card__body {
		padding: 28px 24px 24px;
	}

	.sl-season-card__body header {
		grid-template-columns: 1fr;
		gap: 10px;
		text-align: center;
	}

	.sl-season-card__body header > span {
		justify-self: center;
		width: fit-content;
		padding: 7px 16px;
		white-space: nowrap;
		background: color-mix(in srgb, var(--sl-season-accent) 10%, #fff);
		border: 1px solid var(--sl-season-accent-soft);
		border-radius: 999px;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 0.08em;
	}

	.sl-season-card__body header small {
		display: block;
		font-size: 12px;
	}

	.sl-season-card__body h3 {
		margin-top: 8px;
		font-size: 20px;
	}

	.sl-event-points__grid article {
		grid-template-columns: 46px minmax(0, 1fr);
	}

	.sl-event-points__grid article p {
		grid-column: 2;
	}
}

@media (max-width: 480px) {
	.sl-season-card__body li {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 12px;
	}
}