/**
 * =========================================================
 * フォトギャラリーページ
 * - イベント別ギャラリーと公開準備中表示を同じページスコープで管理する
 * - ブランド色はschool-life/base.cssの共通トークンを参照し、ページ固有値だけをここで定義する
 * =========================================================
 */

.shs-school-life-gallery {
	--gallery-surface: #fffafc;
	--gallery-surface-card: #fff;
	--gallery-rose-07: rgba(239, 120, 188, 0.07);
	--gallery-rose-08: rgba(239, 120, 188, 0.08);
	--gallery-rose-34: rgba(239, 120, 188, 0.34);
	--gallery-wine-shadow-08: rgba(158, 83, 105, 0.08);

	padding-top: var(--shs-header-desktop, 104px);
	background: var(--gallery-surface-card);
}

.shs-school-life-gallery .gallery-page {
	padding: 68px 0 112px;
	background: radial-gradient( circle at 92% 8%, var(--gallery-rose-07), transparent 18% ), var(--gallery-surface);
}

.shs-school-life-gallery .gallery-preparation {
	max-width: 1200px;
	min-height: 520px;
	margin: 0 auto;
	padding: 64px 70px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
	align-items: center;
	gap: 100px;
	overflow: hidden;
	background: linear-gradient(90deg, rgba(239, 120, 188, 0.95) 0%, rgba(255, 252, 253, 0.92) 48%, #fff 48%), #fff;
	border: 1px solid rgba(239, 120, 188, 0.74);
	border-radius: 28px;
	box-shadow: 0 24px 60px var(--gallery-wine-shadow-08);
}

/**
 * 1.0 イベント別フォトギャラリー
 *
 * 写真を単純な一覧にせず、イベント名・説明・写真群を一つのセクションとして管理する。
 * PCではイベントの概要を先に読み、その下で写真をまとまりとして見られる構成にする。
 */

.shs-school-life-gallery .school-life-gallery-showcase {
	padding: 72px 0 112px;
	background: radial-gradient(circle at 8% 8%, var(--gallery-rose-08), transparent 24%), var(--gallery-surface);
}

.shs-school-life-gallery .school-life-gallery-showcase__header {
	max-width: 760px;
	margin: 0 auto 72px;
	text-align: center;
}

.shs-school-life-gallery .school-life-gallery-showcase__header .eyebrow {
	margin: 0 0 20px;
	color: var(--sl-rose);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.26em;
}

.shs-school-life-gallery .school-life-gallery-showcase__header .section-title {
	margin: 0;
	color: var(--sl-wine);
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(38px, 4vw, 56px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.04em;
}

.shs-school-life-gallery .school-life-gallery-showcase__header .accent-line {
	width: 58px;
	margin: 28px auto 30px;
}

.shs-school-life-gallery .school-life-gallery-showcase__lead {
	max-width: 640px;
	margin: 0 auto;
	color: var(--sl-muted);
	font-size: 15px;
	line-height: 2;
}

.shs-school-life-gallery .school-life-gallery-events {
	display: grid;
	gap: 42px;
}

.shs-school-life-gallery .school-life-gallery-event {
	--gallery-event-accent: var(--sl-rose);
	--gallery-event-soft: var(--gallery-rose-08);
	padding: 48px;
	background: linear-gradient(135deg, var(--gallery-event-soft), rgba(255, 255, 255, 0.96) 34%), #fff;
	border: 1px solid var(--gallery-rose-34);
	border-radius: 28px;
	box-shadow: 0 22px 54px var(--gallery-wine-shadow-08);
}

.shs-school-life-gallery .school-life-gallery-event--daily {
	--gallery-event-accent: #68c9c5;
	--gallery-event-soft: rgba(104, 201, 197, 0.09);
}

.shs-school-life-gallery .school-life-gallery-event--disney {
	--gallery-event-accent: #a6c96a;
	--gallery-event-soft: rgba(166, 201, 106, 0.1);
}

.shs-school-life-gallery .school-life-gallery-event__header {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	margin-bottom: 34px;
}

.shs-school-life-gallery .school-life-gallery-event__number {
	margin: -5px 0 0;
	color: var(--gallery-event-accent);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 58px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
}

.shs-school-life-gallery .school-life-gallery-event__heading {
	max-width: 760px;
}

.shs-school-life-gallery .school-life-gallery-event__eyebrow {
	margin: 0 0 12px;
	color: var(--gallery-event-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
}

.shs-school-life-gallery .school-life-gallery-event__heading h3 {
	margin: 0;
	color: var(--sl-wine);
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.04em;
}

.shs-school-life-gallery .school-life-gallery-event__line {
	width: 52px;
	height: 3px;
	margin: 22px 0 20px;
	background: var(--gallery-event-accent);
}

.shs-school-life-gallery .school-life-gallery-event__description {
	max-width: 680px;
	margin: 0;
	color: var(--sl-muted);
	font-size: 14px;
	line-height: 1.95;
}

.shs-school-life-gallery .school-life-gallery-event__note {
	display: inline-flex;
	margin: 18px 0 0;
	padding: 7px 12px;
	color: var(--gallery-event-accent);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	background: var(--gallery-surface-card);
	border: 1px solid color-mix(in srgb, var(--gallery-event-accent) 48%, transparent);
	border-radius: 999px;
}

/**
 * 1.1 イベント内の写真グリッド
 *
 * 3枚構成では1枚目を大きく見せ、2枚構成では同じ大きさで並べる。
 * Lightboxはイベント単位でグループ化し、別イベントの写真へ混ざらないようにする。
 */

.shs-school-life-gallery .school-life-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 220px;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shs-school-life-gallery .school-life-gallery-grid--count-3 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, 220px);
}

.shs-school-life-gallery .school-life-gallery-grid--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: 300px;
}

