/* ============================================
   首頁其餘區塊：前言／活動亮點／生態體驗活動／如何前往／Footer
   ============================================ */

/* 區段間距：桌機 88px、手機 40px（依設計稿實測 KV／前言／活動亮點...等每個區塊之間的間距）。
   只設 padding-top、不設 padding-bottom——如果上下都留一半（44px+44px），
   兩個區塊相加會變成正確的88px沒錯，但「KV到第一個區塊」或「最後一個區塊到Footer」這種
   只有單邊在場的邊界就會少一半，變成44px。改成只用頂部留白，每個區塊自己負責跟「上一個東西」
   拉開正確的88px，不管上一個是KV、另一個 .page-section，還是頁面最上方。 */
.page-section {
  padding-top: 88px;
}
@media (max-width: 720px) {
  .page-section { padding-top: 40px; }
}
.page-section .section-inner { display: flex; flex-direction: column; gap: 36px; }

/* ---------- 策展實踐（原「前言」，2026-09-03 依設計稿改版） ----------
   一張大卡片，內含開頭總述 + 三段內容，段落之間用細線分隔。
   桌機：圖示與標題橫排一列，內文在下方跨全寬（讓長段落有完整寬度可讀）。
   手機：圖示、標題、副標、內文全部改成直向堆疊（見下方 720px 斷點）。 */
.curation-card {
  background: rgba(255,255,255,0.8);
  border-radius: var(--radius-md);
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.curation-lead {
  font-family: var(--font-display);
  font-weight: 500;          /* 開頭總述用 Medium，比下方各段內文重一階 */
  font-size: var(--fs-body);
  line-height: 1.6;
  text-align: justify;
}

/* 三段內容：用相鄰兄弟選擇器畫分隔線，只會出現在「段與段之間」，
   最後一段下方不會多一條線，段落增減時也不用手動調整。 */
.curation-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 分隔線是品牌漸層（左淡綠→右黃），不是單色。
   CSS 的 border 不支援漸層，所以改用背景漸層畫在區塊頂部：
   background-size 的第二個值就是線的粗細（2px），position: top 讓它貼在最上緣。 */
.curation-item + .curation-item {
  background-image: var(--gradient-brand);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 2px;
  padding-top: 28px;
  margin-top: -12px;         /* 抵銷外層 gap 的一部分，讓線到上下內容的距離對稱 */
}
.curation-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.curation-icon {
  flex: none;
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.curation-heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #3d6608;            /* 標題與副標都是綠色，跟下方深色內文區隔 */
}
.curation-heading h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.04em;
}
.curation-heading h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
}
.curation-item p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  text-align: justify;
}

@media (max-width: 720px) {
  /* 手機版依設計稿：卡片內距 28px，圖示改成獨立一行放在標題上方 */
  .curation-card { padding: 28px; gap: 28px; }
  .curation-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---------- 活動亮點 ---------- */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
}
/* 卡片樣式依 2026-09-03 設計稿改版：淡黃綠底、底部 6px 綠色粗線、編號與標題同一列、右側箭頭。
   整張卡片是連結，箭頭只是「這裡可以點」的視覺提示（HTML 端標了 aria-hidden，讀螢幕軟體不會念）。 */
.highlight-card {
  background-color: #fcffe6;
  /* 底部那條 6px 粗線是品牌漸層（左淡綠→右黃），不是單色。
     CSS 的 border 不支援漸層，改用背景漸層貼在底緣：這樣還有一個好處是
     會被 border-radius 自動裁切，線的兩端跟著圓角收窄，跟設計稿一致。
     下方內距多給 6px（40+6），維持設計稿裡「內容到線」的 40px 距離。 */
  background-image: var(--gradient-brand);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 6px;
  border-radius: var(--radius-md);
  padding: 40px 48px 46px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(38,49,31,0.12);
}
.highlight-head {
  display: flex;
  align-items: center;
  gap: 24px;
}
.highlight-num {
  flex: none;
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  /* 綠→黃漸層，對應 Figma 的「2026 生態博覽會/漸層」樣式；文字改用深色才看得清楚 */
  background: var(--gradient-brand);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.highlight-heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.highlight-card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.04em;
}
.highlight-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
}
.highlight-arrow {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
  transition: transform 0.15s ease;
}
.highlight-card:hover .highlight-arrow { transform: translateX(4px); }
.highlight-card p {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-align: justify;
}

