/* 賽事穿搭建議 —— 版面。兩層:第一層是賽事清單(標題 + 三張卡),第二層是選定
   賽事的穿搭建議(返回 + 關鍵數字 + 層次拆解 + 安全帽風鏡 + 配件)。
   刻意不用照片當版面骨架、不用 sticky 選擇器——那是換季穿搭指南的識別特徵,
   這個站要一眼看得出不是同一個東西(Evan 2026-09-17 的硬需求)。
   所有數值都在 tokens.css，這裡只引用 var()。 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden; /* 最後一道防線；真正的修正一律在造成溢出的元素上做 */
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; }

h1 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-display);
}
/* 頁首招牌:號碼布的尺度,窄體大寫。 */
#hero-title { font-family: var(--font-narrow); text-transform: uppercase; }
h2 {
  font-family: var(--font-narrow);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted);
}
.eyebrow {
  font-family: var(--font-narrow);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
}

/* ── 頁首:純文字招牌條,兩層共用、不隨捲動變化 ───────────────
   沒有照片、沒有「在照片上透明、捲過去變實心」的 glass bar——
   那是換季穿搭指南的識別特徵,這裡刻意不一樣。 */
.site-header {
  max-width: var(--max); margin: 0 auto;
  padding: var(--s4) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  border-bottom: 1px solid var(--line);
}

.lang {
  flex: none;
  background: var(--fg);
  border: none; border-radius: var(--radius-pill);
  padding: var(--s2) var(--s4);
  font-family: var(--font-narrow); font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.08em; color: var(--bg);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.lang:hover { opacity: 0.8; }

/* ── 第一層:賽事清單 ─────────────────────────────────────
   標題 + 三張賽事卡,沒有下拉、沒有大圖——卡片本身就是入口。 */
#view-list { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gutter); }
.list-title { margin: 0 0 var(--s5); color: var(--fg-2); }

.event-cards {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.event-card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(20, 20, 15, 0.1);
}
.event-card-img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-bottom: 3px solid var(--signal); /* 這頁唯一的重點色，標在每張入口卡上 */
}
.event-card-body { padding: var(--s4) var(--s4) var(--s5); }
.event-card-name {
  font-family: var(--font-narrow); text-transform: uppercase;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em;
}
.event-card-facts {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  margin: var(--s3) 0 0;
}
.event-card-why {
  margin: var(--s3) 0 0; color: var(--fg-2);
  font-size: var(--fs-ui); line-height: 1.5;
  /* 一句摘要:卡片上放不下整段「為什麼配這些」,截到三行就夠。 */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 關鍵數字(events.json 的 facts):第一層卡片與第二層共用同一組節點結構——
   dt/dd 包一層 div,CSS 才排得成橫列，不是 dl 預設的一條接一條。 */
.fact dt {
  font-family: var(--font-narrow); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--muted);
}
.fact dd { margin: 2px 0 0; font-size: var(--fs-ui); font-weight: 600; white-space: pre-line; font-variant-numeric: tabular-nums; }

/* ── 第二層:選定賽事 ─────────────────────────────────────
   #view-event 本身不設 max-width/padding(跟原本 <main> 一樣不裁邊)——
   .band 需要背景能一路延伸到視窗邊緣,裡面的內容各自用自己的
   max-width + gutter 置中,是這份 CSS 一路以來的作法。 */
.back {
  max-width: var(--max); margin: var(--s5) auto 0; padding: 0 var(--gutter);
  background: none; border: none;
  font: inherit; color: var(--fg-2); cursor: pointer;
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-narrow); font-weight: 600; font-size: var(--fs-ui);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
}
.back:hover { color: var(--fg); }

.event-head { max-width: var(--max); margin: var(--s5) auto 0; padding: 0 var(--gutter); }
.event-head .eyebrow {
  font-family: var(--font-narrow); text-transform: uppercase;
  font-size: var(--fs-display); font-weight: 700; letter-spacing: var(--ls-display);
  color: var(--fg);
}

/* ── 賽事概況、為什麼配這些、安全帽與風鏡 ──────────────────
   跟 .block 用一樣的頁面節奏(gutter/max-width);h1/h2/h3 全域 margin:0,
   why 緊接在 facts 之後不用再留一次大留白。 */
.facts, .kit { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gutter) 0; }
.why { max-width: var(--max); margin: 0 auto; padding: var(--s5) var(--gutter) 0; }
/* 安全帽與風鏡是這頁的賣點，給它一道訊號黃的上邊。 */
.kit { border-top: 3px solid var(--signal); }

