/**
 * css/components/card.css
 * ============================================================
 * A LEGEND 2：Card Base
 * ============================================================
 *
 * 役割：
 * - 汎用カード系の共通土台を定義します。
 * - content-card / post-card などの個別CSSが上書きしやすい軽量な基礎です。
 *
 * 今回の改修：
 * - 固定白半透明グラデーションを廃止し、--aleg2-glass-bg / --aleg2-glass-bg-strong へ接続します。
 * - 固定水色・紫グローを廃止し、--aleg2-glow-primary / --aleg2-glow-secondary へ接続します。
 * - 角丸を design.radius.card / media 由来の --aleg2-radius-card / --aleg2-radius-media へ接続します。
 * - 影を design.shadow.card / panel / soft 由来の --aleg2-shadow-card / --aleg2-shadow-panel へ接続します。
 * - hover移動量を content.card.hover_lift 由来の --aleg2-card-hover-lift へ接続します。
 * - 画像hover拡大率を content.card.image_hover_zoom 由来の --aleg2-card-image-hover-zoom へ接続します。
 * - 既存の .aleg2-card / .aleg2-content-card / 子要素クラスは維持します。
 */

.aleg2-card,
.aleg2-content-card {
	position: relative;
	display: block;
	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),
		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),
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

/**
 * カード内の装飾グロー。
 *
 * 旧コードでは rgba(142, 230, 255, 0.2) / rgba(182, 140, 255, 0.16) の固定色でした。
 * 今回は --aleg2-glow-primary / --aleg2-glow-secondary を使い、
 * デザイン設定のアクセント色・プリセットの方向性へ追従できるようにします。
 */
.aleg2-card::before,
.aleg2-content-card::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(
			circle at 18% 0%,
			var(--aleg2-glow-primary),
			transparent 36%
		),
		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状態。
 *
 * 旧コードでは常に translateY(-6px) でした。
 * content.card.hover_lift を --aleg2-card-hover-lift として受け取り、
 * カード共通のhover量を設定から変更できるようにします。
 */
.aleg2-card:hover,
.aleg2-content-card: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) * -1), 0);
}

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

/**
 * カード直下の要素は装飾レイヤーより前面へ出します。
 *
 * 既存挙動を維持します。
 */
.aleg2-card > *,
.aleg2-content-card > * {
	position: relative;
	z-index: 1;
}

/**
 * 汎用content-cardのメディア枠。
 *
 * 旧コードでは背景に rgba(255,255,255,0.06) を使っていました。
 * 今回は surface token に置換し、ライト/ダーク両方で破綻しにくくします。
 */
.aleg2-content-card__media {
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--aleg2-color-surface);
	border-radius: var(--aleg2-radius-media) var(--aleg2-radius-media) 0 0;
}

/**
 * カード画像。
 *
 * hover拡大率を content.card.image_hover_zoom 由来の
 * --aleg2-card-image-hover-zoom へ接続します。
 */
.aleg2-content-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--aleg2-duration-slow) var(--aleg2-ease-emphasized);
}

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

/**
 * カード本文。
 *
 * 既存の余白を維持します。
 */
.aleg2-content-card__body {
	padding: var(--aleg2-space-6);
}

.aleg2-content-card__title {
	margin-bottom: var(--aleg2-space-3);
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: var(--aleg2-font-size-lg);
	line-height: var(--aleg2-line-height-heading);
}

.aleg2-content-card__text {
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: var(--aleg2-line-height-body);
}

.aleg2-content-card__more {
	display: inline-flex;
	margin-top: var(--aleg2-space-5);
	color: var(--aleg2-color-link);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 800;
	letter-spacing: var(--aleg2-letter-spacing-wider);
	text-transform: uppercase;
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		opacity var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-content-card:hover .aleg2-content-card__more {
	color: var(--aleg2-color-link-hover);
}

/**
 * focus-visible。
 *
 * カードがaタグとして使われる場合に、キーボード操作でも現在位置が分かるようにします。
 */
.aleg2-card:focus-visible,
.aleg2-content-card: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 が付かないため、
 * カード固有のhoverグローも抑制します。
 */
body:not(.aleg2-bg-glow) .aleg2-card::before,
body:not(.aleg2-bg-glow) .aleg2-content-card::before {
	display: none;
}

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

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