/* ============================================
   永續市集 market.html 專用樣式
   ============================================ */

/* 下方不留白：與下一個區塊的距離交給 .page-section 的 padding-top 88px 單獨負責，
   避免兩邊各留一點、加起來對不上設計值。 */
.market-hero { padding: 64px 0 0; }
.market-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  letter-spacing: 0.05em;
}

/* ---------- 永續市集地圖：panzoom 拖曳＋縮放檢視 ---------- */
.market-map-frame {
  position: relative;
  width: 100%;
  height: 520px;
  /* 上方間距統一由 #market-map .section-inner 的 gap 控制，這裡不要再加 margin-top，
     否則兩者會相加（原本 gap 36 + margin 24 = 60px，改 gap 時怎麼調都對不上設計值）。 */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(97,155,22,0.08);
  cursor: grab;
  touch-action: none; /* 交給 panzoom 自行處理拖曳／縮放手勢，避免瀏覽器內建的頁面手勢搶走事件 */
  opacity: 0;
  transition: opacity 0.25s ease;
  /* 用 flex 置中；圖片實際尺寸由 js/market-map.js 直接算好精確的填滿像素值再設定（不用 CSS 猜），
     這樣圖片一開始就是「精確填滿＋置中」的狀態，panzoom 的縮放/拖曳都是從這個乾淨的基準點開始算。 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.market-map-frame.is-ready { opacity: 1; }
.market-map-frame:active { cursor: grabbing; }
.market-map-frame img {
  display: block;
  max-width: none; /* 蓋掉 base.css 全站通用的 img{max-width:100%} 重置 */
  user-select: none;
  -webkit-user-drag: none;
}

