/* 旅程靈感頁（/trip-discovery/、/en/、/ja/）專用樣式。
   只放 td- 前綴 class；色彩／字型／陰影／圓角／間距一律沿用 /marketing/styles.css 的 design tokens（var(--...)），
   不重複定義 token、不使用色碼字面。版面共用元件（.site-header、.hero、.section、.final、.site-footer 等）
   已由 /marketing/styles.css 提供，此檔只補本頁專屬結構。 */

/* ===== Hero / Final 文字欄（取代未提供樣式的 .hero__text／.final__text，讓 grid 只有兩個直接子項） ===== */
.td-hero-text,
.td-final-text {
  min-width: 0;
}

/* ===== 修正 .hero__grid／.final__inner 行動版軌道未夾 minmax(0, …) 造成的 320px 版面溢出 =====
   /marketing/styles.css 桌面斷點（≥60rem／≥48rem）已用 minmax(0, …)，行動版基礎規則仍是裸 1fr／1fr auto；
   本頁不改共用檔（超出本片範圍），改用同選擇器＋較晚載入覆寫，只影響本頁（首頁未載入本檔，不受影響）。
   實測：不覆寫時，日文版 CTA「App Store で無料ダウンロード」（與首頁同一句文案）在 320px 寬會把整個
   hero__grid／final__inner 撐寬到 ~339px（Playwright 逐元素 right 檢查會抓到；只看 scrollWidth 因
   html,body{overflow-x:clip} 而看不出來，如首頁本身現況）。 */
@media (max-width: 59.9375rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.9375rem) {
  .final__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 修正 grid 軌道後，.btn--lg 本身的 white-space: nowrap（/marketing/styles.css）仍會讓最長的一句
   （日文 CTA「App Store で無料ダウンロード」，與首頁同文案）在 320px 寬時撐出自己的邊界；縮小這三顆
   CTA 按鈕的字級與內距，讓它們在最窄的支援寬度（320px）仍維持單行、不外溢。zh/en 文案較短不受影響。
   ⚠️ 對比度：.btn--lg 預設背景是 --color-accent，19px 粗體時對白字約 4.17:1，靠「大字 3:1」門檻過 AA
   （見 /marketing/styles.css:353-359 的註解）；這裡把字級降到 16px 就不再算大字（需 18.66px 粗體），
   4.17:1 不夠、要 4.5:1。比照首頁 .btn--sm 的做法（/marketing/styles.css:361-371）：換成
   --color-accent-strong（實測對白字：淺色 7.29:1、深色 5.36:1，皆 ≥4.5:1），hover 再加深到
   --color-accent-deep。 */
@media (max-width: 22.5rem) {
  .hero .btn--lg,
  .final .btn--lg {
    font-size: 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-accent-strong);
  }

  .hero .btn--lg:hover,
  .final .btn--lg:hover {
    background: var(--color-accent-deep);
  }
}

/* ===== 語言切換 nav（header 的 .td-lang／footer 的 .td-footer-lang，共用基礎樣式） ===== */
.td-lang,
.td-footer-lang {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.85rem;
}

.td-lang a,
.td-footer-lang a {
  color: var(--color-ink-2);
  text-decoration: none;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-btn);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.td-lang a:hover,
.td-footer-lang a:hover {
  color: var(--color-ink);
  background: var(--color-paper-2);
}

.td-lang a[aria-current="page"],
.td-footer-lang a[aria-current="page"] {
  color: var(--color-accent-text);
  font-weight: 700;
}

/* header 的語言切換在窄螢幕隱藏（見下方 .header-controls 溢出說明）；
   footer 的 .td-footer-lang 刻意不套這條，讓 <540px 手機仍有語言切換入口（頁尾不受 header 的溢出限制）。 */
@media (max-width: 33.75rem) {
  .td-lang {
    display: none;
  }
}

/* ===== 怎麼運作：三步驟 ===== */
.td-steps {
  list-style: decimal;
  margin: 0;
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 56ch;
}

.td-steps li {
  padding-left: var(--space-2xs);
  color: var(--color-ink-2);
}

.td-steps li::marker {
  color: var(--color-accent-text);
  font-weight: 700;
}

.td-steps strong {
  color: var(--color-ink);
}

/* ===== 會整理哪些內容 ===== */
.td-kinds {
  list-style: none;
  margin: 0;
  padding: 0;
}

.td-kind {
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  max-width: 60ch;
}

.td-kind:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.td-kind strong {
  color: var(--color-ink);
}

.td-more {
  margin-top: var(--space-md);
  color: var(--color-ink-3);
  font-size: 0.9rem;
}

/* ===== 截圖三聯 ===== */
.td-shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.td-shot {
  max-width: 300px;
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .td-shots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .td-shot {
    max-width: none;
    margin-inline: 0;
  }
}

/* ===== 比對在你的手機上完成 ／ 關於這些資料：內文寬度限制 ===== */
#privacy .wrap p,
#about-data .wrap p {
  max-width: 60ch;
  color: var(--color-ink-2);
}

