/* =====================================================
   01. CSS Variables (Design Tokens)
   ===================================================== */
:root {
  --sand: #F3ECDC;
  --warm-white: #FAF8F3;
  --dark-brown: #3B2F2F;
  --terra-red: #B85C38;
  --olive-green: #6E7F53;
  --shadow: 0 10px 30px rgba(59, 47, 47, 0.08);
  --transition: all 0.3s ease;
}

/* =====================================================
   02. Reset / Base
   ===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: var(--warm-white);
  color: var(--dark-brown);
  line-height: 1.6;
}

/* =====================================================
   03. Header / Navigation
   ===================================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(250, 248, 243, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(184, 92, 56, 0.1);
}

nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo container */
.logo {
  font-family: 'Noto Serif TC', serif;
  display: flex;
  align-items: center;
  gap: 0.01rem;                 /* 圖與字的呼吸感 */
  text-decoration: none;
  letter-spacing: 0.04em;
}

/* Logo 圖示（主角） */
.logo-img {
  height: 60px;               /* ⬅️ 放大圖示，讓它成為視覺核心 */
  width: auto;
  display: block;
}

/* Logo 文字（輔助，不搶圖） */
.logo-text {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.25rem;         /* ⬅️ 微調，不壓過圖 */
  font-weight: 600;
  color: var(--terra-red);
  line-height: 1.1;
  white-space: nowrap;
}

/* Logo 文字群組：中文在上、英文在下 */
.logo-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  white-space: nowrap;
}

/* 中文主標 */
.logo-text-zh {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--terra-red);
  line-height: 1.1;
}

/* 英文副標（更小、更淡，避免搶戲） */
.logo-text-en {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 0.65rem;          /* 👈 明顯小一階 */
  font-weight: 400;            /* 👈 比中文更輕 */
  color: rgba(184, 92, 56, 0.6);/* 👈 再淡一點 */
  letter-spacing: 0.08em;      /* 👈 拉開字距，顯得安靜 */
  margin-top: 0.15rem;
  transition: color 0.25s ease; /* 👈 加這行 */
}

/* Logo hover 時，英文副標稍微加深（中文維持不變） */
.logo:hover .logo-text-en {
  color: rgba(184, 92, 56, 0.95);
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

nav li {
  white-space: nowrap;
}

nav a {
  text-decoration: none;
  color: var(--dark-brown);
  font-weight: 400;
  transition: var(--transition);
  position: relative;
  display: inline-block;
  writing-mode: horizontal-tb;
}

nav a:hover {
  color: var(--terra-red);
}

nav a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: var(--terra-red);
  transition: var(--transition);
}

nav a:hover:after {
  width: 100%;
}

.logo:after {
  display: none;
}

.cta-button:after,
.cta-link:after {
  display: none;
}

/* =====================================================
   04. Typography (Global Headings / Text)
   ===================================================== */
h1 {
  font-family: 'Noto Serif TC', serif;
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  letter-spacing: 0.03em;
}

h2 {
  font-family: 'Noto Serif TC', serif;
  font-size: 2.2rem;
  margin-bottom: 2rem;
  color: var(--dark-brown);
  text-align: center;
}

/* =====================================================
   05. Hero (Common)
   ===================================================== */
.hero {
  padding: 10rem 2rem 3rem;
  text-align: center;
  background: linear-gradient(135deg, var(--warm-white) 0%, var(--sand) 100%);
  position: relative;
  overflow: hidden;
}

.hero:before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(184, 92, 56, 0.03) 0%, transparent 70%);
  animation: rotate 30s linear infinite;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: rgba(59, 47, 47, 0.8);
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  line-height: 1.8;
}

.hero-intro {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 2;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* =====================================================
   06. Hero (Page-specific) - Home
   ===================================================== */
/* ✅ 首頁 Hero：背景圖片 + 遮罩（覆蓋原本的漸層視覺） */
.hero.hero--home {
  background-image: url('../images/home-ambient.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero.hero--home:before {
  /* 保留你的旋轉光暈，但改成更淡，避免干擾照片 */
  background: radial-gradient(circle, rgba(250, 248, 243, 0.12) 0%, transparent 65%);
}

.hero.hero--home:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(59, 47, 47, 0.35) 0%,
    rgba(59, 47, 47, 0.55) 55%,
    rgba(59, 47, 47, 0.65) 100%
  );
  z-index: 0;
}

/* ✅ 首頁 Hero：文字改成亮色以適配背景圖 */
.hero.hero--home h1,
.hero.hero--home .hero-subtitle,
.hero.hero--home .hero-intro {
  color: rgba(250, 248, 243, 0.95);
  text-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* =====================================================
   07. Cards (Common)
   ===================================================== */
.cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.card-link {
  text-decoration: none;
  color: inherit;
}

.card {
  background-color: rgba(250, 248, 243, 0.8);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid rgba(184, 92, 56, 0.1);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* 你原本的卡片頂部漸層線條保留（有背景圖時也能用） */
.card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--terra-red), var(--olive-green));
  opacity: 0;
  transition: var(--transition);
  z-index: 3;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(59, 47, 47, 0.1);
}

.card:hover:before {
  opacity: 1;
}

.card h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
  color: var(--dark-brown);
}

.card-subtitle {
  font-size: 0.9rem;
  color: var(--terra-red);
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
}

.card-text {
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 2rem;
  color: rgba(59, 47, 47, 0.85);
}

.card-cta {
  display: inline-block;
  color: var(--terra-red);
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--transition);
}

.card:hover .card-cta {
  transform: translateX(5px);
}

/* =====================================================
   08. Cards (Home) - Media Background Version
   ===================================================== */
