/*
  ================================================================
  index.css — phototo トップページ専用スタイル
  ================================================================
  このファイルは index.html だけで使用するスタイルです。
  common.css を読み込んだ後にこのファイルを読み込みます。

  【セクション構成】
    1. ヒーロー（トップの大きな表紙エリア）
    2. セクション共通（見出しなど）
    3. About（サークル紹介カード）
    4. 活動マップ（地図エリア・ポップアップ・ピン）
    5. アーカイブ（活動記録一覧）
  ================================================================
*/


/* ================================================================
   1. ヒーローセクション
   min-height: 100vh で画面の高さいっぱいに表示されます。
   vh = viewport height（画面の高さ）の単位
   ================================================================ */
#hero {
  min-height: 100vh;       /* 最低でも画面の高さ100%分の高さを確保 */
  display: flex;
  flex-direction: column;  /* 子要素を縦に並べる */
  align-items: center;     /* 横方向の中央揃え */
  justify-content: center; /* 縦方向の中央揃え */
  padding: 80px 2rem 4rem; /* 上にナビバー分の余白（80px）を確保 */
  text-align: center;
  position: relative;      /* .hero-bg の基準点にするため */
  overflow: hidden;
}

/* 背景グラデーション（装飾用。触らなくてOK） */
.hero-bg {
  position: absolute; /* 親要素（#hero）に対して絶対配置 */
  inset: 0;           /* top/right/bottom/left すべて0（全体を覆う） */
  background:
    radial-gradient(ellipse at 20% 50%, rgba(200,169,110,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(143,170,124,0.10) 0%, transparent 60%);
  pointer-events: none; /* クリックイベントを無効化（背景なのでクリックできない） */
}

/* "photography circle" のタグ文字 */
.hero-tag {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase; /* 文字を大文字に変換 */
  color: var(--accent);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* タグの左右に細い線を追加（::before と ::after で擬似要素として生成） */
.hero-tag::before,
.hero-tag::after {
  content: '';        /* 擬似要素に必要な宣言（空でもOK） */
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

/* "phototo" のメインタイトル */
.hero-title {
  font-family: var(--ff);
  /* clamp(最小値, 推奨値, 最大値) = 画面幅に応じて自動的にサイズが変わる */
  font-size: clamp(3.5rem, 10vw, 7rem);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.hero-title span {
  color: var(--accent); /* "to" の部分をアクセントカラーに */
}

/* "ふぉとと" の読み仮名 */
.hero-yomi {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-bottom: 1.6rem;
}

/* "ゆるく" のキャッチコピー */
.hero-catch {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--muted);
  font-family: var(--ff);
  font-style: italic; /* 斜体 */
  margin-bottom: 2.4rem;
}

/* サークル紹介文 */
.hero-desc {
  max-width: 480px;   /* テキストが広がりすぎないように最大幅を制限 */
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.9;
  margin-bottom: 3rem;
}

/* "scroll" の下矢印アニメーション */
.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-decoration: none;
  animation: bounce 2s infinite; /* bounce アニメーションを無限ループ */
}

/* "scroll" の下の縦線 */
.hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* バウンスアニメーションの定義 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }    /* 元の位置 */
  50%       { transform: translateY(6px); } /* 6px下に移動 */
}


/* ================================================================
   2. セクション共通スタイル
   About・Map・Archive の各セクションで共通して使う要素のスタイルです。
   ================================================================ */
section {
  padding: 5rem 2rem; /* 上下に余裕のある余白 */
}

/* セクションの見出しエリア */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

/* "ABOUT" "ACTIVITY MAP" などの小さいラベル */
.section-label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

/* セクションの大見出し */
.section-title {
  font-family: var(--ff);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--text);
}


/* ================================================================
   3. About セクション（サークル紹介カード）
   CSS Grid を使って2列のカードレイアウトを作っています。
   ================================================================ */
#about {
  background: var(--surface); /* 背景を少し白っぽくしてセクションを区別 */
}

/* 2列グリッド */
.about-grid {
  max-width: 860px;
  margin: 0 auto; /* 左右中央揃え */
  display: grid;
  grid-template-columns: 1fr 1fr; /* 均等な2列 */
  gap: 2rem;
}

/* 各カード */
.about-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
}

.about-card-icon {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.about-card h3 {
  font-family: var(--ff);
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
  color: var(--text);
}

.about-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.8;
}

/* スマホでは1列に変更 */
@media (max-width: 640px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   4. 活動マップセクション
   ================================================================ */
#map-section {
  background: var(--bg);
}