/* 賽事概況：橫列的關鍵數字卡片,手機上換行,不疊成兩欄表格。 */
#event-facts { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); margin: var(--s4) 0 0; }

/* 後台打的換行要看得見 —— 沒有這行,多行文字會黏成一句 */
#event-why { margin: 0; white-space: pre-line; font-size: var(--fs-lead); color: var(--fg-2); }

/* ── 商品站在淺色板上 ─────────────────────────────────────
   實測 33 張商品去背圖有 16 張亮度低於 70，直接放深色底上會消失
   （最暗的 Logo Toe Cover 只有 23.4，跟深底同亮度）。
   深底配淺色商品板是刻意的對比，不是補丁。 */
.band { background: var(--plate); color: var(--on-plate); padding-bottom: var(--s6); }
.band-head { max-width: var(--max); margin: 0 auto; padding: var(--s6) var(--gutter) 0; }
.band-head h2 { color: var(--on-plate-muted); }
.note {
  color: var(--on-plate); max-width: var(--measure);
  margin: var(--s3) 0 0; font-size: var(--fs-lead); line-height: 1.5;
  white-space: pre-line; /* 後台打的換行要照樣顯示，否則清單會黏成一句 */
}

.scroller {
  margin-top: var(--s5);
  padding: 0 var(--gutter);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.layers {
  /* 每張卡片共用三條橫線（編號／圖／商品名）：某張的編號換成兩行（英文 Protection from cold），
     整排的圖和商品名一起往下，不會只有那一張掉下去。 */
  display: grid; grid-auto-flow: column; grid-template-rows: auto auto auto;
  grid-auto-columns: clamp(150px, 40vw, 210px);
  column-gap: var(--s4); max-width: var(--max); margin: 0 auto;
}

.layer {
  grid-row: span 3; display: grid; grid-template-rows: subgrid; align-content: start;
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  opacity: 0; transform: translateY(10px);
  animation: in 0.34s var(--ease) forwards;
}
@keyframes in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .layer { animation: none; opacity: 1; transform: none; }
}

.layer .idx {
  font-family: var(--font-narrow); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--on-plate-muted);
}
.layer .thumb {
  height: clamp(150px, 38vw, 230px);
  background: no-repeat center / contain;
  margin: var(--s2) 0 var(--s3);
  filter: drop-shadow(0 12px 20px rgba(23, 23, 26, 0.16));
  transition: transform var(--dur) var(--ease);
  /* 淺底上白色／淺色商品可能糊進 --plate 裡——不逐張看圖驗證每一件，
     一道邊框保證任何商品在任何底色上都有一圈看得見的邊界。 */
  border: 1px solid var(--line);
}
.layer:hover .thumb { transform: translateY(-4px); }
.layer .pname { font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; }
.layer[aria-expanded="true"] .pname { text-decoration: underline; text-underline-offset: 3px; }

.detail {
  max-width: var(--max); margin: var(--s5) auto 0;
  padding: var(--s5) var(--gutter) 0;
  border-top: 1px solid rgba(23, 23, 26, 0.14);
}
.detail h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; }
.detail p { margin: var(--s2) 0 0; color: var(--on-plate-muted); max-width: var(--measure); white-space: pre-line; }
.detail a {
  display: inline-block; margin-top: var(--s3);
  font-family: var(--font-narrow); font-weight: 600; font-size: var(--fs-ui);
  color: var(--on-plate);
}

/* ── 一般區塊(安全帽以外的深底區塊已改站淺底,此類共用置中規則) ── */
.block { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gutter) 0; }

/* ── 配件與人形 ───────────────────────────────────────── */
.acc-wrap {
  display: flex; gap: var(--s6); align-items: flex-start;
  margin-top: var(--s5); flex-wrap: wrap;
}
.figure { flex: none; width: clamp(150px, 36vw, 224px); display: flex; gap: var(--s3); }
/* 部位標註畫在去背的真人照片上（男女各一）。照片壓暗，被標到的部位用半透明白框點亮。 */
.fig-body { position: relative; flex: 1 1 0; min-width: 0; }
.fig-body img {
  width: 100%; height: auto; display: block;
  filter: brightness(0.6) contrast(0.92) grayscale(0.4);
}
.fig-body .part {
  position: absolute;
  border-radius: 2px;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fig-body .part.on {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
}

.acc-list { flex: 1 1 300px; min-width: 0; }
#accessories {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
}
.acc-card {
  background: var(--acc-plate); color: var(--on-plate);
  border-radius: var(--radius);
  padding: var(--s3) var(--s2); text-align: center; min-width: 0;
  border: none; font: inherit; width: 100%; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-start; /* 同 .layer：從頂端排，才對得齊 */
}
.acc-card[aria-expanded="true"] { outline: 2px solid var(--on-plate); outline-offset: -2px; }
/* 邊框理由同 .layer .thumb：淺底上的保險，不逐張看圖驗證。 */
.acc-card .thumb { aspect-ratio: 1 / 1; height: auto; background: no-repeat center / contain; border: 1px solid var(--line); }
.acc-card .part-tag {
  font-family: var(--font-narrow); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--on-plate); margin-top: var(--s2);
}
.acc-card .pname {
  font-size: var(--fs-small); font-weight: 600;
  line-height: 1.3; margin-top: 2px; word-break: break-word;
}