/* ✅ 首頁三張卡：背景圖片版本 */
.cards-container--home {
  /* 可留白：如果你未來想把首頁卡片區塊做成更寬也可以在這裡調 */
}

.card--media {
  padding: 0;                 /* 讓背景圖滿版 */
  border: 1px solid rgba(250, 248, 243, 0.25);
  background-color: transparent;
  min-height: 360px;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

.card--media .card-inner {
  position: relative;
  z-index: 2;
  padding: 2.6rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ✅ 結構升級：標題群組固定高度（真正讓三張卡標題對齊） */
.page-home .card--media .card-title-group {
  min-height: 6.4rem;         /* 關鍵：統一標題區高度 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 標題 / 副標節奏（不改字體大小，只統一行高與 margin） */
.page-home .card--media .card-title-group h3 {
  margin: 0 0 0.6rem 0;
  line-height: 1.15;
}

.page-home .card--media .card-title-group .card-subtitle {
  margin: 0;
  line-height: 1.25;
}

/* 背景圖本體 */
.card--media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 文字可讀性遮罩（暗） */
.card--media:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(59, 47, 47, 0.15) 0%,
    rgba(59, 47, 47, 0.35) 45%,
    rgba(59, 47, 47, 0.70) 100%
  );
  z-index: 1;
}

/* ✅ 讓首頁卡片文字走「亮色」 */
.page-home .card--media h3,
.page-home .card--media .card-text,
.page-home .card--media .card-subtitle,
.page-home .card--media .card-cta {
  color: rgba(250, 248, 243, 0.95);
  text-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
}

/* ✅ 讓 subtitle / CTA 有一點視覺層次 */
.page-home .card--media .card-subtitle {
  color: rgba(243, 236, 220, 0.95);
}

.page-home .card--media .card-cta {
  color: rgba(250, 248, 243, 0.95);
  font-weight: 600;
}

/* ✅ 卡片 hover：微微加深遮罩、增加質感 */
.page-home .card--media:hover:after {
  background: linear-gradient(
    180deg,
    rgba(59, 47, 47, 0.20) 0%,
    rgba(59, 47, 47, 0.45) 45%,
    rgba(59, 47, 47, 0.78) 100%
  );
}

/* 桌機版（16:9）背景 */
.card--tanzania { background-image: url('../images/tanzania-desktop.jpg'); }
.card--uganda   { background-image: url('../images/uganda-desktop.jpg'); }
.card--about    { background-image: url('../images/about-desktop.jpg'); }

/* ✅ Tanzania 標題視覺重心微調（只影響這一張卡） */
.page-home .card--tanzania .card-title-group {
  padding-top: 0.35rem;
}

/* 手機版（4:5）背景：<=768px 自動切換 */
@media (max-width: 768px) {
  .card--tanzania { background-image: url('../images/tanzania-mobile.jpg'); }
  .card--uganda   { background-image: url('../images/uganda-mobile.jpg'); }
  .card--about    { background-image: url('../images/about-mobile.jpg'); }

  .card--media {
    min-height: 420px; /* 4:5 圖比較直，給它多一點高度看起來更飽滿 */
  }

  .card--media .card-inner {
    padding: 2.2rem;
  }
}

/* =====================================================
   09. Sections / Content (Layout + Text Blocks)
   ===================================================== */
.section {
  padding: 6rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.section-inner {
  max-width: 800px;
  margin: 0 auto;
}

.poetic-text {
  font-size: 1.15rem;
  line-height: 2.2;
  margin-bottom: 2.5rem;
  text-align: center;
  color: rgba(59, 47, 47, 0.9);
}

.transition-text {
  font-size: 1.05rem;
  line-height: 2;
  margin-bottom: 3rem;
  text-align: center;
  color: rgba(59, 47, 47, 0.75);
  font-style: italic;
}

.content-section {
  margin-bottom: 5rem;
}

.content-section h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  color: var(--terra-red);
}

/* 章節內文章群組標題（h4）— 置中＋儀式感 */
.article-block-title {
  color: #3B2F2F;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  text-align: center;
  letter-spacing: 0.05em;
  position: relative;
}

/* h4 下方的細分隔線 */
.article-block-title::after {
  content: '';
  display: block;
  width: 72px;                 /* 線不要太長 */
  height: 1px;                 /* 細線 */
  margin: 0.75rem auto 0;      /* 與標題保持呼吸 */
  background-color: rgba(59, 47, 47, 0.18);
}

@media (max-width: 768px) {
  .article-block-title::after {
    width: 56px;
  }
}

.content-section p {
  font-size: 1.05rem;
  line-height: 2;
  margin-bottom: 1.5rem;
  color: rgba(59, 47, 47, 0.85);
}

.placeholder-content {
  background-color: rgba(243, 236, 220, 0.5);
  border-radius: 15px;
  padding: 2rem;
  margin-top: 2rem;
  border-left: 4px solid var(--olive-green);
}

.placeholder-content p {
  font-style: italic;
  color: rgba(59, 47, 47, 0.7);
  margin-bottom: 0;
}
/* =====================================================
   ✅ About Page Typography Tweak (我們怎麼做：比例微調)
   只影響 about.html（需 body.page-about）
   ===================================================== */

/* H2 稍微收斂一點，避免壓過內文 */
.page-about h2 {
  font-size: 2.05rem;      /* 原本 2.2rem */
  margin-bottom: 2.2rem;   /* 原本 2rem，略放鬆一點讓段落更呼吸 */
}

/* 內文：稍微加大、行距收斂、限制寬度讓閱讀更像「排版」 */
.page-about .poetic-text {
  font-size: 1.08rem;      /* 原本 1.15rem（看起來小是因為行距太鬆，這裡改成更穩的組合） */
  line-height: 2.05;       /* 原本 2.2 */
  margin-bottom: 2.1rem;   /* 原本 2.5rem */
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* 1) 2) 3) 4) 標題：縮小一點 + 收緊段落間距，讓標題與內文更成比例 */
.page-about .content-section h3 {
  font-size: 1.45rem;      /* 原本 1.6rem */
  margin-bottom: 1.05rem;  /* 原本 1.5rem */
  letter-spacing: 0.01em;
}

