@charset "UTF-8";

/* 茶旅錨點：只預留主導覽高度，目標區塊緊接導覽下緣 */
html { scroll-padding-top: var(--header-height); }

/* 茶旅版面：內容沿用共用 wrap 置中，不因浮動導覽改變寬度 */
.tour-section { position: relative; isolation: isolate; padding: 100px 0 110px; }
.tour-section-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px 24px; padding-bottom: 30px; margin-bottom: 64px; border-bottom: 1px solid var(--color-line); }
.tour-section-number { color: var(--color-muted); font: 400 var(--font-small)/1.5 var(--font-en); }
.tour-section-heading p { margin-left: auto; font: 400 var(--font-note)/1.8 var(--font-en); letter-spacing: .16em; }
.tour-placeholder { min-height: max(650px, 85svh); border-top: 1px solid var(--color-line); }
.tour-placeholder .tour-section-heading { border-bottom: 0; }

/* 茶旅浮動裝飾：置於內容後方與右側留白，透明度由父層 g-opacity-0_4 統一控制 */
.tour-section > .tour-decor { z-index: -1; top: 24px; right: -200px; width: clamp(260px, 32vw, 440px); }
.decor-tour-experience { transform: rotate(-10deg); }
.tour-section > .decor-tour-camping { top: 48px; right: -240px; transform: rotate(8deg); }
.tour-section > .decor-tour-stay { top: 40px; right: -220px; transform: rotate(-8deg); }
.decor-tour-store { transform: rotate(10deg); }

/* 頁內導覽：沿用既有圖示套件，以深色底、暖金色圖文組成正方形選項 */
.tour-nav { background: var(--color-ink); color: #d7b18a; }
.tour-nav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 96px)); justify-content: center; }
.tour-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 1; padding: 8px 4px; border: 1px solid rgba(215, 177, 138, .2); font-size: var(--font-small); line-height: 1.4; letter-spacing: 0; transition: background-color var(--transition), color var(--transition); }
.tour-nav a > span { white-space: nowrap; }
.tour-nav-icon { font-size: 32px; line-height: 1; }
.tour-nav a:hover { background: rgba(215, 177, 138, .12); }
.tour-nav a[aria-current="location"] { background: #d7b18a; color: var(--color-ink); }
.tour-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }

/* 桌機貼邊：預設靠右，只需改 NAV 的 data-side 即可切換為靠左 */
.tour-nav.is-enhanced { position: fixed; z-index: 35; top: calc(50% + var(--header-height) / 2); right: 0; left: auto; width: 96px; max-height: calc(100svh - var(--header-height) - 24px); overflow-y: auto; transform: translateY(-50%); }
.tour-nav.is-enhanced[data-side="left"] { right: auto; left: 0; }
.tour-nav.is-enhanced ul { display: block; }
.has-overlay .tour-nav.is-enhanced { visibility: hidden; }

/* 體驗引言：照片與文字並排，保留寬鬆閱讀節奏 */
.experience-intro { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 48px; }
.experience-photo { display: block; width: 100%; height: auto; overflow: hidden; background: var(--color-deep); }
.experience-hero-photo figcaption { margin-top: 14px; font-size: var(--font-note); color: var(--color-muted); }
.experience-intro-copy h3 { font-size: clamp(28px, 2.7vw, 38px); font-weight: 400; line-height: 1.6; letter-spacing: .1em; }
.experience-intro-copy .eyebrow { margin-bottom: 16px; color: var(--color-muted); }
.experience-intro-copy .experience-subtitle { margin: 16px 0 20px; font-size: var(--font-large); }
.experience-intro-copy p { line-height: 2; }
.experience-intro-copy .experience-includes { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 26px; font-size: var(--font-small); color: var(--color-muted); }
.page-tea-tourism .experience-intro-copy .box_btn { margin-top: 32px; }

