/**
 * css/components/related-posts.css
 * ============================================================
 * A LEGEND 2：Related Posts
 * ============================================================
 *
 * 役割：
 * - template-parts/components/related-posts.php の関連記事セクションを装飾します。
 *
 * 今回の改修：
 * - 関連記事は「上に画像、下にテキスト情報」のカード式を標準にします。
 * - 件数によって grid / slider のDOMを完全分岐せず、Splide互換のcarousel構造で扱います。
 * - PC / Tablet / SP の表示可能数を超えた画面幅だけ、JSがSplideをmountします。
 * - 1件以下は完全な静的carousel、2件以上はレスポンシブ切替候補として扱います。
 * - レスポンシブ切替候補は初期状態を静的gridにし、必要な画面幅だけ .is-related-slider-active へ切り替えます。
 * - Splide未読込 / JS無効 / 初期化前 / destroy後でも、CSSだけでPC3列 / Tablet2列 / SP1列が成立するfallbackを持たせます。
 * - 文字色・フォント・背景・影はDesign設定由来のCSS変数に追従します。
 */

/* ------------------------------------------------------------
 * Related posts section
 * ------------------------------------------------------------
 *
 * 詳細ページ下部に表示する関連記事セクションです。
 * padding / margin / background はDesign Tokenに接続し、
 * カラープリセット変更や背景グローOFFにも自然に追従させます。
 */
.aleg2-related-posts {
	position: relative;
	padding-block: var(--aleg2-section-padding-y-sm);
	margin-top: var(--aleg2-space-16);
	overflow: hidden;

	/*
	 * 関連記事専用のローカル変数です。
	 * :rootへ増やさずコンポーネント内へ閉じることで、他カードや一覧へ影響させません。
	 */
	--aleg2-related-posts-gap: clamp(18px, 2.6vw, 34px);
	--aleg2-related-posts-slider-gap: 24px;
	--aleg2-related-posts-visible-columns: 3;
	--aleg2-related-posts-image-ratio: 16 / 10;
}

/**
 * セクション背景の薄い面。
 * 固定色ではなく surface / overlay token を使い、
 * ライト・ダークどちらのプリセットでも浮きすぎないようにします。
 */
.aleg2-related-posts::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(
			180deg,
			transparent,
			var(--aleg2-overlay-soft),
			var(--aleg2-color-surface),
			transparent
		);
}

/**
 * 背景グローOFF時・装飾を抑えたいプリセット時にも破綻しないよう、
 * bodyに .aleg2-bg-glow が無い場合は、より控えめなsurface面にします。
 */
body:not(.aleg2-bg-glow) .aleg2-related-posts::before {
	background:
		linear-gradient(
			180deg,
			transparent,
			var(--aleg2-color-surface),
			transparent
		);
}

/* ------------------------------------------------------------
 * Section heading inside related posts
 * ------------------------------------------------------------
 */
.aleg2-related-posts .aleg2-section-heading {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin-inline: auto;
}

/* ------------------------------------------------------------
 * Unified related carousel
 * ------------------------------------------------------------
 *
 * 重要：
 * - related-posts.php はSplide互換構造を維持し、JSが現在画面幅でmount/destroyを判断します。
 * - 2件以上は data-aleg2-slider-responsive-toggle="true" を持つレスポンシブ切替候補です。
 * - JS無効 / Splide未初期化 / destroy後は、このCSS fallbackで静的grid表示を維持します。
 */
.aleg2-related-posts__carousel {
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-lg));
	margin-inline: auto;
	margin-top: var(--aleg2-space-8);

	/*
	 * 関連記事カード用のhover安全域。
	 * RelatedはSplide / static fallbackの両方を同じDOMで扱うため、
	 * carousel単位でtokenを持たせ、track側へ適用します。
	 */
	--aleg2-related-posts-interaction-safe-space: var(--aleg2-card-interaction-safe-space, 7px);
}

/**
 * レスポンシブ切替候補の .splide は、Splide本体CSSにより初期化前 visibility:hidden になる場合があります。
 * ただし関連記事は、JS失敗時でも本文下の回遊導線として表示されるべき要素です。
 *
 * サイト全体の .splide を上書きせず、関連記事スコープだけに限定してfallback表示を許可します。
 * 1件以下の完全な静的carouselは .splide を持たないため、この指定の対象外です。
 */
.aleg2-related-posts [data-aleg2-related-carousel].splide:not(.is-initialized):not(.is-rendered) {
	visibility: visible;
}

/**
 * 静的状態ではSplide専用classの有無に依存せず表示を成立させます。
 * レスポンシブ切替でdestroyされた後も、内部の splide__track / list / slide を通常gridとして扱います。
 */
.aleg2-related-posts__carousel--static {
	visibility: visible;
}

/**
 * Splide未初期化時も、trackのoverflowで巨大画像や横はみ出しを防ぎます。
 */
.aleg2-related-posts__track {
	overflow: hidden;
	padding-block: var(--aleg2-related-posts-interaction-safe-space);
	margin-block: calc(var(--aleg2-related-posts-interaction-safe-space) * -1);
}

/**
 * 静的状態では、trackを通常の表示コンテナとして扱います。
 * .splide が付くレスポンシブ候補でも、未起動・destroy後は関連記事スコープで通常表示へ戻します。
 */
