/* ==========================================================================
   首頁 v2 — 左側固定索引軌
   --------------------------------------------------------------------------
   v1 是從 daredit 沿用的「滿版壓字 + 單欄長敘事」骨架，只換配色不夠 ——
   骨架一樣看起來就是同一個站。這一版換的是版面骨架本身：

     · 桌機雙欄：左邊固定索引軌，右邊內容捲動
       （其他三站都是「上方導覽列 + 由上往下堆疊」的單欄）
     · 開場文字為主、圖片當附圖，不做滿版壓字
     · 服務用兩欄編號清單，不是單欄索引也不是卡片格
     · 手機把索引軌收成頂端的橫向晶片列

   全部用 site.css 定義好的權杖，這裡不再自己定義顏色。
   舊版備份在 deploy/backup-0905/。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 雙欄骨架
   -------------------------------------------------------------------------- */
/* 區塊寬度與內距集中在這裡。
   深色區塊要滿版但內文要跟其他區塊切齊，兩邊的數字必須連動 ——
   拆成兩個常數綁在一起，改一個就好，不會再算錯 24px。 */
.rail-layout {
  --sec-max: 880px;   /* 一般區塊的外框寬（含內距，border-box）*/
  --sec-pad: 24px;    /* 左右內距 */

  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper-100);
}

@media (min-width: 1024px) {
  .rail-layout {
    /* 索引軌固定寬度，內容欄吃剩下的。內容欄自己再收窄，
       所以整體看起來是「靠左的軌 + 置中偏左的內容」。 */
    grid-template-columns: 272px minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   2. 索引軌
   -------------------------------------------------------------------------- */
.rail {
  background: var(--ink-800);
  color: var(--text-invert);

  /* grid 子項目的預設 min-width 是 auto，等於「不能比最小內容窄」。
     手機版的晶片列每個都 white-space: nowrap，它們的總寬會變成這一欄的
     最小內容寬度，然後把整個版面撐爆 —— 實測 768px 下文件寬 1075px。
     overflow-x: auto 只讓元素自己能捲，擋不住這個往上傳播。 */
  min-width: 0;

  /* 深底容器要覆寫描邊按鈕的變數，否則文字會是深色壓在深色上 */
  --btn-ghost-fg: var(--text-invert);
  --btn-ghost-border: rgba(244, 241, 236, 0.34);
}

.rail__inner {
  padding: 28px 24px;
}

@media (min-width: 1024px) {
  .rail__inner {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 36px 28px;
    /* 不要 min-height: 100dvh。
       撐到滿版高度會讓聯絡區塊被推到螢幕最下緣，中間空一大片 ——
       視覺上像是「這裡本來該有東西但漏了」。內容多高就多高。 */
  }
}

.rail__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--seal-400);
  text-transform: uppercase;
}

/* 刻意不寫 flex: 1 —— 那會把聯絡區塊推到螢幕底部，中間留下一大片空白 */

.rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 手機：橫向晶片列。桌機再改回直向。 */
@media (max-width: 1023px) {
  /* 捲動容器一定要能收住自己。
     原本用「負邊距 + 內距」讓晶片列可以捲到螢幕邊緣，但那會把元素
     撐得比容器寬，overflow-x: auto 只讓它自己能捲，文件寬度還是跟著長 ——
     實測 480px 溢出 595px、768px 溢出 322px。
     視覺上少了一點貼邊效果，換來的是零橫向溢出，這筆划算。 */
  .rail__inner { overflow-x: hidden; }

  .rail__list {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .rail__list::-webkit-scrollbar { display: none; }
  .rail__list > li { flex: none; }
}

.rail__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--text-invert-muted);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: color 0.18s var(--ease);
}

.rail__link:hover { color: var(--text-invert); }

@media (max-width: 1023px) {
  .rail__link {
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(244, 241, 236, 0.08);
    white-space: nowrap;
  }
}

.rail__no {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--seal-400);
}

.rail__foot {
  border-top: 1px solid var(--line-dark);
  padding-top: 22px;
}

@media (max-width: 1023px) {
  /* 手機上頁尾已經有電話與 LINE，這裡重複只是佔空間 */
  .rail__foot { display: none; }
}

.rail__tel {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--seal-400);
  letter-spacing: -0.01em;
}

.rail__foot small {
  display: block;
  margin-top: 2px;
  color: var(--text-invert-muted);
  font-size: 0.8rem;
}

