/* ═══════════════════════════════════════════════════════
   wines.css — VRCワイン集会ページ専用
   コンセプト: ワインリストのエディトリアル
   大きな回番号 × 罫線のリズム × ワイン液色の3ドット。
   箱（カード）は使わず、余白と線で組む。
   .page-head / .section / .section-head / .container は共通を再利用
   ═══════════════════════════════════════════════════════ */

/* ── ワイン用ローカルトークン（液色はラベルでなく実物の色） ── */
:root {
  --wine-red:   #7c2b3c;   /* 赤ワインの液色（ボルドー） */
  --wine-white: #e3c869;   /* 白ワインの液色（麦わら） */
  --wine-rose:  #e79aa8;   /* ロゼの液色 */
}

/* ═══ ページヘッダー（主役 = ぴのてゃの推しワイン） ═══ */
.head-body {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 2;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
  max-width: 30em;
}
.head-host {
  font-size: clamp(15px, 1.1vw, 17px);   /* 上の説明文と同じ大きさで揃える（オーナー指摘） */
  line-height: 2;
  color: var(--ink-soft);
  margin-top: 2px;
}
/* ヘッダー写真のセリフ（写真とセットで扱う） */
.head-caption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-align: right;
}

/* ═══ VRCワイン集会セクション（背景・実績） ═══ */
.gather-copy { margin-bottom: clamp(28px, 3.4vw, 48px); }
.gather-lead {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: 0.06em;
  color: var(--ruby);
  margin-bottom: 10px;
}
.gather-body {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 2;
  color: var(--ink-soft);
  max-width: 42em;
}
.gather-meta {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-top: var(--sp-2);
}

/* ═══ 会のようす（左に大きく1枚 + 右に2枚） ═══ */
.scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 24px);
}
/* キャプションが下の写真に埋もれないよう、写真を flex で伸ばしてキャプション分の高さを確保する */
.scene-item {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.scene-item.wide { grid-row: 1 / span 2; }
.scene-item img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -26px rgba(90, 71, 99, 0.55);
}
.scene-item.wide img { aspect-ratio: 4 / 3; }
.scene-item:not(.wide) img { aspect-ratio: 16 / 9; }
.scene-item figcaption {
  flex: none;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
@media (max-width: 760px) {
  .scene-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .scene-item.wide { grid-row: auto; }
}

/* ═══ ぴのてゃの推しワイン（エディトリアル行） ═══ */
.picks-note {
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--ink-soft);
  margin: calc(var(--sp-3) * -1 + 8px) 0 var(--sp-4);
}

#wineList { display: flex; flex-direction: column; }

/* 1回 = 大きな番号 | 本文 | 写真 の3カラム行。罫線で区切る */
.pick {
  display: grid;
  grid-template-columns: clamp(76px, 8vw, 128px) minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(20px, 3vw, 56px);
  padding-block: clamp(32px, 4vw, 64px);
  border-top: 2px solid var(--line-strong);
}
.pick:last-child { border-bottom: 2px solid var(--line-strong); }

/* 回番号 — 統計数字と同じく大きくポップに */
.pick-index { min-width: 0; }
.pick-no {
  display: block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(44px, 4.8vw, 72px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--pink);
}
.pick-event {
  display: block;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 10px;
}
.pick-date {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* 本文 */
.pick-main { min-width: 0; }
.pick-theme {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(25px, 2.7vw, 40px);
  line-height: 1.45;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.pick-intent {
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 2;
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
  max-width: 36em;
}

/* 品種・原産地呼称（回で共通のスペック）— 全回一律で縦2行に揃える */
.pick-spec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--line-strong);
  margin-bottom: 6px;
}
.pick-spec > div {
  display: grid;
  grid-template-columns: clamp(96px, 8.5vw, 130px) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
}
.pick-spec dt {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink-strong);
}
.pick-spec dd {
  font-weight: var(--body-bold);
  font-size: clamp(14px, 1.08vw, 16.5px);
  color: var(--ink);
}
.pick-spec .region { font-weight: 300; color: var(--ink-soft); }