/* 卡片的「緊湊版」尺寸：內距 28px、編號圓圈與箭頭 40px、橫向間距 12px。
   圓圈的漸層配色與深色數字跟桌機一致（設計稿手機版畫的是舊版純綠底，已與設計師確認以桌機為準）。

   斷點刻意設在 1100px 而不是跟著單欄的 720px——設計稿的 48px 內距是為 1200px 內容寬畫的，
   視窗比那個窄時卡片本來就比設計稿小，若還沿用大內距，內容區會被壓到比手機單欄時更窄
   （768px 時每欄只剩 340px），四張卡的副標全部被擠到換行。
   這裡先讓尺寸變緊湊，版面結構（兩欄）維持不變。

   另外，flex 的 gap 在「圓圈↔標題」和「標題↔箭頭」兩處都會計算，
   照設計稿數值排下來標題區只剩 174px，而最長的副標「把自然涼意帶回家」需要 176px，
   差 2px 就換行；縮這幾個尺寸能補回約 16px，讓副標維持設計稿的一行。
   （「成為「最COOL森士」吧」在設計稿手機版本來就是兩行，屬預期內。） */
@media (max-width: 1100px) {
  .highlight-card { padding: 28px 28px 34px; gap: 16px; }   /* 下方多 6px 留給漸層底線 */
  .highlight-num { width: 40px; height: 40px; font-size: 23px; }
  .highlight-head { gap: 12px; }
  .highlight-arrow { width: 40px; height: 40px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .highlight-card, .highlight-arrow { transition: none; }
  .highlight-card:hover { transform: none; }
  .highlight-card:hover .highlight-arrow { transform: none; }
}

/* ---------- 生態體驗活動 ---------- */
.workshop-card {
  background: rgba(255,255,255,0.8);
  border-radius: var(--radius-md);
  padding: 70px 100px;
}
.workshop-head {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
@media (max-width: 720px) {
  /* 手機版標題跟旁邊說明文字會換行變上下排列，這時候原本的48px間距（設計是給同一行左右並排用的）
     太大了，換成手機版設計要的12px */
  .workshop-head { gap: 12px; }
}
.workshop-head .h2-title { flex: none; }
.workshop-head .tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--color-cat-d);
}
/* 依 2026-09-10 設計稿改版：原本是兩張卡片並排的 grid，改成上下堆疊的清單，
   桌機圖左文右、手機圖上文下。 */
.workshop-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 分隔線畫在「項目之間」（相鄰兄弟選擇器），最後一項下方不會多一條；
   negative margin 抵銷外層 gap 的一半，讓線到上下內容的距離對稱。 */
.workshop-item + .workshop-item {
  border-top: 2px solid rgba(38,49,31,0.12);
  padding-top: 40px;
}

.workshop-item {
  display: flex;
  gap: 32px;
  align-items: stretch;
}
/* 圖片：正方形，且高度撐滿右側內容（底邊與報名按鈕的底邊切齊）。
   做法：align-self: stretch 讓高度等於右側內容高度，寬度再由 aspect-ratio 1:1 推算，
   所以邊長會隨內容長度自動變化——設計稿在 1920 下實測是 343×344，
   Figma codegen 寫的 aspect-[250/250] 是「比例 1:1」而不是 250 像素。

   ⚠️ 不要同時指定 width：寬高都給定時 aspect-ratio 會失效，正方形就破功
   （2026-09-10 曾誤設 width:250px + 百分比高度，圖被拉成 250×518 的細長條）。

   做法是兩層 flex：外層 .workshop-item 用 align-items: stretch，
   讓「照片外框」和「文字區」等高；照片外框自己是 flex 容器，
   裡面的 <img> 用 aspect-ratio 1:1 + margin: auto 置中。
   這樣高度由較高的一側決定（＝底邊自然切齊），
   而照片本身永遠是正方形，只是在外框內垂直置中、上下留白。

   ⚠️ 別把 width 和 height 同時給 <img>：兩者都給定時 aspect-ratio 失效、正方形破功
   （2026-09-10 曾誤設 width:250px + 百分比高度，圖被拉成 250×518 的細長條）。 */
.workshop-photo-frame {
  flex: none;
  width: clamp(220px, 34%, 420px);
  align-self: stretch;
  display: flex;
}
/* 水生植物瓶的照片拆成桌機（正方形）／手機（橫式）兩個檔案，用 <picture> 分流。
   但 .workshop-photo-frame 是 flex 容器、原本的 flex item 是 <img>；
   若讓 <picture> 當 flex item，它沒有寬度依據會把照片壓縮掉。
   用 display: contents 讓 <picture> 本身不參與版面、由裡面的 <img> 直接當 flex item，
   下面 .workshop-photo 的 width / aspect-ratio / margin 規則就完全不用改。 */
