/* ==========================================================================
   Who We Are - 統合CSSファイル
   全テンプレート共通の統一スタイルシート
   
   このファイルは以下のコンポーネントを統合します：
   - 統一CSS変数システム
   - 共通コンポーネント
   - テーマシステム
   ========================================================================== */

/* ==========================================================================
   1. 統一CSS変数システム
   ========================================================================== */
@import url('./core/variables.css');

/* ==========================================================================
   2. 共通コンポーネント
   ========================================================================== */
@import url('./components/lightbox.css');
@import url('./components/bandconnect-logo.css');
@import url('./components/modal.css');
@import url('./components/animations.css');

/* ==========================================================================
   2.5. 強化されたコア機能（Phase 4）
   ========================================================================== */
@import url('./core/responsive.css');
@import url('./core/accessibility.css');

/* ==========================================================================
   3. ベーススタイル
   ========================================================================== */

/* リセットとベース */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-sans);
  line-height: var(--line-height-normal);
  color: var(--theme-text-primary, var(--color-primary-900));
  background-color: var(--theme-bg-primary, var(--color-primary-50));
  transition: var(--transition-colors);
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* フォーカス管理 */
*:focus {
  outline: 2px solid var(--theme-accent-primary, var(--color-accent-500));
  outline-offset: 2px;
}

/* 画像の最適化 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   4. レイアウトコンポーネント
   ========================================================================== */

/* コンテナ */
.container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

/* グリッドシステム */
.grid {
  display: grid;
  gap: var(--spacing-4);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ギャラリー専用の固定サイズグリッド */
.grid-gallery-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ギャラリー用レスポンシブ対応 */
@media (max-width: 768px) {
  .grid-gallery-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .grid-gallery-4 {
    grid-template-columns: 1fr;
  }
}

/* フレックスシステム */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* ==========================================================================
   5. タイポグラフィ
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-4) 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--theme-text-primary, var(--color-primary-900));
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
  margin: 0 0 var(--spacing-4) 0;
  color: var(--theme-text-secondary, var(--color-primary-600));
}

a {
  color: var(--theme-accent-primary, var(--color-accent-500));
  text-decoration: none;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--theme-accent-secondary, var(--color-accent-400));
}

/* ==========================================================================
   6. 共通コンポーネントスタイル
   ========================================================================== */

/* セクション */
.section {
  padding: var(--spacing-16) 0;
}

.section-sm { padding: var(--spacing-8) 0; }
.section-lg { padding: var(--spacing-24) 0; }

/* セクションタイトル */
.section-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-12);
  text-align: center;
  position: relative;
  color: var(--theme-text-primary, var(--color-primary-900));
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--spacing-3));
  left: 50%;
  transform: translateX(-50%);
  width: var(--spacing-16);
  height: var(--spacing-1);
  background: var(--theme-accent-primary, var(--color-accent-500));
  border-radius: var(--radius-full);
}

/* カード */
.card {
  background: var(--theme-card-bg, #ffffff);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  border: 1px solid var(--theme-border-primary, var(--color-primary-200));
  box-shadow: var(--theme-shadow-card, var(--shadow-md));
  transition: var(--transition-all-normal);
}

.card:hover {
  box-shadow: var(--theme-shadow-card-hover, var(--shadow-lg));
  transform: translateY(-2px);
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border: none;
  cursor: pointer;
  
  transition: var(--transition-all-normal);
  outline: none;
  user-select: none;
}

.btn:focus {
  outline: 2px solid var(--theme-accent-primary, var(--color-accent-500));
  outline-offset: 2px;
}

.btn-primary {
  background: var(--theme-button-primary-bg, var(--color-accent-500));
  color: var(--theme-button-primary-text, #ffffff);
}

.btn-primary:hover {
  background: var(--theme-button-primary-hover-bg, var(--color-accent-400));
  transform: translateY(-1px);
  box-shadow: var(--theme-shadow-accent, var(--shadow-lg));
}

.btn-secondary {
  background: var(--theme-button-secondary-bg, var(--color-primary-100));
  color: var(--theme-button-secondary-text, var(--color-primary-900));
  border: 1px solid var(--theme-border-primary, var(--color-primary-200));
}

.btn-secondary:hover {
  background: var(--theme-button-secondary-hover-bg, var(--color-primary-200));
}

/* ==========================================================================
   7. ユーティリティクラス
   ========================================================================== */

/* スペーシング */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

/* テキスト配置 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* フォントウェイト */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* 表示・非表示 */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* 位置 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* オーバーフロー */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* ==========================================================================
   8. レスポンシブユーティリティ
   ========================================================================== */

@media (max-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:text-center { text-align: center; }
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:text-center { text-align: center; }
  .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   9. アニメーションユーティリティ
   ========================================================================== */

.fade-in {
  animation: fadeIn var(--transition-slow) var(--ease-out);
}

.fade-in-up {
  animation: fadeInUp var(--transition-slow) var(--ease-out);
}

.slide-in-left {
  animation: slideInLeft var(--transition-slow) var(--ease-out);
}

.slide-in-right {
  animation: slideInRight var(--transition-slow) var(--ease-out);
}

.scale-in {
  animation: scaleIn var(--transition-normal) var(--ease-out);
}

/* アニメーション遅延 */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* ==========================================================================
   10. アクセシビリティ
   ========================================================================== */

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* フォーカス時に表示 */
.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--spacing-2);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid black;
  }
  
  .btn-primary {
    background: black;
    color: white;
    border: 2px solid black;
  }
  
  .btn-secondary {
    background: white;
    color: black;
    border: 2px solid black;
  }
}

/* アニメーション無効化対応 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .fade-in,
  .fade-in-up,
  .slide-in-left,
  .slide-in-right,
  .scale-in {
    animation: none;
  }
}

/* ==========================================================================
   11. 印刷対応
   ========================================================================== */

@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  .card {
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  
  .btn {
    border: 1px solid #ccc !important;
    background: white !important;
    color: black !important;
  }
  
  .hidden\:print {
    display: none !important;
  }
}