/* 推奨銘柄 — ワインリストの行。液色ドット + 銘柄 + 価格 + 購入先 */
.pick-bottles {
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
}
.pick-bottle {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-block: 13px;
}
.pick-bottle + .pick-bottle { border-top: 1px solid var(--line); }
.pick-bottle .dot {
  align-self: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.18), inset 0 2px 3px rgba(255, 255, 255, 0.45);
}
.dot.is-red   { background: var(--wine-red); }
.dot.is-white { background: var(--wine-white); }
.dot.is-rose  { background: var(--wine-rose); }
.pick-bottle .wname {
  font-weight: var(--body-bold);
  font-size: clamp(15.5px, 1.2vw, 18px);
  color: var(--ink);
  line-height: 1.6;
}
.pick-bottle .wprice {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.pick-bottle .wbuy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--body-bold);
  color: var(--pink-strong);
  margin-left: auto;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--line-strong);
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.pick-bottle .wbuy .arrow { transition: transform 0.35s var(--ease-expo); }
.pick-bottle .wbuy:hover { color: var(--ruby); border-color: var(--ruby); }
.pick-bottle .wbuy:hover .arrow { transform: translateX(4px); }

.pick-none {
  border-top: 1px solid var(--line-strong);
  padding-top: 14px;
  font-size: 14px;
  color: var(--ink-faint);
}

/* 写真 — 1枚目を大きく、2枚目以降は2列。クリックでライトボックス */
.pick-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 14px);
  align-content: start;
  min-width: 0;
}
.pick-shot {
  display: block;
  padding: 0;
  min-width: 0;
  cursor: zoom-in;
  border-radius: var(--radius);
}
.pick-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 16px 36px -24px rgba(90, 71, 99, 0.55);
  transition: transform 0.5s var(--ease-expo);
}
.pick-shot:hover img { transform: scale(1.025); }
.pick-shot:first-child { grid-column: 1 / -1; }
.pick-shot:first-child img { aspect-ratio: 16 / 10; }
/* 写真が偶数枚（2枚・4枚）のとき最後の1枚が半端に余らないよう全幅にする */
.pick-shot:last-child:nth-child(even) { grid-column: 1 / -1; }
.pick-shot:last-child:nth-child(even) img { aspect-ratio: 16 / 10; }

/* ═══ 参加への誘い（ポスター + テキスト） ═══ */
#join { background: linear-gradient(var(--paper), var(--paper-pink)); }
.join-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.join-poster { min-width: 0; }
.join-poster img {
  width: 100%;
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 24px 56px -28px rgba(90, 71, 99, 0.6);
}
.join-text { min-width: 0; }
.join-text .overline { display: block; margin-bottom: var(--sp-1); }
.join-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin-bottom: var(--sp-2);
}
.join-body {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 2;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
  max-width: 34em;
}
@media (max-width: 760px) {
  .join-grid { grid-template-columns: 1fr; }
  .join-poster { max-width: 340px; margin-inline: auto; }
}

/* ═══ レスポンシブ（980px: 写真を下段へ / 760px: 全て1カラム） ═══ */
@media (max-width: 980px) {
  .pick {
    grid-template-columns: clamp(64px, 10vw, 90px) minmax(0, 1fr);
  }
  .pick-photos { grid-column: 2; }
}
@media (max-width: 760px) {
  .pick { grid-template-columns: 1fr; gap: 18px; }
  .pick-index { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
  .pick-no { font-size: 42px; }
  .pick-event { margin-top: 0; }
  .pick-event br { display: none; }  /* 横並びのときは1行に */
  .pick-date { margin-top: 0; }
  .pick-photos { grid-column: auto; }
  .pick-bottle .wbuy { margin-left: 0; }
}