/* ==========================================================================
   首頁 —— 府城報刊版面
   只在首頁載入。版面邏輯寫在 resources/views/front/home.blade.php 的開頭註解。

   RWD 的三個地雷（前幾站都踩過，這裡預先處理）：
     1. grid / flex 子項預設 min-width: auto，會把最長那個字串的寬度往上撐，
        overflow-x: auto 擋不住。所有會放長字的子項一律 min-width: 0。
     2. 直排（writing-mode: vertical-rl）在窄螢幕是一條極長的窄柱，860 以下轉回橫排。
     3. 負 margin 讓圖片出血，只在寬度確定夠的斷點才開。
   ========================================================================== */

/* ─────────────────────────── 報頭 ─────────────────────────── */
.tn-mast {
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 3px double var(--rule);
}

/* 報頭上方那一行：像報紙的日期線，三段用實線隔開 */
.tn-mast__dateline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0 0 clamp(1.8rem, 4vw, 3rem);
  padding-block: 10px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.tn-mast__dateline span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin: 0 16px;
  vertical-align: -0.1em;
  background: var(--line-mid);
}

.tn-mast__grid {
  display: grid;
  grid-template-columns: 48px minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.tn-mast__v {
  margin: 6px 0 0;
  font-size: 0.95rem;
}

.tn-mast__main { min-width: 0; }

.tn-mast__title {
  margin: 0 0 1.4rem;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: 0.08em;
  color: var(--text-strong);
}
.tn-mast__title em {
  font-style: normal;
  font-weight: 500;
  color: var(--seal-500);
  /* 底下一道赭土粗線，像報紙編輯用紅筆畫的重點 */
  background: linear-gradient(transparent 78%, rgba(217, 138, 78, 0.35) 78%);
}

.tn-mast__lead {
  max-width: 34em;
  margin: 0 0 2rem;
  font-size: 1.04rem;
  line-height: 1.95;
  color: var(--text-body);
}

.tn-mast__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}

.tn-mast__side {
  min-width: 0;
  padding-left: clamp(18px, 3vw, 36px);
  border-left: 1px solid var(--rule);
}

.tn-mast__quote {
  margin: 0 0 2rem;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.9;
  color: var(--text-strong);
}

.tn-figures { margin: 0; display: grid; gap: 0; }
.tn-figures > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-top: 1px solid var(--line-mid);
}
.tn-figures dt { font-size: 0.85rem; letter-spacing: 0.12em; color: var(--text-muted); }
.tn-figures dd { margin: 0; font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; }
.tn-figures .num {
  margin-right: 4px;
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--text-strong);
}

.tn-mast__figure {
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
}
.tn-mast__figure img {
  width: 100%;
  height: auto;
  box-shadow: var(--press);
}

/* ─────────────────────────── 章節骨架 ─────────────────────────── */
.tn-sec {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line-soft);
}
.tn-sec--paper { background: var(--paper-100); }

.tn-sec__grid {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

/* 直排章節標籤：「壹」放大，下面接章節名 */
.tn-sec__label {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  position: sticky;
  top: 140px;
}
/* 桌機頁首是兩排的置中報頭（見 site.css），比其他站高，sticky 要往下讓 */
@media (min-width: 1201px) {
  .tn-sec__label { top: 200px; }
}
.tn-sec__label span {
  display: block;
  margin-bottom: 0.4em;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-strong);
}

.tn-sec__body { min-width: 0; max-width: 980px; }

.tn-sec__title {
  margin: 0 0 0.8rem;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.55rem, 3.4vw, 2.4rem);
}

.tn-sec__lead {
  max-width: 44em;
  margin: 0 0 clamp(1.8rem, 4vw, 2.8rem);
  color: var(--text-muted);
}

.tn-note { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; color: var(--text-muted); }
.tn-note__sep { margin-inline: 12px; color: var(--line-mid); }

/* ─────────────────────────── 壹 對號入座：兩欄細線清單 ─────────────────────────── */
.tn-sym {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 5vw, 64px);
}
.tn-sym li {
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line-mid);
}
.tn-sym p { margin: 0 0 8px; color: var(--text-strong); line-height: 1.8; }
.tn-sym span { font-size: 0.8rem; letter-spacing: 0.14em; color: var(--seal-500); }

/* ─────────────────────────── 貳 服務目錄：點線對齊 ─────────────────────────── */
.tn-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: clamp(28px, 4vw, 56px);
}
.tn-toc li { break-inside: avoid; }
.tn-toc a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;              /* 觸控目標 */
  padding-block: 10px;
  color: var(--text-strong);
}
.tn-toc__name { flex: 0 1 auto; min-width: 0; }
.tn-toc__dots {
  flex: 1 1 auto;
  min-width: 16px;
  border-bottom: 1px dotted var(--line-mid);
  transform: translateY(-4px);
}
.tn-toc__no { flex: none; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.tn-toc a:hover { color: var(--seal-500); }
.tn-toc a:hover .tn-toc__dots { border-bottom-color: var(--seal-500); }

/* ─────────────────────────── 參 關於 ─────────────────────────── */
.tn-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 60px);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tn-pull {
  margin: 0;
  padding: 18px 0;
  border-top: 3px double var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.85;
  color: var(--text-strong);
}

