/* ============================================
   活動內容頁 events.html 專用樣式
   ============================================ */

.events-hero {
  padding: 64px 0 24px;
}
.events-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  letter-spacing: 0.05em;
}

/* ---------- 活動資訊：三張資訊卡 + 影片 ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.info-card {
  background: rgba(255,255,255,0.8);
  border-radius: var(--radius-md);
  padding: 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.info-card .eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--color-cat-d);
}
.info-card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.info-card p {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .info-grid { grid-template-columns: 1fr; }
}

/* ---------- 現場導覽地圖：單張整合圖，手機切換成直式版本 ---------- */
.sitemap-frame img {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
}

/* ---------- 活動流程表 ---------- */
/* ⚠️ 這一整個區塊的字級刻意「寫死數字」，不要改成 var(--fs-body) / var(--fs-caption)。
   原因：時間欄／活動欄是用固定欄寬（163px、660px、244px）互相對齊的，字級一變，
   文字寬度就會跟固定欄寬對不上，導致被裁切或對齊跑掉。全站正文放大時這裡要維持現狀。
   （時間 22px、活動名稱 22px、講題 18px） */
/* 用 CSS Grid 而不是 flex 排這個表格：外側兩欄設成 1fr（彈性空間），中間欄放實際的時間+活動內容，
   兩側 1fr 自動平分剩餘空間，讓內容區塊整體置中於標題，同時每一列都用同一組固定欄寬，
   時間／活動欄位彼此對齊。這個做法比 fit-content 或猜寬度穩定可靠，是 grid 內建的分配邏輯，
   不會有巢狀 flex 疊層算錯尺寸、把文字壓縮切斷的問題。三個時程軌（舞台／生態講堂／市集）都用同一組欄寬設定。 */
.schedule-track {
  background: rgba(255,255,255,0.6);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 36px;
}
.schedule-track:last-child { margin-bottom: 0; }

/* 三條時程軌都統一用同一個綠色標題列（對應 Figma 的「活動流程 title」元件） */
.schedule-track .track-title {
  padding: 12px 24px;
  background: rgba(97,155,22,0.9);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.2em;
  text-align: center;
}

/* 生態講堂的標題列：依 2026-09-21 設計稿在主標下方多一行小字副標（誘因文案）。
   兩行共用同一片綠底＝設計稿的結構，所以副標放在 .track-title 內部，不是獨立區塊。
   尺寸完全依設計稿（Figma 678:7889 桌機／676:14403 手機，兩版字級相同）：
   內距 10px、主標 22px/1.5、副標 14px/1.6，兩行之間沒有額外間距
   （10 + 33 + 22.4 + 10 = 75px，與設計稿的標題列高度一致）。

   字級同樣刻意寫死，理由與本區塊其他字級相同（見上方說明）。
   letter-spacing 維持主標原本的 0.2em——設計稿雖寫 0，但舞台／市集兩軌的標題都用 0.2em，
   只改這一軌會讓三條軌的標題疏密不一致；副標則要還原成 normal，否則 14px 的長句會被撐爆。 */
.track-eco .track-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 24px;
  line-height: 1.5;
}
.track-eco .track-note {
  font-weight: 400;
  font-size: 16px;          /* 設計稿是 14px，依 Tracy 指示桌機放大到 16px */
  line-height: 1.6;
  letter-spacing: normal;
}
/* 手機版：副標縮回 14px，並把左右內距收成 10px——這句在窄螢幕一定會折成兩行（設計稿亦同），
   內距留太多會被擠成三行 */
@media (max-width: 720px) {
  .track-eco .track-title { padding: 10px; }
  .track-eco .track-note { font-size: 14px; }
}

/* 活動欄（第3欄）改用固定寬度，不再用 max-content 讓瀏覽器依內容自動撐開——
   之前的做法會讓「每一列」各自獨立計算欄寬，講題長短差異很大時（生態講堂從6字到25字都有），
   每一列的活動欄寬不同，時間欄的起始位置就跟著跑掉、對不齊。
   改成固定寬度後，所有列、所有時程軌都共用同一套欄位位置，時間永遠置右、活動永遠置左、彼此對齊；
   兩側 1fr 平分剩餘空間讓整個區塊置中，再用 translateX 微調整體往右偏移一點。 */
.schedule-row {
  display: grid;
  grid-template-columns: 1fr 163px 660px 1fr;
  column-gap: 32px;
  align-items: center;
  padding: 18px 10px;
  border-top: 1px solid rgba(38,49,31,0.08);
}
.schedule-row:first-of-type { border-top: none; }

