/* 「元帥的故事」由來頁 /yandao-yuanshuai（owner 2026-07-17 文案落地）。手機優先長文敘事，
   沿用 theme.css 具名 token（零硬編色、零 px 字級——ratchet 測試會抓）。 */

/* 面板外觀＝components.css .page-panel 共用配方；本頁只給差異值（寬＋內距，零外觀變更）。 */
.origin-page {
  --page-panel-max: 760px;
  --page-panel-pad: 40px 20px 72px;
}

.origin-hero { text-align: center; margin-bottom: 48px; }

/* .origin-kicker 外觀＝components.css .page-kicker 共用配方（金色小字＋寬字距）。 */

.origin-hero h1 {
  font-size: 2.2rem;
  line-height: 1.3;
  margin: 0;
  color: var(--ink-site);
}

/* ---- 敘事區塊：長文可讀性優先（行寬 ≤34em、行高 1.9、段距充足）---- */
.origin-block { margin: 0 auto 40px; max-width: 34em; }

.origin-block h2 {
  font-size: 1.4rem;
  line-height: 1.35;
  margin: 0 0 18px;
  color: var(--gold-rich);
  text-align: center;
}

.origin-block h3 {
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--gold-rich);
  text-align: center;
}

.origin-block p {
  line-height: 1.95;
  color: var(--ink-site);
  margin: 0 0 14px;
}

/* 開場鉤句：把第一句擲地有聲地放大（戲劇感，非新內容）。
   ⚠️ 選擇器帶 .origin-block 前綴＝specificity 蓋過 `.origin-block p`（否則金字/段距被吃掉）。 */
.origin-block .origin-hook {
  font-size: 1.25rem;
  line-height: 1.7;
  font-weight: 700;
  color: var(--gold-rich);
  text-align: center;
  margin: 0 0 22px;
}

/* 對白／單句強調：置中、金字，讓神明的話有停頓感（同上，需壓過 `.origin-block p`）。 */
.origin-block .origin-line {
  text-align: center;
  color: var(--gold-rich);
  font-weight: 600;
}

/* ---- 「他們說」見證引言卡 ---- */
.origin-quotes {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.origin-quote {
  margin: 0;
  padding: 20px 22px;
  background: var(--cream);
  border: 1px solid var(--gold-border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-gold);
}
.origin-quote p {
  margin: 0;
  line-height: 1.9;
  color: var(--ink-site);
}

/* ---- 參拜資訊 ---- */
.origin-visit { text-align: center; }
.origin-facts { max-width: 34em; margin: 0 auto; text-align: left; }
.origin-facts dt { font-weight: 700; color: var(--ink-site); margin-top: 16px; }
.origin-facts dd { margin: 4px 0 0; color: var(--ink-site); line-height: 1.8; }
.origin-event-date { color: var(--gold-rich); font-weight: 600; }
.origin-note { color: var(--ink-gray); font-size: 0.88rem; }
.origin-visit-note {
  max-width: 34em;
  margin: 16px auto 0;
  color: var(--ink-gray);
  font-size: 0.92rem;
  line-height: 1.8;
  text-align: left;
}

/* ---- CTA ---- */
/* .btn-action＝頁級金鈕（比照 services/index 逐項用 token 重述同一顆金色 pill、零硬編色）。 */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 40px;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--gold);
  color: var(--white-warm);
  text-decoration: none;
  border-radius: var(--radius-999);
  box-shadow: var(--shadow-gold);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  letter-spacing: 0.08em;
}
.btn-action:hover,
.btn-action:focus-visible {
  background: var(--gold-rich);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--gold-glow-strong);
}

/* 參拜資訊三顆 CTA 橫排（含 LINE 綠鈕）：置中、可換行。
   ⚠️ .origin-cta 只放版位——LINE 綠底單一真相＝components.css .btn-line（origin.css 後載，勿蓋色）。 */
.origin-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
.origin-cta { display: inline-flex; }

/* 護持建廟主 CTA：置中、放大，收束全頁情緒（看完故事→捐款）。 */
.origin-support { text-align: center; margin-top: 8px; }
.origin-support-cta {
  min-height: 60px;
  padding: 16px 56px;
  font-size: 1.3rem;
}

.origin-disclaimer {
  margin: 44px auto 0;
  max-width: 34em;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink-gray);
  text-align: center;
}

@media (min-width: 600px) {
  .origin-page { padding-inline: 40px; }
  .origin-hero h1 { font-size: 2.6rem; }
  .origin-block { max-width: 36em; }
  .origin-facts, .origin-visit-note { max-width: 36em; }
}