/* 手機版：About 頁面的排版調整 */
@media (max-width: 768px) {
  .page-about h2 {
    font-size: 1.85rem;
  }

  .page-about .poetic-text {
    font-size: 1.02rem;
    line-height: 2.0;
    max-width: 92%;
  }

  .page-about .content-section h3 {
    font-size: 1.32rem;
  }

  .page-about .content-section {
    margin-bottom: 3.4rem;
  }
}

/* =====================================================
   About – Editorial Process Layout (我們怎麼做)
   ===================================================== */

/* 整體步驟容器：像章節列表 */
.page-about .section--process .process {
  max-width: 820px;
  margin: 0 auto;
}

/* 每一步：有分隔、有呼吸 */
.page-about .section--process .process-step {
  padding: 1.6rem 0 1.9rem;
  border-top: 1px solid rgba(92, 66, 48, 0.18);
}

.page-about .section--process .process-step:first-child {
  border-top: 0;
  padding-top: 0.6rem;
}

/* 標題列：數字徽章 + 標題 */
.page-about .section--process .process-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

/* 數字徽章：低調但有儀式感 */
.page-about .section--process .process-num {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 650;
  color: rgba(141, 85, 48, 0.95);
  background: rgba(250, 248, 243, 0.55);
  border: 1px solid rgba(141, 85, 48, 0.28);
}

/* 步驟標題：收斂（讓內文變主角） */
.page-about .section--process .process-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 650;
  color: rgba(141, 85, 48, 0.92);
  letter-spacing: 0.01em;
}

/* 內文：稍大、易讀、不要太鬆 */
.page-about .section--process .process-text {
  margin: 0;
  font-size: 1.08rem;
  line-height: 2.05;
  opacity: 0.9;
}

/* 手機版：改成上下排列 */
@media (max-width: 768px) {
  .page-about .section--process .process-head {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .page-about .section--process .process-num {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .page-about .section--process .process-title {
    font-size: 1.15rem;
  }

  .page-about .section--process .process-text {
    font-size: 1rem;
  }
}

.article-note {
  background-color: rgba(243, 236, 220, 0.9); /* 關鍵：0.9 以上 */
  border-radius: 10px;
  padding: 1.6rem 1.8rem;
  color: rgba(59, 47, 47, 0.6);
  font-style: italic;
  line-height: 2;
  pointer-events: none;
}


/* =====================================================
   10. Footer
   ===================================================== */
footer {
  background-color: var(--dark-brown);
  color: var(--warm-white);
  text-align: center;
  padding: 3rem 2rem;
  margin-top: 0.5rem;
}

footer p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.footer-tagline {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 1.5rem;
  color: rgba(250, 248, 243, 0.9);
  letter-spacing: 0.04em;
}

.footer-links {
  margin-bottom: 1.2rem;
  font-size: 0.9rem;
}

.footer-links a {
  color: var(--terra-red);
  text-decoration: none;
  margin: 0 0.4rem;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--warm-white);
}

.footer-copy {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* footer 連結：包含已造訪狀態也固定用品牌棕色 */
footer a,
footer a:visited {
  color: var(--terra-red);
  text-decoration: none;
  transition: var(--transition);
}

footer a:hover {
  color: var(--warm-white);
}

/* =====================================================
   11. CTA Buttons
   ===================================================== */
.cta-link {
  text-decoration: none;
  color: inherit;
}

.cta-button {
  background-color: var(--terra-red);
  color: var(--warm-white);
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  box-shadow: 0 5px 15px rgba(184, 92, 56, 0.2);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(184, 92, 56, 0.3);
}

.cta-button-outline {
  background-color: transparent;
  color: var(--terra-red);
  border: 2px solid var(--terra-red);
  box-shadow: none;
}

.cta-button-outline:hover {
  background-color: var(--terra-red);
  color: var(--warm-white);
}

.floating-cta {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: var(--terra-red);
  color: var(--warm-white);
  padding: 1rem 1.5rem;
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(184, 92, 56, 0.3);
  cursor: pointer;
  transition: var(--transition);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  border: none;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 0.9rem;
  white-space: nowrap;
}

.floating-cta.show {
  opacity: 1;
  visibility: visible;
}

.floating-cta:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(184, 92, 56, 0.4);
}

/* =====================================================
   Route CTA（坦尚尼亞 / 烏干達 分頁底部）
   ===================================================== */
.route-cta {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  margin-bottom: 0.8rem;
}

/* 手機版稍微收斂距離 */
@media (max-width: 768px) {
  .route-cta {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }
}

/* 最後一個 content-section 不要留 5rem 那麼大 */
.section .content-section:last-of-type {
  margin-bottom: 2rem;
}

/* =====================================================
   12. Modal
   ===================================================== */
.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  inset: 0;                 /* 等同 left:0; top:0; width:100%; height:100% */
  background-color: rgba(59, 47, 47, 0.7);
  backdrop-filter: blur(5px);

  /* 置中用 flex（但先不顯示） */
  align-items: center;
  justify-content: center;

  padding: 1rem;            /* 手機安全邊距 */
}

/* ✅ 打開時才變 flex */
.modal.is-open {
  display: flex;
}