.shs-school-life-gallery .school-life-gallery-grid__item {
	min-width: 0;
}

.shs-school-life-gallery .school-life-gallery-grid--count-3 .school-life-gallery-grid__item--featured {
	grid-row: span 2;
}

.shs-school-life-gallery .school-life-gallery-grid--count-2 .school-life-gallery-grid__item--featured {
	grid-row: auto;
}

.shs-school-life-gallery .school-life-gallery-grid__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #f8f1f4;
	border: 1px solid var(--gallery-rose-34);
	border-radius: 20px;
	box-shadow: 0 14px 32px rgba(158, 83, 105, 0.07);
}

.shs-school-life-gallery .school-life-gallery-grid__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.shs-school-life-gallery .school-life-gallery-grid__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(70, 28, 44, 0.7) 0%, rgba(70, 28, 44, 0.05) 48%, transparent 68%);
	transition: background 0.35s ease;
}

.shs-school-life-gallery .school-life-gallery-grid__meta {
	position: absolute;
	right: 22px;
	bottom: 20px;
	left: 22px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: #fff;
}

.shs-school-life-gallery .school-life-gallery-grid__category {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.shs-school-life-gallery .school-life-gallery-grid__caption {
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

@media (hover: hover) and (pointer: fine) {
	.shs-school-life-gallery .school-life-gallery-grid__link:hover .school-life-gallery-grid__image,
	.shs-school-life-gallery .school-life-gallery-grid__link:focus-visible .school-life-gallery-grid__image {
		transform: scale(1.045);
	}

	.shs-school-life-gallery .school-life-gallery-grid__link:hover::after,
	.shs-school-life-gallery .school-life-gallery-grid__link:focus-visible::after {
		background: linear-gradient(to top, rgba(70, 28, 44, 0.78) 0%, rgba(70, 28, 44, 0.08) 52%, transparent 72%);
	}
}

/**
 * 1.2 イベント別ギャラリーのレスポンシブ
 *
 * 1000px以下ではイベント見出しと写真群の余白を縮め、760px以下では
 * イベント番号・見出し・説明・写真を1列へ統一して読み順を明確にする。
 */

@media (max-width: 1000px) {
	.shs-school-life-gallery .school-life-gallery-event {
		padding: 38px;
	}

	.shs-school-life-gallery .school-life-gallery-event__header {
		grid-template-columns: 82px minmax(0, 1fr);
		gap: 24px;
	}

	.shs-school-life-gallery .school-life-gallery-event__number {
		font-size: 48px;
	}

	.shs-school-life-gallery .school-life-gallery-grid--count-2 {
		grid-template-rows: 250px;
	}
}

@media (max-width: 760px) {
	.shs-school-life-gallery .school-life-gallery-showcase {
		padding: 52px 0 76px;
	}

	.shs-school-life-gallery .school-life-gallery-showcase__header {
		margin-bottom: 44px;
	}

	.shs-school-life-gallery .school-life-gallery-showcase__header .eyebrow {
		margin-bottom: 16px;
		font-size: 11px;
	}

	.shs-school-life-gallery .school-life-gallery-showcase__header .section-title {
		font-size: clamp(30px, 8.6vw, 40px);
	}

	.shs-school-life-gallery .school-life-gallery-showcase__header .accent-line {
		margin-block: 22px 24px;
	}

	.shs-school-life-gallery .school-life-gallery-showcase__lead {
		font-size: 13px;
		line-height: 1.95;
	}

	.shs-school-life-gallery .school-life-gallery-events {
		gap: 26px;
	}

	.shs-school-life-gallery .school-life-gallery-event {
		padding: 30px 20px 22px;
		border-radius: 20px;
	}

	.shs-school-life-gallery .school-life-gallery-event__header {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-bottom: 26px;
		text-align: center;
	}

	.shs-school-life-gallery .school-life-gallery-event__number {
		margin: 0;
		font-size: 40px;
	}

	.shs-school-life-gallery .school-life-gallery-event__heading {
		margin: 0 auto;
	}

	.shs-school-life-gallery .school-life-gallery-event__eyebrow {
		font-size: 10px;
	}

	.shs-school-life-gallery .school-life-gallery-event__heading h3 {
		font-size: clamp(26px, 7.6vw, 34px);
	}

	.shs-school-life-gallery .school-life-gallery-event__line {
		margin: 18px auto;
	}

	.shs-school-life-gallery .school-life-gallery-event__description {
		margin: 0 auto;
		font-size: 13px;
		line-height: 1.9;
	}

	.shs-school-life-gallery .school-life-gallery-event__note {
		margin-top: 16px;
	}

	.shs-school-life-gallery .school-life-gallery-grid,
	.shs-school-life-gallery .school-life-gallery-grid--count-2,
	.shs-school-life-gallery .school-life-gallery-grid--count-3 {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-rows: auto;
		gap: 14px;
	}

	.shs-school-life-gallery .school-life-gallery-grid--count-3 .school-life-gallery-grid__item--featured {
		grid-row: auto;
	}

	.shs-school-life-gallery .school-life-gallery-grid__link {
		aspect-ratio: 3 / 2;
		border-radius: 16px;
	}

	.shs-school-life-gallery .school-life-gallery-grid__meta {
		right: 18px;
		bottom: 16px;
		left: 18px;
	}

	.shs-school-life-gallery .school-life-gallery-grid__caption {
		font-size: 18px;
	}
}

/**
 * 2.0 公開準備中ビジュアル
 *
 * 授業・行事・校外活動の仮写真を重ね、写真ギャラリー準備中であることを視覚的に伝える。
 */

.shs-school-life-gallery .gallery-preparation__visual {
	position: relative;
	min-height: 410px;
	isolation: isolate;
}

.shs-school-life-gallery .gallery-preparation__visual::before {
	content: none;
}

.shs-school-life-gallery .gallery-preparation__visual::after {
	content: none;
}

.shs-school-life-gallery .gallery-preparation__photo {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(145deg, #fff9fb, #f8f2f5);
	border: 8px solid rgba(255, 255, 255, 0.96);
	border-radius: 20px;
	box-shadow: 0 18px 34px rgba(158, 83, 105, 0.13);
}

.shs-school-life-gallery .gallery-preparation__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 62%);
}

.shs-school-life-gallery .gallery-preparation__photo--lesson {
	top: 8px;
	left: 6px;
	width: 58%;
	height: 54%;
	transform: rotate(-5.5deg);
	z-index: 4;
}

.shs-school-life-gallery .gallery-preparation__photo--event {
	top: 68px;
	right: 2px;
	width: 48%;
	height: 46%;
	background: linear-gradient(145deg, #fbfcfd, #f0f1f3);
	transform: rotate(4.5deg);
	z-index: 2;
}

.shs-school-life-gallery .gallery-preparation__photo--activity {
	left: 38px;
	bottom: 22px;
	width: 44%;
	height: 40%;
	background: linear-gradient(145deg, #f8f8f9, #ececef);
	transform: rotate(-1.8deg);
	z-index: 5;
}

.shs-school-life-gallery .gallery-preparation__photo--crest {
	right: 10px;
	bottom: 0;
	width: 52%;
	height: 39%;
	background: linear-gradient(145deg, #fff9fb, rgba(239, 120, 188, 0.12));
	transform: rotate(3.8deg);
	z-index: 1;
}

.shs-school-life-gallery .gallery-preparation__label {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	color: var(--sl-rose);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(239, 120, 188, 0.82);
	border-radius: 9px;
	box-shadow: 0 7px 17px var(--gallery-wine-shadow-08);
	z-index: 2;
}

.shs-school-life-gallery .gallery-preparation__photo--event .gallery-preparation__label {
	right: 12px;
	left: auto;
}

.shs-school-life-gallery .gallery-preparation__label svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.shs-school-life-gallery .gallery-preparation__camera {
	display: inline-flex;
	color: var(--sl-rose);
	opacity: 0.7;
}

.shs-school-life-gallery .gallery-preparation__camera svg {
	width: 58px;
	height: 58px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.shs-school-life-gallery .gallery-preparation__logo {
	width: min(62%, 156px);
	height: auto;
	opacity: 0.24;
	filter: grayscale(1);
}

/**
 * 3.0 公開準備中メッセージ
 *
 * 英字ラベル、公開状態、見出し、説明文を一つの読み順にまとめる。
 */

.shs-school-life-gallery .gallery-preparation__body {
	position: relative;
	z-index: 2;
}

.shs-school-life-gallery .gallery-preparation__eyebrow,
.shs-school-life-gallery .gallery-preparation__status {
	margin: 0;
	color: var(--sl-rose);
	font-family: Georgia, "Times New Roman", serif;
	text-transform: uppercase;
}

.shs-school-life-gallery .gallery-preparation__eyebrow {
	font-size: 13px;
	letter-spacing: 0.3em;
}

.shs-school-life-gallery .gallery-preparation__status {
	margin-top: 22px;
	font-size: 22px;
	letter-spacing: 0.24em;
}

.shs-school-life-gallery .gallery-preparation__body .accent-line {
	width: 58px;
	margin: 30px 0 34px;
}

.shs-school-life-gallery .gallery-preparation__body h2 {
	margin: 0 0 30px;
	color: var(--sl-wine);
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(36px, 3.15vw, 46px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.shs-school-life-gallery .gallery-preparation__body p:not(.gallery-preparation__eyebrow):not(.gallery-preparation__status) {
	margin: 0 0 12px;
	color: var(--sl-muted);
	font-size: 14px;
	line-height: 2.05;
}

/**
 * 1050px以下では公開準備中ビジュアルと説明を縦積みに変更する。
 * 760px以下では見出し・説明・装飾線を中央基準へ揃え、狭い画面での視線移動を減らす。
 */

@media (max-width: 1050px) {
	.shs-school-life-gallery .gallery-preparation {
		grid-template-columns: 1fr;
		gap: 64px;
		padding: 58px 56px 64px;
		background: linear-gradient(180deg, rgba(239, 120, 188, 0.96) 0 49%, #fff 49%);
	}

	.shs-school-life-gallery .gallery-preparation__visual {
		width: min(100%, 640px);
		min-height: 420px;
		margin: 0 auto;
	}

	.shs-school-life-gallery .gallery-preparation__body {
		width: min(100%, 680px);
		margin: 0 auto;
		text-align: center;
	}

	.shs-school-life-gallery .gallery-preparation__body .accent-line {
		margin-inline: auto;
	}
}

@media (max-width: 760px) {
	.shs-school-life-gallery {
		padding-top: var(--shs-header-mobile, 82px);
	}

	.shs-school-life-gallery .gallery-page {
		padding: 48px 0 76px;
	}

	.shs-school-life-gallery .gallery-preparation {
		min-height: 0;
		gap: 38px;
		padding: 38px 22px 42px;
		border-radius: 18px;
	}

	.shs-school-life-gallery .gallery-preparation__visual {
		min-height: 320px;
	}

	.shs-school-life-gallery .gallery-preparation__photo {
		border-width: 6px;
		border-radius: 14px;
	}

	.shs-school-life-gallery .gallery-preparation__photo--lesson {
		top: 2px;
		left: 2px;
		width: 58%;
		height: 51%;
		transform: rotate(-5deg);
	}

	.shs-school-life-gallery .gallery-preparation__photo--event {
		top: 42px;
		right: 0;
		width: 48%;
		height: 44%;
		transform: rotate(4deg);
	}

	.shs-school-life-gallery .gallery-preparation__photo--activity {
		left: 14px;
		bottom: 28px;
		width: 46%;
		height: 39%;
		transform: rotate(-2deg);
	}

	.shs-school-life-gallery .gallery-preparation__photo--crest {
		right: 8px;
		bottom: 6px;
		width: 50%;
		height: 36%;
		transform: rotate(3.5deg);
	}

	.shs-school-life-gallery .gallery-preparation__label {
		top: 8px;
		left: 8px;
		gap: 5px;
		padding: 6px 8px;
		font-size: 10px;
		letter-spacing: 0.04em;
	}

	.shs-school-life-gallery .gallery-preparation__label svg {
		width: 16px;
		height: 16px;
	}

	.shs-school-life-gallery .gallery-preparation__camera svg {
		width: 42px;
		height: 42px;
	}

	.shs-school-life-gallery .gallery-preparation__logo {
		width: min(60%, 118px);
	}

	.shs-school-life-gallery .gallery-preparation__eyebrow {
		font-size: 11px;
	}

	.shs-school-life-gallery .gallery-preparation__status {
		margin-top: 15px;
		font-size: 17px;
	}

	.shs-school-life-gallery .gallery-preparation__body .accent-line {
		margin-block: 22px 25px;
	}

	.shs-school-life-gallery .gallery-preparation__body h2 {
		margin-bottom: 22px;
		font-size: clamp(28px, 8.4vw, 38px);
		line-height: 1.55;
		letter-spacing: 0.04em;
	}

	.shs-school-life-gallery .gallery-preparation__body p:not(.gallery-preparation__eyebrow):not(.gallery-preparation__status) {
		font-size: 13px;
		line-height: 1.95;
	}
}

@media (max-width: 480px) {
	.shs-school-life-gallery {
		padding-top: var(--shs-header-mobile-small, 72px);
	}

	.shs-school-life-gallery .gallery-preparation__visual {
		min-height: 280px;
	}

	.shs-school-life-gallery .gallery-preparation__photo--activity {
		left: 12px;
		bottom: 22px;
	}

	.shs-school-life-gallery .gallery-preparation__photo--crest {
		right: 6px;
		bottom: 4px;
		width: 52%;
		height: 35%;
	}

	.shs-school-life-gallery .gallery-preparation__label {
		padding: 5px 7px;
		font-size: 9px;
	}

	.shs-school-life-gallery .gallery-preparation__label svg {
		width: 14px;
		height: 14px;
	}

	.shs-school-life-gallery .gallery-preparation__logo {
		width: min(62%, 96px);
	}
}