/* ===== 鄉鎮頁 v2 覆寫層：明信片／郵戳 · 宜蘭線車站帶 · 索引式清單（沿用 tokens.css，載於 township-pages.css 之後） ===== */

/* ---------- Hero：地名大字 + 郵戳 ---------- */
.town-guide-page .town-hero { min-height: 520px; }
.town-guide-page .town-hero::after { background: linear-gradient(to top, var(--color-image-overlay) 0%, oklch(18% 0.025 155 / 0.55) 22%, transparent 62%); }
.town-hero__inner { position: relative; height: 100%; min-height: inherit; max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.town-hero__title { position: absolute; left: 22px; bottom: 44px; z-index: 2; max-width: 640px; color: var(--color-brand-ink); text-shadow: 0 2px 18px oklch(18% 0.025 155 / 0.55); }
.town-hero__eyebrow { margin: 0 0 10px; font-family: var(--font-outlier); font-size: 12px; font-weight: 700; letter-spacing: 5px; opacity: .92; }
.town-hero__title h1 { margin: 0; font-family: var(--font-display); font-size: 56px; font-weight: 700; line-height: 1.15; letter-spacing: 2px; color: inherit; }
.town-hero__title h1 small { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: 1px; opacity: .9; }
.town-hero__stamp { width: 168px; right: 22px; bottom: -34px; transform: rotate(2deg); box-shadow: var(--shadow-stamp); }
/* 郵戳 */
.town-postmark { position: absolute; right: 168px; bottom: -58px; z-index: 3; width: 150px; height: 118px; color: var(--color-brand-strong); transform: rotate(-9deg); transform-origin: center; pointer-events: none; }
.town-postmark svg { width: 100%; height: 100%; overflow: visible; }
.town-postmark text { font-family: var(--font-outlier); font-weight: 700; letter-spacing: 2px; fill: currentColor; }
.town-postmark .pm-town { font-family: var(--font-display); letter-spacing: 3px; }
@keyframes town-stamp-in { 0% { opacity: 0; transform: rotate(-9deg) scale(1.28); } 60% { opacity: 1; transform: rotate(-9deg) scale(.96); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
.town-postmark { animation: town-stamp-in .55s cubic-bezier(.2,.8,.2,1) .15s both; }
@media (prefers-reduced-motion: reduce) { .town-postmark { animation: none; } }

/* ---------- 導言區：H1 已移入 hero，這裡只留標籤 + 引言 ---------- */
.town-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: calc(var(--space-2xl) + 18px) 0 var(--space-lg); align-items: start; }
.town-intro__label { font-family: var(--font-outlier); font-size: 12px; font-weight: 700; letter-spacing: 4px; color: var(--color-brand); text-transform: uppercase; margin: 0; }
.town-intro__lede { max-width: 62ch; font-size: 17px; line-height: 1.95; border-left: 3px solid var(--color-accent); padding-left: var(--space-md); }

/* ---------- 12 鄉鎮切換：宜蘭線車站帶 ---------- */
.town-index { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-md) 0 var(--space-lg); border-bottom: 0; }
.town-index__label { font-family: var(--font-outlier); font-size: 12px; font-weight: 700; letter-spacing: 4px; color: var(--color-muted); }
.town-index__label::after { content: "　沿宜蘭線由北到南"; font-weight: 400; letter-spacing: 1px; color: var(--color-muted); }
.town-index__links { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 0; padding: 14px 0 0; overflow-x: auto; scrollbar-width: none; }
.town-index__links::-webkit-scrollbar { display: none; }
.town-index__links::before { content: ""; position: absolute; left: 12px; right: 12px; top: 20px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--color-rule-2), var(--color-brand) 50%, var(--color-rule-2)); }
.town-index__links a { position: relative; flex: 1 0 auto; min-width: 64px; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 4px; border: 0; background: transparent; color: var(--color-ink-2); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-decoration: none; }
.town-index__links a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--color-paper); border: 3px solid var(--color-brand); box-shadow: 0 0 0 3px var(--color-paper); transition: transform .2s, background .2s; }
.town-index__links a:hover { color: var(--color-brand-strong); background: transparent; }
.town-index__links a:hover::before { transform: scale(1.15); }
.town-index__links a[aria-current="page"] { color: var(--color-brand-strong); }
.town-index__links a[aria-current="page"]::before { background: var(--color-brand-strong); border-color: var(--color-brand-strong); box-shadow: 0 0 0 3px var(--color-paper), 0 0 0 6px oklch(55% 0.090 158 / 0.25); }
.town-index__links a[aria-current="page"]::after { content: "目前"; position: absolute; top: -12px; font-size: 10px; letter-spacing: 2px; color: var(--color-brand); }

