/*
 * 台灣國際民主誌影展的獨立外觀。
 *
 * 刻意**不沿用書院的 CSS 變數**（--navy / --orange 那組）：影展要看起來是自己的
 * 網站，配色若跟著主站走就白做了。這裡自訂一組變數，改影展的顏色不會波及主站。
 *
 * 只在 body.tidff-site 底下生效，所以載入這支 CSS 不會影響任何其他頁面。
 */

.tidff-site {
  /* 影展自己的色票，**直接取自影展 logo**（assets/images/tidff-logo.png）：
     深色 #0a1119、橘 #ed9102、內圈的近白 #fafcfb 都是從 logo 取樣出來的。
     第一版是我自訂的暖色系（ink #14110f、accent #d94f2b），跟 logo 不同調——
     logo 是品牌的權威來源，所以改成跟著它走。 */
  --tidff-ink:      #0a1119;
  --tidff-paper:    #f6f7f8;
  /* 圖形用：邊框、裝飾線、色塊。**不可用在文字上**——對白底只有 2.43:1，
     遠低於 WCAG AA 的 4.5:1。 */
  --tidff-accent:   #ed9102;
  /* 文字與填色按鈕用：同色相 37°、同飽和度，只是壓暗。
     對白 5.02:1、對頁面底色 4.68:1、白字在其上 5.02:1，三者都過 AA。 */
  --tidff-accent-text: #9f6101;
  --tidff-accent-2: #f6b43a;
  --tidff-muted:    #67707a;
  --tidff-line:     #d9dee3;

  margin: 0;
  background: var(--tidff-paper);
  color: var(--tidff-ink);
  font-family: "Noto Sans TC", "Inter", system-ui, sans-serif;
  line-height: 1.7;

  /* 嚴格禁則：句號、逗號、全形右括號等不會出現在行首。
     只下在 .tidff-site 底下，不會外溢到書院主站的頁面。 */
  line-break: strict;
}

/* ── 頁首 ───────────────────────────────────────────────────────── */

.tidff-header {
  background: var(--tidff-ink);
  color: var(--tidff-paper);
  border-bottom: 3px solid var(--tidff-accent);
}

.tidff-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.tidff-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

/* logo 已經是去背的圓形 PNG，所以這裡只要定尺寸 */
.tidff-brand-logo {
  width: 46px;
  height: 46px;
  display: block;
  flex: none;
}

.tidff-footer-brand .tidff-brand-logo { width: 38px; height: 38px; }

.tidff-brand-name {
  font-size: .95rem;
  line-height: 1.35;
  letter-spacing: .04em;
  /* 斷點由寬度決定，不再靠寫死的 <br />。
     9em 約等於中文九個字的寬度（「台灣國際民主誌影展」）。 */
  max-width: 9em;
}

/* 英文全名 44 個字元，需要的寬度比中文多得多；13em 讓它斷成兩行而不是三行 */
.tidff-brand-name--en { max-width: 13em; }

.tidff-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: .95rem;
}

.tidff-nav a {
  color: var(--tidff-paper);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.tidff-nav a:hover { border-bottom-color: var(--tidff-accent); }

.tidff-lang ul { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.tidff-lang a { text-transform: uppercase; font-size: .8rem; opacity: .75; }

/* ── 內容 ───────────────────────────────────────────────────────── */

.tidff-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

.tidff-hero {
  padding: 56px 0 36px;
  border-bottom: 1px solid var(--tidff-line);
  margin-bottom: 40px;
}

.tidff-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.25;
  margin: 0 0 14px;
  letter-spacing: .01em;
}

.tidff-hero .tidff-hero-en {
  color: var(--tidff-muted);
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: .06em;
  font-size: .95rem;
  margin: 0;
}

.tidff-intro { max-width: 760px; }
.tidff-intro p { margin: 0 0 16px; }
.tidff-intro h3 {
  margin: 32px 0 12px;
  font-size: 1.15rem;
  padding-left: 12px;
  border-left: 4px solid var(--tidff-accent);
}
.tidff-intro ul { padding-left: 20px; }
.tidff-intro a { color: var(--tidff-accent-text); }

/* ── 區塊標題 ───────────────────────────────────────────────────── */

.tidff-section { margin-top: 56px; }

.tidff-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 2px solid var(--tidff-ink);
  padding-bottom: 8px;
  margin-bottom: 24px;
}

