/**
 * css/pages/top-gallery.css
 * ============================================================
 * A LEGEND 2：TOP Gallery Section
 * ============================================================
 *
 * 役割：
 * - TOPギャラリーセクションの構造とSplide Slider配置だけを担当します。
 * - カード背景 / 文字色 / フォント / 角丸 / 影 / タグ / ボタン / 見出しは、
 *   共通 post-card / section-heading / button / design tokens に委譲します。
 *
 * 設計方針：
 * - TOP Gallery固有のタイトル装飾や独自カードデザインは持ちません。
 * - スライダー時も中身は共通 .aleg2-post-card です。
 * - JS未実行時も横スクロール可能なカード一覧として表示できるようにします。
 */

.aleg2-top-gallery {
	position: relative;
	/*
	 * card.image_ratio はPHPのViewModelから --aleg2-card-image-ratio として渡されます。
	 * 未設定時だけ16:10へfallbackし、共通post-cardの比率制御へ接続します。
	 */
	--aleg2-card-image-ratio: var(--aleg2-top-gallery-card-ratio, 16 / 10);
	isolation: isolate;
	overflow: clip;
}

.aleg2-top-gallery__inner {
	width: min(100% - (var(--aleg2-container-padding, 24px) * 2), var(--aleg2-container-max, 1180px));
	margin-inline: auto;
}

.aleg2-top-gallery__grid,
.aleg2-top-gallery__slider {
	margin-top: clamp(24px, 4vw, 56px);
}

.aleg2-top-gallery__empty {
	margin: clamp(24px, 4vw, 48px) 0 0;
}

/**
 * ------------------------------------------------------------
 * Splide Slider構造
 * ------------------------------------------------------------
 *
 * 余白はSplideのgap optionを正とし、CSSのslide marginでは二重適用しません。
 * JS失敗時の最低限の見え方だけ、flex + overflow-x で保証します。
 */
.aleg2-top-gallery__slider {
	/* gapはPHP style属性またはJS Splide optionから反映します。 */
	--aleg2-top-gallery-slide-width: clamp(220px, 28vw, 360px);
}

.aleg2-top-gallery__viewport {
	overflow-x: auto;
	overflow-y: visible;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
}

.aleg2-top-gallery__viewport::-webkit-scrollbar {
	display: none;
}

.aleg2-top-gallery__list {
	display: flex;
	align-items: stretch;
	gap: var(--aleg2-top-gallery-slider-gap, 24px);
}

.aleg2-top-gallery__slider.is-initialized .aleg2-top-gallery__list {
	gap: 0;
}

.aleg2-top-gallery__slide {
	flex: 0 0 var(--aleg2-top-gallery-slide-width);
	width: var(--aleg2-top-gallery-slide-width);
	min-width: 0;
}

.aleg2-top-gallery__slide > .aleg2-post-card {
	height: 100%;
}

.aleg2-top-gallery__slider.is-slider-static .aleg2-top-gallery__viewport,
.aleg2-top-gallery__slider.is-slider-fallback .aleg2-top-gallery__viewport {
	overflow-x: auto;
}

.aleg2-top-gallery__slider.is-slider-static .aleg2-top-gallery__list,
.aleg2-top-gallery__slider.is-slider-fallback .aleg2-top-gallery__list {
	gap: var(--aleg2-top-gallery-slider-gap, 24px);
}

/**
 * reduced-motion。
 *
 * JS側でもAuto Scrollを止めますが、CSS側でも余計なtransform前提を持たないようにします。
 */
@media (prefers-reduced-motion: reduce) {
	.aleg2-top-gallery__slider,
	.aleg2-top-gallery__list {
		scroll-behavior: auto;
	}
}

@media (max-width: 767px) {
	.aleg2-top-gallery__slider {
		--aleg2-top-gallery-slide-width: min(78vw, 320px);
	}
}