/* =====================================================================
   ページ: 教室詳細（single-classroom.php）  Figma 76:22201
   MV=components/mv.css(.c-mv) / 見出し=c-heading / CTA=c-cta-visit を共通利用。
   本ファイルは MV左右イラスト・本文背景・ギャラリー・空き状況テーブル・
   施設情報テーブル・波形ディバイダーの差分を持つ。
   色・余白・サイズは tokens.css の変数のみで指定する。
   ===================================================================== */

/* base.css の section{margin-block:48px} を打ち消す（余白は各セクションのpaddingで管理）。
   未リセットだと divider 帯の上下に 48px の body 背景余白が出て波が flush にならない。 */
.classroom section { margin-block: 0; }

/* --- MV：左右の子どもイラスト（教室一覧ページと同配置）------------------ */
.classroom-mv__fig { position: absolute; bottom: 0; height: auto; z-index: 3; pointer-events: none; }
.classroom-mv__fig--left  { left: 8.3%;  width: min(18.3%, 264px); bottom: 6%; }
.classroom-mv__fig--right { right: 11.6%; width: clamp(56px, 6.7%, 96px); bottom: 5%; }

/* --- 本文ラッパ（ライトイエローのテクスチャ）--------------------------
   背景：Figma 76:22201。色を焼き込んだ紙テクスチャを 346.8×327.8px で直接フィル
   （multiply は使わない＝CTA の波形と継ぎ目を出さない）。 */
.classroom-body {
	position: relative;
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-40) var(--space-80);
	/* 見出し（c-heading「教室名」）は本文インナーから独立した直下の子。
	   Figma: 見出し → Body フレームの間隔は 40px。 */
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}
.classroom-body > * { position: relative; z-index: 1; }

.classroom-body__inner {
	width: 100%;
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-80);
	display: flex;
	flex-direction: column;
	gap: var(--space-80);
}

/* --- 教室紹介ギャラリー -------------------------------------------------- */
.classroom-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.classroom-gallery__main {
	position: relative;       /* オーバーレイ層の基準。 */
	line-height: 0;
}
.classroom-gallery__main-img,
.classroom-gallery__main-overlay {
	display: block;
	width: 100%;
	height: auto;            /* img の height 属性を無効化し aspect-ratio で高さを決める */
	aspect-ratio: 1040 / 431;
	object-fit: cover;
}
/* クロスフェード用オーバーレイ：ベース画像に重ね、opacity で溶け込ませる。 */
.classroom-gallery__main-overlay {
	position: absolute;
	inset: 0;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
@media ( prefers-reduced-motion: reduce ) {
	.classroom-gallery__main-overlay {
		transition: none;
	}
}
.classroom-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
.classroom-gallery__thumb { line-height: 0; }
.classroom-gallery__thumb-btn {
	position: relative;       /* 選択枠（::after）の基準。 */
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
}
/* 選択／hover 時の枠は画像の内側に描画する（インナーボーダー）。 */
.classroom-gallery__thumb-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid transparent;
	pointer-events: none;
	transition: border-color 0.2s ease;
}
.classroom-gallery__thumb-btn:hover::after,
.classroom-gallery__thumb-btn:focus-visible::after,
.classroom-gallery__thumb-btn.is-active::after {
	border-color: var(--color-accent);
}
/* ギャラリー外枠（overflow:hidden + radius-md）で角丸になる両端の下角に、選択枠も追従させる。 */
.classroom-gallery__thumb:first-child .classroom-gallery__thumb-btn::after {
	border-bottom-left-radius: var(--radius-md);
}
.classroom-gallery__thumb:last-child .classroom-gallery__thumb-btn::after {
	border-bottom-right-radius: var(--radius-md);
}
.classroom-gallery__thumb img {
	display: block;
	width: 100%;
	height: auto;            /* img の height 属性を無効化し aspect-ratio で高さを決める */
	aspect-ratio: var(--ratio-square);
	object-fit: cover;
}

/* --- 空き状況のご案内 ---------------------------------------------------- */
.classroom-avail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	/* 背景色_オフホワイト地のクレヨン紙テクスチャ（346.8×327.8px タイルで直接フィル） */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	border-radius: var(--radius-md);
	padding: var(--space-40) var(--space-80) var(--space-56);
}
.classroom-avail__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-24);
}
.classroom-avail__crayon {
	display: block;
	width: 38px; height: 68px; /* heading-crayon-single.webp 76×136 の比率 */
	background: url("../../images/common/heading-crayon-single.webp") center / contain no-repeat;
}
.classroom-avail__title {
	margin: 0;
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-bold);
	color: var(--color-brown-text);
	line-height: var(--line-height-base);
}

.classroom-avail__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	width: 100%;
	max-width: 45rem; /* 720px */
}
.classroom-avail__date {
	margin: 0;
	text-align: right;
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-bold);
	color: var(--color-brown-text);
}