.tidff-section-head h2 { font-size: 1.35rem; margin: 0; }

.tidff-section-head .tidff-count {
  color: var(--tidff-muted);
  font-size: .85rem;
  font-family: "Inter", system-ui, sans-serif;
}

.tidff-year {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tidff-accent-text);
  margin: 34px 0 14px;
  letter-spacing: .08em;
}

/* ── 場次卡 ─────────────────────────────────────────────────────── */

.tidff-grid { display: grid; gap: 14px; }

.tidff-card {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--tidff-line);
  padding: 16px 18px;
}

.tidff-card:hover { border-color: var(--tidff-accent); }

.tidff-card-date {
  text-align: center;
  border-right: 1px solid var(--tidff-line);
  padding-right: 14px;
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.15;
}
.tidff-card-date .d { display: block; font-size: 1.7rem; font-weight: 700; }
.tidff-card-date .m { display: block; font-size: .8rem; color: var(--tidff-muted); }
.tidff-card-date .y { display: block; font-size: .72rem; color: var(--tidff-muted); }

.tidff-card-title { font-weight: 600; margin: 0 0 4px; }
.tidff-card-title a { color: inherit; text-decoration: none; }
.tidff-card-title a:hover { color: var(--tidff-accent-text); }

.tidff-card-meta {
  font-size: .85rem;
  color: var(--tidff-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.tidff-card-cta {
  border: 1px solid var(--tidff-ink);
  padding: 7px 14px;
  font-size: .85rem;
  text-decoration: none;
  color: var(--tidff-ink);
  white-space: nowrap;
}
.tidff-card-cta:hover { background: var(--tidff-ink); color: var(--tidff-paper); }

/*
 * 已取消的場次：**不用 opacity 壓淡整張卡**。實測 .6 之後卡片裡的淡色字只剩
 * 2.30:1、「已取消」標記只剩 1.66:1，都遠低於 AA 的 4.5:1——用透明度表達狀態
 * 等於拿可讀性去換。
 *
 * 改成只把縮圖去彩度（那是圖片不是文字），文字維持原本的對比，狀態靠標題後面
 * 的「・已取消」標記表達。
 */
.tidff-card--cancelled .tidff-card-media img {
  filter: grayscale(1);
  opacity: .65;
}
.tidff-card--cancelled .tidff-card-title::after {
  content: "・" attr(data-cancelled);
  color: var(--tidff-accent-text);
  font-size: .8rem;
}

.tidff-empty {
  border: 1px dashed var(--tidff-line);
  padding: 22px;
  color: var(--tidff-muted);
  text-align: center;
}

/* ── 單頁 ───────────────────────────────────────────────────────── */

.tidff-single { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.tidff-single-body h2 { font-size: 1.2rem; border-left: 4px solid var(--tidff-accent); padding-left: 12px; }
.tidff-single-body img { max-width: 100%; height: auto; }

.tidff-facts { background: #fff; border: 1px solid var(--tidff-line); padding: 18px; }
.tidff-facts dt { font-size: .75rem; color: var(--tidff-muted); letter-spacing: .08em; text-transform: uppercase; }
.tidff-facts dd { margin: 2px 0 14px; font-weight: 500; }
.tidff-facts .tidff-cta {
  /* 白字在其上，所以底色用文字版——填色按鈕的對比受文字規範約束 */
  display: block; text-align: center; background: var(--tidff-accent-text);
  color: #fff; text-decoration: none; padding: 10px; margin-top: 6px;
}

/* ── 頁尾 ───────────────────────────────────────────────────────── */

.tidff-footer {
  background: var(--tidff-ink);
  color: var(--tidff-paper);
  margin-top: 64px;
}

.tidff-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 24px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  font-size: .9rem;
}

.tidff-footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.tidff-footer-brand p { margin: 0; }
.tidff-footer-en { color: var(--tidff-muted); font-size: .8rem; }
.tidff-footer-meta p { margin: 0 0 6px; }
.tidff-footer a { color: var(--tidff-accent-2); }

/* ── 窄螢幕 ─────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .tidff-single { grid-template-columns: 1fr; }
  .tidff-card { grid-template-columns: 62px 1fr; }
  .tidff-card-cta { grid-column: 2; justify-self: start; margin-top: 6px; }
  .tidff-header-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── 預告片 ─────────────────────────────────────────────────────── */
/* 用 padding-top 撐出 16:9，iframe 絕對定位填滿——比 aspect-ratio 相容性好，
   而且在還沒載入時就佔好位置，不會讓下方內容跳動。 */
.tidff-video {
  position: relative;
  padding-top: 56.25%;
  margin: 0 0 20px;
  background: var(--tidff-ink);
}
.tidff-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── 影片卡 ─────────────────────────────────────────────────────── */
/* 影片是影展的主角，但改版前首頁一張影片卡都沒有。網格用 auto-fill 讓窄螢幕
   自動減少欄數，不必為每個斷點各寫一條規則。 */

.tidff-film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px;
}

.tidff-film-card {
  background: #fff;
  border: 1px solid var(--tidff-line);
  display: flex;
  flex-direction: column;
}

.tidff-film-card:hover { border-color: var(--tidff-accent); }

/* 沒有精選圖片時整個 media 區塊不輸出，所以這裡不需要固定高度的佔位 */
.tidff-film-card-media { display: block; line-height: 0; }
.tidff-film-card-media img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.tidff-film-card-body { padding: 14px 16px 16px; }

.tidff-film-card-title {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.4;
}
.tidff-film-card-title a { color: inherit; text-decoration: none; }
.tidff-film-card-title a:hover { color: var(--tidff-accent-text); }

.tidff-film-card-en {
  margin: 0 0 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: .8rem;
  color: var(--tidff-muted);
  line-height: 1.35;
}

.tidff-film-card-facts {
  margin: 0;
  font-size: .8rem;
  color: var(--tidff-muted);
}

/* ── 場次卡的縮圖 ───────────────────────────────────────────────── */
/* 只有 .tidff-card--has-media 才多一欄，沒有圖的卡片維持原本三欄，
   不會留下一塊空白 */

.tidff-card--has-media { grid-template-columns: 104px 72px 1fr auto; }

.tidff-card-media { display: block; line-height: 0; }
.tidff-card-media img {
  width: 104px;
  height: 70px;
  object-fit: cover;
  display: block;
}

/* ── 年度卡（歷年影展）─────────────────────────────────────────── */
/* 改版前這一區把 142 場場次全部攤開，與四個年度頁完全重複。現在每年收成一張卡。 */

.tidff-edition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.tidff-edition-card {
  display: block;
  background: #fff;
  border: 1px solid var(--tidff-line);
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
.tidff-edition-card:hover { border-color: var(--tidff-accent); }

.tidff-edition-card-year {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tidff-accent-text);
  line-height: 1;
}

.tidff-edition-card-count {
  display: block;
  margin-top: 6px;
  font-size: .85rem;
  color: var(--tidff-muted);
}

.tidff-edition-card-thumbs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}
.tidff-edition-card-thumbs img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

/* ── 年度主視覺 ─────────────────────────────────────────────────── */
/* 影展的主視覺是橫幅（2026 那張 1250×481），所以跨內容寬度輸出，不是方欄。
   圖上的文字在手機會很小，所以標語另外以文字輸出一份，圖本身只當裝飾。 */

.tidff-keyvisual {
  margin: 0 0 8px;
  line-height: 0;
}
.tidff-keyvisual img {
  width: 100%;
  height: auto;
  display: block;
}

.tidff-hero-tagline {
  margin: 6px 0 0;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 600;
  color: var(--tidff-accent-text);
  letter-spacing: .04em;
}

/* ── 本屆頁首 ───────────────────────────────────────────────────── */

.tidff-hero-dates {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: .06em;
  color: var(--tidff-accent-text);
  font-size: .95rem;
  margin: 0 0 10px;
}

/* ── 關於影展 ───────────────────────────────────────────────────── */

.tidff-about { border-top: 1px solid var(--tidff-line); margin-top: 56px; padding-top: 32px; }

@media (max-width: 860px) {
  .tidff-card--has-media { grid-template-columns: 76px 1fr; }
  .tidff-card--has-media .tidff-card-media img { width: 76px; height: 54px; }
  .tidff-card--has-media .tidff-card-date { display: none; }
  .tidff-film-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tidff-film-card-media img { height: 150px; }
}

/* ── 內文區的連結 ───────────────────────────────────────────────── */
/* 這條規則之前不存在，所以場次頁與影片頁內文裡的連結全部吃到瀏覽器預設的
   藍色加底線——整個影展用自己的色票，只有那裡冒出一個與設計脫節的連結。
   .tidff-intro 的連結原本就有規則，這裡補上單頁內文與事實欄。 */

.tidff-single-body a,
.tidff-single-body a:visited {
  color: var(--tidff-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.tidff-single-body a:hover { text-decoration: none; }

/* ── 場次頁的影片區塊 ───────────────────────────────────────────── */
/*
 * 這幾個選擇器**刻意不加祖先限定**。原本這一行借用 .tidff-hero-en，但那條規則
 * 寫成 `.tidff-hero .tidff-hero-en`，只在頁首容器裡生效；搬到內文區之後選擇器
 * 沒命中，視覺上等於沒套樣式，而 CSS 不會因此報錯，所以一路沒被發現。
 */

.tidff-screening-film-title {
  margin: 28px 0 2px;
  font-size: 1.15rem;
  line-height: 1.4;
}

.tidff-film-meta {
  margin: 0 0 10px;
  font-size: .85rem;
  color: var(--tidff-muted);
  letter-spacing: .02em;
}

/* 「完整資料與其他場次」要看起來是一個動作，不是混在內文裡的一句話 */
.tidff-film-more {
  margin: 14px 0 32px;
  font-size: .9rem;
}
.tidff-film-more a {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  padding-bottom: 1px;
}
.tidff-film-more a:hover { border-bottom-color: transparent; }


/* ── 中文斷行 ───────────────────────────────────────────────────── */
/*
 * 這支樣式表原本一條斷行設定都沒有，全部吃瀏覽器預設。
 *
 * 中文沒有詞界：Unicode 的斷行規則（UAX #14）把每個漢字都視為可斷點，瀏覽器填到
 * 塞不下就在那裡斷，它無從知道「主辦」是一個詞。「關於影展」第一段的內容約 784px，
 * 而容器是 760px——只溢出約一個半字，於是最後兩個字單獨掉到第二行成為孤行。
 *
 * **這三個宣告都是獨立屬性，沒有任何版面依賴它們生效。** 不支援 text-wrap 的
 * 瀏覽器會忽略整條宣告，結果與加上之前完全相同，不會更糟——所以寬度、格線那類
 * 宣告絕對不能跟它們寫在同一條規則裡。
 *
 * 為什麼不用 word-break: keep-all：那會禁止漢字之間斷行，長段中文將無處可斷而
 * 溢出容器。中文本來就該在字與字之間斷，要修的是「孤行」不是「斷點位置」。
 */

/*
 * 用 balance 而**不是** pretty——這點是在瀏覽器裡實測出來的，不是推論。
 *
 * `text-wrap: pretty` 靠詞界運作，是為了避免英文單字落單而設計的。中文沒有詞界，
 * 所以它對中文段落**完全沒有作用**。Chrome 154 實測「關於影展」第一段：
 *
 *     auto     70 / 2 字
 *     pretty   69 / 3 字   ← 幾乎沒變
 *     balance  42 / 30 字  ← 這才解決問題
 *
 * 各種容器寬度都試過（760／560／420／340／260／200px），balance 一路把尾行孤字
 * 消掉；影片簡介那種較長的段落也一樣（49/49/31 → 43/43/43）。
 *
 * Chrome 對行數過多的段落會放棄平衡、退回 auto——那正好是改動前的行為，安全降級。
 */
.tidff-hero h1,
.tidff-section-head h2,
.tidff-screening-film-title,
.tidff-film-card-title,
.tidff-card-title,
.tidff-intro p,
.tidff-single-body p {
  text-wrap: balance;
}

/* ── 本屆規模與下一場 ───────────────────────────────────────────── */
/* 取代原本的日期區間。整年巡迴的影展沒有「檔期」，呈現規模與下一場才如實。 */

/* .tidff-hero-facts 系列已移除：頁首改為兩欄後由 .tidff-hero-lead 與
   template-parts/tidff-next-screening.php 取代。 */

/* ════════════════════════════════════════════════════════════════════
   首頁的版面節奏（變更 tidff-home-rhythm）

   改版前首頁六個區塊有四個共用「標題＋計數＋細線＋網格」這套處理，依序排開形成
   均質節奏，讀起來是資料庫列表而不是影展首頁。以下三組樣式讓各區塊的版面型態互不
   相同：兩欄頁首、影片文字列、月份時間軸。
   ════════════════════════════════════════════════════════════════════ */

/* ── 頁首：兩欄 ──────────────────────────────────────────────────── */
/* 原本四行短文在 1132px 容器裡每行只佔 20–45%，右側長期空白。右欄放「下一場」，
   那是全頁唯一需要讀者採取行動的資訊。 */

.tidff-hero--split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

.tidff-hero-lead {
  font-size: 1.05rem;
  line-height: 2;
  margin: 18px 0 0;
  max-width: 32em;
  text-wrap: balance;          /* pretty 對中文無效，見下方 CJK 區塊的說明 */
}

.tidff-hero-jump { margin: 16px 0 0; }
.tidff-hero-jump a {
  color: var(--tidff-accent-text);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.tidff-hero-jump a:hover { text-decoration: underline; }

.tidff-hero-ended {
  margin: 0;
  color: var(--tidff-muted);
  font-size: .95rem;
}

/* ── 頁首右欄：「下一場」卡 ──────────────────────────────────────── */

.tidff-next {
  background: #fff;
  border: 1px solid var(--tidff-line);
  border-top: 4px solid var(--tidff-accent);   /* 圖形用途，不受文字對比規範 */
  padding: 20px 22px 22px;
}
.tidff-next p { margin: 0; }

.tidff-next-label {
  font-size: .72rem;
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--tidff-muted);
  margin-bottom: 12px !important;
}

.tidff-next-when {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px !important;
}
.tidff-next-when strong {
  font-size: 2.6rem;
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tidff-next-when span { font-size: .82rem; color: var(--tidff-muted); }

.tidff-next-film { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px !important; }

.tidff-next-place { font-size: .82rem; line-height: 1.6; margin-bottom: 18px !important; }

.tidff-next-cta {
  display: block;
  text-align: center;
  background: var(--tidff-accent-text);   /* 白字在 #9f6101 上 5.02:1 */
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 11px;
  text-decoration: none;
}
.tidff-next-cta:hover { filter: brightness(1.12); }

/* 地點：場地為主、城市為輔。兩處共用（頁首卡與時間軸），顯示規則見
   nsd_screening_place()。城市只有 16/36 有，不能拿來當主欄。 */
.tidff-place-venue { color: var(--tidff-ink); }
.tidff-place-city  { color: var(--tidff-muted); }
.tidff-next-place .tidff-place-city::before { content: "・"; }

/* ── 節目：影片文字列（無圖） ────────────────────────────────────── */
/* 影展每則 FB 活動都用同一張年度主視覺當封面，21 部片只有 11 張不重複圖片，
   因此這一區完全不輸出影片圖片。理由見 template-parts/row-film.php。 */

.tidff-film-list {
  max-width: 780px;
  border-top: 1px solid var(--tidff-line);
}
/* 標題的粗底線要跟清單同寬。不限制的話線拉到 1288px、底下的內容只有 780px，
   長線配窄內容看起來像沒對齊——截圖才看得出來，量 DOM 不會發現。 */
#films .tidff-section-head { max-width: 780px; }

.tidff-film-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 20px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--tidff-line);
}
.tidff-film-row > p { margin: 0; }

.tidff-film-row-no {
  grid-row: 1 / span 3;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: #dfe3e7;                 /* 純肌理，aria-hidden，不受文字對比規範 */
  font-variant-numeric: tabular-nums;
}

.tidff-film-row-head {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.tidff-film-row-title {
  flex: 1;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tidff-ink);
  text-decoration: none;
}
.tidff-film-row-title:hover { color: var(--tidff-accent-text); }
.tidff-film-row-year {
  flex: none;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tidff-muted);
  font-variant-numeric: tabular-nums;
}

/* 中繼資訊與預告入口同一行：入口的位置必須固定。接在簡介後面會卡在句子換行的
   隨機位置——21 列實測出現了三種不同落點。 */
.tidff-film-row-meta {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px !important;
  font-size: .82rem;
  color: var(--tidff-muted);
}
.tidff-film-row-trailer {
  flex: none;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--tidff-accent-text);
  border: 1px solid currentColor;
  padding: 1px 7px;
  text-decoration: none;
  white-space: nowrap;
}
.tidff-film-row-trailer:hover { background: var(--tidff-accent-text); color: #fff; }

.tidff-film-row-syn {
  grid-column: 2;
  margin-top: 8px !important;
  font-size: .95rem;
  line-height: 1.85;
  max-width: 42em;
}

/* ── 巡迴行程：墨色出血帶 ────────────────────────────────────────── */
/* 第二個「地」。同時解開一個限制：--tidff-accent 對白只有 2.43:1，淺底上只能當
   圖形色；在墨底上有 7.8:1，可以放大當文字主角。 */

#tour {
  background: var(--tidff-ink);
  color: #eef1f4;
  /* 出血到視窗兩側：.tidff-main 有 max-width，用負邊距與等量內距撐出去 */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px calc(50vw - 50%) 64px;
}
#tour .tidff-section-head { border-bottom-color: var(--tidff-accent); }
#tour .tidff-section-head h2 { color: #eef1f4; }
#tour .tidff-section-head .tidff-count { color: #9aa5b1; }
#tour .tidff-empty { color: #9aa5b1; }

