/**
 * css/components/post-navigation.css
 * ============================================================
 * A LEGEND 2：Post Navigation
 * ============================================================
 *
 * 役割：
 * - template-parts/components/post-navigation.php の前後投稿ナビを装飾します。
 *
 * 今回の改修：
 * - 既存の前後ナビカードを、アイキャッチ画像付きレイアウトへ拡張します。
 * - PCでは「PREV + 画像」「画像 + NEXT」の順序で表示します。
 * - SPではカード幅に合わせて縦積みにし、HTML順序を維持したまま
 *   「PREV + 画像」「画像 + NEXT」として自然に読めるようにします。
 * - 画像がない投稿でも、本文だけのカードとして成立するようにします。
 * - 前後投稿の取得条件・表示ON/OFF設定・他コンポーネントのCSSには触れません。
 * - 固定色・固定角丸・固定シャドウは避け、A LEGEND 2 のDesign変数へ接続します。
 */

/* ------------------------------------------------------------
 * Post navigation wrapper
 * ------------------------------------------------------------
 *
 * 詳細ページ本文下の「前の記事 / 次の記事」ナビです。
 *
 * 注意：
 * - 幅は --aleg2-container-sm を使い、本文幅と揃えます。
 * - 左右余白は --aleg2-container-padding を使い、design.layout.page_side に追従します。
 * - PCでは2カラム、SPでは1カラムにします。
 */
.aleg2-post-navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--aleg2-space-5);
	width: min(100% - (var(--aleg2-container-padding) * 2), var(--aleg2-container-sm));
	margin: var(--aleg2-space-12) auto var(--aleg2-space-16);
}

/* ------------------------------------------------------------
 * Navigation link card
 * ------------------------------------------------------------
 *
 * 前後投稿ナビのカード本体です。
 *
 * レイアウト方針：
 * - PREV はHTML側で「本文 → 画像」の順に出力します。
 * - NEXT はHTML側で「画像 → 本文」の順に出力します。
 * - CSSではカード内を2カラム化し、画像なし時は本文だけで自然に広げます。
 */
.aleg2-post-navigation__link {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aleg2-space-4);
	align-items: stretch;
	min-height: 132px;
	padding: var(--aleg2-space-5);
	overflow: hidden;
	color: var(--aleg2-color-text);
	text-decoration: none;
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong),
			var(--aleg2-glass-bg)
		);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
	box-shadow: var(--aleg2-shadow-card);
	backdrop-filter: var(--aleg2-backdrop-glass);
	transition:
		color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * 画像ありカードは、本文と画像を横並びにします。
 *
 * PREV / NEXT の左右順はHTML順序で制御しているため、
 * ここでは共通の2カラム指定だけを持たせます。
 */
.aleg2-post-navigation__link--has-image {
	grid-template-columns: minmax(0, 1fr) minmax(120px, 38%);
}

/**
 * NEXTは「画像 + NEXT本文」なので、1列目の画像幅を固定寄りにし、
 * 2列目の本文が残り幅を使えるようにします。
 */
.aleg2-post-navigation__link--next.aleg2-post-navigation__link--has-image {
	grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
}

/**
 * 画像なしカードは本文だけで成立させます。
 *
 * 空の画像枠を出さないことで、アイキャッチ未設定の記事でも
 * 未設定感を強調せず、現行に近いテキストナビとして読めます。
 */
.aleg2-post-navigation__link--no-image {
	grid-template-columns: minmax(0, 1fr);
}

/**
 * hover時の装飾グロー。
 *
 * design.background.glow と連動できるよう、固定色ではなく glow token を使用します。
 */
.aleg2-post-navigation__link::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 16% 0%, var(--aleg2-glow-primary), transparent 34%),
		radial-gradient(circle at 90% 100%, var(--aleg2-glow-secondary), transparent 34%);
	opacity: 0;
	transition: opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * hover状態。
 *
 * 前後ナビは投稿カードより控えめに動かしたいため、
 * content.card.hover_lift 由来の --aleg2-card-hover-lift を弱めて使用します。
 */
