/* ============================================================================
 * components/stats_card.css
 *
 * 汎用「統計カード」コンポーネント。4枚並列のメトリクス表示 + クリックで推移グラフ
 * モーダルを開くインタラクションパターン。
 *
 * - .projects-stats-cards-container : 4枚レイアウト（グリッド・レスポンシブ）
 * - .projects-stats-card             : 個別カードのガラスモーフィズム外枠
 * - .projects-stats-card-content/-text/-label/-value/-icon
 * - .presentations-stats-card-clickable : クリック可能 + ホバー浮き上がり + フォーカスリング
 *
 * 元はプロジェクト一覧（projects_index.css）とナレッジシェア（presentations.css）に
 * 散在。2026-05-10 に共通コンポーネント化に伴いここへ集約。
 *
 * 利用元:
 *   - app/views/app/projects/index.html.erb
 *   - app/views/app/presentations/mine.html.erb（4 カード trend モーダル連携）
 *   - app/views/app/presentations/_legacy_mine_index.html.erb
 *   - app/views/app/template_publications/index.html.erb（4 カード trend モーダル連携）
 *
 * 【ジュニアエンジニア向け解説】
 *   - 主要セレクタは .projects-stats-cards-container（4 枚のグリッド外枠）と
 *     .projects-stats-card（個別カード）。命名先頭が projects- なのは歴史的経緯。
 *   - 4 枚並びの色バリエーション (.blue / .gold / .green / .purple) は HTML 側で
 *     class を切り替えるだけで値・アイコン背景が切り替わる設計。
 *   - .presentations-stats-card-clickable は親 .projects-stats-card と組み合わせ、
 *     ホバーで微浮き上がり + キーボードフォーカスでアウトラインを出す。
 *     trend モーダルとの連携 JS は presentations_stats_trend.js を参照。
 *   - レスポンシブ閾値: 1024px で 2 列、640px で 1 列、480px で更にコンパクト化。
 *
 * 【リファクタリング基準】（コメント行は行数カウントから除外）
 *   1. 500行未満:  完璧
 *   2. 800行未満:  問題なし
 *   3. 1200行未満: 注意喚起。リファクタリング要検討
 *   4. 1200行以上: リファクタリング必須
 *   現在の実コード行数: 約 116 行（コメント除く、2026-05-11 計測） → 判定: 完璧
 *
 * 変更履歴:
 *   2026-05-10: ハードコード値を CSS 変数化（ダークピクセル完全一致を維持しながら
 *               ライト/ウッドテーマに自動追従）。
 *               - rgba(255,255,255,0.X)  → rgba(var(--surface-rgb), 0.X)
 *               - rgba(255,215,0,0.X)    → rgba(var(--gold-primary-rgb), 0.X)
 *               - #FFD700                → rgb(var(--gold-primary-rgb))
 *               - rgba(255,255,255,0.6)  → rgba(var(--surface-rgb), 0.6)
 *               セマンティック色（blue/green/purple）はテーマ非依存のためそのまま。
 *   2026-05-11: リファクタリング基準・ジュニア向け解説セクションを追加。
 * ============================================================================ */

/* ------------------------------------------------------------------------------
   セクション1: 統計カード
   📖 4枚の統計カードを横並びに配置
   📱 レスポンシブ: 1024px以下で2列、640px以下で1列
------------------------------------------------------------------------------ */

/* 統計カードコンテナ */
.projects-stats-cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

@media (max-width: 1024px) {
  .projects-stats-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .projects-stats-cards-container {
    grid-template-columns: 1fr;
  }
}

/* 統計カード */
.projects-stats-card {
  background: linear-gradient(135deg, rgba(var(--surface-rgb), 0.1) 0%, rgba(var(--surface-rgb), 0.05) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--surface-rgb), 0.1);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
}

.projects-stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(var(--gold-primary-rgb), 0.3);
}

.projects-stats-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.projects-stats-card-text {
  flex: 1;
}

.projects-stats-card-label {
  font-size: 14px;
  color: rgba(var(--surface-rgb), 0.6);
  margin: 0 0 8px 0;
}

.projects-stats-card-value {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.projects-stats-card-value.blue { color: #60A5FA; }
.projects-stats-card-value.gold { color: rgb(var(--gold-primary-rgb)); }
.projects-stats-card-value.green { color: #22C55E; }
.projects-stats-card-value.purple { color: #A855F7; }

.projects-stats-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.projects-stats-card-icon svg {
  width: 24px;
  height: 24px;
}

.projects-stats-card-icon.blue {
  background: rgba(96, 165, 250, 0.2);
  color: #60A5FA;
}

.projects-stats-card-icon.gold {
  background: rgba(var(--gold-primary-rgb), 0.2);
  color: rgb(var(--gold-primary-rgb));
}

.projects-stats-card-icon.green {
  background: rgba(34, 197, 94, 0.2);
  color: #22C55E;
}

.projects-stats-card-icon.purple {
  background: rgba(168, 85, 247, 0.2);
  color: #A855F7;
}

/* ---- クリック可能カード ---- */
.presentations-stats-card-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.presentations-stats-card-clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--gold-primary-rgb), 0.4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--gold-primary-rgb), 0.15);
}
.presentations-stats-card-clickable:focus-visible {
  outline: 2px solid rgb(var(--gold-primary-rgb));
  outline-offset: 2px;
}

/* ----------------------------------------
 * 2026-05-10: 小型スマホ追加調整（iPhone SE 等 320-480px）
 * 既存の 1024px / 640px ブレークポイントに加え、480px でアイコン・余白を更に縮小。
 * 横向きスマホ（短い高さ）でも縦積みで視認性を確保する。
 * ---------------------------------------- */
@media (max-width: 480px) {
  .projects-stats-cards-container {
    gap: 12px;
    margin-bottom: 24px;
  }
  .projects-stats-card {
    padding: 14px;
  }
  .projects-stats-card-label {
    font-size: 12px;
  }
  .projects-stats-card-value {
    font-size: 1.5rem;
  }
  .projects-stats-card-icon {
    width: 40px;
    height: 40px;
  }
  .projects-stats-card-icon svg {
    width: 20px;
    height: 20px;
  }
}