.contact-modal {
  background-color: var(--warm-white);
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;     /* ✅ 手機不會頂到上下 */
  overflow-y: auto;

  box-shadow: 0 20px 40px rgba(59, 47, 47, 0.2);
}

.modal-content h2 {
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.modal-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.modal-close {
  background-color: var(--olive-green);
  color: var(--warm-white);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Noto Sans TC', sans-serif;
}

/* 舊版Modal的關閉按鈕保持相同樣式 */
.modal-close {
  display: none;
}

.modal-close:hover {
  background-color: var(--terra-red);
}

/* =====================================================
   12.1 Contact Modal - 聯絡方式彈出視窗
   ===================================================== */
.contact-modal {
  max-width: 600px;
  padding: 2rem;
}

.contact-modal h2 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.6rem;
  color: var(--dark-brown);
  margin-bottom: 0.4rem;
}

.contact-intro {
  font-size: 0.9rem;
  color: rgba(59, 47, 47, 0.7);
  margin-bottom: 0.8rem;
  text-align: center;   
}

/* 联絡方式容器 */
.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

/* 水平排列的聯絡方式容器 */
.contact-methods-horizontal {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  justify-content: space-between;
}

/* 個別联絡項目 */
.contact-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.2rem;
  background-color: rgba(243, 236, 220, 0.5);
  border-radius: 15px;
  border-left: 4px solid var(--terra-red);
  transition: var(--transition);
}

.contact-item:hover {
  background-color: rgba(243, 236, 220, 0.8);
  transform: translateX(5px);
}

/* 水平排列的聯絡項目 */
.contact-item-horizontal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.5rem;
  background-color: rgba(243, 236, 220, 0.5);
  border-radius: 15px;
  border-left: none;
  border-top: none;
  transition: var(--transition);
  flex: 1;
  text-align: center;
}


/* CTA 彈窗：Email 與 Line / IG 區塊之間增加留白 */
.contact-modal .contact-methods-email {
  margin-bottom: 1.5rem; /* 你可微調：1.5rem～2.5rem */
}

/* CTA 彈出視窗：移除 IG / LINE / Email 圖示背景 */
.contact-modal .contact-icon {
  background-color: transparent;
}

.contact-item-horizontal:hover {
  background-color: rgba(243, 236, 220, 0.8);
  transform: translateY(-3px);
}

/* 联絡圖標 */
.contact-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.3rem;
  font-weight: bold;
  flex-shrink: 0;
}

.email-icon {
  background-color: rgba(184, 92, 56, 0.15);
  color: var(--terra-red);
}

.line-icon {
  background-color: rgba(0, 200, 83, 0.15);
  color: #00c853;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;
}

/* LINE 圖標：用 SVG 取代文字後，固定尺寸 */
.line-logo {
  width: 22px;
  height: 22px;
  display: block;
}

/* 保險：就算沒加 class 也能吃到 */
.line-icon img {
  width: 22px;
  height: 22px;
  display: block;
}


/* 联絡資訊 */
.contact-info {
  text-align: left;
}

/* 水平排列的聯絡資訊 */
.contact-info-horizontal {
  text-align: center;
}

.contact-info-horizontal h3 {
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}

.contact-info h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1rem;
  color: var(--dark-brown);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.contact-link {
  display: inline-block;
  color: var(--terra-red);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
  word-break: break-all;
}

.contact-link:hover {
  color: var(--dark-brown);
  text-decoration: underline;
}

.line-id {
  font-size: 0.8rem;
  color: rgba(59, 47, 47, 0.8);
  margin: 0 0 0.1rem 0;
}

/* Line 加入連結 */
.line-join-link {
  display: inline-block;
  color: #00c853;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.8rem;
  border: 2px solid #00c853;
  border-radius: 25px;
  transition: var(--transition);
  margin-top: 0.2rem;
}

.line-join-link:hover {
  background-color: #00c853;
  color: var(--warm-white);
  box-shadow: 0 5px 15px rgba(0, 200, 83, 0.3);
}

/* Instagram 圖標 */
.instagram-icon {
  background-color: rgba(255, 140, 0, 0.15);
  color: #FF8C00;
  font-size: 1.5rem;
}

/* Instagram 圖標：用 SVG 取代 emoji 後，固定圖示尺寸 */
.instagram-logo {
  width: 22px;
  height: 22px;
  display: block;
}

/* 保險：如果有人忘了加 class，也能吃到 */
.instagram-icon img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Instagram ID */
.instagram-id {
  font-size: 0.95rem;
  color: rgba(59, 47, 47, 0.8);
  margin: 0 0 0.3rem 0;
}

/* Instagram 加入連結 */
.instagram-join-link {
  display: inline-block;
  color: #FF8C00;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.8rem;
  border: 2px solid #FF8C00;
  border-radius: 25px;
  transition: var(--transition);
  margin-top: 0.2rem;
}

.instagram-join-link:hover {
  background-color: #FF8C00;
  color: var(--warm-white);
  box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
}

/* QR Code 區域 */
.qr-code-section {
  padding-top: 0.4rem;
  border-top: 1px solid rgba(184, 92, 56, 0.2);
}

.qr-label {
  font-size: 0.85rem;
  color: rgba(59, 47, 47, 0.7);
  margin-bottom: 0.4rem;
  font-weight: 500;
  text-align: center;
}

/* QR Code 容器 - 並排顯示 */
.qr-codes-container {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.qr-code-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.qr-code-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark-brown);
  margin-bottom: 0.2rem;
}

