/* =========================
   Gas One Cup styles (merged, brand-green only)
========================= */

/* -- Design tokens -- */
:root{
  --brand:#009D45;
  --brand-dark:#007a35;
  --accent:#ff8a00;
  --bg:#f6fafc;
  --ink:#0d1b2a;
  --muted:#6b7280;
  --card:#ffffff;
  --line:#e5e7eb;
  --ring:rgba(0,157,69,.25);
  --bracket-max:860px;

  /* KVはclampで一元管理（PC/SP） */
  --kv-height:clamp(160px,20vh,220px);
  --kv-height-sm:clamp(120px,20vh,160px);

  /* 固定ヘッダー分のオフセット（#id のスクロール余白） */
  --header-h:60px;
}

/* 共通: デフォはGas One（緑） */
:root,
[data-theme="gasone"] {
  --brand: #009D45;
  --brand-dark: #007a35;
  --ring: rgba(0,157,69,.25);
}

/* Ene One（オレンジ／少しトーンダウン） */
[data-theme="eneone"]{
  --brand: #fb6823;        /* メイン（落ち着いた焼きオレンジ） */
  --brand-dark: #fb6823;   /* 見出し左線・強調用の濃色 */
  --ring: rgba(180, 87, 0, .18); /* フォーカス/ホバーのリングも控えめに */
}

:root,
[data-theme="gasone"]{
  --brand:#009D45;
  --brand-dark:#007a35;
  --ring:rgba(0,157,69,.25);
}

[data-theme="eneone"]{
  --brand:#fb6823;      /* Ene One のメイン */
  --brand-dark:#fb6823; /* 濃色ライン等 */
  --ring:rgba(255,138,0,.25);
}

/* -- Reset-ish -- */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  line-height:1.6;
}
img{ max-width:100%; height:auto; vertical-align:bottom; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; opacity:.9; }
a:focus-visible,.team:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:10px; }

/* -- Layout / Header -- */
.container{ max-width:1080px; margin-inline:auto; padding:16px; }
.row{ display:flex; gap:16px; align-items:center; justify-content:space-between; }

.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.92) 100%);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  width:36px; height:36px; border-radius:8px;
  background:var(--brand); display:grid; place-items:center;
  color:#fff; font-weight:700;
}
.title{ font-size:18px; font-weight:700; margin:0; }

/* ヘッダーロゴサイズ */
.site-header .brand img{ display:block; height:40px; width:auto; object-fit:contain; }
@media (max-width:520px){ .site-header .brand img{ height:28px; } }
.site-header .title{ white-space:nowrap; line-height:1.2; }
.site-header .container{ padding-block:10px; }

/* -- Year tabs (centered) -- */
.year-tabs{
  display:flex; gap:8px;
  /* overflow: auto hidden; 互換のため明示 */
  overflow-x:auto; overflow-y:hidden;
  padding:8px 16px; background:#fff; border-bottom:1px solid var(--line);
  justify-content:center;
}
.pill{
  white-space:nowrap; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink);
}
.pill[aria-current="page"], .pill.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* -- KV (fixed height, brand bg) -- */
.kv{
  margin:0 0 12px; background:var(--brand);
  border-bottom:1px solid var(--line);
  position:relative; z-index:0; overflow:hidden;
}
.kv-inner{ height:var(--kv-height); display:grid; place-items:center; }
.kv img{ height:100%; width:auto; object-fit:contain; object-position:center; }
@media (max-width:520px){ .kv-inner{ height:var(--kv-height-sm); } }

