/* -----------------------------------------
 * Article Card Component
 * 役割: 記事などを表示するクリッカブルなカードデザインのUIコンポーネント
 * ----------------------------------------- */

.article-card {
  border-radius: 0; /* 角丸を削除し完全な矩形に */
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition:
    transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* カードホバー時の浮き上がり・影の強調 */
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-300);
}

/* カードリンク全体をクリッカブル領域にする工夫（セマンティックなマークアップ用）*/
.article-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* サムネイル画像エリア */
.article-card__figure {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-bg);
  margin: 0;
}

.article-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ホバー時に画像を微拡大（奥行き感の演出） */
.article-card:hover .article-card__figure img {
  transform: scale(1.04);
}

/* 記事情報ボディエリア */
.article-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-2);
}

/* カテゴリバッジ */
/* カテゴリのテキストカラーによって背景を変える場合はTailwind併用、
     ここでは標準の阿蘇グリーン統一のバッジとする */
.badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 記事タイトル */
.article-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0;

  /* 複数行トランケート（2行で省略） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms ease;
}

/* フッター部（日付や読了時間） */
.article-card__meta {
  margin-top: auto; /* フレックスで下部に押しやる */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-3);
}

/* 順位表示用の拡張（人気ランキング用） */
.article-card--ranked {
  position: relative;
}

.article-card__rank {
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-accent-500);
  color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-lg);
  border-radius: 0; /* 円形・角丸をやめ、四角いバッジとする */
  box-shadow: var(--shadow-md);
  z-index: 10;
}