.qr-code-link {
  display: inline-flex;
  transition: var(--transition);
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

.qr-code-img {
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 0;
  box-shadow: 0 10px 25px rgba(59, 47, 47, 0.15);
  transition: var(--transition);
  object-fit: contain;
}

.qr-code-link:hover .qr-code-img {
  transform: scale(1.05);
  box-shadow: 0 15px 35px rgba(184, 92, 56, 0.25);
}

/* 關閉按鈕 - 新樣式 */
.modal-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: rgba(59, 47, 47, 0.5);
  cursor: pointer;
  transition: var(--transition);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.modal-close-btn:hover {
  background-color: rgba(184, 92, 56, 0.1);
  color: var(--terra-red);
}

/* =====================================================
   13. Responsive Design - Mobile
   ===================================================== */
@media (max-width: 768px) {
  /* ✅ 手機版：移除 header 的 fixed 定位 */
  header {
    position: static;
    padding: 1rem 0;
  }

  nav {
    padding: 0 1rem;
    flex-direction: column;
    gap: 1rem;
  }

  .logo {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    gap: 0.6rem;
  }

  .logo-img {
    height: 40px;
    max-width: 40px;
  }

  .logo-text {
    font-size: 0.95rem;
  }
   
  .logo-text-zh {
      font-size: 0.95rem;

.logo-text-en {
    font-size: 0.68rem;
  }
}

  nav ul {
    gap: 0.8rem;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  nav li {
    white-space: nowrap;
  }

  nav a {
    font-size: 0.9rem;
    writing-mode: horizontal-tb;
  }

  .cta-button {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  nav ul {
    gap: 1rem;
  }

  h1 {
    font-size: 2.2rem;
  }

  .hero {
    padding: 8rem 1.5rem 4rem;
  }

  .cards-container {
    grid-template-columns: 1fr;
    padding: 3rem 1.5rem;
  }

  .card {
    padding: 2rem;
  }

  /* ✅ 首頁卡片是 .card--media，padding 由 .card-inner 控制，所以不會被這裡影響 */

  .section {
    padding: 4rem 1.5rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  .poetic-text {
    font-size: 1.05rem;
  }

  .floating-cta {
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.8rem 1.2rem;
    font-size: 0.85rem;
  }

  .modal-content {
    padding: 2rem;
    width: 95%;
    max-width: 100%;
    max-height: 85vh;
  }
  
  .contact-modal {
    max-width: 100%;
    padding: 2rem;
  }
  
  .contact-modal h2 {
    font-size: 1.6rem;
  }
  
  .contact-item {
    padding: 1.2rem;
    gap: 1rem;
  }
  
  .contact-icon {
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
  }
  
  .contact-info h3 {
    font-size: 1rem;
  }
  
  .contact-link,
  .line-id,
  .instagram-id {
    font-size: 0.9rem;
  }
  
  .qr-codes-container {
    gap: 1.5rem;
  }
  
  .qr-code-img {
    width: 130px;
    height: 130px;
  }
  
  .instagram-join-link,
  .line-join-link {
    font-size: 0.8rem;
    padding: 0.35rem 0.8rem;
  }
  
  .modal-close-btn {
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    width: 35px;
    height: 35px;
  }
}

/* ✅ 桌機 >= 900px 時，首頁三張卡能漂亮三欄並排 */
@media (min-width: 900px) {
  .cards-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ✅ 小手機時，Modal 再往上一點（30% → 20%） */
@media (max-width: 480px) {
  .modal-content {
    margin: 20% auto;
  }
}

/* ===== Article Hero - Mobile 修正 ===== */
@media (max-width: 768px) {
  .article-hero {
    padding-top: 3.5rem;   /* 原本 10rem → 縮掉 */
    padding-bottom: 4rem;  /* 保留呼吸感 */
  }
}

/* =====================================================
   15. Hero (Page-specific) - Tanzania
   系列規範：
   - desktop: images/tanzania-hero-desktop.jpg (16:9)
   - mobile : images/tanzania-hero-mobile.jpg  (4:5)
   - overlay: 偏暖、偏靜、偏冒險
   ===================================================== */

.hero.hero--tanzania {
  background-image: url('../images/tanzania-hero-desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 9.5rem;
  padding-bottom: 7rem;
}

/* 移除共用 hero 的旋轉光暈（與 Uganda / About 一致） */
.hero.hero--tanzania:before {
  display: none;
}

/* Tanzania 專屬遮罩（暖、靜、冒險） */
.hero.hero--tanzania:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(59, 47, 47, 0.25) 0%,
    rgba(59, 47, 47, 0.45) 55%,
    rgba(59, 47, 47, 0.70) 100%
  );
  z-index: 0;
}

/* 文字：系列一致 */
.hero.hero--tanzania h1,
.hero.hero--tanzania .hero-subtitle,
.hero.hero--tanzania .hero-intro {
  color: rgba(250, 248, 243, 0.96);
  text-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
  position: relative;
  z-index: 1;
}

/* 標題：增加呼吸感 */
.hero.hero--tanzania h1 {
  letter-spacing: 0.12em;
}

/* 最下面長句：降低權重，像心裡話 */
.hero.hero--tanzania .hero-intro {
  font-size: 1.05rem;
  opacity: 0.85;
}

/* =========================
   Tanzania Hero - Mobile (4:5)
   ========================= */
@media (max-width: 768px) {
  .hero.hero--tanzania {
    background-image: url('../images/tanzania-hero-mobile.jpg');
    padding-top: 8rem;
    padding-bottom: 6rem;
  }

  .hero.hero--tanzania h1 {
    font-size: 2.2rem;
  }

  .hero.hero--tanzania .hero-subtitle {
    font-size: 1.05rem;
  }
}

/* =====================================================
   16. Hero (Page-specific) - Uganda
   系列規範：
   - desktop: images/uganda-hero-desktop.jpg (16:9)
   - mobile : images/uganda-hero-mobile.jpg  (4:5)
   - overlay: 偏綠、偏靜、偏神秘
   ===================================================== */

.hero.hero--uganda {
  background-image: url('../images/uganda-hero-desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 9.5rem;
  padding-bottom: 7rem;
}

/* 移除共用 hero 的旋轉光暈（與 Tanzania / About 一致） */
.hero.hero--uganda:before {
  display: none;
}

/* Uganda 專屬遮罩（霧感優先，中段略淡） */
.hero.hero--uganda:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 22, 18, 0.30) 0%,
    rgba(18, 22, 18, 0.46) 55%,
    rgba(18, 22, 18, 0.70) 100%
  );
  z-index: 0;
}

/* 文字：系列一致，但情緒更靜 */
.hero.hero--uganda h1,
.hero.hero--uganda .hero-subtitle,
.hero.hero--uganda .hero-intro {
  color: rgba(250, 248, 243, 0.96);
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  position: relative;
  z-index: 1;
}

/* 標題：增加呼吸感 */
.hero.hero--uganda h1 {
  letter-spacing: 0.12em;
}

/* 最下面長句：降低權重，像心裡話 */
.hero.hero--uganda .hero-intro {
  font-size: 1.05rem;
  opacity: 0.85;
}

/* =========================
   Uganda Hero - Mobile (4:5)
   ========================= */
@media (max-width: 768px) {
  .hero.hero--uganda {
    background-image: url('../images/uganda-hero-mobile.jpg');
    padding-top: 8rem;
    padding-bottom: 6rem;
  }

  .hero.hero--uganda h1 {
    font-size: 2.2rem;
  }

  .hero.hero--uganda .hero-subtitle {
    font-size: 1.05rem;
  }
}

/* =====================================================
   17. Hero (Page-specific) - About
   系列規範：
   - desktop: images/about-hero-desktop.jpg (16:9)
   - mobile : images/about-hero-mobile.jpg  (4:5)
   - overlay: 偏暖、偏靜、偏人文
   ===================================================== */

.hero.hero--about {
  background-image: url('../images/about-hero-desktop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 9.5rem;
  padding-bottom: 7rem;
}

/* 移除共用 hero 的旋轉光暈（與 Tanzania / Uganda 一致） */
.hero.hero--about:before {
  display: none;
}

/* About 專屬遮罩：最溫柔的一層（不壓人） */
.hero.hero--about:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(59, 47, 47, 0.18) 0%,
    rgba(59, 47, 47, 0.32) 55%,
    rgba(59, 47, 47, 0.55) 100%
  );
  z-index: 0;
}

/* About Hero 文字：誠實、安靜、陪伴感 */
.hero.hero--about h1,
.hero.hero--about .hero-subtitle,
.hero.hero--about .hero-intro {
  color: rgba(250, 248, 243, 0.96);
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;
}

/* About 標題：比 Tanzania 收斂、比 Uganda 溫暖 */
.hero.hero--about h1 {
  letter-spacing: 0.05em;
}

/* 副標：像開場白 */
.hero.hero--about .hero-subtitle {
  opacity: 0.92;
}

/* 長段文字：退一步，讓人願意讀 */
.hero.hero--about .hero-intro {
  font-size: 1.05rem;
  opacity: 0.85;
}

/* =========================
   About Hero - Mobile (4:5)
   ========================= */
@media (max-width: 768px) {
  .hero.hero--about {
    background-image: url('../images/about-hero-mobile.jpg');
    padding-top: 8rem;
    padding-bottom: 6rem;
  }

  .hero.hero--about h1 {
    font-size: 2.2rem;
    letter-spacing: 0.04em;
  }

  .hero.hero--about .hero-subtitle {
    font-size: 1.05rem;
  }
}


/* =====================================================
   18. Article Page (文章分頁範本) — Clean & Single Column
   調整重點：
   - 桌機也改成單欄閱讀（移除右側 sticky sidebar）
   - 保留「相關文章」與「需要幫助嗎」(article-post-cta)
   - 統一 TOC：.article-toc 與 .toc-container 共用同一套樣式
   ===================================================== */

/* ===== 文章英雄區 ===== */
.article-hero {
  padding: 10rem 2rem 6rem;
  text-align: center;
  background: linear-gradient(135deg, var(--warm-white) 0%, var(--sand) 100%);
  position: relative;
  overflow: hidden;
}

.article-hero h1 {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
}

/* ===== 文章中繼區 ===== */
.article-meta {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  font-size: 0.95rem;
  color: rgba(59, 47, 47, 0.7);
}

.article-meta span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===== 文章主容器（✅單欄） ===== */
.article-container {
  display: block;     /* ✅ 不再使用左右兩欄 grid */
  max-width: 900px;   /* ✅ 雜誌版心：可微調 820~980 */
  margin: 0 auto;
  padding: 4rem 2rem;
}

.article-section {
  padding: 0;
}

.article-main {
  /* 基礎樣式由共用 CSS 繼承 */
}

/* ===== 文章側邊欄（已不使用，保險關閉） ===== */
.article-sidebar,
.article-related-mobile {
  display: none;
}

.article-meta {
  text-align: center;
}

/* =====================================================
   18.1 TOC (文章目錄) — Consolidated
   你可以用兩種 class（任一即可）：
   - .article-toc（文章模板）
   - .toc-container（通用章節目錄容器）
   ===================================================== */
.article-toc,
.toc-container {
  background-color: rgba(243, 236, 220, 0.5);
  border-radius: 15px;
  padding: 2rem;
  border-left: 4px solid var(--olive-green);
  margin-bottom: 3rem;
}

.article-toc .toc-title,
.toc-container .toc-title,
.toc-title {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: var(--dark-brown);
  font-weight: 600;
}

.article-toc .toc-list,
.toc-container .toc-list,
.toc-list {
  list-style: none;
}

.article-toc .toc-list li,
.toc-container .toc-list li,
.toc-list li {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(59, 47, 47, 0.07);
}

.article-toc .toc-list li:last-child,
.toc-container .toc-list li:last-child,
.toc-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.article-toc .toc-list a,
.toc-container .toc-list a,
.toc-list a {
  text-decoration: none;
  color: rgba(59, 47, 47, 0.8);
  transition: var(--transition);
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 1rem;
}

.article-toc .toc-list a:hover,
.toc-container .toc-list a:hover,
.toc-list a:hover {
  background-color: rgba(184, 92, 56, 0.1);
  color: var(--terra-red);
}

/* ===== 文章正文 ===== */
.article-content {
  /* 基礎樣式由共用 CSS 繼承 */
}

.article-subsection {
  margin-bottom: 4rem;
}

.article-subsection h2 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--terra-red);
  text-align: left;
}

