/* ============================================================================
 * components/page_header.css
 *
 * 汎用「ページヘッダ + セグメント切替」コンポーネント。
 * - .ks-dashboard / .ks-dashboard-header / .ks-dashboard-title / .ks-dashboard-subtitle
 *   / .ks-dashboard-actions
 * - .ks-segment / .ks-segment-item / .ks-segment-icon / .ks-segment-label
 *
 * 元はナレッジシェアダッシュボード用。2026-05-10 に共通コンポーネント化に伴い
 * presentations.css から抽出。
 *
 * 利用元:
 *   - shared/components/_page_header.html.erb
 *   - shared/components/_segment_switch.html.erb
 *   - app/views/app/presentations（ナレッジシェア）
 *   - app/views/app/template_marketplace
 *   - app/views/app/template_publications
 *
 * 【ジュニアエンジニア向け解説】
 *   - 主要セレクタは .ks-dashboard 系（ダッシュボード外枠）と .ks-segment 系
 *     （タブ風セグメント切替）。
 *   - .ks-dashboard はページ最上部のヘッダ + コンテンツのギャップを var(--space-lg)
 *     で統一する。.projects-stats-cards-container / .ks-filter-form の独自 margin は
 *     ここで打ち消し、親 gap だけで間隔を統一。
 *   - .ks-segment-item.is-active はゴールドグラデ背景 + 暗色文字。ライトテーマでは
 *     暗色文字が見えづらくなるため、最下部でブラウンゴールド + 白文字にオーバーライド。
 *   - safe-area-inset-bottom は iOS Safari のホームインジケータ領域回避用。
 *
 * 【リファクタリング基準】（コメント行は行数カウントから除外）
 *   1. 500行未満:  完璧
 *   2. 800行未満:  問題なし
 *   3. 1200行未満: 注意喚起。リファクタリング要検討
 *   4. 1200行以上: リファクタリング必須
 *   現在の実コード行数: 約 149 行（コメント除く、2026-05-11 計測） → 判定: 完璧
 *
 * 変更履歴:
 *   2026-05-10: ライトテーマ向けに `.ks-segment-item.is-active` のオーバーライドを
 *               追加。ダーク/ウッドでは `var(--bg-primary)` (= 暗色) がゴールド
 *               グラデ背景上で十分なコントラストを持つが、ライトでは
 *               `var(--bg-primary) = #f8f9fa` (= ほぼ白) となり、ゴールドグラデ
 *               (#fbbf24→#f59e0b) 上で視認性が極端に低下していたため、ブラウン
 *               ゴールドグラデ + 白文字に置換（既存 `.luxury-btn-primary` のライト
 *               オーバーライドと同パターン）。ダーク・ウッド側には変更なし。
 *   2026-05-11: リファクタリング基準・ジュニア向け解説セクションを追加。
 * ============================================================================ */

/* ----- ダッシュボードコンテナ -----
   セクション間の間隔は --space-lg (24px) — マイシェア（mine.html.erb の
   margin-bottom: 24px）と揃える。以前 --space-2xl (48px) だったが、ヘッダ ×
   統計カード × 検索 × カテゴリ × 各ブロックの間が広すぎる印象だったため
   2026-05-06 に縮小。 */
.ks-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.ks-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  /* margin-bottom は親 .ks-dashboard の gap が担うため不要（旧: var(--space-md)）。
     重複して指定すると 24 + 16 = 40px の余白になり広すぎる。 */
}

/* ダッシュボード内では子要素のグローバル margin を打ち消し、親の gap (24px) で
   間隔を統一する（マイシェアと同じ詰まり具合）。.projects-stats-cards-container
   と .ks-filter-form は別画面用にデフォルト margin を持つため、ここで上書きする。 */
.ks-dashboard > .projects-stats-cards-container {
  margin-top: 0;
  margin-bottom: 0;
}