/* ---------- 區塊標題 ---------- */
.town-section__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-outlier); font-size: 12px; font-weight: 700; letter-spacing: 4px; color: var(--color-brand); margin: 0 0 6px; }
.town-section__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); }
.town-section__heading h2, .town-faq > h2, .town-update h2 { font-family: var(--font-display); font-size: 30px; letter-spacing: 1px; line-height: 1.3; color: var(--color-ink); margin: 0; }

/* ---------- 在地指南三卡：田野筆記 ---------- */
.town-guide-grid { gap: 14px; border: 0; }
.town-guide-grid article { position: relative; padding: 26px 22px 22px 22px; background: var(--color-paper-2); border-radius: var(--radius-card); border: 1px solid var(--color-rule); border-top: 4px solid var(--color-brand); transition: transform .2s, box-shadow .2s; }
.town-guide-grid article + article { border-left: 1px solid var(--color-rule); }
.town-guide-grid article:hover { transform: translateY(-3px); box-shadow: 0 14px 30px oklch(18% 0.025 155 / 0.10); }
.town-guide-grid article h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--font-display); font-size: 20px; color: var(--color-ink); }
.town-guide-grid article h3::before { content: ""; width: 26px; height: 26px; flex: 0 0 auto; background: var(--color-brand-strong); -webkit-mask: var(--tg-icon) no-repeat center / contain; mask: var(--tg-icon) no-repeat center / contain; }
.town-guide-grid article:nth-child(1) h3 { --tg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='14' rx='3'/%3E%3Cpath d='M4 11h16M8 21l1.5-3M16 21l-1.5-3M8 7h2M14 7h2'/%3E%3C/svg%3E"); }
.town-guide-grid article:nth-child(2) h3 { --tg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2.5'/%3E%3Ccircle cx='19' cy='18' r='2.5'/%3E%3Cpath d='M7.5 6H13a4 4 0 0 1 0 8H9a4 4 0 0 0 0 8h7.5'/%3E%3C/svg%3E"); }
.town-guide-grid article:nth-child(3) h3 { --tg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.town-guide-grid article p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--color-ink-2); }

/* ---------- 方案清單：索引式點狀引導線 ---------- */
.town-inventory { width: 100%; padding: 26px 28px 22px; background: var(--color-paper-2); border-radius: var(--radius-card); border: 1px solid var(--color-rule); }
.town-inventory__list { gap: 0 var(--space-xl); border-top: 0; }
.town-inventory__list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-rule); }
.town-inventory__list li::after { content: ""; order: 2; flex: 1 1 auto; border-bottom: 2px dotted var(--color-rule-2); transform: translateY(-5px); min-width: 24px; }
.town-inventory__list li a { order: 1; flex: 0 1 auto; font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
.town-inventory__list li a:hover { color: var(--color-brand-strong); }
.town-inventory__capacity { order: 3; flex: 0 0 auto; font-family: var(--font-outlier); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--color-brand); }

/* ---------- 選區筆記：旁註 ---------- */
.town-location__body { border-left: 3px solid var(--color-accent); padding-left: var(--space-lg); }
.town-location__body strong { display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-outlier); font-size: 12px; letter-spacing: 2px; vertical-align: 2px; }

/* ---------- FAQ 手風琴 ---------- */
.town-faq { padding: 26px 28px 18px; background: var(--color-paper-2); border-radius: var(--radius-card); border: 1px solid var(--color-rule); }
.town-faq > h2 { margin-bottom: 8px; }
.town-faq .faq-accordion__button { font-family: var(--font-display); font-size: 17px; }
.town-faq .faq-accordion__button[aria-expanded="true"] { color: var(--color-brand-strong); }
.town-faq h3 { font-family: var(--font-display); font-size: 17px; }

/* ---------- 延伸閱讀 ---------- */
.town-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 0 8px; }
.town-related__label { font-family: var(--font-outlier); font-size: 12px; font-weight: 700; letter-spacing: 4px; color: var(--color-muted); margin-right: 6px; }
.town-related a { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: var(--radius-pill); background: var(--color-paper); border: 1px solid var(--color-rule-2); color: var(--color-brand-strong); font-weight: 700; text-decoration: none; transition: .2s; }
.town-related a:hover { background: var(--color-brand-strong); border-color: var(--color-brand-strong); color: var(--color-brand-ink); }