/* テーブル本体：白地・茶4pxの外枠・角丸。横方向の仕切りのみ。 */
.classroom-avail__table-wrap {
	border: 1px solid var(--color-brown-text);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-white);
}
.classroom-avail__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.classroom-avail__table th,
.classroom-avail__table td {
	padding: var(--space-16) var(--space-8);
	text-align: center;
	font-size: var(--font-size-h3-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-brown-text);
}
/* 事業区分の列（左端）は固定幅・右側に茶の仕切り。 */
.classroom-avail__corner,
.classroom-avail__svc {
	width: 16.25rem; /* 260px（Figmaの事業区分セル幅）。放デイ名が1行で収まる幅。 */
	border-right: 1px solid var(--color-brown-text);
}
.classroom-avail__corner { background: var(--color-bg-light-yellow); }
/* ヘッダ行・各データ行の下に茶の仕切り（最終行は外枠が担う）。 */
.classroom-avail__table thead tr { border-bottom: 1px solid var(--color-brown-text); }
.classroom-avail__table tbody tr:not(:last-child) { border-bottom: 1px solid var(--color-brown-text); }
/* ヘッダ行：フッターと同じイエロー地のクレヨン紙テクスチャ（346.8×327.8px タイル）。 */
.classroom-avail__table thead th {
	background-color: var(--color-bg-yellow);
	background-image: url("../../images/common/tex-yellow-deep.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
}

/* 事業区分セル：児発・放デイの intro と同じテクスチャ塗り＋白文字。 */
.classroom-avail__svc {
	color: var(--color-white);
	line-height: var(--line-height-snug);
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
}
/* 児発：jihatsu-intro と同じ緑テクスチャ。 */
.classroom-avail__svc--jihatsu {
	background-color: var(--color-accent-green-deep);
	background-image: url("../../images/jihatsu/divider-band-1-texture.webp");
	color: var(--color-white) !important;
}
/* 放デイ：houkago-intro と同じ水色テクスチャ。 */
.classroom-avail__svc--houkago {
	background-color: var(--color-accent-blue);
	background-image: url("../../images/houkago/intro-texture.webp");
	color: var(--color-white) !important;
}

/* 凡例 */
.classroom-avail__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-32);
	margin: 0;
	padding: 0;
	list-style: none;
}
.classroom-avail__legend li {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	color: var(--color-brown-text);
}
.classroom-avail__legend-mark { min-width: 1.25em; text-align: center; }
/* 記号とラベルの間の短い罫線（Figmaの仕切り線を再現） */
.classroom-avail__legend li::before { content: none; }
.classroom-avail__legend span + span { position: relative; padding-left: var(--space-16); }
.classroom-avail__legend span + span::before {
	content: ""; position: absolute; left: 0; top: 50%;
	width: var(--space-8); height: 2px; background: var(--color-brown-text); transform: translateY(-50%);
}

/* --- 施設情報テーブル ---------------------------------------------------- */
.classroom-info__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
}
.classroom-info__row {
	display: flex;
	align-items: center;
	gap: var(--space-72);
	padding: var(--space-16) var(--space-48);
	border-radius: var(--radius-sm);
	/* 背景色_オフホワイト地のクレヨン紙テクスチャ（346.8×327.8px タイルで直接フィル） */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	color: var(--color-brown-text);
}
.classroom-info__th {
	flex: 0 0 9em;
	margin: 0;
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-body);
}
.classroom-info__td {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-body);
}
.classroom-info__map {
	width: 100%;
	padding-block: var(--space-24);
	line-height: 0;
}
.classroom-info__map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 560 / 232;
	height: auto;
	border-radius: var(--radius-sm);
}

/* 波形ディバイダー（.classroom-divider）は c-cta-visit と常に対で使うため
   共通コンポーネント components/cta-visit.css へ移管（教室詳細・ご利用の流れで共用）。 */

/* --- レスポンシブ（モバイルファースト補正）----------------------------- */
@media (max-width: 768px) {
	.classroom-avail__head {
		gap: var(--space-8);
	}
	.classroom-body__inner { padding-inline: var(--space-16); gap: var(--space-24); }
	.classroom-body {
		gap: var(--space-24);
	}
	.classroom-avail { padding: var(--space-32) var(--space-24) var(--space-40); }
	/* SP では左右の子どもイラストは非表示 */
	.classroom-mv__fig { display: none; }

	/* 空き状況パネル（日付・テーブル・凡例）の縦間隔はSPで16pxに。 */
	.classroom-avail__panel { gap: var(--space-16); margin-top: var(--space-16);}

	/* 見出し：SPは小さめに（積み木アイコンも比率維持で縮小）。 */
	.classroom-avail__title { font-size: var(--font-size-h3); }
	.classroom-avail__crayon { width: 16px; height: 29px; }  /* 76:136 の比率維持 */

	/* 空き状況テーブル：事業区分の列幅を縮め、セル文字・○△×は 12.8px に。 */
	.classroom-avail__corner,
	.classroom-avail__svc { width: 6.5rem; }
	.classroom-avail__table th,
	.classroom-avail__table td { padding: var(--space-12) var(--space-4); font-size: var(--font-size-h6); }
	.classroom-avail__svc { font-size: var(--font-size-h6); }
	.classroom-avail__date { font-size: var(--font-size-xs); }

	/* 凡例：SPでも1行の横並びを保つ（フォントを小さく・間隔と記号–ラベル間を詰める）。 */
	.classroom-avail__legend { gap: var(--space-8); flex-wrap: nowrap; }
	.classroom-avail__legend li { font-size: var(--font-size-xs); white-space: nowrap; }
	.classroom-avail__legend span + span { padding-left: var(--space-8); }

	/* 施設情報：縦積み。 */
	.classroom-info__row { flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-16) var(--space-16); width: 100%; margin-top: var(--space-4); }
	.classroom-info__th { flex-basis: auto; font-size: var(--font-size-h6); }
	.classroom-info__td { font-size: var(--font-size-h6); }
	.classroom-info__map { padding: 0; }
}