.aleg2-post-navigation__link:hover {
	color: var(--aleg2-color-text);
	text-decoration: none;
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong),
			var(--aleg2-color-surface)
		);
	border-color: var(--aleg2-color-border-strong);
	box-shadow: var(--aleg2-shadow-panel);
	transform: translate3d(0, calc(var(--aleg2-card-hover-lift) * -0.7), 0);
}

.aleg2-post-navigation__link:hover::before {
	opacity: 1;
}

/**
 * キーボード操作時のフォーカス表示。
 */
.aleg2-post-navigation__link:focus-visible {
	outline: none;
	border-color: var(--aleg2-color-primary);
	box-shadow:
		var(--aleg2-shadow-card),
		var(--aleg2-focus-ring);
}

/**
 * 背景グローOFF時。
 *
 * design.background.glow がOFFの場合、bodyに .aleg2-bg-glow が付かない設計です。
 * それに合わせて前後投稿ナビ固有のグローも停止します。
 */
body:not(.aleg2-bg-glow) .aleg2-post-navigation__link::before {
	display: none;
}

/* ------------------------------------------------------------
 * Card inner elements
 * ------------------------------------------------------------
 *
 * body / media は装飾レイヤーより前面に置きます。
 */
.aleg2-post-navigation__body,
.aleg2-post-navigation__media {
	position: relative;
	z-index: 1;
}

/**
 * テキストブロック。
 *
 * 長いタイトルでもカード外へはみ出さないよう、min-width: 0 を必ず持たせます。
 */
.aleg2-post-navigation__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	gap: var(--aleg2-space-2);
}

/**
 * 次の記事側。
 *
 * 既存挙動を維持し、PCでは右寄せにします。
 */
.aleg2-post-navigation__link--next .aleg2-post-navigation__body {
	align-items: flex-end;
	text-align: right;
}

/**
 * 画像枠。
 *
 * 画像比率を固定し、前後投稿のアイキャッチ比率が混在しても
 * ナビカード全体の高さが暴れにくいようにします。
 */
.aleg2-post-navigation__media {
	display: block;
	min-width: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	align-self: stretch;
	border-radius: calc(var(--aleg2-radius-card) * 0.72);
	background: var(--aleg2-color-surface);
	box-shadow: inset 0 0 0 1px var(--aleg2-color-border);
}

/**
 * アイキャッチ画像。
 *
 * object-fit: cover により、gallery_card 等のトリミング済み画像も
 * URL fallback画像も同じカード比率に収めます。
 */
.aleg2-post-navigation__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		filter var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-post-navigation__link:hover .aleg2-post-navigation__image {
	filter: saturate(1.08) contrast(1.04);
	transform: scale(1.035);
}

/**
 * 前/次ラベル。
 *
 * 英字装飾扱いとして latinフォントとprimary色を使います。
 */
.aleg2-post-navigation__label {
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	letter-spacing: var(--aleg2-letter-spacing-wider);
	text-transform: uppercase;
}

/**
 * 投稿タイトル。
 *
 * 詳細ページ内の見出し要素として、heading tokenへ接続します。
 */
.aleg2-post-navigation__title {
	min-width: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: var(--aleg2-font-size-lg);
	font-weight: 800;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/**
 * hover時はタイトルをlink-hoverへ寄せ、クリック可能であることを示します。
 */
.aleg2-post-navigation__link:hover .aleg2-post-navigation__title {
	color: var(--aleg2-color-link-hover);
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存のSP 1カラム化を維持します。
 */
@media (max-width: 720px) {
	.aleg2-post-navigation {
		grid-template-columns: 1fr;
	}
}

/**
 * 狭い画面ではカード内も縦積みにします。
 *
 * HTML順序を維持するため、PREVは「本文 → 画像」、NEXTは「画像 → 本文」のままです。
 */
@media (max-width: 560px) {
	.aleg2-post-navigation__link,
	.aleg2-post-navigation__link--has-image,
	.aleg2-post-navigation__link--next.aleg2-post-navigation__link--has-image {
		grid-template-columns: 1fr;
	}

	.aleg2-post-navigation__link--next .aleg2-post-navigation__body {
		align-items: flex-start;
		text-align: left;
	}
}