/* 體驗摘要：四項資訊集中排列，附贈內容另列 */
.experience-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 30px 0; border-block: 1px solid var(--color-line); }
.page-tea-tourism .experience-facts { margin-top: 64px; }
.experience-facts > div + div { padding-left: 24px; border-left: 1px solid var(--color-line); }
.experience-facts dt { margin-bottom: 12px; font-size: var(--font-small); font-weight: 400; color: var(--color-muted); }
.experience-facts dd { margin: 0; }
.experience-facts strong { font-size: var(--font-large); font-weight: 500; letter-spacing: .025em; }
.experience-facts dd span { display: block; font-size: var(--font-small); }
.experience-facts > div:first-child dd span { display: inline; margin-left: 6px; }
.page-tea-tourism .experience-time-note { margin-top: 12px; color: var(--color-muted); font-size: var(--font-note); }
.experience-gift { display: flex; align-items: center; gap: 28px; margin-top: 28px; padding: 24px 30px; background: var(--color-deep); color: #fff; }
.experience-gift > span { flex-shrink: 0; font: 400 var(--font-note)/1.8 var(--font-en); letter-spacing: .14em; color: var(--color-gold); }
.experience-gift p { font-size: var(--font-small); }

/* 體驗流程：交錯圖文與編號，三個階段維持相同閱讀層次 */
.experience-flow { padding-top: 100px; }
.experience-flow-heading { margin-bottom: 48px; text-align: center; }
.experience-flow-heading .eyebrow { margin-bottom: 12px; color: var(--color-muted); }
.experience-flow-heading h3, .experience-booking h3 { font-size: clamp(26px, 2.4vw, 32px); font-weight: 400; line-height: 1.7; letter-spacing: .1em; }
.experience-steps { list-style: none; margin: 0; padding: 0; }
.experience-step { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.experience-step + .experience-step { margin-top: 80px; }
.experience-step:nth-child(even) .experience-photo { grid-column: 2; grid-row: 1; }
.experience-step:nth-child(even) .experience-step-copy { grid-column: 1; grid-row: 1; }
.experience-step-label { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; font: 400 var(--font-small)/1.5 var(--font-en); letter-spacing: .12em; }
.experience-step-label::before { content: ""; width: 26px; border-top: 1px solid var(--color-ink); }
.experience-step-label span { color: var(--color-muted); font-size: var(--font-note); }
.experience-step-copy h4 { margin: 0 0 20px; font-size: 28px; font-weight: 400; line-height: 1.6; }
.experience-step-copy .experience-step-lead { font-size: var(--font-large); }
.experience-step-copy p + p { margin-top: 18px; }

/* 預約區：深色背景向左延伸，由主內容邊界裁切；文字維持原有對齊 */
.experience-booking { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; margin-top: 100px; padding: 48px 36px; color: #fff; }
.experience-booking::before, .experience-booking::after { content: ""; position: absolute; z-index: -1; inset: 0 0 0 -100vw; pointer-events: none; }
.experience-booking::before { background: var(--color-deep); }
.experience-booking::after { background: url("../img/background/bg-texture.png") repeat; background-size: 400px; filter: invert(1); opacity: .12; }
.experience-booking > div { min-width: 0; }
.experience-booking h3 { text-wrap: balance; }
.experience-booking .eyebrow { margin-bottom: 12px; color: var(--color-gold); }
.experience-booking h3 + p { margin-top: 20px; }
.page-tea-tourism .experience-contact { margin-top: 24px; font-size: var(--font-small); }
.experience-contact > div { display: grid; grid-template-columns: 72px 1fr; gap: 16px; }
.experience-contact > div + div { margin-top: 12px; }
.experience-contact dt { font-weight: 400; color: rgba(255, 255, 255, .72); }
.experience-contact dd { margin: 0; }
.experience-contact a { text-decoration: underline; text-underline-offset: 4px; }
/* 茶旅按鈕：沿用首頁交錯細框、短橫線與深底反白樣式 */
.page-tea-tourism .box_btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 242px; max-width: calc(100% - 22px); min-height: 42px; margin: 11px; padding: 16px 42px; border: 0; border-radius: 0; background: #fff; color: var(--color-ink); font-size: var(--font-base); font-weight: 500; line-height: 1.5; text-align: center; transition: color .5s ease-in-out, background-color .5s ease-in-out; }
.page-tea-tourism .box_btn:focus-visible { outline-offset: 14px; }
.experience-booking-action { text-align: center; }
.experience-booking-action p { margin-top: 14px; font-size: var(--font-note); color: rgba(255, 255, 255, .72); }
@media (hover: hover) {
  .page-tea-tourism .box_btn:hover { background: var(--color-ink); color: #fff; }
  .page-tea-tourism .box_btn.solid.white:hover { background: transparent; color: #fff; }
}

/* 車泊引言：沿用體驗版型，桌機交換為左文右圖 */
.camping-section { border-top: 1px solid var(--color-line); }
.camping-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.camping-intro .experience-hero-photo { grid-column: 2; grid-row: 1; }
.camping-intro .experience-intro-copy { grid-column: 1; grid-row: 1; }

/* 車泊費用：純車宿與搭帳分表，保留人數與平假日的清楚對照 */
.camping-pricing { margin-top: 80px; }
.camping-block-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 32px; }
.camping-block-heading .eyebrow { margin-bottom: 10px; color: var(--color-muted); }
.camping-block-heading h3 { font-size: clamp(26px, 2.4vw, 32px); font-weight: 400; line-height: 1.7; letter-spacing: .1em; }
.camping-block-heading > p { color: var(--color-muted); font-size: var(--font-small); }
.camping-rate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.camping-rate-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: rgba(255, 255, 255, .65); }
.camping-rate-table caption { caption-side: top; padding: 0 0 18px; color: var(--color-ink); font-size: var(--font-large); line-height: 1.8; text-align: left; }
.camping-rate-table caption span { display: block; color: var(--color-muted); font-size: var(--font-small); }
.camping-rate-table th, .camping-rate-table td { padding: 16px 12px; border-bottom: 1px solid var(--color-line); text-align: center; vertical-align: middle; font-weight: 400; }
.camping-rate-table thead { border-top: 1px solid var(--color-ink); background: rgba(12, 44, 52, .06); }
.camping-rate-table thead th { font-size: var(--font-base); }
.camping-rate-table thead span { display: block; color: var(--color-muted); font-size: var(--font-note); white-space: nowrap; }
.camping-rate-table tbody th { font-size: var(--font-small); }
.camping-rate-table td { font: 400 var(--font-large)/1.6 var(--font-en); font-variant-numeric: tabular-nums; }
.page-tea-tourism .camping-rate-note { margin-top: 24px; font-size: var(--font-small); }
.page-tea-tourism .camping-rate-notes { margin-top: 12px; padding-left: 1.3em; list-style: disc; color: var(--color-muted); font-size: var(--font-small); }
.camping-rate-notes li + li { margin-top: 6px; }

/* 車泊加購與規範：費用分列計價單位，規則依使用情境整理 */
.camping-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 64px; margin-top: 80px; }
.camping-addon-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--color-line); }
.camping-addon-list > div:first-child { padding-top: 0; }
.camping-addon-list dt { font-weight: 400; }
.camping-addon-list dd { margin: 0; text-align: right; }
.camping-addon-list strong { font: 400 var(--font-large)/1.6 var(--font-en); white-space: nowrap; }
.camping-addon-list span { display: block; margin-top: 4px; color: var(--color-muted); font-size: var(--font-small); line-height: 1.8; }
.camping-addon-list dd span { font-size: var(--font-note); }
.camping-rule-list > div + div { margin-top: 28px; }
.camping-rule-list dt { margin-bottom: 8px; font-weight: 500; }
.camping-rule-list dd { margin: 0; font-size: var(--font-small); line-height: 2; }