/* #detail 靠父層 .band（淺色板）拿到底色與文字色；配件區 .block 與安全帽風鏡區
   .kit 都是站在頁面淺底上，#acc-detail／#kit-detail 沒有淺色父層可借,
   直接套用 .detail 會讓它的深色文字對比不夠——補一份跟 .acc-card
   一樣的板色。 */
#acc-detail, #kit-detail {
  margin-top: var(--s4);
  background: var(--acc-plate); color: var(--on-plate);
  border-radius: var(--radius);
  padding: var(--s4);
}
/* 淺灰底上，.detail p 預設的次要灰字（--on-plate-muted）對比只有約 2.8，介紹讀起來吃力；改用主文字色。 */
#acc-detail p, #kit-detail p { color: var(--on-plate); }

/* ── 行銷區塊 ─────────────────────────────────────────── */
.camp { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.camp h3 { font-size: var(--fs-h3); font-weight: 600; }
.camp p { margin: var(--s2) 0 0; color: var(--fg-2); max-width: 56ch; }
.camp img { margin-top: var(--s4); border-radius: var(--radius); }
.camp a {
  display: inline-block; margin-top: var(--s3);
  font-family: var(--font-narrow); font-weight: 600; font-size: var(--fs-ui); color: var(--fg);
}

/* ── Footer ───────────────────────────────────────────── */
footer {
  max-width: var(--max);
  padding: var(--section) var(--gutter) var(--s7);
  margin: var(--section) auto 0;
  border-top: 1px solid var(--line);
}
.stores {
  list-style: none; padding: 0; margin: var(--s4) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  font-size: var(--fs-body); font-weight: 500;
}
footer a { color: var(--muted); }
/* 門市名稱連到各店 IG。底線用 text-underline-offset 拉開，否則中英混排時
   會壓到英文字母的下伸部（p、y、g）。帳號寫死在 index.html —— 幾乎不會變，
   放進 data/ui.json 會讓文案分頁出現一個網址欄位，那裡是給文字用的。 */
.stores a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(23, 23, 26, 0.28);
  text-underline-offset: 4px;
}
.stores a:hover { text-decoration-color: currentColor; }
/* 遞減率的出處。情境文案裡好幾個數字是從它推出來的，
   頁面上一定要有一處說得出來這些數字哪裡來。 */
.source { font-size: var(--fs-small); color: var(--muted); margin: var(--s5) 0 0; max-width: 56ch; }
footer a:hover { color: var(--fg); }

/* ── 手機 ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .event-cards { grid-template-columns: 1fr; }
  .event-head .eyebrow { font-size: var(--fs-h3); }
}

/* 沒有配件時（例如夏末平地），隱藏的配件區不該在版面上留一個洞。 */
#accessories-block[hidden] + #campaign { margin-top: 0; }

/* ── 桌機：商品跟著版面長大 ───────────────────────────── */
@media (min-width: 900px) {
  .layers { column-gap: var(--s6); grid-auto-columns: minmax(190px, 300px); }
  .layer .thumb { height: 280px; }
  .layer .pname { font-size: var(--fs-body); }
}

/* 只在後台預覽框裡出現:標出正在編輯的那段字。客人頁面永遠不會有這個屬性。 */
[data-preview-focus] { outline: 2px solid #e0665c; outline-offset: 3px; }

/* 賽事概況：等寬數字——切換賽事時關鍵數字（爬升、距離…）不會因為字寬不同而跳動。 */
#event-facts, .figure { font-variant-numeric: tabular-nums; }

/* 安全帽與風鏡：兩張卡並排，手機上也並排（只有兩張） */
#event-kit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }