/**
 * css/components/post-card.css
 * ============================================================
 * A LEGEND 2：Post Card
 * ============================================================
 *
 * 役割：
 * - template-parts/components/post-card.php の投稿カードを装飾します。
 * - TOP / archive / related の共通カードとして使います。
 *
 * 今回の改修：
 * - カード背景・枠線・影・角丸をDesign Tokenへ接続します。
 * - 固定ダークoverlayを --aleg2-overlay-soft / --aleg2-overlay-strong へ置換します。
 * - メディア背景やplaceholderの固定水色・紫・白半透明を
 *   --aleg2-glow-primary / --aleg2-glow-secondary / --aleg2-color-surface へ置換します。
 * - hover移動量を テーマ標準値または装飾設定由来の --aleg2-card-hover-lift へ接続します。
 * - 画像hover拡大率を テーマ標準値由来の
 *   --aleg2-card-image-hover-zoom へ接続します。
 * - term背景の固定白半透明を --aleg2-glass-bg へ置換します。
 * - panel variant の固定白グラデーションを --aleg2-glass-bg 系へ置換します。
 * - 横並びlistカードで本文がグリッド幅・カード高を押し広げないよう、
 *   共通カード本文の min-size と長文折り返しの土台を補強します。
 * - 既存セレクタ・既存HTML構造・modifier は維持します。
 */

.aleg2-post-card {
	position: relative;
	height: 100%;
	overflow: hidden;
	background: var(--aleg2-color-surface);
	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:
		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);
}

/**
 * hover時のカード内overlay。
 *
 * 旧コードでは rgba(0,0,0,...) の固定ダークグラデーションでした。
 * 今回は overlay token を使い、Hero / media / card 系の暗幕表現を共通化します。
 */
.aleg2-post-card::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(
			180deg,
			transparent 0%,
			var(--aleg2-overlay-soft) 52%,
			var(--aleg2-overlay-strong) 100%
		);
	opacity: 0;
	transition: opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * hover状態。
 *
 * 旧コードでは translateY(-8px) 固定でした。
 * 今回は テーマ標準値または装飾設定由来の --aleg2-card-hover-lift を使います。
 */
.aleg2-post-card:hover {
	background: var(--aleg2-color-surface-strong);
	border-color: var(--aleg2-color-border-strong);
	box-shadow: var(--aleg2-shadow-panel);
	transform: translate3d(0, calc(var(--aleg2-card-hover-lift) * -1), 0);
}

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

/**
 * カード全体リンク。
 *
 * 既存構造を維持します。
 */
.aleg2-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--aleg2-color-text);
	text-decoration: none;
}

.aleg2-post-card__link:hover {
	color: var(--aleg2-color-text);
	text-decoration: none;
}

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

/**
 * メディア枠。
 *
 * 旧コードでは固定の水色/紫グラデーションでした。
 * 今回は glow token と surface token へ接続します。
 */
.aleg2-post-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--aleg2-card-image-ratio, 16 / 10);
	background:
		linear-gradient(
			135deg,
			var(--aleg2-glow-primary),
			var(--aleg2-glow-secondary)
		),
		var(--aleg2-color-surface);
}

/**
 * 画像・placeholder共通。
 */
.aleg2-post-card__image,
.aleg2-post-card__image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * 投稿カード画像。
 *
 * hover拡大率を テーマ標準値由来の
 * --aleg2-card-image-hover-zoom に接続します。
 */
.aleg2-post-card__image {
	transition: transform var(--aleg2-duration-slow) var(--aleg2-ease-emphasized);
}

.aleg2-post-card:hover .aleg2-post-card__image {
	transform: scale(var(--aleg2-card-image-hover-zoom));
}

/**
 * アイキャッチ未設定時のplaceholder。
 *
 * 旧コードでは固定の水色/紫/白半透明でした。
 * 今回は glow token と surface token へ接続し、プリセット変更へ追従させます。
 */
.aleg2-post-card__image-placeholder {
	background:
		radial-gradient(circle at 30% 20%, var(--aleg2-glow-primary), transparent 32%),
		radial-gradient(circle at 76% 78%, var(--aleg2-glow-secondary), transparent 38%),
		var(--aleg2-color-surface);
}

/**
 * 背景グローOFF時。
 *
 * design.background.glow がOFFの場合、bodyに .aleg2-bg-glow が付かないため、
 * placeholderやmediaの装飾も控えめなsurface表示へ寄せます。
 */