/* KV キャプション（任意） */
.kv-caption{
  color:#fff; padding:8px 16px 16px;
  font-size:clamp(14px, calc(1.2vw + 10px), 16px);
  line-height:1.75;
}
.kv-caption p{ margin:0; }
.kv-caption a{ color:#fff; text-decoration:underline; }

/* -- Hero -- */
.hero{
  background:radial-gradient(70% 90% at 50% 10%, rgba(0,157,69,.12) 0%, rgba(0,157,69,0) 60%), var(--bg);
}
.hero-inner{ padding:20px 16px 12px; }
.hero h1{ font-size:clamp(22px,3.5vw,34px); margin:0 0 6px; font-weight:800; letter-spacing:.01em; }
.hero p{ margin:0; color:var(--muted); }

/* -- Buttons (global base) & cup-switch -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; min-height:40px; line-height:1;
  border-radius:12px; border:1px solid var(--line);
  background:#fff; color:inherit; text-decoration:none;
}
.btn.is-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn:hover,.btn:focus-visible{ text-decoration:none; box-shadow:0 0 0 3px var(--ring); }

.cup-switch{
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center;
  justify-content:flex-start; margin-top:12px;
}
@media (max-width:520px){ .cup-switch{ justify-content:center; } }

/* -- Sections -- */
section{ padding:28px 16px; }
h2{
  font-size:clamp(18px,2.6vw,24px);
  margin:0 0 14px; padding-left:10px; border-left:4px solid var(--brand-dark);
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px 30px; box-shadow:0 4px 14px rgba(0,0,0,.04);
}

/* -- Overview (dl meta) -- */
.meta{ display:grid; grid-template-columns:120px 1fr; gap:10px 12px; }
.meta dt{ color:#374151; font-weight:700; }
.meta dd{ margin:0; }
.meta-note{ margin:0 0 8px; font-size:16px; }

/* -- Venues (link cards) -- */
.venues{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.venue{
  display:block; color:inherit; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .2s, box-shadow .2s, transform .08s;
}
.venue:hover{ border-color:var(--brand); box-shadow:0 0 0 3px var(--ring), 0 2px 6px rgba(0,0,0,.06); transform:translateY(-1px); }
.venue:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.venue strong{ display:block; font-weight:700; margin-bottom:4px; }
.venue small{ display:block; color:var(--muted); }

/* -- Bracket -- */
.bracket-wrap{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px; display:grid; justify-items:center; gap:10px;
}
.bracket-img{
  width:min(100%, var(--bracket-max)); height:auto;
  border-radius:10px; border:1px solid var(--line);
}
.bracket-actions{ font-size:14px; }
.bracket-note{ font-size:14px; color:var(--muted); margin-top:8px; }

/* -- Teams (badge on top, 2 lines) -- */
.teams{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;
}
.team{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.badge,.tag{
  display:inline-flex; align-items:center; height:26px; padding:0 10px;
  border-radius:999px; background:var(--brand); color:#fff; font-size:12px; font-weight:700;
}
.team span:last-child{ width:100%; overflow-wrap:anywhere; }
.team b{ display:inline-block; width:2.2em; font-variant-numeric:tabular-nums; color:#64748b; }

/* -- Footer -- */
footer{ padding:24px 16px; color:#6b7280; }
/* コピーライト中央寄せ（HTMLのinline-style不要） */
footer .container{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* -- Utilities -- */
[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }

/* -- Responsive -- */
@media (min-width:960px){
  /* PC: Teams 3 columns fixed */
  .teams{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:520px){
  .meta{ grid-template-columns:1fr; }
  .meta dt{ border-bottom:1px solid #eee; padding-bottom:2px; }
}

/* ヘッダー直下の大会種別ボタン行 */
.site-header .header-cup-switch{
  justify-content: center;   /* 中央揃え */
  gap: 8px;                  /* 年度タブと統一感のある間隔 */
  padding: 8px 16px;         /* 年度タブと同程度の余白 */
  margin: 0;                 /* ヒーロー用の余白を打ち消し */
  background: #fff;
  border-bottom: 1px solid var(--line);
}
/* =========================
   大会結果（写真グリッド）
========================= */
#results .result-photos{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
#results .result-photo img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}
#results .zoomable{ cursor: zoom-in; }

/* =========================
   画像ライトボックス（左右切替あり）
========================= */
.img-modal{
  position:fixed;
  inset:0;
  z-index:2000;            /* ヘッダーや他要素より前面に */
  background:rgba(0,0,0,.88);
  display:none;            /* JSで開くときに display:block に */
}
.img-modal[aria-hidden="true"]{ display:none; }

.img-modal-close{
  position:absolute;
  top:16px;
  right:20px;
  background:transparent;
  border:0;
  color:#fff;
  font-size:36px;
  line-height:1;
  cursor:pointer;
}

.img-modal-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 56px 92px;  /* 上・左右・下（キャプション余白） */
}

.img-modal-content{
  max-width:92vw;
  max-height:78vh;
  border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}

.img-prev,
.img-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:64px;
  border:0;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:28px;
  cursor:pointer;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.img-prev{ left:12px; }
.img-next{ right:12px; }
.img-prev:hover,
.img-next:hover{ background:rgba(0,0,0,.55); }

.img-modal-meta{
  position:absolute;
  left:0; right:0; bottom:12px;
  text-align:center;
  padding:0 16px;
}
.img-modal-caption{
  color:#fff;
  font-size:1rem;
  margin-bottom:4px;
}
.img-modal-counter{
  color:#ddd;
  font-size:.9rem;
}

/* SP最適化 */
@media (max-width:520px){
  .img-modal-stage{ padding:56px 44px 108px; }
  .img-prev, .img-next{ width:40px; height:56px; font-size:24px; }
  .img-modal-content{ max-width:94vw; max-height:70vh; }
}

/* ユーザーがアニメーションを好まない設定なら軽くする（任意） */
@media (prefers-reduced-motion: reduce){
  .img-modal-content{ transition:none; }
}
/* 重なり順を明示：ステージ < 矢印/× ボタン */
.img-modal-stage { z-index: 1; }
.img-prev, .img-next, .img-modal-close { z-index: 2; }

/* 念のためクリック判定もしっかり通す */
.img-modal-close,
.img-prev,
.img-next {
  pointer-events: auto;
}
/* マウス環境で写真ホバー時に指アイコンに */
@media (hover: hover) and (pointer: fine) {
  #results .zoomable { cursor: pointer !important; }
}

/* ── スマホは2列固定 ───────────────────────── */
@media (max-width: 520px){
  .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;  /* お好みで 8〜12px */
  }
}

/* （大会結果で #results を使っている場合も2列に） */
@media (max-width: 520px){
  #results .result-photos{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
}
/* 写真ギャラリー 2カラム・バナー */
.gallery-banners{ max-width:1080px; margin:12px auto 0; padding:0 20px; }
.gallery-banners-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.gallery-banners .banner{
  display:block; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
}
.gallery-banners img{ display:block; width:100%; height:auto; }
@media (hover:hover){
  .gallery-banners .banner{ transition:transform .18s ease, box-shadow .18s ease; }
  .gallery-banners .banner:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
}
/* スマホは1カラム */
@media (max-width:640px){
  .gallery-banners-grid{ grid-template-columns:1fr; }
}