.tn-points,
.tn-cols3 { margin: 0; display: grid; }
.tn-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 64px); }
.tn-points > div,
.tn-cols3 > div { min-width: 0; padding: 18px 0; border-top: 1px solid var(--line-mid); }
.tn-points dt,
.tn-cols3 dt { margin-bottom: 6px; font-weight: 500; letter-spacing: 0.06em; color: var(--text-strong); }
.tn-points dd,
.tn-cols3 dd { margin: 0; font-size: 0.94rem; color: var(--text-muted); line-height: 1.85; }

/* ─────────────────────────── 肆 流程：報紙兩欄接排 ─────────────────────────── */
.tn-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(28px, 5vw, 64px);
  column-rule: 1px solid var(--line-mid);
}
.tn-steps li { break-inside: avoid; padding: 0 0 26px; }
.tn-steps__no {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--seal-500);
}
.tn-steps h3 { margin: 0 0 6px; font-size: 1.1rem; }
.tn-steps__text { font-size: 0.95rem; color: var(--text-muted); }
.tn-steps__text > :last-child { margin-bottom: 0; }

/* ─────────────────────────── 伍 收費：三欄直線分隔 ─────────────────────────── */
.tn-cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 4vw, 44px); }

/* ─────────────────────────── 陸 閱讀：報紙多欄 ─────────────────────────── */
.tn-columns {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(28px, 5vw, 64px);
  column-rule: 1px solid var(--line-mid);
}
.tn-columns li { break-inside: avoid; border-top: 1px solid var(--line-soft); }
.tn-columns li:first-child { border-top: 0; }
.tn-columns a { display: block; padding: 14px 0; color: var(--text-strong); }
.tn-columns a:hover .tn-columns__title { color: var(--seal-500); }
.tn-columns__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.tn-columns__meta time { font-family: var(--font-mono); letter-spacing: 0.02em; }
.tn-columns__title { display: block; line-height: 1.75; }

/* ─────────────────────────── 柒 問與答 ─────────────────────────── */
.tn-qa { border-top: 1px solid var(--rule); }
.tn-qa details { border-bottom: 1px solid var(--line-mid); }
.tn-qa summary {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 20px;
  align-items: baseline;
  gap: 12px;
  min-height: 44px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.02rem;
  color: var(--text-strong);
}
.tn-qa summary::-webkit-details-marker { display: none; }
.tn-qa summary::after {
  content: "＋";
  font-size: 1rem;
  color: var(--seal-500);
  transition: transform 0.2s var(--ease);
}
.tn-qa details[open] summary::after { content: "－"; }
.tn-qa summary:hover { color: var(--seal-500); }
.tn-qa__q { font-family: var(--font-serif); font-size: 0.95rem; color: var(--seal-500); }
.tn-qa__a { padding: 0 32px 22px 68px; font-size: 0.96rem; }

/* ─────────────────────────── 捌 服務範圍：地名索引 ─────────────────────────── */
.tn-sec--ink {
  background: var(--ink-900);
  color: var(--text-invert-muted);
  border-bottom: 0;
}
.tn-sec--ink .tn-sec__label,
.tn-sec--ink .tn-sec__label span { color: var(--seal-400); }
.tn-sec--ink .tn-sec__title { color: var(--text-invert); border-top-color: var(--line-dark); }
.tn-sec--ink .tn-sec__lead { color: var(--text-invert-muted); }
.tn-sec--ink .tn-note { color: var(--text-invert-muted); }
.tn-sec--ink .link-more { color: var(--seal-400); }
.tn-sec--ink .tn-note__sep { color: var(--line-dark); }

.tn-index {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px 18px;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--text-invert);
}

/* ─────────────────────────── 響應式 ─────────────────────────── */
@media (max-width: 1100px) {
  .tn-mast__grid { grid-template-columns: 40px minmax(0, 1fr); }
  .tn-mast__side { grid-column: 2; padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--rule); }
  .tn-toc { columns: 2; }
}

@media (max-width: 860px) {
  /* 直排標籤在這個寬度轉回橫排（v-label 在 site.css 已處理 writing-mode） */
  .tn-mast__grid { grid-template-columns: minmax(0, 1fr); }
  .tn-mast__v { display: none; }
  .tn-mast__side { grid-column: auto; }

  .tn-sec__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tn-sec__label { position: static; font-size: 0.85rem; }
  .tn-sec__label span { display: inline; margin: 0 10px 0 0; font-size: 1.4rem; }

  .tn-about { grid-template-columns: minmax(0, 1fr); }
  .tn-steps,
  .tn-columns { columns: 1; column-rule: 0; }
  .tn-columns li:first-child { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 640px) {
  .tn-mast__dateline { letter-spacing: 0.08em; font-size: .75rem; }
  .tn-mast__dateline span + span::before { margin: 0 10px; }
  .tn-mast__title { letter-spacing: 0.04em; }

  .tn-sym,
  .tn-points,
  .tn-cols3 { grid-template-columns: minmax(0, 1fr); }
  .tn-toc { columns: 1; }

  .tn-qa summary { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 8px; font-size: 0.96rem; }
  .tn-qa__a { padding: 0 0 20px 52px; }

  .tn-index { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}

@media (max-width: 380px) {
  .tn-qa__a { padding-left: 0; }
  .tn-mast__actions .btn { width: 100%; }
}