/* ============================================================
   gd.css — 花蓮民宿資訊網 深度攻略(各鄉鎮景點推薦 /town_travel/、美食推薦 /food_guide/、兩個總覽頁)共用樣式
   2026-11-04 建立。版型比照宜蘭民宿網的 gd-(美食)與 tp-(景點)元件,配色改用本站 site.css 的變數
   (--ocean 深海藍、--moss 苔綠、--leaf 葉綠、--gold 金)。由 inc/gd_render.php 載入,在 site.css 之後。
   ============================================================ */
.gd-wrap{max-width:1100px;margin:0 auto;padding:20px 16px 34px;text-align:left}

/* ---------- 頁首:主圖、麵包屑、標題、導言 ---------- */
.gd-hero{margin:0 0 4px}
.gd-hero img{width:100%;height:auto;aspect-ratio:20/9;object-fit:cover;display:block;border-radius:16px;
  box-shadow:0 18px 44px -24px rgba(21,61,77,.55)}
.gd-hero figcaption{font-size:12.5px;color:var(--muted);margin-top:6px;text-align:right;line-height:1.5}
.gd-crumb{font-size:12.5px;color:var(--muted);margin:14px 0 8px;line-height:1.6}
.gd-crumb a{color:var(--muted)}
.gd-crumb a:hover{color:var(--moss)}
.gd-head h1{font:600 30px/1.45 var(--serif);color:var(--ocean);margin:0 0 12px;letter-spacing:.01em}
.gd-head p{font-size:15.5px;line-height:1.95;margin:0 0 10px}

/* 時效提醒(颱風、地震後的開放狀態、花季管制等) */
.gd-alert{background:#fff9ea;border:1px solid #eedcab;border-left:5px solid var(--gold);border-radius:10px;
  padding:12px 18px;margin:16px 0 4px}