/* ---------- RWD ---------- */
@media (max-width: 900px) {
  .town-guide-page .town-hero { min-height: 400px; }
  .town-hero__title h1 { font-size: 40px; }
  .town-postmark { width: 118px; height: 94px; right: 140px; bottom: -44px; }
  .town-guide-grid { grid-template-columns: 1fr; }
  .town-inventory__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .town-guide-page .town-hero { min-height: 320px; }
  .town-hero__title { left: 16px; right: 16px; bottom: 30px; }
  .town-hero__title h1 { font-size: 30px; letter-spacing: 1px; }
  .town-hero__eyebrow { letter-spacing: 3px; }
  .town-hero__stamp { width: 96px; right: 12px; bottom: -22px; }
  .town-postmark { width: 92px; height: 74px; right: 104px; bottom: -32px; }
  .town-intro { padding-top: calc(var(--space-xl) + 10px); }
  .town-index__links a { min-width: 56px; font-size: 12px; }
  .town-inventory, .town-faq { padding: 20px 16px 14px; }
}

/* ===== v2.1：hero 改為「明信片紙面」（底圖 inbanner 系列皆有燒字，不再使用）；內文靠左、連結行內 ===== */
.town-guide-page .town-hero {
  min-height: 400px;
  background-color: var(--color-paper-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='320' viewBox='0 0 520 320' fill='none' stroke='%23b9cfc4' stroke-width='1.1'%3E%3Cpath d='M-20 60c60-30 120 30 180 0s120-40 180 0 120 30 200 0'/%3E%3Cpath d='M-20 110c60-30 120 30 180 0s120-40 180 0 120 30 200 0'/%3E%3Cpath d='M-20 170c60-30 120 30 180 0s120-40 180 0 120 30 200 0'/%3E%3Cpath d='M-20 230c60-30 120 30 180 0s120-40 180 0 120 30 200 0'/%3E%3Cpath d='M-20 290c60-30 120 30 180 0s120-40 180 0 120 30 200 0'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center;
  background-size: 520px 320px;
  border-top: 0;
}
.town-guide-page .town-hero::before,
.town-guide-page .town-hero::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px; z-index: 1; inset-inline: 0; background: repeating-linear-gradient(135deg, var(--color-brand) 0 22px, transparent 22px 34px, var(--color-accent) 34px 56px, transparent 56px 68px);
}
.town-guide-page .town-hero::before { top: 0; }
.town-guide-page .town-hero::after { top: auto; bottom: 0; }
.town-hero__title { color: var(--color-ink); text-shadow: none; bottom: 58px; max-width: 700px; }
.town-hero__eyebrow { color: var(--color-brand); opacity: 1; }
.town-hero__title h1 { font-size: 54px; }
.town-hero__title h1 small { color: var(--color-ink-2); opacity: 1; font-size: 16px; }
.town-hero__stamp { bottom: -30px; background: var(--color-paper); }
.town-postmark { bottom: -52px; }
/* 內文靠左，區塊標題維持置中 */
.town-document { text-align: left; }
.town-section__heading, .town-faq > .town-section__eyebrow, .town-faq > h2, .town-update { text-align: center; }
.town-intro__lede, .town-guide-grid article, .town-location__body, .town-inventory__list { text-align: left; }
.town-document .town-intro__lede a, .town-document .town-guide-grid a, .town-document .town-location__body a, .town-document .town-update a, .town-document .town-faq a { display: inline; }
.town-location__body p { margin: 0 0 12px; }
@media (max-width: 900px) { .town-guide-page .town-hero { min-height: 340px; } .town-hero__title h1 { font-size: 38px; } }
@media (max-width: 560px) { .town-guide-page .town-hero { min-height: 300px; } .town-hero__title { bottom: 40px; } .town-hero__title h1 { font-size: 29px; } }
/* v2.1 手機版：標題靠左並讓出郵票位置，郵戳縮小移到郵票左下 */
@media (max-width: 560px) {
  .town-hero__title { left: 16px; right: 122px; bottom: 34px; max-width: none; text-align: left; }
  .town-hero__title h1 { font-size: 26px; line-height: 1.25; letter-spacing: 0; }
  .town-hero__title h1 small { font-size: 12px; margin-top: 6px; letter-spacing: 0; }
  .town-hero__eyebrow { font-size: 10px; letter-spacing: 3px; margin-bottom: 6px; }
  .town-hero__stamp { width: 92px; right: 12px; bottom: -16px; transform: rotate(2deg); }
  .town-postmark { width: 78px; height: 62px; right: 92px; bottom: -22px; }
  .town-guide-page .gy-crumb { padding-right: 190px; }
}
@media (max-width: 560px) { .town-postmark { right: 116px; bottom: -12px; } .town-guide-page .gy-crumb { padding-right: 150px; } }