.rail__cta {
  margin-top: 16px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. 內容欄
   -------------------------------------------------------------------------- */
.rail-main {
  min-width: 0;   /* grid 子項目要這個才不會被長字撐爆 */
  background: var(--paper-100);
}

.rail-open,
.rail-sec {
  max-width: var(--sec-max);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--sec-pad);
}

.rail-sec + .rail-sec { border-top: 1px solid var(--line-soft); }

.rail-sec--ink {
  max-width: none;
  background: var(--ink-800);
  color: var(--text-invert);
  border-top: 0;
}

/* 深色區塊滿版、內容靠一層 inner 對齊。
   
   兩個坑都踩過：
   1. 不要用 `.rail-sec--ink > * { margin-inline: auto }` —— 子元素
      （.rail-area、.rail-note）自己用了 margin 簡寫會把 margin-inline 重設掉，
      特異度又相同、寫在後面就贏，結果標題置中、內文靠左。
   2. inner 的寬度不是 --sec-max，是**扣掉左右內距之後**的值。
      一般區塊 max-width 880 是 border-box（含 24px 內距），實際文字寬 832；
      inner 直接給 880 的話會整整寬出一個內距，跟上面差 24px。 */
.rail-sec__inner {
  max-width: calc(var(--sec-max) - var(--sec-pad) * 2);
  margin-inline: auto;
}
.rail-sec--ink .rail-head__title { color: var(--text-invert); }
.rail-sec--ink .rail-head__lead  { color: var(--text-invert-muted); }
.rail-sec--ink .rail-note        { color: var(--text-invert-muted); }

/* --------------------------------------------------------------------------
   4. 開場
   -------------------------------------------------------------------------- */
.rail-open {
  padding-top: clamp(3rem, 8vw, 6rem);
}

.rail-open__quote {
  margin: 0 0 26px;
  padding-left: 18px;
  border-left: 3px solid var(--seal-400);
  max-width: 44ch;
  color: var(--text-muted);
  line-height: 1.9;
}

.rail-open__title {
  margin: 0 0 24px;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.rail-open__title em {
  font-style: normal;
  color: var(--seal-600);
  box-shadow: inset 0 -0.16em 0 rgba(224, 122, 90, 0.28);
}

.rail-open__lead {
  margin: 0 0 28px;
  font-size: clamp(1rem, 1.9vw, 1.14rem);
  line-height: 2;
  color: var(--text-body);
}

/* 數字織在句子裡，不做成獨立方塊 */
.rail-open__lead strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--seal-600);
  white-space: nowrap;
}

.rail-open__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

/* 主視覺往兩側各撐出一點，讓它比文字寬 —— 文字是主角，
   但圖要有足夠份量才撐得起「徵信社」這個題材的氣氛。 */
.rail-open__figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* 斷點是 1280 不是 1024，算出來的：
     內容欄寬 = 視窗 - 272（索引軌）
     文字寬   = min(880, 內容欄) - 48（左右內距）
     圖片寬   = 文字寬 + 96（左右各撐 48）
   要不溢出就得「內容欄 ≥ 文字寬 + 96」，也就是內容欄 ≥ 928 → 視窗 ≥ 1200。
   1024 與 1180 都不夠，實測分別溢出 24px 與 18px。取 1280 留一點餘裕。 */
@media (min-width: 1280px) {
  .rail-open__figure { margin-inline: -48px; }
}

@media (max-width: 560px) {
  .rail-open__actions .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   5. 區塊標題
   -------------------------------------------------------------------------- */
.rail-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }

.rail-head__no {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--seal-050);
  color: var(--seal-600);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.rail-sec--ink .rail-head__no {
  background: rgba(224, 122, 90, 0.16);
  color: var(--seal-400);
}

.rail-head__title {
  margin: 0 0 0.6em;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.4;
}

.rail-head__lead {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.9;
}

.rail-note { margin: 26px 0 0; color: var(--text-muted); }
.rail-note__sep { margin-inline: 10px; opacity: 0.5; }

.link-more--invert { color: var(--seal-400); font-family: var(--font-mono); font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   6. 對號入座：兩欄卡
   -------------------------------------------------------------------------- */
.sym-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.sym-grid > li {
  padding: 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--paper-000);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.sym-grid > li:hover {
  border-color: var(--seal-400);
  box-shadow: var(--shadow-sm);
}

.sym-grid p { margin: 0; line-height: 1.85; }

.sym-grid span {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--seal-600);
}

