/**
 * 記事カード（コラム・Tips / インタビュー）共通スタイル拡張
 *
 * 既存の article-card 基本スタイルは以下に分散して定義されている:
 *   - list-view.css   : .list-grid__item .article-card*       (/articles 等のグリッド)
 *   - front-page.css  : .home-interview-item .article-card*    (TOP の横スクロールレール)
 *   - article-detail.css : .article-related .article-card*     (記事詳細の関連セクション)
 *
 * 本ファイルでは、それらに共通して必要な「カード末尾の操作行
 * （日付 + リアクション件数 + ブックマーク）」と、Newラベル等、
 * 文脈に依らないスタイルだけを担当する。
 */

/*
 * カード末尾の1行レイアウト: 日付 / リアクション件数 / ブックマーク
 * thread-card との見た目統一のため、行を分けず flex 横並びに統一する。
 */
.article-card__footer {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-2);
	min-width: 0;
}

/*
 * 日付は左端。
 * list-view.css の .list-grid__item .article-card__date { margin-top: auto } は
 * date が body の最後に置かれていた時代の名残で、現在は footer 内に移したため打ち消す。
 * .article-card を1段階噛ませて詳細度を (0, 3, 0) に上げて確実に上書きする。
 */
.article-card .article-card__footer .article-card__date {
	margin: 0;
	flex: 0 0 auto;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted, var(--color-text-secondary));
	white-space: nowrap;
}

/* リアクション件数: 日付の右側。bookmark とまとめて右寄せにするため margin-left:auto */
.article-card__reactions {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-2);
	margin-left: auto;
	min-width: 0;
}

.article-card__reaction {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

/*
 * リアクションアイコン: thread-card と統一してモノクロ表示。
 * カラーアイコン PNG を grayscale フィルタで脱色し、軽く透過してサブ要素っぽく。
 */
.article-card__reaction-icon {
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	object-fit: contain;
	opacity: 0.88;
	filter: grayscale(1);
}

.article-card__reaction-label {
	white-space: nowrap;
	color: var(--color-text-secondary);
}

.article-card__reaction-count {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

/* カード上のブックマークボタン（コンパクト 32x32） */
.article-card__bookmark.bookmark-btn--card {
	flex: 0 0 auto;
	background: var(--color-base-1);
}

/* 関連セクション（.article-related .article-card__body）でも footer を底に張り付かせる */
.article-related .article-card__body {
	display: flex;
	flex-direction: column;
}

.article-related .article-card__footer {
	margin-top: auto;
}

/*
 * 狭幅対応: SP では「いいね/共感/学び」のテキストラベルを隠して
 * アイコン + 件数のみ表示にし、日付・リアクション・ブックマークが1行に収まるようにする。
 * thread-card の SP 表示と同様の挙動。
 */
@media (max-width: 768px) {
	.article-card__footer {
		gap: var(--space-1);
	}

	.article-card__reactions {
		gap: var(--space-2);
	}

	.article-card__reaction-label {
		display: none;
	}

	.article-card__reaction {
		font-size: var(--font-size-xs);
		gap: 2px;
	}
}