body:not(.aleg2-bg-glow) .aleg2-post-card__media,
body:not(.aleg2-bg-glow) .aleg2-post-card__image-placeholder {
	background: var(--aleg2-color-surface);
}

.aleg2-post-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	flex-direction: column;
	/*
	 * grid / flex の子要素として使われる場合の安全策です。
	 * 長いタイトル・抜粋・term が min-content 幅を主張すると、
	 * 横並びlistカードで本文列が画像列や外枠を押し広げます。
	 * min-size を0にして、各レイアウト側の幅・高さ制御へ素直に従わせます。
	 */
	min-width: 0;
	min-height: 0;
	padding: var(--aleg2-space-6);
}

.aleg2-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	align-items: center;
	margin-bottom: var(--aleg2-space-3);
	color: var(--aleg2-color-text-faint);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 800;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

.aleg2-post-card__type {
	color: var(--aleg2-color-primary);
}

.aleg2-post-card__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: var(--aleg2-font-size-lg);
	line-height: 1.35;
}

.aleg2-post-card__excerpt {
	margin-top: var(--aleg2-space-4);
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: var(--aleg2-line-height-body);
}

/**
 * 長文要素の基本安全策。
 *
 * 個別の表示行数はArchive / TOPなど呼び出し元のレイアウトCSSで制御します。
 * ここでは、カード共通部品として横方向の押し広げだけを防ぎます。
 */
.aleg2-post-card__title,
.aleg2-post-card__excerpt,
.aleg2-post-card__meta,
.aleg2-post-card__terms,
.aleg2-post-card__footer {
	min-width: 0;
	overflow-wrap: anywhere;
}

.aleg2-post-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--aleg2-space-4);
	color: var(--aleg2-color-text-faint);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 800;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

.aleg2-post-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	margin-top: auto;
	padding-top: var(--aleg2-space-5);
}

/**
 * 投稿カード内term。
 *
 * 旧コードでは rgba(255,255,255,0.06) 固定でした。
 * 今回は glass / border / radius token へ接続します。
 */
.aleg2-post-card__term {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0.22em 0.7em;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-xs);
	line-height: 1;
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-button);
}

/**
 * minimal variant。
 *
 * 既存modifierを維持します。
 * 背景・影を消す用途のため、ここでは透明のままにします。
 */
.aleg2-post-card--minimal {
	background: transparent;
	box-shadow: none;
}

/**
 * panel variant。
 *
 * 旧コードでは固定白半透明グラデーションでした。
 * 今回は glass token へ接続します。
 */
.aleg2-post-card--panel {
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong),
			var(--aleg2-glass-bg)
		);
}

/**
 * panel variant hover。
 *
 * panelらしい質感を維持しつつ、Design Tokenへ追従させます。
 */
.aleg2-post-card--panel:hover {
	background:
		linear-gradient(
			145deg,
			var(--aleg2-glass-bg-strong),
			var(--aleg2-color-surface)
		);
}

@media (max-width: 640px) {
	.aleg2-post-card {
		border-radius: var(--aleg2-radius-card);
	}

	.aleg2-post-card__body {
		padding: var(--aleg2-space-5);
	}
}

/* ------------------------------------------------------------
 * Card visual variants
 * ------------------------------------------------------------
 * TOP Galleryの card.style は、カード構造ではなく見た目プリセットとして扱います。
 * 旧互換の .aleg2-post-card--glass などと、新正規の
 * .aleg2-post-card--variant-* の両方へ効かせます。
 */
.aleg2-post-card--variant-glass,
.aleg2-post-card--glass {
	background:
		linear-gradient(145deg, var(--aleg2-glass-bg-strong), var(--aleg2-glass-bg));
	border-color: var(--aleg2-color-border);
	box-shadow: var(--aleg2-shadow-card);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

.aleg2-post-card--variant-panel,
.aleg2-post-card--panel {
	background:
		linear-gradient(145deg, var(--aleg2-color-surface-strong), var(--aleg2-glass-bg));
	border-color: var(--aleg2-color-border-strong);
	box-shadow: var(--aleg2-shadow-panel);
}

.aleg2-post-card--variant-cinematic,
.aleg2-post-card--cinematic {
	background: var(--aleg2-color-surface);
	border-color: var(--aleg2-color-border-strong);
	box-shadow: var(--aleg2-shadow-panel);
}

.aleg2-post-card--variant-plain,
.aleg2-post-card--plain {
	background: var(--aleg2-color-surface);
	box-shadow: none;
	backdrop-filter: none;
}

.aleg2-post-card--variant-minimal,
.aleg2-post-card--minimal {
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}