/* ===== v2.2：hero 高度 -30%、麵包屑膠囊化（同 gv 攻略頁）、各區塊統一 1120 寬 ===== */
.town-guide-page .town-hero { min-height: 280px; }
.town-hero__title { bottom: 40px; }
.town-hero__title h1 { font-size: 46px; }
.town-hero__stamp { width: 150px; bottom: -28px; }
.town-postmark { right: 150px; bottom: -50px; width: 136px; height: 108px; }
/* 麵包屑：膠囊連結 */
.town-guide-page .gy-crumb { min-height: 0; padding: 18px var(--space-5xl) 0 0; gap: 8px; font-size: 14px; color: var(--color-muted); }
.town-guide-page .gy-crumb a { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: #fff; box-shadow: 0 5px 14px oklch(18% 0.025 155 / 0.06); color: var(--color-ink); text-decoration: none; transition: .2s; }
.town-guide-page .gy-crumb a:hover { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-ink); }
.town-guide-page .gy-crumb span { color: var(--color-ink); }
/* 區塊寬度統一（與住宿清單、精選區同寬） */
.town-intro, .town-index, .town-section, .town-related, .town-update { width: min(1120px, calc(100% - var(--space-lg) * 2)); max-width: none; margin-inline: auto; }
.town-intro__lede { max-width: none; }
.town-location__body p, .town-update p { max-width: none; }
@media (max-width: 900px) {
  .town-guide-page .town-hero { min-height: 240px; }
  .town-hero__title h1 { font-size: 34px; }
  .town-postmark { width: 110px; height: 88px; right: 130px; bottom: -40px; }
}
@media (max-width: 600px) {
  .town-intro, .town-index, .town-section, .town-related, .town-update { width: calc(100% - var(--space-lg)); }
}
@media (max-width: 560px) {
  .town-guide-page .town-hero { min-height: 210px; }
  .town-hero__title { bottom: 26px; }
  .town-hero__title h1 { font-size: 24px; }
  .town-hero__stamp { width: 84px; bottom: -14px; }
  .town-postmark { width: 72px; height: 58px; right: 104px; bottom: -10px; }
  .town-guide-page .gy-crumb { padding: 14px 140px 0 0; font-size: 13px; }
}

/* ===== v2.3：外抓精選片段（.game-box 浮動欄）清除浮動並卡片化；住宿清單區塊縮 10% 寬 ===== */
.town-stays { display: flow-root; }
.town-stays .game-box { display: flow-root; width: 100%; margin: 0 auto; padding: 22px 26px 14px; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.town-stays .game-box::before { content: "精選民宿 · 官網直達"; display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-outlier); font-size: 12px; font-weight: 700; letter-spacing: 4px; color: var(--color-brand); }
.town-stays .game-box [class*="col-"] { padding: 0 8px; }
.town-stays .game-box a { display: block; padding: 6px 0; color: var(--color-ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.town-stays .game-box a:hover { color: var(--color-brand-strong); }
.town-inventory { clear: both; width: min(1120px, calc(100% - var(--space-lg) * 2)); margin: var(--space-xl) auto 0; }
.town-inventory .town-section__heading { text-align: center; }
@media (max-width: 600px) { .town-inventory { width: calc(100% - var(--space-lg)); } }

/* v2.4：車站帶「目前」標籤放大成膠囊徽章，目前站點加大 */
.town-index__links { padding-top: 30px; }
.town-index__links::before { top: 36px; }
.town-index__links a[aria-current="page"]::after { content: "目前所在"; top: -30px; padding: 3px 10px; border-radius: 999px; background: var(--color-brand-strong); color: var(--color-brand-ink); font-size: 12px; font-weight: 700; letter-spacing: 2px; line-height: 1.4; white-space: nowrap; box-shadow: 0 4px 10px oklch(18% 0.025 155 / 0.18); }
.town-index__links a[aria-current="page"]::before { width: 18px; height: 18px; margin-top: -2px; }
.town-index__links a[aria-current="page"] { font-size: 15px; }
@media (max-width: 560px) { .town-index__links a[aria-current="page"]::after { font-size: 11px; padding: 2px 8px; top: -28px; } }