.workshop-photo-frame picture { display: contents; }
.workshop-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: auto 0;            /* 外框比照片高時，照片垂直置中 */
  object-fit: cover;
  border-radius: 12px;
}
.workshop-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workshop-item h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.workshop-item p {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  line-height: 1.6;
  text-align: justify;
}
.workshop-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0;
}
.workshop-details .detail-row {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  line-height: 1.6;
  text-align: justify;
}
.workshop-details dt {
  flex: none;
  font-weight: 700;
  white-space: nowrap;
}
.workshop-details dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-weight: 400;
}
/* 報名按鈕依設計稿改成全寬置中（原本是靠左、寬度隨文字）。
   margin-top: auto 讓內容比照片短時按鈕被推到底部，底邊與照片外框切齊。 */
.workshop-item .btn-report {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* 平板／窄桌機（依 1024px 設計稿）：卡片內距四周 40px（space/6xl），
   標題列到內容的間距也從桌機的 48px 縮到 32px（space/4xl）。
   斷點取 1100px 與活動亮點卡片一致——桌機的 100px 內距是為 1200px 內容寬畫的，
   視窗比那個窄時再沿用大內距，文字區會被壓得太窄。 */
@media (max-width: 1100px) {
  .workshop-card { padding: 40px; }
  .workshop-head { margin-bottom: 32px; }
}

/* 手機版依設計稿：改成圖上文下堆疊，圖片變成 477:285 的橫幅，
   文字區左右各留 12px，項目間距與分隔線內距縮小。 */
@media (max-width: 720px) {
  .workshop-card { padding: 28px; }
  .workshop-list { gap: 36px; }
  .workshop-item + .workshop-item { padding-top: 36px; }
  .workshop-item {
    flex-direction: column;
    gap: 20px;
  }
  /* 直式堆疊時照片要左右填滿卡片內容區。
     外框在桌機用 clamp 綁了固定寬度，這裡一定要蓋掉成 100%，
     否則會停在 clamp 的下限 220px、右側空一塊（實測 390px 時只有 220/286）。
     文字區另有 12px 內縮（見下方 .workshop-body），所以照片會比文字略寬，與設計稿一致。 */
  .workshop-photo-frame {
    width: 100%;
    align-self: stretch;
  }
  .workshop-photo {
    width: 100%;
    min-height: 0;
    aspect-ratio: 477 / 285;
    margin: 0;
  }
  .workshop-body {
    padding: 0 12px;
    gap: 16px;
  }
}

/* ---------- 如何前往 ---------- */
.howto-row {
  display: flex;
  gap: 36px;
  align-items: stretch;
}
.howto-map {
  flex: 1;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  min-height: 431px;
}
.howto-map iframe { width: 100%; height: 100%; min-height: 431px; border: 0; display: block; }

.howto-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; justify-content: center; }
/* 標籤（地點／捷運／步行／開車）到說明文字之間固定 24px，依設計稿。
   標籤刻意不給固定寬度、改用 white-space: nowrap ——原本設了 width: 56px 搭 gap: 32px，
   但標籤只有兩個字（約 44px），欄位裡多出的 12px 空白會疊到間距上，
   實際看起來是 44px 而不是設定的 32px。移掉固定寬度後，24px 就是真正的文字到文字距離；
   四個標籤都是兩個字，寬度自然一致，右側說明文字的左緣依然對齊。
   ⚠️ 若日後新增字數不同的標籤（例如三個字），對齊會跑掉，那時要改回固定寬度並重算間距。 */
.howto-item { display: flex; gap: 24px; align-items: baseline; }
.howto-item .label {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--color-cat-d);
}
.howto-item p { font-family: var(--font-display); font-size: var(--fs-body); line-height: 1.6; }

@media (max-width: 900px) {
  .howto-row { flex-direction: column; }
  .howto-map { aspect-ratio: 4/3; min-height: 0; }
  .howto-map iframe { min-height: 0; }
}

/* ---------- 2025 活動回顧（原在活動資訊頁，移到首頁如何前往下方） ---------- */
/* 這個區塊桌機／手機每一段間距都不一樣（標題→影片、影片→照片列），
   跟 .section-inner 統一的 gap:36px 疊加會很難對出設計稿要的精準數字，
   所以把 #recap 這個區塊的 gap 直接歸零，改成每個元件自己用 margin-top 精準控制。 */