.map-wrapper {
  max-width: 960px;
  margin: 0 auto;
}

/* 地図上部の説明テキスト */
.map-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

/* 地図本体のエリア */
#map {
  width: 100%;
  height: 520px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(58,52,42,0.08);
}

/* ── Leaflet ポップアップのカスタマイズ ──
   !important はLeafletの既存スタイルを上書きするために必要です */
.leaflet-popup-content-wrapper {
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(58,52,42,0.15) !important;
  border: 1px solid var(--border);
  background: var(--surface) !important;
}

/* 通常ポップアップの内側 */
.popup-inner { width: 200px; }

.popup-img {
  width: 100%;
  height: 120px;
  object-fit: cover;  /* 画像を枠にトリミングして収める */
  border-radius: 6px;
  margin-bottom: 0.6rem;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.popup-title {
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
  color: var(--text);
}

.popup-date {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.popup-link {
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

/* ポップアップの説明文（旧インラインスタイルをクラス化） */
.popup-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

/* ── 通常撮影会のマップピン（ベージュ・ひし形） ──
   transform: rotate(-45deg) でひし形にして、
   子要素を rotate(45deg) で戻すことで絵文字が正立します */
.custom-marker {
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 50% 0; /* 左下だけ尖らせてピン型に */
  transform: rotate(-45deg);
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(58,52,42,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.custom-marker span {
  transform: rotate(45deg); /* 親の回転を打ち消して絵文字を正立させる */
  font-size: 14px;
}

/* ── 合宿のマップピン（グリーン・少し大きめ） ── */
.camp-marker {
  width: 42px;
  height: 42px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #7b9e87;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(58,52,42,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.camp-marker span {
  transform: rotate(45deg);
  font-size: 16px;
}

/* ── 合宿ポップアップ ── */
.camp-popup { width: 240px; }

.camp-popup-header {
  font-weight: bold;
  font-size: 0.95rem;
  color: #3a342a;
  margin-bottom: 0.2rem;
}

.camp-popup-date {
  font-size: 0.75rem;
  color: #9a8f82;
  margin-bottom: 0.8rem;
}

.camp-spots {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.camp-spots li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #c8a96e;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: #f7f4ef;
  transition: background 0.15s;
}

.camp-spots li a:hover { background: #ede8df; }

/* 合宿ジャンプボタン（地図の上に表示） */
.camp-jump-bar {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.camp-jump-btn {
  background: #7b9e87;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.4rem 1.1rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}

.camp-jump-btn:hover { background: #5f8468; }


/* ================================================================
   5. アーカイブセクション（活動記録一覧）
   ================================================================ */
#archive {
  background: var(--surface);
}

/* 一覧の縦並びコンテナ */
.archive-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 各活動カード（<a>タグなのでカード全体がリンク） */
.archive-item {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.6rem;
  text-decoration: none; /* リンクの下線を消す */
  color: var(--text);
  transition: box-shadow 0.2s, transform 0.2s;
}

.archive-item:hover {
  box-shadow: 0 4px 16px rgba(58,52,42,0.1);
  transform: translateY(-2px); /* ホバーで少し浮き上がる効果 */
}

/* 左側のサムネイル（絵文字または画像） */
.archive-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: var(--border);
  flex-shrink: 0; /* flexboxで縮まないようにする */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  overflow: hidden;
}

.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 中央のテキスト部分 */
.archive-meta { flex: 1; } /* 残りのスペースをすべて使う */

.archive-title {
  font-size: 0.95rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
}

.archive-info {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  gap: 1rem;
}

/* 右側の矢印 */
.archive-arrow {
  color: var(--accent);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ================================================================
   合宿アーカイブカード専用クラス（map.js からインラインスタイルを排除）
   ================================================================ */

/* 合宿カード: 左に緑のボーダー、上揃え */
.archive-item--camp {
  border-left: 4px solid #7b9e87;
  align-items: flex-start;
}

/* 合宿カードのメタエリア */
.archive-meta--camp {
  min-width: 0;
  flex: 1;
}

/* 合宿カードの矢印（縦中央揃え） */
.archive-arrow--camp {
  align-self: center;
  color: var(--accent);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* 合宿スポットタグの横並びコンテナ */
.archive-spots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

/* 各スポットのタグチップ */
.archive-spot-tag {
  font-size: 0.72rem;
  color: #7b9e87;
  background: #eef4ec;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* 合宿タイトル横の「合宿」バッジ */
.archive-badge--camp {
  font-size: 0.7rem;
  background: #7b9e87;
  color: #fff;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 0.5rem;
  vertical-align: middle;
}