.market-map-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.market-map-controls button {
  width: 40px;
  height: 40px;
  border-radius: 1000px;
  background: #fff;
  box-shadow: 1px 2px 7px rgba(38,49,31,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background 0.15s ease, transform 0.15s ease; /* 保留原本的 hover/active 效果 */
}
.market-map-controls button:hover { background: #f2f2f2; }
.market-map-controls button:active { transform: scale(0.92); }
.market-map-controls button img { width: 18px; height: 18px; display: block; }
.market-map-controls .map-zoom-reset img { width: 16px; height: 16px; }
/* 標題與操作提示是同一組（HTML 包在 .market-map-head 內）。
   提示放在標題下方、地圖上方——操作說明要在使用者動手之前看到才有用，
   放在地圖下面等於他們已經亂拖一通之後才讀到。
   桌機與手機的排法一致，只有文案依斷點切換（見下方 .hint-desktop / .hint-mobile）。 */
.market-map-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.market-map-hint {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: #5b5b5b;
}
/* 「使用技巧：」跟頁首那句「五大分類，超過 70 個攤位…」同級（22px），
   比下方條列（--fs-caption 18px）大一階，讓它像個小標題。 */
.market-map-hint .hint-label {
  margin: 0 0 6px;
  font-size: 22px;
}

/* 條列的「(1)(2)」用 CSS counter 產生，不寫死在文字裡：
   桌機／手機各自隱藏一條 li，而 display:none 的項目不會被 counter 計入，
   所以兩邊都會正確地從 (1) 排到 (2)，不用維護兩套編號。 */
.hint-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: hint;
}
.hint-list > li {
  counter-increment: hint;
  /* 懸掛縮排：第二行以後的文字對齊首行的文字，不會跑到編號底下 */
  padding-left: 1.9em;
  text-indent: -1.9em;
}
.hint-list > li + li { margin-top: 4px; }
.hint-list > li::before { content: "(" counter(hint) ") "; }

/* 鍵帽用 CSS 畫，不用圖檔：字級跟著內文走，縮放時永遠讀得清楚
   （設計師提供的鍵帽 SVG 縮到相稱尺寸後字太小，看不清楚，故不採用）。
   用 --font-body（拉丁字型）讓 Ctrl / Cmd 這種英文字看起來跟鍵盤上一致。 */
.market-map-hint kbd {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75em;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  background: #5b5b5b;       /* 與提示文字同色，跟旁邊的按鈕圖示一組 */
  border-radius: 4px;
  padding: 5px 8px;
  text-indent: 0;            /* 不要繼承條列的懸掛縮排 */
}

/* 地圖按鈕圖示用設計師提供的 SVG，那是「含白底圓形與陰影」的版本，
   跟地圖右下角實際看到的樣子一致。
   尺寸換算：54×54 的畫布中白色圓形是 40×40（其餘留給陰影），設 34px 看起來約 25px，
   在 18px 的內文旁邊大小才協調。 */
.market-map-hint .hint-icon {
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 34px;
  text-indent: 0;
}

/* 雙指縮放手勢圖示：40×40 的畫布中線稿大約佔 28px，設 34px 看起來約 24px，
   與旁邊的鍵帽（約 23px）、按鈕圖示（約 25px）成一組。 */
.market-map-hint .hint-pinch {
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 34px;
  text-indent: 0;
}
/* 標題那一組到地圖的距離：蓋掉 .page-section .section-inner 的全站預設 36px。
   這一段的 section-inner 只有「標題組」和「地圖」兩個成員，所以改 gap 只會影響這兩者之間。 */
#market-map .section-inner { gap: 20px; }

/* 操作提示第 2 條：預設顯示桌機版，手機版那條先藏起來（切換規則在下面的 720px 斷點內） */
.market-map-hint .hint-mobile { display: none; }

@media (max-width: 720px) {
  .market-map-frame { height: 340px; }

  /* 手機版只保留「重置」鈕：放大／縮小跟捏合手勢完全重複，在小螢幕上是多餘的按鈕還佔掉地圖視野；
     但「回到最初剛好填滿的檢視」用手勢幾乎做不到（手指縮回去容易留下歪掉的位移），
     這顆是手勢無法取代的，所以留著。用 display:none 隱藏，鍵盤 Tab 也不會選到。 */
  .market-map-controls .map-zoom-in,
  .market-map-controls .map-zoom-out { display: none; }

  /* 文案跟著換成只描述手機上真的可用的操作 */
  .market-map-hint .hint-desktop { display: none; }
  .market-map-hint .hint-mobile { display: list-item; }
}

.search-form {
  /* 上方的 24px 就是「地圖 ↕ 搜尋攤位」的距離：兩個區塊的 padding 都被壓成 0
     （見 market.html 的 inline style），所以這個 margin 是唯一的來源。 */
  margin: 40px 0 10px;
}
.search-form label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: #5b5b5b;
  margin-bottom: 10px;
}
.search-row {
  display: flex;
  gap: 8px;
}
.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.search-input-wrap input {
  width: 100%;
  height: 47px;
  background: #fff;
  border: 1px solid rgba(38,49,31,0.2);
  border-radius: var(--radius-pill);
  padding: 0 44px 0 19px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: var(--color-text);
}
.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b5b5b;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s ease;
}
.search-clear:hover { background: rgba(38,49,31,0.08); }
.search-clear[hidden] { display: none; }
.search-row input::placeholder { color: #5b5b5b; }
.search-row input:focus { outline: 2px solid var(--color-cat-d); outline-offset: 2px; }

.no-results {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: #5b5b5b;
  padding: 24px 0;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 40px;
}
.filter-btn {
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(38,49,31,0.15);
  background: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-btn[data-active="true"] {
  background: var(--cat-color, var(--color-primary));
  border-color: var(--cat-color, var(--color-primary));
  color: #fff;
}

.category-block { margin-bottom: 48px; }
.category-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.category-badge {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--cat-color);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.category-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.06em;
}
.category-head .count {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 18px;
  color: #5b5b5b;
}

.booth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.booth-card {
  position: relative;          /* 右上角箭頭用絕對定位貼在角落 */
  background: rgba(255,255,255,0.85);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 有官網／粉專的攤商，整張卡片是連結。
   沿用首頁活動亮點卡片的互動語彙（滑過時微微上浮 + 陰影），全站手感一致。 */
.booth-card.is-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.booth-card.is-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(38,49,31,0.12);
}
/* 外連箭頭：依 2026-09-22 設計稿（Figma 688:8611）的 32×32 圖示，本身就是指向右上的 ↗，
   不需要再用 CSS 旋轉。位置與編號標籤同一列、貼齊卡片右上角（上／右各 20px，等於卡片內距）。
   攤商名稱在下一列，不會被箭頭擋到，所以名稱不必額外留右側空白。 */
.booth-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  transition: transform 0.15s ease;
}
/* 滑過時箭頭往右上移動一點，呼應它指向的方向 */
.booth-card.is-link:hover .booth-arrow {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .booth-card.is-link, .booth-arrow { transition: none; }
  .booth-card.is-link:hover { transform: none; }
  .booth-card.is-link:hover .booth-arrow { transform: none; }
}
.booth-card .tag {
  align-self: flex-start;
  background: var(--cat-color);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 10px;
}
.booth-card .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .booth-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .booth-grid { grid-template-columns: 1fr; }
}