.gd-alert b{color:#6f5414}
.gd-alert ul{margin:6px 0 0;padding-left:20px}
.gd-alert li{font-size:14.5px;line-height:1.85;margin:4px 0}

/* ---------- 膠囊連結(目錄、速切、住宿、延伸閱讀、總覽) ---------- */
.gd-nav{margin-top:16px}
.gd-label{margin:0 0 8px;font-weight:700;color:var(--moss);font-size:14.5px;line-height:1.6}
.gd-pills{display:flex;flex-wrap:wrap;gap:8px}
.gd-pills a{display:inline-block;padding:7px 15px;border:1px solid #cfdcc4;border-radius:999px;font-size:14px;
  color:#2d4a3a;background:#fbfdf8;line-height:1.45;text-decoration:none}
.gd-pills a:hover{border-color:var(--leaf);color:var(--moss);background:#f1f8e9}
.gd-pills a.gd-now{background:var(--ocean);border-color:var(--ocean);color:#fff;pointer-events:none}
.gd-pills a.gd-dark{background:var(--moss);border-color:var(--moss);color:#fff}
.gd-pills a.gd-dark:hover{background:var(--ocean);border-color:var(--ocean);color:#fff}
.gd-pills small{font-size:12px;color:var(--muted);margin-left:2px}
.gd-pills a.gd-dark small,.gd-pills a.gd-now small{color:#dfe9e3}

/* ---------- 內文 ---------- */
.gd-art h2{font:600 22px/1.5 var(--serif);color:var(--moss);margin:36px 0 12px;padding-bottom:7px;border-bottom:2px solid #dcedc8}
.gd-art h3{font-size:17px;line-height:1.55;color:var(--ocean);margin:22px 0 6px}
.gd-art p{font-size:15.5px;line-height:1.95;margin:0 0 10px}
.gd-art ul,.gd-art ol{margin:0 0 12px;padding-left:22px}
.gd-art li{font-size:15px;margin:6px 0;line-height:1.85}
.gd-art strong{color:var(--ink)}
.gd-intro{color:#4a5a5f}

/* 速查表 */
.gd-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 16px}
.gd-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:540px}
.gd-table th{background:var(--ocean);color:#fff;padding:9px 12px;text-align:left;font-weight:700;white-space:nowrap}
.gd-table td{border:1px solid #e2e7dc;padding:9px 12px;line-height:1.7;background:#fff;vertical-align:top}
.gd-table tr:nth-child(even) td{background:#f8fbf4}
.gd-table td:first-child{white-space:nowrap}
.gd-table td:first-child a{font-weight:700}

/* 圖列 */
.gd-figrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 18px}
.gd-figrow figure{margin:0}
.gd-figrow img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:12px;
  box-shadow:0 10px 26px -18px rgba(21,61,77,.5)}
.gd-figrow figcaption{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.55}

/* 店家/景點卡(景點頁的 tp-day,美食頁的店家同一套) */
.tp-day{background:#fff;border:1px solid #e2e7dc;border-radius:12px;padding:14px 20px 12px;margin:0 0 12px}
.gd-art .tp-day h3{display:inline-block;background:var(--ocean);color:#fff;font-size:15px;font-weight:700;
  padding:4px 14px;border-radius:999px;margin:0 0 8px;line-height:1.5}
.tp-type{display:inline-block;font-size:12.5px;color:var(--moss);border:1px solid #cfdcc4;border-radius:999px;
  padding:1px 10px;margin-left:8px;vertical-align:3px;line-height:1.6;background:#fbfdf8}
.gd-art .tp-day p{font-size:14.5px;line-height:1.95;margin:0 0 6px}
.gd-art .tp-day .tp-tip{color:#46574c}
.gd-art .tp-day .tp-tip b,.gd-art .tp-day .tp-acc b{color:var(--moss)}
.gd-art .tp-day .tp-acc{font-size:13.5px;color:#4a5a5f}
.gd-art .tp-day .tp-info,.gd-art .tp-info{font-size:13px;color:#6b6f63;margin:8px 0 0;line-height:1.85}
.tp-info b{color:var(--ink)}
.tp-info a{color:var(--ocean);text-decoration:underline}

/* 住宿區塊 */
.tp-stay{background:#eef5e8;border:1px solid #d6e5c8;border-radius:12px;padding:14px 20px;margin:8px 0 16px}
.gd-art .tp-stay p,.tp-stay p{font-size:14.5px;line-height:1.9;margin:0 0 10px}
.tp-stay p b,.tp-stay p strong{color:var(--moss)}
.tp-stay .gd-pills a:not(.gd-dark):not(.gd-now){background:#fff}  /* 2026-11-07:深色膠囊(gd-dark)不蓋白底,否則白字白底看不到 */

/* 常見問題 */
.gd-faq details{background:#fff;border:1px solid #e2e7dc;border-radius:12px;padding:13px 18px;margin-bottom:10px}
.gd-faq summary{font-weight:700;color:var(--ocean);cursor:pointer;font-size:15.5px;line-height:1.6}
.gd-faq details p{margin:10px 0 2px;font-size:14.5px;line-height:1.9}

/* 資料來源 */
.gd-src{margin-top:30px;font-size:13px;color:var(--muted)}
.gd-src p{font-size:13px;line-height:1.8;margin:0 0 6px}
.gd-src ol{padding-left:20px;margin:6px 0 0}
.gd-src li{font-size:13px;margin:3px 0;line-height:1.7}
.gd-src a{color:var(--muted);text-decoration:underline;word-break:break-all}

/* 總覽頁卡片 */
.gd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:12px 0 22px}
.gd-card{display:block;background:#fff;border:1px solid #e2e7dc;border-radius:14px;overflow:hidden;color:var(--ink);text-decoration:none}
.gd-card:hover{border-color:var(--leaf);box-shadow:0 10px 24px -18px rgba(21,61,77,.6)}
.gd-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.gd-card .gd-card-ph{display:block;aspect-ratio:4/3;background:linear-gradient(135deg,#dcedc8,#cfe3e8)}
.gd-card b{display:block;padding:11px 14px 2px;color:var(--ocean);font-size:16px;line-height:1.5}
.gd-card span{display:block;padding:0 14px 13px;font-size:13.5px;color:var(--muted);line-height:1.75}
.gd-card:hover b{color:var(--moss)}

/* ---------- 頁尾前:攻略總覽、鄉鎮入口 ---------- */
.gd-ov{margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}
.gd-ov .gd-pills{margin-bottom:14px}
.gd-towns{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:8px 0 0}
.gd-town{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.7}
.gd-town b a{color:var(--moss);font-size:15px}
.gd-town span{display:block;color:var(--muted);font-size:13.5px}
.gd-town.gd-on{border-color:var(--leaf);background:#f1f8e9}

/* 跳轉預留共用頁首高度(header/nav2.php sticky:桌機 88px、手機 55px)+12px,與首頁、鄉鎮頁相同 */
[id^="sec-"],[id^="spot-"],[id^="shop-"]{scroll-margin-top:100px}

@media (max-width:768px){
  .gd-wrap{padding:14px 16px 26px}
  .gd-hero img{border-radius:12px}
  .gd-head h1{font-size:24px}
  .gd-head p,.gd-art p{font-size:15px}
  .gd-art h2{font-size:20px;margin-top:30px}
  .gd-figrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tp-day{padding:13px 15px 11px}
  .tp-stay{padding:13px 15px}
  .gd-pills a{padding:7px 13px}
}
@media (max-width:420px){
  .gd-cards{grid-template-columns:1fr}
  .gd-towns{grid-template-columns:1fr 1fr}
}