.article-intro {
  font-size: 1.1rem;
  line-height: 2;
  margin-bottom: 2rem;
  color: rgba(59, 47, 47, 0.85);
  font-style: italic;
}

.article-subsection p {
  font-size: 1.05rem;
  line-height: 2;
  margin-bottom: 1.5rem;
  color: rgba(59, 47, 47, 0.85);
  text-align: justify;
}

/* ===== 文章內次標題階層（h3 / h4）===== */

/* h3：章節層級（例：3. 治安注意事項、4. Safari 期間） */
.article-content h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.25rem;
  margin: 2.4rem 0 1.2rem;
  color: var(--dark-brown);
}

/* h4：條列細項（● 開頭） */
.article-content h4 {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 1.05rem;        /* 比 h3 小 */
  margin: 1.4rem 0 0.4rem;
  margin-left: 1.5rem;      /* 整體往右 */
  padding-left: 0.8rem;     /* ● 與文字的間距 */
  color: rgba(59, 47, 47, 0.9);
}

/* ⭐ h4 後面的文字內容：對齊 ● 後第一個字 */
.article-content h4 + p {
  margin-left: calc(1.5rem + 0.8rem);
}

/* ===== 文章頁 Breadcrumb 連結顏色鎖定 ===== */
.article-breadcrumb a,
.article-breadcrumb a:visited {
  color: inherit;       /* 永遠跟父層一樣 */
  text-decoration: none;
}