/* 舞台／市集這兩軌的活動名稱都很短，如果沿用生態講堂那組（給長講題用的）660px寬活動欄，
   短文字會靠在一個過寬欄位的最左邊，導致視覺上整塊內容偏左、跟標題對不起來。
   這兩軌改用只夠放下自己最長那句活動名稱的窄欄寬，區塊變窄之後，兩側 1fr 平分剩餘空間
   才能讓它們真的置中在標題下方；欄位內部時間置右、活動置左的對齊方式完全不變。 */
.track-stage .schedule-row,
.track-market .schedule-row {
  grid-template-columns: 1fr 163px 244px 1fr;
}

.schedule-row .time {
  grid-column: 2;
  transform: translateX(20px); /* 整體往右偏移 */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-cat-d);
  text-align: right;
  /* 這行對目前內嵌的 Wix Madefor Display 精簡版字型檔沒有作用（該檔沒有帶 tnum 功能），
     實際的數字等寬是靠下面的 .time .dg 做出來的；保留這行是為了萬一日後換成完整版字型檔，
     瀏覽器就會直接改用字型內建的等寬數字。 */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 時間數字逐位對齊：把每個數字放進等寬的行內小格子，模擬「等寬數字 / tabular figures」。
   包 span 的動作由 js/schedule-tabular.js 執行（該檔開頭有完整的成因說明）。
   0.667em = 這個字型最寬的數字 "4"（22px/700 下實測 14.675px），所有數字統一用這個寬度；
   置中是仿字型內建等寬數字的做法（窄的 "1" 會置中於格子內）。
   等寬化後每列時間固定約 152px，仍在 163px 欄寬內 → 不需要動欄寬，也不影響任何 RWD 斷點。 */
.schedule-row .time .dg {
  display: inline-block;
  width: 0.667em;
  text-align: center;
}

.schedule-row .unit {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--color-text);
  white-space: nowrap;
}
/* 只對「直接子元素」的 .unit 套用置右移位——生態講堂的 .unit 是巢狀在 .unit-topic 裡面的孫層級，
   .unit-topic 自己已經有位移了，如果這條規則也套用到巢狀的 .unit 上會疊加兩次位移，
   害名稱文字往右偏移過頭、跟旁邊的講題擠在一起（"黏住"的原因）。用 > 限定只選直接子元素就能避開。 */
.schedule-row > .unit {
  grid-column: 3;
  transform: translateX(20px); /* 整體往右偏移 */
}

/* 生態講堂這一軌多了「講題」，講者與講題同一行、間距較小 */
.schedule-row .unit-topic {
  grid-column: 3;
  transform: translateX(20px); /* 整體往右偏移 */
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.schedule-row .topic {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-text);
  white-space: nowrap;
}

/* 生態講堂這一軌講題最長（例如《香草綠生活──從植物開始，打造城市中的涼感日常》），
   欄寬固定 660px 加上時間欄、間距，寬度縮到 958px 左右就會被卡片邊界裁切。
   這裡讓「生態講堂」比其他軌提早換成手機版單欄顯示，避免文字被切到；
   其他軌（舞台／市集）內容短，維持原本 720px 才切換。 */
@media (max-width: 1000px) {
  .track-eco .schedule-row {
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: 4px;
    padding: 16px 20px;
  }
  .track-eco .schedule-row .time { grid-column: 1; text-align: left; }
  .track-eco .schedule-row .unit-topic { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .track-eco .schedule-row .unit-topic .unit,
  .track-eco .schedule-row .topic { white-space: normal; }
}

@media (max-width: 720px) {
  /* 桌機版舞台／市集用了比較窄的欄寬（specificity較高），這裡要重新蓋回單欄，
     不然手機版這兩軌會漏掉單欄排版、維持桌機的多欄位置 */
  .track-stage .schedule-row,
  .track-market .schedule-row {
    grid-template-columns: 1fr;
  }
  .schedule-row {
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: 4px;
    padding: 16px 20px;
  }
  .schedule-row .time { grid-column: 1; text-align: left; }
  .schedule-row .unit,
  .schedule-row .unit-topic { grid-column: 1; }
  .schedule-row .unit-topic { flex-direction: column; align-items: flex-start; gap: 2px; }
  .schedule-row .unit-topic .unit,
  .schedule-row .topic { white-space: normal; }
}

/* ---------- 森士集章任務：沿用活動亮點卡片樣式，僅換 grid class 名稱 ---------- */
/* 森士集章任務：改用單張整合圖，手機切換成直式版本 */
.stamp-rally-img {
  width: 100%;
  display: block;
  border-radius: 16px;
}