.aleg2-related-posts__carousel--static .aleg2-related-posts__track {
	overflow: visible;
}

/**
 * 静的carousel、JS無効、Splide初期化前、destroy後のfallbackです。
 * レスポンシブ切替候補でも静的状態ではこのgridで成立するため、
 * タブレット・スマホで余ったカードが意図せず縦積みだけになる事故を防ぎます。
 */
.aleg2-related-posts__carousel:not(.is-initialized) .aleg2-related-posts__list,
.aleg2-related-posts__carousel--static .aleg2-related-posts__list,
.aleg2-related-posts__carousel.is-related-slider-static .aleg2-related-posts__list {
	display: grid;
	grid-template-columns: repeat(var(--aleg2-related-posts-visible-columns), minmax(0, 1fr));
	gap: var(--aleg2-related-posts-gap);
	align-items: stretch;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	transform: none !important;
}

/**
 * Splide未初期化時は、Splide側のinline widthが残っていてもカード幅をCSS gridへ戻します。
 * 初期化後は .is-initialized が付くため、Splideの計算済み幅を邪魔しません。
 */
.aleg2-related-posts__carousel:not(.is-initialized) .aleg2-related-posts__slide,
.aleg2-related-posts__carousel--static .aleg2-related-posts__slide,
.aleg2-related-posts__carousel.is-related-slider-static .aleg2-related-posts__slide {
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

/**
 * Splide初期化後のlistは、カード高を揃えるためstretchにします。
 */
.aleg2-related-posts__carousel.is-initialized .splide__list {
	align-items: stretch;
}

/**
 * slide自体はカードの高さに追従させます。
 */
.aleg2-related-posts__slide {
	height: auto;
	min-width: 0;
}

/* ------------------------------------------------------------
 * Related post cards
 * ------------------------------------------------------------
 *
 * 関連記事カードは related-posts.php から basic + below を明示しているため、
 * Gallery / News / Application の投稿タイプ別fallbackに引っ張られません。
 * ここではカードの高さ・画像比率・画像fitを関連記事スコープで補正します。
 */
.aleg2-related-posts .aleg2-post-card {
	height: 100%;
	min-width: 0;
}

.aleg2-related-posts .aleg2-post-card__link {
	height: 100%;
	min-width: 0;
}

/**
 * Applicationのアイコン画像やWordPressロゴfallbackのように、
 * 実寸や縦横比がカード向きではない画像でも、関連記事内では必ず同じ比率へ収めます。
 */
.aleg2-related-posts .aleg2-post-card__media {
	aspect-ratio: var(--aleg2-related-posts-image-ratio);
	overflow: hidden;
}

.aleg2-related-posts .aleg2-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aleg2-related-posts .aleg2-post-card__body {
	min-height: 0;
}

.aleg2-related-posts .aleg2-post-card__excerpt {
	color: var(--aleg2-color-text-muted);
}

.aleg2-related-posts__slide > .aleg2-post-card {
	height: 100%;
}

/* ------------------------------------------------------------
 * Related scoped slider controls
 * ------------------------------------------------------------
 *
 * 共通 slider.css の見た目を土台にしつつ、関連記事内にスコープして調整します。
 * これによりTOPスライダーや他コンポーネントへ影響させません。
 */
.aleg2-related-posts .splide__arrows {
	right: 0;
}

.aleg2-related-posts .splide__arrow {
	color: var(--aleg2-color-text);
	background: var(--aleg2-color-surface-strong);
	border-color: var(--aleg2-color-border);
	box-shadow: var(--aleg2-shadow-card);
}

.aleg2-related-posts .splide__arrow:hover,
.aleg2-related-posts .splide__arrow:focus-visible {
	color: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
}

.aleg2-related-posts .splide__pagination {
	margin-top: var(--aleg2-space-7);
}

.aleg2-related-posts .splide__pagination__page {
	background: var(--aleg2-color-border-strong);
}

.aleg2-related-posts .splide__pagination__page.is-active {
	background: var(--aleg2-color-primary);
}

/**
 * 静的状態では、操作UIを出しません。
 * レスポンシブ切替でSplideをdestroyした後に矢印・ドットが残っても、
 * 現在画面幅で表示可能数を超えていない場合は非表示に戻します。
 */
.aleg2-related-posts__carousel--static .splide__arrows,
.aleg2-related-posts__carousel--static .splide__pagination,
.aleg2-related-posts__carousel.is-related-slider-static .splide__arrows,
.aleg2-related-posts__carousel.is-related-slider-static .splide__pagination {
	display: none;
}

/**
 * Splide起動中のみ、操作UIを表示対象に戻します。
 * 共通slider.cssのデザインを邪魔せず、静的状態の非表示指定だけを解除します。
 */
.aleg2-related-posts__carousel.is-related-slider-active .splide__arrows,
.aleg2-related-posts__carousel.is-related-slider-active .splide__pagination {
	display: flex;
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 */
@media (max-width: 960px) {
	.aleg2-related-posts {
		--aleg2-related-posts-visible-columns: 2;
	}
}

@media (max-width: 640px) {
	.aleg2-related-posts {
		margin-top: var(--aleg2-space-10);
		--aleg2-related-posts-visible-columns: 1;
	}

	.aleg2-related-posts__carousel {
		margin-top: var(--aleg2-space-6);
	}
}