/* 車泊預約：按鈕與文字左右交換，深色紋理底向右貼齊視窗邊界 */
.camping-booking { grid-template-columns: auto minmax(0, 1fr); }
.camping-booking::before, .camping-booking::after { inset: 0 -100vw 0 0; }
.camping-booking .camping-booking-copy { grid-column: 2; grid-row: 1; }
.camping-booking .experience-booking-action { grid-column: 1; grid-row: 1; }

/* 合作旅宿：簡介承接合作緣由，清單每列兩家，單數末筆自然靠左 */
.stay-section { border-top: 1px solid var(--color-line); }
.stay-intro { max-width: 760px; margin-bottom: 56px; }
.stay-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 40px; }
.stay-list > li, .stay-card { min-width: 0; }
/* 旅宿橫向白底區塊：沿用按鈕交錯細框，左側方形封面、右側文字 */
.stay-card { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: start; gap: 20px; padding: 20px; background: #fff; transition: box-shadow var(--transition); }
.stay-card::before, .stay-card::after { content: ""; position: absolute; pointer-events: none; border-color: var(--color-line); transition: border-color var(--transition); }
.stay-card::before { inset: 0 -6px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.stay-card::after { inset: -6px 0; border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); }

/* 旅宿照片：正方形裁切，替換不同長寬的正式照片時仍保持一致 */
.stay-cover { aspect-ratio: 1; overflow: hidden; background: rgba(255, 255, 255, .25); }
.stay-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }

/* 旅宿資訊：名稱與鄉鎮標籤並排，地址、描述及拜訪連結依序呈現 */
.stay-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; min-height: 140px; }
.stay-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; }
.stay-heading h3 { min-width: 0; font-size: var(--font-large); font-weight: 400; line-height: 1.6; overflow-wrap: anywhere; }
.stay-town { flex-shrink: 0; padding: 2px 10px; border: 1px solid rgba(232, 173, 32, .3); background: rgba(232, 173, 32, .08); color: var(--color-deep); font-size: var(--font-note); line-height: 1.8; }
.stay-info .stay-address { color: var(--color-muted); font-size: var(--font-small); line-height: 1.6; }
.stay-info .stay-description { margin: 0; font-size: var(--font-small); line-height: 1.8; }
.stay-info .stay-visit { align-items: center; align-self: flex-end; margin-top: auto; padding-block: 2px; color: var(--color-deep); line-height: 1.5; }

/* 旅宿懸停：細框轉深、照片輕微放大，維持白色底與清楚的拜訪入口 */
@media (hover: hover) {
  .stay-card:hover { box-shadow: 0 6px 18px rgba(12, 44, 52, .06); }
  .stay-card:hover::before, .stay-card:hover::after { border-color: var(--color-deep); }
  .stay-card:hover .stay-cover img { transform: scale(1.03); }
}