.tidff-tour-month {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 28px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.tidff-tour-month:first-child { border-top: 0; }
.tidff-tour-month-head p { margin: 0; }

.tidff-tour-month-num {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--tidff-accent);         /* 墨底 7.81:1 */
  font-variant-numeric: tabular-nums;
}
.tidff-tour-month-name {
  font-size: .75rem;
  letter-spacing: .16em;
  color: #9aa5b1;                     /* 墨底 7.58:1 */
  margin: 8px 0 10px !important;
}
/* 密度條：長度與該月場次數成正比。八月 14 場、一月 1 場的疏密變成看得見的形狀。 */
.tidff-tour-bar { height: 5px; background: var(--tidff-accent-2); }

.tidff-tour-row {
  display: grid;
  grid-template-columns: 34px 56px minmax(0, 300px) 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 5px 0;
  font-size: .95rem;
}
.tidff-tour-day {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #9aa5b1;
}
.tidff-tour-time {
  font-size: .82rem;
  color: #9aa5b1;
  font-variant-numeric: tabular-nums;
}
/* **不可以截字**：行程資訊被切掉，讀者就看不出場次在哪。
   第一版用了 -webkit-line-clamp: 2，實測把「…Northern California・San Jose」的城市
   截成「San…」——line-clamp 也是截字，只是換個寫法。改為完全不限制行數，並把欄寬
   從 230px 放寬到 300px，讓最長的場地名（北加州台灣會館的雙語全名）折兩行放得下。 */