/* ===== 查詢區（S3b，實作計畫 §Slice 3b）=====
   兩個 begin/end 標記之間的內容由 `build-query-pages.ts` 機器產出（⛔ 手改）；
   這裡只放版面／視覺規則。`hidden` 一定要贏（全域約束）：任何 display: grid/flex
   的規則都會蓋掉 UA 的 [hidden]，這幾條放最前面。 */
.td-card[hidden],
.td-group[hidden],
.td-filters[hidden],
.td-card__season[hidden],
.td-card__event[hidden],
.td-card__events-empty[hidden] {
  display: none;
}

/* hero 的「直接查詢 ↓」連結：與 App Store 主按鈕並排時獨立一行，避免擠壓。 */
.td-hero-query {
  display: block;
  margin-top: var(--space-sm);
}

/* ===== 篩選列 ===== */
.td-filters {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
}

.td-filters__summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-ink);
}

.td-filters__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 48rem) {
  .td-filters__form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* <fieldset> 的 UA 預設外觀（凹槽邊框／內距）與紙感風格不搭；三個 <fieldset>（類別／旅行日期／地點）
   都要重設，第四組「關鍵字」本來就是 <div>／<label> 不受影響（這幾個屬性對它是空操作）。重設併進本規則
   本身、寫在最前面，分隔線與內距接在後面覆寫——⛔ 拆成獨立的 `.td-filters fieldset { border:0; … }`
   規則：對 <fieldset> 元素它的 specificity 是 (0,1,1)，永遠贏過 `.td-filter` 的 (0,1,0)，會讓下面的
   分隔線／內距在三個 <fieldset> 欄位上失效（只有本來就是 <div> 的關鍵字欄看得到，曾經踩過這個坑）。
   min-width: 0 避免 fieldset 的 UA 預設 intrinsic min-width 把 flex 子項撐出水平溢出（PW5-16 判準）。 */
.td-filter {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  flex: 1 1 12rem;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-rule);
}

.td-filter:first-child {
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 48rem) {
  .td-filter {
    padding-top: 0;
    border-top: 0;
    padding-inline-start: var(--space-md);
    border-inline-start: 1px solid var(--color-rule);
  }

  .td-filter:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

/* legend 比照同區的欄位 label（.td-field__label：色用 --color-ink-2、字級不放大、不加粗），
   讓「類別／旅行日期／地點／關鍵字」四組看起來是同一種欄位，不是三個獨立的分區標題。 */
.td-filter__legend {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-ink-2);
  margin-bottom: var(--space-2xs);
  padding: 0;
}

.td-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.td-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  font-size: 0.9rem;
  cursor: pointer;
}

.td-chip:has(input:checked) {
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}

.td-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-top: var(--space-sm);
  font-size: 0.9rem;
}

.td-field__label {
  color: var(--color-ink-2);
}

.td-field input,
.td-field select {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  background: var(--color-paper);
  color: var(--color-ink);
}

.td-filter__hint {
  margin-top: var(--space-2xs);
  color: var(--color-ink-3);
  font-size: 0.85rem;
}

.td-filters__clear {
  display: inline-block;
  margin-top: var(--space-md);
  background: none;
  padding: 0;
  border: 0;
  font: inherit;
}

/* ===== 結果數（JS 執行期才填字，靜態內容為空） ===== */
.td-query__status {
  margin-block: var(--space-md);
  font-weight: 700;
  color: var(--color-ink);
}

/* ===== 分區與卡片 ===== */
.td-group {
  margin-top: var(--space-xl);
}

.td-group__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  margin-bottom: var(--space-sm);
}

.td-group__count {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-ink-3);
}

.td-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 48rem) {
  .td-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.td-card {
  background: var(--color-paper-2);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
}

.td-card--spotlight {
  border-left: 3px solid var(--color-accent-text);
}

.td-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 var(--space-3xs);
}

.td-card__ja {
  margin: 0 0 var(--space-2xs);
  color: var(--color-ink-3);
  font-size: 0.85rem;
}

.td-card__subtitle {
  margin: 0 0 var(--space-2xs);
  color: var(--color-ink-2);
}

.td-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-2xs);
  color: var(--color-ink-2);
  font-size: 0.9rem;
}

.td-query time {
  font-variant-numeric: tabular-nums;
}

.td-card__place {
  color: var(--color-ink-2);
}

.td-card__body {
  margin: 0 0 var(--space-2xs);
  color: var(--color-ink-2);
}

.td-card__season {
  margin: 0 0 var(--space-2xs);
  color: var(--color-warm);
  font-size: 0.85rem;
  font-weight: 600;
}

.td-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-2xs) 0 0;
}

.td-card__link {
  font-weight: 600;
}

/* ===== 地方限定卡：期間內活動清單 ===== */
.td-card__events {
  margin-top: var(--space-sm);
}

.td-card__events-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-2xs);
}

.td-card__event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.td-card__event {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-size: 0.9rem;
}

.td-card__events-empty {
  margin: 0;
  color: var(--color-ink-3);
  font-size: 0.85rem;
}