/* ================================================================================
 * ファイル名: app/assets/stylesheets/landing_philosophy.css
 * 📊 リファクタリング基準（コメント行は行数カウントから除外）
 *   ✅ 500行未満: 完璧
 *   ✅ 800行未満: 問題なし
 *   ⚠️  1200行未満: 注意喚起・リファクタリング要検討
 *   🚨 1200行以上: リファクタリング必須
 * 現在のコード行数: 約65行（コメント除く） / 総行数 89行 → ✅ 完璧
 *
 * 🎯 作成日: 2026-05-03（Phase 2 セクション別分離）
 * 📝 目的: ランディングページ 開発哲学セクション（中央揃えのテキスト + 署名）
 *
 * 【分離元】landing.css のセクション10（開発哲学）を抽出
 *
 * 【セクション構成】
 *   1. landing-philosophy ベース背景
 *   2. content（max-width: 1000px の中央揃えコンテナ）
 *   3. title（グラデーションテキスト）
 *   4. text（本文段落 + paragraph 間隔）
 *   5. signature（署名）
 *   6. レスポンシブ（768px / 480px でタイトル余白縮小）
 *
 * 【ジュニアエンジニア向け解説】
 *   - clamp(2.25rem, 4vw, 3rem) はビューポート幅に応じてフォントサイズが動的に変動
 *   - -webkit-background-clip: text + -webkit-text-fill-color: transparent でテキストにグラデ適用
 *
 * 【関連ファイル】
 *   - app/assets/stylesheets/landing.css（CSS変数・ベーススタイル）
 *   - app/views/landing/sections/_philosophy.html.erb
 *
 * 【変更履歴】
 *   2026-05-03: 新規作成（landing.css のセクション10 から分離 + レスポンシブを本ファイルに集約）
 * ================================================================================ */

/* ----------------------------------------
   開発哲学セクション
   中央揃え（max-width: 1000px）のテキストコンテンツ。
   開発者の想いや署名を表示。背景は --landing-bg-secondary。
   ---------------------------------------- */
.landing-philosophy {
  background: var(--landing-bg-secondary);
}

.landing-philosophy__content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.landing-philosophy__title {
  font-family: var(--landing-font-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 96px;
  line-height: 1.3;
  background: linear-gradient(135deg, var(--landing-text), var(--landing-text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-philosophy__text {
  color: var(--landing-text-muted);
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 1000px;
  margin: 0 auto 32px;
}

.landing-philosophy__text p {
  margin-bottom: 20px;
}

.landing-philosophy__signature {
  margin-top: 40px;
}

.landing-philosophy__signature-text {
  font-style: italic;
  color: var(--landing-text-muted);
}

/* ----------------------------------------
   レスポンシブ
   ---------------------------------------- */
@media (max-width: 768px) {
  .landing-philosophy__title {
    margin-bottom: 48px;
  }

  .landing-philosophy__text p {
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .landing-philosophy__title {
    margin-bottom: 32px;
  }

  .landing-philosophy__text p {
    margin-bottom: 12px;
  }
}