/* site.css — 取代 Claude Design 執行期元件的靜態實作
   1. .nav-btn      分頁按鈕（原本由 navStyle() 產生的 inline style）
   2. .tab-panel    分頁顯示／隱藏（原本的 <sc-if>）
   3. .img-slot     圖片框與「尚未放圖」佔位（原本的 <image-slot>） */

/* ── 分頁按鈕 ───────────────────────────────────────────── */
.nav-btn {
  font-family: var(--font-heading);
  font-size: 13px;
  padding: 7px 16px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.nav-btn:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.nav-btn[aria-current="page"] { background: var(--color-accent); color: var(--color-bg); }
.nav-btn[aria-current="page"]:hover { background: var(--color-accent-600); }

#zoom-in, #zoom-out { transition: background .15s ease; }
#zoom-in:hover, #zoom-out:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }

/* ── 分頁切換 ───────────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: panel-in .22s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tab-panel.is-active { animation: none; } }

/* ── 首頁日程卡片 ───────────────────────────────────────── */
[data-go] { transition: transform .15s ease, box-shadow .15s ease; }
div[data-go]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── 日文名稱／發音註記 ─────────────────────────────────── */
.jp-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 var(--space-2);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg) 72%, white);
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.jp-name .jp-main {
  font-weight: 600;
  color: var(--color-accent-800);
}
.jp-name .jp-kana {
  font-size: 0.78rem;
}

/* ── 文字卡片不吃固定高度 ──
   設計稿在 Day2 / Day3 兩張卡片寫死了 px 高度（388px、356px）。那是照「當時的字級」
   量出來的，字一放大內容就滿出卡片、壓到下一個區塊。文字高度本來就該由內容決定。 */
.tab-panel .rwd-2col > div { height: auto !important; width: auto !important; }
/* 格線子項目預設 min-width:auto，內容太寬時不肯縮，會把版面推出畫面 */
.tab-panel .rwd-2col > * { min-width: 0; }
.tab-panel .img-slot { max-width: 100%; }

/* ── 圖片框 ─────────────────────────────────────────────── */
.img-slot {
  position: relative;
  overflow: hidden;
  /* 載入中就是一塊素色底，不會閃出「尚未放圖」的虛線框 */
  background: var(--color-surface);
}
.img-slot img { width: 100%; height: 100%; }

/* 還沒放圖時顯示虛線佔位框＋說明文字 */
.img-slot.is-empty {
  display: grid;
  place-items: center;
  /* 蓋掉設計稿給的實際尺寸，避免空框佔掉整個版面 */
  aspect-ratio: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 160px;
  max-height: 240px;
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
  border: 1.5px dashed color-mix(in srgb, var(--color-text) 22%, transparent);
}
.img-slot.is-empty::after {
  content: "🖼 " attr(data-placeholder);
  font-size: 0.8125rem;
  padding: 0 var(--space-3);
  text-align: center;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}

/* ── 響應式 ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  .rwd-2col { grid-template-columns: 1fr !important; }
  /* 設計稿有幾張卡片寫死了 px 寬高（493px / 421px…），窄螢幕會把版面撐出畫面。
     手機上一律改成自動，讓內容自己決定高度。 */
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.375rem !important; }
  .img-slot { width: 100% !important; height: auto !important; max-height: 70vh; }
}

/* ── 標題裡的阿拉伯數字 ──
   設計稿的標題字體 Caprasimo 沒有中文字，中文會退回系統字體，
   但它「有」阿拉伯數字，所以「福岡市7大行政區域地圖」的 7 會變成裝飾體，
   跟旁邊的中文長得不一樣。這裡只把數字 0-9 抽出來交給系統字體，
   標題的英文與整體造型不受影響。 */
@font-face {
  font-family: "HeadingNumerals";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial"), local("PingFang TC");
  unicode-range: U+0030-0039;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "HeadingNumerals", var(--font-heading);
}


/* ── 區塊之間的間距 ──
   設計稿裡有些卡片漏寫了 margin-bottom，上下兩個區塊就會黏在一起（例如 Day4
   的「唐戶市場」直接貼著下一張卡片）。這裡統一補上：同一個分頁裡相鄰的兩個
   區塊，後面那個往上留一段間距。
   CSS 的相鄰邊距會「取大值」而不是相加，所以原本已經有 margin-bottom 的區塊
   間距不會變寬，只有原本黏在一起的會被撐開。 */
.tab-panel > div > div + div { margin-top: var(--space-4); }