.article-breadcrumb a:hover {
  text-decoration: underline;
}

/* 文章圖片 */
.article-figure {
  margin: 3rem 0;
  text-align: center;
}

.article-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(59, 47, 47, 0.1);
}

.article-figure figcaption {
  font-size: 0.95rem;
  color: rgba(59, 47, 47, 0.6);
  margin-top: 1rem;
  font-style: italic;
}

/* =====================================================
   Article – Inline Image Row (並排圖片，各自有 caption)
   ===================================================== */

.article-image-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 3rem 0;
}

.article-figure--inline {
  margin: 0;
  text-align: center;
}

.article-figure--inline img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(59, 47, 47, 0.1);
}

.article-image-row {
  grid-template-columns: 1.2fr 0.8fr;
}

.article-figure--inline figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: rgba(59, 47, 47, 0.6);
  font-style: italic;
}

/* 手機版：改成直排 */
@media (max-width: 768px) {
  .article-image-row {
    grid-template-columns: 1fr;
  }
}

/* 重點提示框 */
.article-highlight {
  background-color: rgba(110, 127, 83, 0.08);
  border-left: 4px solid var(--olive-green);
  border-radius: 10px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.article-highlight p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(59, 47, 47, 0.85);
}

/* ===== 後閱讀 CTA（需要幫助嗎） ===== */
.article-post-cta {
  margin-top: 4.5rem;
  background-color: rgba(184, 92, 56, 0.06);
  border-radius: 18px;
  padding: 3rem 2rem;
  text-align: center;
  border: 1px solid rgba(184, 92, 56, 0.10);
  box-shadow: var(--shadow);
}

.article-post-cta h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.7rem;
  margin-bottom: 1rem;
  color: var(--dark-brown);
}

.article-post-cta .poetic-text {
  max-width: 720px;
  margin: 0 auto 1.6rem;
}

/* ===== 相關文章 ===== */
.article-related {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(59, 47, 47, 0.1);
}

.article-related h2,
.article-related h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.6rem;
  margin-bottom: 2rem;
  color: var(--dark-brown);
  text-align: center;
}

.related-articles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.related-article-card {
  background-color: rgba(250, 248, 243, 0.8);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid rgba(184, 92, 56, 0.1);
  text-decoration: none; /* ✅ 支援整卡為 <a> */
  color: inherit;
  display: block;
}

.related-article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(59, 47, 47, 0.1);
}

.related-article-card h4 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  color: var(--dark-brown);
}

.related-article-card p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(59, 47, 47, 0.75);
  margin-bottom: 1rem;
}

/* ===== 文章頁腳 CTA（原本就有，保留） ===== */
.article-footer-cta {
  background-color: rgba(184, 92, 56, 0.08);
  border-radius: 15px;
  padding: 3rem 2rem;
  text-align: center;
  margin-top: 5rem;
}

.article-footer-cta h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--dark-brown);
}

.article-footer-cta p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: rgba(59, 47, 47, 0.8);
}