/* 賣店配色：沿用旅宿卡片尺寸與交錯細框，以深茶綠底、淺色文字及暖金細節呈現 */
.store-card { background: var(--color-deep); color: #fff; }
.store-card::before, .store-card::after { border-color: rgba(215, 177, 138, .65); }
.store-card .stay-town { border-color: rgba(232, 173, 32, .45); background: rgba(232, 173, 32, .12); color: #f4d99b; }
.store-card .stay-address { color: rgba(255, 255, 255, .72); }
.store-card .stay-info .stay-visit { color: #f4d99b; border-color: rgba(244, 217, 155, .6); }

/* 賣店懸停：暖金細框加深，照片動態沿用旅宿設定 */
@media (hover: hover) {
  .store-card:hover { box-shadow: 0 6px 18px rgba(12, 44, 52, .16); }
  .store-card:hover::before, .store-card:hover::after { border-color: #d7b18a; }
}

/* 側邊空間不足或視窗偏矮時：方塊改為底部橫排，避免遮住內容 */
@media (max-width: 1319px), (max-height: 560px) {
  .tour-nav.is-enhanced, .tour-nav.is-enhanced[data-side="left"] { top: auto; right: 0; bottom: 0; left: 0; width: min(384px, 100%); max-height: none; margin-inline: auto; padding-bottom: env(safe-area-inset-bottom); transform: none; }
  .tour-nav.is-enhanced ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 平板與窄桌機：縮小圖文間距 */
@media (max-width: 1199px) {
  .stay-list { column-gap: 32px; }
  .stay-card { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .stay-info { min-height: 112px; }
  .experience-intro { gap: 32px; }
  .experience-step { gap: 40px; }
  .experience-booking { padding-inline: 28px; gap: 28px; }
}

/* 合作旅宿平板版：每列一家，繼續維持左圖右文 */
@media (max-width: 991px) {
  .camping-details { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .stay-list { grid-template-columns: minmax(0, 1fr); }
  .stay-card { grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 20px; }
  .stay-info { min-height: 140px; }
}

/* 手機：改為單欄圖文，摘要兩欄與底部四項導覽 */
@media (max-width: 767px) {
  /* 手機裝飾：縮小並退至標題右側，保留內文與操作區的閱讀空間 */
  .tour-section > .tour-decor { top: 12px; right: -120px; width: 210px; }
  /* 車泊手機版：還原圖文順序，兩張費用表依序呈現，不需左右滑動 */
  .camping-intro .experience-hero-photo, .camping-intro .experience-intro-copy { grid-column: auto; grid-row: auto; }
  .camping-pricing, .camping-details { margin-top: 56px; }
  .camping-rate-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .camping-rate-table th, .camping-rate-table td { padding: 14px 8px; }
  .camping-addon-list > div { gap: 12px; }
  .camping-booking .camping-booking-copy, .camping-booking .experience-booking-action { grid-column: auto; grid-row: auto; }
  /* 合作旅宿手機版：縮小左側方形照片，保留右側文字完整換行 */
  .stay-intro { margin-bottom: 36px; }
  .stay-list { gap: 32px; }
  .stay-card { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .stay-info { min-height: 88px; }
  .tour-section { padding: 64px 0 80px; }
  .tour-section-heading { gap: 8px 16px; margin-bottom: 36px; padding-bottom: 24px; }
  .tour-section-heading p { width: 100%; margin-left: 34px; }
  .tour-placeholder { min-height: max(550px, 80svh); }
  .tour-nav-icon { font-size: 28px; }
  .experience-intro { grid-template-columns: 1fr; gap: 32px; }
  .experience-intro-copy h3 { font-size: 32px; }
  .page-tea-tourism .experience-facts { margin-top: 40px; }
  .experience-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding-block: 24px; }
  .experience-facts > div + div { padding-left: 0; border-left: 0; }
  .experience-facts > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--color-line); }
  .experience-facts strong { font-size: var(--font-large); }
  .experience-facts > div:first-child dd span { display: block; margin-left: 0; }
  .experience-gift { display: block; padding: 24px; }
  .experience-gift p { margin-top: 8px; }
  .experience-flow { padding-top: 64px; }
  .experience-flow-heading { margin-bottom: 32px; }
  .experience-step { grid-template-columns: 1fr; gap: 28px; }
  .experience-step + .experience-step { margin-top: 56px; }
  .experience-step:nth-child(even) .experience-photo, .experience-step:nth-child(even) .experience-step-copy { grid-column: auto; grid-row: auto; }
  .experience-step-label { margin-bottom: 16px; }
  .experience-step-copy h4 { font-size: 26px; margin-bottom: 12px; }
  .experience-booking { grid-template-columns: minmax(0, 1fr); margin-top: 64px; padding: 32px 24px 40px; gap: 32px; }
  .experience-booking h3 { font-size: 26px; }
  .experience-contact > div { grid-template-columns: 1fr; gap: 2px; }
  .page-tea-tourism .box_btn { width: 212px; min-height: 37px; padding: 12px 35px; font-size: var(--font-small); }
}

/* 窄手機：縮小頁首項目間距，保留購物入口完整文字 */
@media (max-width: 374px) {
  .page-tea-tourism .header-in { gap: 12px; }
  .stay-card { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .stay-info { min-height: 72px; }
}

/* 尊重減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  .tour-nav a, .page-tea-tourism .box_btn { transition: none; }
  .stay-card, .stay-card::before, .stay-card::after, .stay-cover img { transition: none; }
  .stay-card:hover .stay-cover img { transform: none; }
}