/**
 * 学校理念ページの導入情報と締めくくりメッセージを管理する。
 *
 * 共通トークンと下層ページ基盤はpages/about/base.cssを利用し、このファイルでは理念ページ固有の
 * 3領域グリッド、補助情報カード、最終メッセージの構造だけを定義する。
 */

.shs-about-family .p3-main {
	padding: 86px 0 120px;
	background: #fff;
}

.shs-about-family .p3-intro {
	display: grid;
	grid-template-areas:
		"heading diagram meta"
		"copy copy meta";
	grid-template-columns:
		minmax(360px, 0.95fr)
		minmax(380px, 1.1fr)
		minmax(280px, 0.8fr);
	gap: 24px 28px;
	align-items: center;
}

.shs-about-family .p3-meta {
	display: grid;
	gap: 14px;
}

.shs-about-family .p3-meta__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--rose-pale);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.shs-about-family .p3-meta__icon {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--rose);
	background: #fff;
	border-radius: 50%;
}

.shs-about-family .p3-meta strong,
.shs-about-family .p3-meta small {
	display: block;
}

.shs-about-family .p3-meta strong {
	color: #ef78bc;
}

.shs-about-family .p3-meta small {
	color: var(--muted);
	font-size: 11px;
}

/**
 * 2.0 締めくくりメッセージ
 *
 * 理念説明の最後に文章とビジュアルを並べ、ページ全体の要点を再確認できる独立した終端領域として扱う。
 */

.shs-about-family .p3-message {
	margin-top: 82px;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(239, 120, 188, .055), #fff);
	border: 1px solid var(--line);
	border-radius: 28px;
	box-shadow: var(--shadow);
}

.shs-about-family .p3-message__body {
	padding: 64px 44px;
	align-self: center;
}

.shs-about-family .p3-message__body h3 {
	margin: 0;
	color: #9e5369;
	font-family: "Yu Mincho", serif;
	font-size: clamp(30px, 3.2vw, 42px);
	font-weight: 500;
	line-height: 1.45;
}

.shs-about-family .p3-message__body > p:not(.eyebrow) {
	color: var(--muted);
}

.shs-about-family .p3-message__body .btn {
	margin-top: 22px;
}

.shs-about-family .p3-collage {
	min-height: 510px;
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: 9px;
	padding: 12px;
}

.shs-about-family .p3-collage__large,
.shs-about-family .p3-collage__small {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	border-radius: 18px;
}

.shs-about-family .p3-collage__large {
	background-image: url("../../../img/about/philosophy/collage-large.webp");
}

.shs-about-family .p3-collage__stack {
	display: grid;
	gap: 9px;
}

.shs-about-family .p3-collage__small--ai {
	background-image: url("../../../img/about/philosophy/collage-ai.webp");
}

.shs-about-family .p3-collage__small--english {
	background-image: url("../../../img/about/philosophy/collage-english.webp");
	background-position: 8% center;
}

.shs-about-family .p3-collage span {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 7px 10px;
	color: #fff;
	background: rgba(158, 83, 105, 0.7);
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	backdrop-filter: blur(8px);
}

@media (max-width: 1120px) {
	.shs-about-family .p3-intro {
		grid-template-areas:
			"heading diagram"
			"meta meta"
			"copy copy";
		grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
		gap: 34px 32px;
	}

	.shs-about-family .p3-meta {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.shs-about-family .p3-intro,
	.shs-about-family .p3-message {
		grid-template-columns: 1fr;
	}

	.shs-about-family .p3-intro {
		grid-template-areas:
			"heading"
			"diagram"
			"meta"
			"copy";
	}

	.shs-about-family .p3-meta {
		grid-template-columns: 1fr;
	}

	.shs-about-family .p3-collage {
		min-height: 480px;
	}
}

@media (max-width: 600px) {
	.shs-about-family .p3-main {
		padding-top: 68px;
	}

	.shs-about-family .p3-intro {
		gap: 36px;
	}

	.shs-about-family .p3-message__body {
		padding: 42px 26px;
	}

	.shs-about-family .p3-collage {
		min-height: 0;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.shs-about-family .p3-collage__large {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.shs-about-family .p3-collage__stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.shs-about-family .p3-collage__small {
		aspect-ratio: 4 / 3;
	}
}