/* --------------------------------------------------------------------------
   7. 服務：兩欄編號清單
   -------------------------------------------------------------------------- */
.svc-cols {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
}

@media (max-width: 560px) { .svc-cols { columns: 1; } }

.svc-cols > li {
  break-inside: avoid;
  border-bottom: 1px solid var(--line-soft);
}

.svc-cols a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  color: var(--text-body);
  transition: color 0.18s var(--ease);
}

.svc-cols a:hover { color: var(--seal-600); }

.svc-cols__no {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--seal-500);
  flex: none;
}

.svc-cols__name { font-weight: 500; }

/* --------------------------------------------------------------------------
   8. 敘事、引言、條列
   -------------------------------------------------------------------------- */
.rail-prose { font-size: clamp(1rem, 1.7vw, 1.06rem); line-height: 2; }

.rail-quote {
  margin: 26px 0;
  padding: 22px 26px;
  border-radius: var(--radius-md);
  background: var(--seal-050);
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.9;
  color: var(--text-strong);
}

.rail-points { margin: 30px 0 0; border-top: 1px solid var(--line-soft); }

.rail-points > div {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) 1fr;
  gap: 4px 26px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-soft);
}

.rail-points dt { font-weight: 700; color: var(--text-strong); }
.rail-points dd { margin: 0; color: var(--text-muted); line-height: 1.85; }

@media (max-width: 560px) { .rail-points > div { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   9. 流程
   -------------------------------------------------------------------------- */
.flow-rail { list-style: none; margin: 0; padding: 0; }

.flow-rail > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
}

.flow-rail > li:first-child { border-top: 1px solid var(--line-mid); }

.flow-rail__no {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--seal-500);
  padding-top: 4px;
}

.flow-rail h3 { margin: 0 0 8px; font-size: clamp(1.02rem, 2vw, 1.18rem); }
.flow-rail__text { color: var(--text-muted); line-height: 1.9; }
.flow-rail__text p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. 閱讀清單
   -------------------------------------------------------------------------- */
.read-rail { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-mid); }

.read-rail > li { border-bottom: 1px solid var(--line-soft); }

.read-rail a {
  display: grid;
  grid-template-columns: 5.6rem 5.2rem 1fr;
  align-items: baseline;
  gap: 6px 16px;
  padding: 15px 0;
  color: var(--text-body);
  transition: color 0.18s var(--ease);
}

.read-rail a:hover { color: var(--seal-600); }

.read-rail time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.read-rail__kind {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: var(--seal-500);
  white-space: nowrap;
}

.read-rail__title { font-weight: 500; line-height: 1.65; }

@media (max-width: 620px) {
  .read-rail a { grid-template-columns: 5.6rem 1fr; }
  .read-rail__kind { grid-column: 2; }
  .read-rail__title { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   11. 問答
   -------------------------------------------------------------------------- */
.qa-rail { border-top: 1px solid var(--line-mid); }

.qa-rail details { border-bottom: 1px solid var(--line-soft); }

.qa-rail summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  transition: color 0.18s var(--ease);
}

.qa-rail summary::-webkit-details-marker { display: none; }
.qa-rail summary:hover { color: var(--seal-600); }

.qa-rail__q {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--seal-500);
  flex: none;
}

.qa-rail__a {
  padding: 0 0 20px calc(0.78rem * 2.6 + 14px);
  color: var(--text-muted);
  line-height: 1.9;
}

@media (max-width: 560px) { .qa-rail__a { padding-left: 0; } }

/* --------------------------------------------------------------------------
   12. 服務範圍
   -------------------------------------------------------------------------- */
.rail-area {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.14rem);
  line-height: 2.05;
  color: var(--text-invert-muted);
}

/* --------------------------------------------------------------------------
   13. 進場動畫
   --------------------------------------------------------------------------
   這裡刻意什麼都不寫。site.css 已經處理好了，而且是用 `.js` 前綴當開關 ——
   沒有 JS 的環境下 opacity 規則根本不會套用，內容照樣看得到。
   在這裡重寫一份會蓋掉那個保護，變成「JS 沒跑 = 整頁空白」。
   -------------------------------------------------------------------------- */