.tidff-tour-place {
  font-size: .82rem;
  line-height: 1.5;
}
#tour .tidff-place-venue { color: #eef1f4; }
#tour .tidff-place-city  { color: #9aa5b1; }
#tour .tidff-place-city::before { content: "・"; }

.tidff-tour-film a { color: #eef1f4; text-decoration: none; }
.tidff-tour-film a:hover { text-decoration: underline; text-decoration-color: var(--tidff-accent); }

/* 已過場次用次級文字色，**不用 opacity**：opacity 會連背景一起壓，本專案先前
   就是這樣把文字對比弄到 2.30:1。 */
.tidff-tour-row.is-past .tidff-tour-film a,
.tidff-tour-row.is-past .tidff-place-venue { color: #9aa5b1; }

.tidff-tour-row.is-next .tidff-tour-film a,
.tidff-tour-row.is-next .tidff-tour-day { color: var(--tidff-accent-2); font-weight: 700; }

/* 標記不只靠顏色：停用色彩後「下一場」這三個字仍讀得出來 */
.tidff-tour-badge {
  display: inline-block;
  margin-left: 10px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 2px 7px;
  background: var(--tidff-accent);
  color: #1a1200;                     /* 橘底深字 7.65:1 */
  vertical-align: 1px;
}

/* ── 窄螢幕 ─────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .tidff-hero--split { grid-template-columns: 1fr; gap: 28px; }

  .tidff-film-row { grid-template-columns: 38px 1fr; column-gap: 14px; }
  .tidff-film-row-no { font-size: 1.2rem; }
  .tidff-film-row-title { font-size: 1.2rem; }
  .tidff-film-row-head { flex-wrap: wrap; gap: 4px 12px; }

  .tidff-tour-month { grid-template-columns: 1fr; gap: 12px; }
  .tidff-tour-bar { max-width: 180px; }
  /* 日＋時間一列，地點與片名各自成列：四欄擠在 390px 會把片名壓成一字一行 */
  .tidff-tour-row {
    grid-template-columns: 34px 56px 1fr;
    row-gap: 2px;
    padding: 9px 0;
  }
  .tidff-tour-place { grid-column: 3; }
  .tidff-tour-film  { grid-column: 1 / -1; }
}