/**
 * トップの写真（hero-slider）— 構造層
 *
 * D3 仕分け (2026-07-14 Phase 3-8): 残置 = 帯のアスペクト比 / スライドの重ね合わせ /
 * 表示切替 (opacity の base → .is-active チェーン + フェード transition) /
 * object-fit / 矢印の配置・サイズ・出し入れ / separator の配置。
 * 意匠 (スクリム濃度・矢印色・波の色と重なり・Ken Burns ズーム) はテーマ側
 * css/seijuji.css Part AR (仕分け表: designs/theme.md)。
 *
 * transition / animation の仕分け方針:
 *   フェード transition と 矢印のスライドインは **表示切替そのものを構成する**
 *   ため構造層。純粋な装飾効果 (hover の濃度変化・Ken Burns ズーム) は意匠層。
 *
 * D4: 色は var(--seijuji-hero-*, fallback) 参照のみ (トークン定義は Part AR)。
 */

/* ===========================================================
   帯（ルート）
   =========================================================== */
.seijuji-hero {
	position: relative;
	overflow: hidden; /* PC で画面外に退避した矢印を隠す + 横スクロール防止 */
	/* 内部の z-index (矢印・波 = 100) を帯の中に閉じ込める。これが無いと帯は
	   スタッキングコンテキストを作らないため、矢印・波が sticky ヘッダ (同じく
	   z-index: 100) と同じ土俵で同点になり、DOM で後ろにある波がヘッダの上に
	   乗ってしまう (2026-07-14 に TOP で user 報告)。テーマ側の値に依存せず、
	   帯の中だけで重なりが完結する構造にする */
	isolation: isolate;
}

/* ビューポート = 写真の帯。aspect-ratio で高さを固定し、写真の縦横比が
   バラバラでも（先生が任意の写真を入れても）レイアウトが跳ねないようにする。
   4/3 は移行前の本番（Emanon 期）の実測値（PC 1280→960px / SP 390→293px）と同じ。 */
.seijuji-hero__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
}

/* スライドは全部重ねて置き、opacity で切り替える（フェード） */
.seijuji-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.5s ease-in-out; /* = data-speed 1500ms 相当 */
}
.seijuji-hero__slide.is-active {
	opacity: 1;
}

/* 写真は帯いっぱいに敷き詰める（縦横比が違っても隙間を作らない） */
.seijuji-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 写真の上に乗せるスクリム（濃度・色は Part AR） */
.seijuji-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ===========================================================
   前後の矢印（白いシェブロン）
   -----------------------------------------------------------
   SP: 帯の内側 8px に常時表示。
   PC: 既定は帯の外（-32px）に退避 = overflow:hidden で見えない。
       帯をホバーすると内側 32px までスライドインする（移行前の本番 = Emanon 期と同挙動）。
   =========================================================== */
.seijuji-hero__arrow {
	position: absolute;
	top: 50%;
	width: 20px;
	height: 20px;
	padding: 0;
	background-color: transparent;
	border-style: solid;
	border-width: 3px 3px 0 0; /* 上辺 + 右辺 → 回転させてシェブロンに */
	border-color: var(--seijuji-hero-arrow, #fff);
	border-radius: 0;
	cursor: pointer;
	z-index: 100;
	transition: left 0.2s ease-in, right 0.2s ease-in;
}
.seijuji-hero__arrow--prev {
	left: 8px;
	transform: translateY(-50%) rotate(-135deg);
}
.seijuji-hero__arrow--next {
	right: 8px;
	transform: translateY(-50%) rotate(45deg);
}
.seijuji-hero__arrow:focus-visible {
	outline: 2px solid var(--seijuji-hero-arrow, #fff);
	outline-offset: 4px;
}

@media screen and (min-width: 600px) {
	.seijuji-hero__arrow {
		width: 23px;
		height: 23px;
	}
	.seijuji-hero__arrow--prev {
		left: -32px; /* 既定は帯の外（見えない） */
	}
	.seijuji-hero__arrow--next {
		right: -32px;
	}
	.seijuji-hero:hover .seijuji-hero__arrow--prev,
	.seijuji-hero__arrow--prev:focus-visible {
		left: 32px;
	}
	.seijuji-hero:hover .seijuji-hero__arrow--next,
	.seijuji-hero__arrow--next:focus-visible {
		right: 32px;
	}
}

/* ===========================================================
   下端の波（separator）— 帯とページ本体のつなぎ
   =========================================================== */
.seijuji-hero__separator {
	position: absolute;
	bottom: -3px;
	width: 100%;
	height: 60px;
	z-index: 100;
	pointer-events: none;
	fill: var(--seijuji-hero-separator, #f7c96c);
}
@media screen and (min-width: 600px) {
	.seijuji-hero__separator {
		height: 120px;
	}
}

/* 動きを減らす設定の端末では自動送りの見た目もおとなしくする
   （自動送り自体の停止は JS 側で行う） */
@media (prefers-reduced-motion: reduce) {
	.seijuji-hero__slide {
		transition: none;
	}
}