#recap .section-inner { gap: 0; }

.info-video {
  margin-top: 48px; /* 標題→影片，桌機 48px */
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
}
.info-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.recap-carousel {
  display: flex;
  gap: 28px; /* 照片跟照片之間，桌機 28px */
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  margin-top: 28px; /* 影片→照片列，桌機 28px */
}
.recap-carousel img {
  flex: none;
  width: 320px;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  scroll-snap-align: start;
}
.recap-carousel::-webkit-scrollbar { height: 8px; }
.recap-carousel::-webkit-scrollbar-thumb { background: rgba(38,49,31,0.2); border-radius: 4px; }

@media (max-width: 720px) {
  .recap-carousel img { width: 240px; height: 165px; }

  /* 手機版「2025活動回顧」區塊間距依設計稿改小：標題→影片 24px、影片→照片列 20px、照片之間 20px。 */
  #recap .info-video { margin-top: 24px; }
  #recap .recap-carousel { margin-top: 20px; gap: 20px; }
}

/* ---------- Lightbox Popup（2025活動回顧照片點擊放大） ---------- */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20,25,15,0.92);
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.open { display: flex; }
.lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.24); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* 下方頁碼點點：目前那張是橘色長條，其餘是半透明小圓點；每顆都可點擊跳頁。
   有點點時把大圖高度縮一點，避免圖片壓到點點。 */
.lightbox-dots {
  position: fixed;
  /* 加上 safe-area 閃避 iPhone 底部手勢區的小白線 */
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 90vw;
}
.lightbox-dot {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.38);
  transition: width 0.2s ease, background 0.2s ease;
}
.lightbox-dot:hover::before { background: rgba(255,255,255,0.7); }
.lightbox-dot.active::before {
  width: 22px;
  background: var(--color-primary);
}
.lightbox-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 0;
  border-radius: var(--radius-pill);
}
.lightbox-overlay.has-dots .lightbox-img {
  max-height: min(85vh, calc(100vh - 140px));
}

@media (max-width: 600px) {
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 18px; }
  .lightbox-close { width: 40px; height: 40px; top: 14px; right: 14px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-dots { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); gap: 0; }
  .lightbox-dot { width: 20px; height: 20px; }
  .lightbox-dot::before { width: 7px; height: 7px; }
  .lightbox-dot.active::before { width: 18px; }
  .lightbox-overlay.has-dots .lightbox-img { max-height: min(85vh, calc(100vh - 110px)); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-dot::before { transition: none; }
}

/* ---------- Footer ---------- */
.footer-logos {
  padding: 80px 0;
}
.footer-logos .section-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 60px 80px;
}
.footer-logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.footer-logo-group h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--color-text);
}
/* 統一用 object-fit: contain 保護長寬比，不管容器怎麼變都不會被壓扁 */
.footer-logo-group img {
  display: block;
  width: auto;
  height: auto;
  max-width: 240px;
  max-height: 101px;
  object-fit: contain;
}
/* 主辦單位的三個 logo 並排（設計稿 Figma 696:9365：280 / 180 / 280 寬，間距 52px，垂直置中）。
   原本只有兩個 logo 時是上下堆疊，2026-09-23 併入全聯慶祥後改成一排。
   flex-wrap 是保險：視窗窄到排不下時會自動換行，不會把 logo 擠扁。 */
.footer-logo-group .stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 52px;
}
/* 手機改回上下排列（設計稿 Figma 696:12403 的 mobile 版就是直的，間距 40px） */
@media (max-width: 720px) {
  .footer-logo-group .stack { flex-direction: column; gap: 40px; }
}

.footer-credits {
  padding: 88px 24px;
  display: flex;
  justify-content: center;
}
.footer-credits-inner {
  width: 100%;
  max-width: var(--content-width);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand .logos { display: flex; align-items: center; gap: 16px; }
.footer-brand .logos img { height: 40px; width: auto; }
.footer-brand .divider { width: 1px; height: 16px; background: rgba(38,49,31,0.2); }
.footer-brand .copyright { font-size: 14px; color: #374a3c; }

.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px; height: 40px;
  border: 1px solid #236858;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social img { width: auto; height: auto; max-width: 20px; max-height: 20px; object-fit: contain; }

@media (max-width: 720px) {
  .footer-logos .section-inner { gap: 40px; }
  .footer-credits-inner { flex-direction: column; align-items: center; text-align: center; }
}