/*
 * 動く部品の土台: メインビジュアルのクロスフェード（c-hero-slider）と横スクロールのカルーセル（c-carousel）。
 * どちらも JS が無くても成り立つ（ヒーローは 1 枚目を表示・カルーセルは指で横に送れる）。動かすのは assets/js/main.js。
 */
@layer components {
	/* ---------- メインビジュアル: 画像を重ね、is-active の 1 枚だけ見せる ---------- */
	/*
	 * 高さ＝画面幅 × XD の縦横比（上限は画面の高さ・PC の下限は 560）。
	 * aspect-ratio＋min/max-height で書くと、高さの制限が比率を通して幅に移り、768px で横にはみ出し・縦の短い画面で幅が縮む（実測）ので高さで書く
	 */
	.c-hero-slider {
		position: relative;
		overflow: hidden;
		height: min(100vw * 653 / 375, 100svh); /* XD: SP 375×653 */
	}

	.c-hero-slider__item {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity var(--dur-fade) var(--ease);
	}

	.c-hero-slider__item.is-active {
		opacity: 1;
	}

	.c-hero-slider__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/*
	 * ---------- カルーセル: scroll-snap のトラック＋前へ / 次へ（無限ループは assets/js/main.js が複製を足して実現） ----------
	 * カードの幅・間隔・矢印の位置は使う側（40-top.css / 41-sub.css）がカスタムプロパティで渡す:
	 * --carousel-item-w（カードの幅）/ --carousel-gap（間隔）/ --carousel-offset（基準位置＝トラック左端から基準カードの左端まで。c-carousel--center なら不要）
	 * / --carousel-arrow-x（矢印の左右の位置。c-carousel--center なら不要）/ --carousel-arrow-y（矢印の中心の高さ）/ --carousel-arrow-size（丸の直径。c-carousel--center のときだけ）
	 * / --carousel-grid-gap（PC で格子にするときの列の間隔。c-carousel--grid-pc のときだけ）
	 */
	.c-carousel {
		position: relative;
	}

	.c-carousel__track {
		position: relative;
		display: flex;
		gap: var(--carousel-gap, 0);
		scroll-padding-inline-start: var(--carousel-offset, 0); /* 基準位置＝snap の左端。JS は同じ値を probe 要素の幅で px に解決して使う */
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.c-carousel__track::-webkit-scrollbar {
		display: none;
	}

	.c-carousel__item {
		flex: none;
		width: var(--carousel-item-w, auto);
		scroll-snap-align: start; /* 基準位置（padding の内側）にカードの左端を合わせる */
	}

	/* JS が --carousel-offset を px に解決するための見えない要素（幅＝基準位置） */
	.c-carousel__probe {
		position: absolute;
		top: 0;
		left: 0;
		width: var(--carousel-offset, 0);
		height: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/* カードが 1 枚だけのときは矢印を出さない（JS が is-static を付ける） */
	.c-carousel.is-static .c-carousel__prev,
	.c-carousel.is-static .c-carousel__next {
		display: none;
	}

	/* トラックは横スクロール（overflow-x: auto で縦も切り取られる）なので、外側に出るリングの上下が切れる。中のリンクのリングは内側に描く */
	.c-carousel__track :focus-visible {
		outline-offset: calc(var(--bw-icon) * -1);
	}

	.c-carousel__prev,
	.c-carousel__next {
		position: absolute;
		top: var(--carousel-arrow-y, 50%);
		z-index: var(--z-raise);
		transform: translateY(-50%);
	}

	.c-carousel__prev {
		left: var(--carousel-arrow-x, 0);
	}

	.c-carousel__next {
		right: var(--carousel-arrow-x, 0);
	}

	/*
	 * 中央寄せ（SP Blog・SP Concept・下層ブログ SP）: 基準カードを画面の中央に置き、矢印の丸の中心をそのカードの縁に置く。
	 * 使う側は --carousel-item-w（カードの幅）と --carousel-arrow-size（丸の直径）を渡す
	 */
	.c-carousel--center {
		--carousel-offset: calc((100% - var(--carousel-item-w)) / 2);
		--carousel-arrow-x: calc((100% - var(--carousel-item-w) - var(--carousel-arrow-size)) / 2);
	}

	@media (min-width: 768px) {
		.c-hero-slider {
			height: clamp(560px, 100vw * 1000 / 1920, 100svh); /* XD: PC 1920×1000・下限 560 は設計書 §2-3 */
		}

		/*
		 * SP はカルーセル・PC は 3 列の格子（TOP Blog・下層ブログ。XD の PC は 3 枚を 1 行に並べる）。列の間隔は使う側が --carousel-grid-gap で渡す。
		 * 格子では横スクロールをやめ、JS が実カードの前後に足す複製（c-carousel__item--clone）を出さない（出すと 3 件が 9 枚・3 行に並ぶ）。
		 * 前へ / 次へのボタンは使う側で u-sp-only にして PC では出さない。SP で画面の端まで広げる負の margin は使う側が PC で 0 に戻す
		 */
		.c-carousel--grid-pc .c-carousel__track {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			column-gap: var(--carousel-grid-gap, 0);
			overflow: visible;
		}

		.c-carousel--grid-pc .c-carousel__item {
			width: auto; /* 列の幅に合わせる（SP のカード幅 --carousel-item-w を使わない） */
		}

		.c-carousel--grid-pc .c-carousel__item--clone {
			display: none;
		}
	}
}