.ks-dashboard > .ks-filter-form {
  margin-top: 0;
  margin-bottom: 0;
}

.ks-dashboard-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ks-dashboard-title {
  font-size: 30px;
  font-weight: 700;
  background: var(--gold-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0;
  line-height: 1.2;
}

.ks-dashboard-subtitle {
  font-size: 14px;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.5;
}

.ks-dashboard-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ----- セグメント（公開ライブラリ ⇄ マイシェア） ----- */
.ks-segment {
  display: inline-flex;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--bg-surface);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-full);
  align-self: flex-start;
}

.ks-segment-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.ks-segment-item:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.ks-segment-item.is-active {
  background: var(--gold-gradient-primary);
  color: var(--bg-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.ks-segment-item.is-active:hover {
  /* アクティブ時はゴールド背景を維持（hover で薄くしない） */
  color: var(--bg-primary);
}

.ks-segment-emoji {
  font-size: 16px;
  line-height: 1;
}

/* セグメント切替（公開ライブラリ / マイシェア）のモノクロアイコン。
   .ks-segment-item から色を継承し、is-active 時はアクティブ色になる。 */
.ks-segment-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}

.ks-segment-label {
  white-space: nowrap;
}

/* ----------------------------------------
 * 2026-05-10: モバイル対応（追加）
 * - 768px 以下: タイトル文字を縮小、segment + actions を縦並び可能に
 * - 480px 以下: 更にコンパクト化、segment-label をアイコンのみへ縮退
 * - 横向きスマホ（max-height: 500px）: 余白を切り詰め
 * - safe-area-inset-bottom を .ks-dashboard 末尾余白に加算（iOS gesture bar 対策）
 * ---------------------------------------- */
@media (max-width: 768px) {
  .ks-dashboard-title {
    font-size: 24px;
  }
  .ks-dashboard-subtitle {
    font-size: 13px;
  }
  .ks-segment-item {
    padding: var(--space-sm) var(--space-md);
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .ks-dashboard {
    gap: var(--space-md);
  }
  .ks-dashboard-title {
    font-size: 22px;
  }
  .ks-dashboard-actions {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
  .ks-segment-item {
    padding: 6px 10px;
    font-size: 12px;
  }
  .ks-segment-label {
    /* 320-480px 幅では segment ラベルが詰まるため、アイコンのみで識別可能にする。
       aria-label / role="tab" は維持されるためアクセシビリティは確保。 */
    display: none;
  }
  .ks-segment-icon {
    width: 18px;
    height: 18px;
    opacity: 1;
  }
}

/* 横向きスマホ（高さが極端に短い）対策 */
@media (max-height: 500px) and (orientation: landscape) {
  .ks-dashboard {
    gap: var(--space-sm);
  }
  .ks-dashboard-title {
    font-size: 22px;
  }
  .ks-dashboard-subtitle {
    font-size: 12px;
  }
}

/* iOS Safari のホームインジケータ / アドレスバー領域の確保。
   .ks-dashboard 末尾余白に safe-area-bottom を加算する。
   --safe-area-* 変数は theme_variables.css の :root で定義済み
   （未対応端末は env() のフォールバックで 0px）。 */
.ks-dashboard {
  padding-bottom: var(--safe-area-bottom, 0px);
}

/* ----------------------------------------
 * 2026-05-10: ライトテーマ オーバーライド
 *   `.ks-segment-item.is-active` のテキスト色は base で var(--bg-primary) を
 *   使うが、ライトでは ≈ 白となりゴールドグラデ背景上で不可視となる。
 *   既存 .luxury-btn-primary のライトオーバーライドと同じく、ブラウンゴールド
 *   グラデ + 白文字に置換する。ダーク・ウッドには影響しない。
 * ---------------------------------------- */
[data-theme="light"] .ks-segment-item.is-active,
[data-theme="light"] .ks-segment-item.is-active:hover {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.95) 0%, #d97706 100%);
  color: #fff;
}