/* ===== 響應式設計 ===== */
@media (max-width: 1024px) {
  .article-container {
    padding: 3.5rem 1.75rem;
  }
  .related-articles-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .article-hero {
    padding: 8rem 1.5rem 4rem;
  }

  .article-hero h1 {
    font-size: 2rem;
  }

  .article-meta {
    flex-direction: column;
    gap: 1rem;
    font-size: 0.9rem;
  }

  .article-container {
    padding: 3rem 1.5rem;
  }

  .article-subsection h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  .article-subsection p {
    text-align: left;
  }

/* ================================
   Mobile – 延伸閱讀（你可能也想看）
   ================================ */
.related-article-card h4 {
  text-align: left;        /* 明確保持左對齊（不置中） */
  line-height: 1.5;
}

.related-article-card p {
  font-size: 0.95rem;      /* 手機閱讀更舒服 */
}

/* （可選）增加一點編輯感，不影響點擊 */
.related-article-card h4::before {
  content: '— ';
  color: rgba(184, 92, 56, 0.6);
}

  .article-toc,
  .toc-container {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .article-post-cta {
    padding: 2.2rem 1.4rem;
    margin-top: 3.5rem;
  }

  .article-footer-cta {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .article-hero h1 {
    font-size: 1.6rem;
  }

  .article-subsection h2 {
    font-size: 1.3rem;
  }

  .article-subsection p {
    font-size: 1rem;
  }
}

/* =========================
   FIX 1：Article Title 上方空白（Mobile）
   只影響文章頁，不影響 Tanzania Hero
   ========================= */
@media (max-width: 768px) {
  .page-article .article-hero.article-hero--tanzania {
    padding-top: 3.2rem !important;
    padding-bottom: 4rem;
  }
}

/* =========================
   FIX 2：Article Meta 置中（Mobile）
   ========================= */
@media (max-width: 768px) {
  .page-article .article-meta {
    align-items: center;   /* ← 關鍵 */
    text-align: center;
  }

  .page-article .article-meta span {
    justify-content: center;
  }
}

/* =====================================================
   ✅ About Page – E-E-A-T / 醫師視角提醒（只影響 about.html）
   用途：讓 about.html 新增的 .article-note 更像「專業提醒」框
   ===================================================== */

.page-about .article-note {
  /* 版面與邊界 */
  max-width: 760px;
  margin: 2.2rem auto 0;
  padding: 1.4rem 1.5rem;

  /* 視覺（更乾淨、更可信） */
  background: rgba(250, 248, 243, 0.92);
  border-radius: 16px;
  border: 1px solid rgba(184, 92, 56, 0.16);
  border-left: 5px solid rgba(184, 92, 56, 0.65);
  box-shadow: 0 14px 34px rgba(59, 47, 47, 0.10);

  /* 文字（避免過度詩性、讓內容更像「說明」） */
  color: rgba(59, 47, 47, 0.86);
  font-style: normal;
  line-height: 2.0;
  text-align: left;

  /* 讓內容可選取/可互動（你原本的 .article-note 有 pointer-events: none） */
  pointer-events: auto;
}

.page-about .article-note p {
  margin: 0;
  font-size: 1.02rem;
}

.page-about .article-note strong {
  font-family: 'Noto Serif TC', serif;
  font-weight: 700;
  color: rgba(59, 47, 47, 0.95);
}

/* 小標題行距微調：讓第一行更像「標籤」 */
.page-about .article-note p br:first-of-type {
  line-height: 1.2;
}

/* 手機版：稍微收斂 padding 與字級 */
@media (max-width: 768px) {
  .page-about .article-note {
    padding: 1.15rem 1.1rem;
    border-radius: 14px;
  }

  .page-about .article-note p {
    font-size: 0.98rem;
    line-height: 1.95;
  }
}

/* =====================================================
   ✅ Safari Note Block（遊獵筆記）
   用途：每個章節結尾、圖片前的整理小卡
   ===================================================== */

.safari-note {
  background-color: rgba(243, 236, 220, 0.55);
  border-radius: 16px;
  padding: 1.6rem 1.6rem 1.35rem;
  border-left: 4px solid rgba(184, 92, 56, 0.75);
  border: 1px solid rgba(184, 92, 56, 0.14);
  box-shadow: 0 14px 34px rgba(59, 47, 47, 0.08);
  margin: 2.3rem 0 1.8rem; /* 上：和內文分隔；下：留給圖片呼吸 */
}

.safari-note__title {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(59, 47, 47, 0.92);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.safari-note__title::before {
  content: '🦁';
  font-size: 1.1rem;
  line-height: 1;
  transform: translateY(-1px);
}

.safari-note__text {
  margin: 0 0 0.9rem 0;
  color: rgba(59, 47, 47, 0.82);
  line-height: 1.95;
  font-size: 1rem;
}

.safari-note__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.safari-note__list li {
  position: relative;
  padding-left: 1.05rem;
  margin: 0.55rem 0;
  color: rgba(59, 47, 47, 0.82);
  line-height: 1.9;
  font-size: 1rem;
}

.safari-note__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: rgba(184, 92, 56, 0.75);
}

@media (max-width: 768px) {
  .safari-note {
    padding: 1.25rem 1.15rem 1.05rem;
    border-radius: 14px;
    margin: 2rem 0 1.4rem;
  }

  .safari-note__title {
    font-size: 1.05rem;
  }

  .safari-note__text,
  .safari-note__list li {
    font-size: 0.98rem;
  }
}

/* ===============================
   Inline Related Reading（章節延伸閱讀）
   =============================== */

.article-related-inline {
  margin: 1.2rem 0 1.8rem;
  font-size: 0.95rem;
  color: rgba(59, 47, 47, 0.75);
}

.article-related-inline a {
  color: rgba(184, 92, 56, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 92, 56, 0.35);
  padding-bottom: 2px;
}

.article-related-inline a:hover {
  color: rgba(184, 92, 56, 1);
  border-bottom-color: rgba(184, 92, 56, 0.7);
}