body { background-color: var(--color-bg-page); }

/* Hero：改為內縮的圓角卡片，避免整條滿版單一色塊 */
.donate-hero {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  padding: 44px 20px;
  text-align: center;
  margin: 120px 20px 0;
  border-radius: 24px;
}
/* 內文 CTA（白底上的品牌色按鈕） */
.recurring-pitch__cta {
  margin-top: 28px;
}
.body-cta-btn {
  display: inline-block;
  padding: 13px 44px;
  background: var(--color-primary-text);
  color: #fff;
  border: none;
  border-radius: var(--border-radius-pill);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.body-cta-btn:hover {
  background: var(--color-primary-text-dark);
  transform: translateY(-1px);
}


.donate-hero h1 {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 28px;
}
.donate-hero p {
  font-size: 1.2rem;
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}
.donate-hero p + p {
  margin-top: 10px;
}
.donate-hero .hero-tagline {
  font-size: 1.8rem;
  font-weight: 700;
  opacity: 1;
}

/* 首頁 Hero：文字與照片左右分欄（比照 .campaign-featured 卡片同樣的左右分欄邏輯），
   不把文字疊在照片上，不需要漸層調對比——僅限首頁主 hero，感謝頁/失敗頁維持 .donate-hero 色塊 */
.hero-split {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1100px;
  margin: 152px auto 0;
  padding: 0 20px;
  min-height: 420px;
}
.hero-split__text {
  flex: 46;
}
.hero-split__text h1 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--color-primary-text);
  margin-bottom: 24px;
}
.hero-split__text p {
  font-size: 1.2rem;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 0 10px;
  color: var(--color-text-secondary);
}
.hero-split__text p:last-of-type {
  margin-bottom: 0;
}
.hero-split__text .hero-tagline {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 20px 0 10px;
}
.hero-split__text .body-cta-btn {
  margin-top: 28px;
}
/* flex 46:54 + aspect-ratio 1.36（非 1:1 + 固定 min-height）：
   文字欄留夠寬度讓標語不換行；照片欄比例固定，不論視窗寬度都裁一樣多，
   避免原本「固定高度、視窗變窄時裁更兇」的問題（900px 斷點前最窄時裁到邊界的人） */
.hero-split__photo {
  flex: 54;
  order: 2;
  align-self: auto;
  aspect-ratio: 1.36;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.hero-split__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* FAQ bar */
.faq-bar {
  padding: 60px 0;
}
.faq-bar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.faq-bar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.faq-bar__card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
}
.faq-bar__card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
.faq-bar__card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.8;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── 病友故事交錯區 ── */
.stories-col { min-width: 0; display: flex; flex-direction: column; }
.stories-section {
  padding: 36px 20px 28px;
}
.stories-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.stories-col--offset {
  padding-top: 60px;
}

/* 左欄：照片在上，純文字引言在下（跟右欄同一種純文字風格，無白底） */
.story-photo-wrap { position: relative; }
.story-photo-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.story-card {
  margin: 24px 0 0;
}
.story-card__quote {
  font-size: 1.2rem;
  line-height: 1.85;
  color: var(--color-text-primary);
  margin: 0 0 16px;
}
.story-card__author {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  font-style: normal;
}

/* 引言署名 + 小頭像：讓每則引言自己帶著臉，配對關係不依賴版面位置 */
.story-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.story-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.story-avatar-placeholder {
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  opacity: 0.55;
}

/* 右欄：引言 + 大圓角照片 */
.story-standalone-quote {
  font-size: 1.2rem;
  line-height: 1.85;
  color: var(--color-text-primary);
  margin: 0 0 16px;
}
.stories-col > .story-author-row { margin-bottom: 24px; }
.story-standalone-author {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-weight: 600;
  font-style: normal;
}
.story-photo-rounded-wrap { position: relative; }
.story-photo-rounded-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* placeholder 共用 */
.story-placeholder {
  background: #F0EBE6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-text-muted);
}
.story-placeholder i   { font-size: 2.1rem; opacity: 0.35; }
.story-placeholder span { font-size: 1rem; opacity: 0.55; }

/* Impact section */
.impact-section {
  padding: 40px 0 60px;
}
.impact-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.impact-title {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 36px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-top: 3px solid var(--color-primary);
}
.stat-card i {
  font-size: 1.9rem;
  color: var(--color-primary);
  margin-bottom: 14px;
  display: block;
}
.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary-text);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}
.stat-desc {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* 定期定額鼓勵段 */
.recurring-pitch {
  padding: 48px 20px;
}
.recurring-pitch__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.recurring-pitch__inner--solo {
  max-width: 700px;
  text-align: center;
}
.recurring-pitch__left p.recurring-pitch__note {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.recurring-pitch__left {
  flex: 1;
  padding-top: 0;
}
.recurring-pitch__left h2 {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-primary-text);
  margin: 0 0 14px;
}
.recurring-pitch__left p {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin: 0 0 14px;
}
.recurring-pitch__left p:last-child { margin-bottom: 0; }
/* Success page */
.success-card {
  background: var(--color-surface);
  padding: 48px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-align: center;
  max-width: 600px;
  margin: 60px auto;
}
.success-card i { font-size: 4rem; color: var(--color-primary); margin-bottom: 24px; }
.success-card h2 { margin-bottom: 16px; font-size: 1.9rem; font-weight: 700; }
.success-card p { color: var(--color-text-secondary); line-height: 1.8; margin-bottom: 32px; }
.return-btn {
  display: inline-block;
  background: var(--color-primary-text);
  color: #fff;
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: 700;
  text-decoration: none;
}

/* === 限時專案（跟下方常態性的圓場列表是不同性質的請求，獨立區塊不同框） === */
.campaign-urgent {
  padding: 44px 20px 0;
}
.campaign-urgent__container {
  max-width: 1100px;
  margin: 0 auto;
}

/* === 捐款地點卡片 === */
.campaigns-section {
  padding: 52px 0 0;
}
.campaigns-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.campaigns-title {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 40px;
}
.campaigns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 小卡：全滿照片、文字疊在底部（橫式 4:3） */
.campaign-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: transform 0.25s, box-shadow 0.25s;
  aspect-ratio: 4 / 3;
  display: block;
}
.campaign-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}
.campaign-card__photo {
  position: absolute;
  inset: 0;
}
.campaign-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.campaign-card__photo--placeholder {
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.campaign-card__photo--placeholder::after {
  content: '\f015';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 3.2rem;
  color: rgba(255,255,255,0.35);
}
/* 由下往上的漸層遮罩 */
.campaign-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0.4) 45%,
    transparent 72%
  );
  z-index: 1;
}
.campaign-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  z-index: 2;
}
.campaign-card__name {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.campaign-card__tagline {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 14px;
}
.campaign-card__actions {
  display: flex;
  gap: 10px;
}
.campaign-card__btn {
  box-sizing: border-box;  /* 手機版 width:100% 時 padding 不撐爆卡片 */
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--border-radius-pill);
  font-size: 1.03rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  backdrop-filter: blur(4px);
  text-decoration: none;
  text-align: center;
  flex: 1;
  border: 2px solid rgba(255,255,255,0.7);
}
.campaign-card__btn--outline {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.campaign-card__btn--outline:hover {
  background: rgba(255,255,255,0.2);
  border-color: #fff;
}
.campaign-card__btn--primary {
  background: rgba(255,255,255,0.92);
  color: var(--color-primary-dark);
  border-color: transparent;
}
.campaign-card__btn--primary:hover {
  background: #fff;
  border-color: transparent;
}

/* 主打大卡：橫式跨滿整列，照片左、文字右 */
.campaign-featured {
  grid-column: 1 / -1;
  display: flex;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transition: transform 0.25s, box-shadow 0.25s;
}
.campaign-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
}
.campaign-featured__photo {
  width: 55%;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
}
.campaign-featured__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.campaign-featured__photo--placeholder {
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.campaign-featured__photo--placeholder::after {
  content: '\f015';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 4rem;
  color: rgba(255,255,255,0.35);
}
.campaign-featured__body {
  flex: 1;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.campaign-featured__name {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 16px;
  line-height: 1.3;
}
.campaign-featured__tagline {
  font-size: 2rem;
  color: var(--color-primary-text);
  line-height: 2.2;
  margin: 0 0 28px;
}
.campaign-featured__actions {
  display: flex;
  gap: 12px;
}
.campaign-featured__btn {
  box-sizing: border-box;  /* 手機版 width:100% 時 padding 不撐爆卡片 */
  display: inline-block;
  padding: 12px 28px;
  border-radius: var(--border-radius-pill);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
}
.campaign-featured__btn--outline {
  background: #fff;
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}
.campaign-featured__btn--outline:hover {
  background: var(--color-primary-light);
}
.campaign-featured__btn--primary {
  background: var(--color-primary-text);
  color: #fff;
}
.campaign-featured__btn--primary:hover {
  background: var(--color-primary-text-dark);
}

/* === 捐款 Modal === */
.donate-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.donate-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  overflow: hidden;
}
.donate-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.donate-modal__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}
/* 無指定 campaign（一般捐款）時的統籌揭露 */
.donate-modal__note {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}
.donate-modal__close {
  background: none;
  border: none;
  font-size: 1.9rem;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
  padding: 0 4px;
  margin-left: 16px;
  flex-shrink: 0;
}
.donate-modal__close:hover { color: var(--color-text-primary); }
.donate-modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px;
  flex: 1;
}

/* === 了解更多 Modal（文字介紹） === */
.info-modal__content {
  font-size: 1.15rem;
  line-height: 2;
  color: var(--color-text-secondary);
}
.info-modal__content p { margin: 0 0 16px; }
.info-modal__content p:last-child { margin-bottom: 0; }
/* footer 在 .donate-modal__body 之外，固定於彈窗底部不隨內文捲動 */
.info-modal__footer {
  flex-shrink: 0;
  padding: 16px 28px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  background: #fff;
}
.info-modal__note {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}
.info-modal__donate-btn {
  display: inline-block;
  padding: 12px 40px;
  background: var(--color-primary-text);
  color: #fff;
  border: none;
  border-radius: var(--border-radius-pill);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.info-modal__donate-btn:hover { background: var(--color-primary-text-dark); }

/* Option B：深色背景，跟其他區塊視覺邊界對齊——其他區塊是 1100px 外層 + 20px padding，
   可視內容實際只有 1060px；這裡背景本身就是可視內容（沒有額外 padding 層），
   所以直接用 1060px 才會對齊，不是 1100px。圓角 16px 比照 campaign-card / campaign-featured / faq-bar__card */
.recurring-pitch--opt-b {
  background: linear-gradient(135deg, #2e1f1f, #3a2822);
  max-width: 1060px;
  margin: 0 auto;
  border-radius: 16px;
}
/* 深色底覆寫回較淺的 --color-primary：這裡背景是深棕漸層，較深的 --color-primary-text 在深底上對比反而更差 */
.recurring-pitch--opt-b .recurring-pitch__left h2 { color: var(--color-primary); }
.recurring-pitch--opt-b .recurring-pitch__left p { color: rgba(255,255,255,0.82); }
.recurring-pitch--opt-b .recurring-pitch__left p.recurring-pitch__note { color: rgba(255,255,255,0.68); }
.recurring-pitch--opt-b .body-cta-btn {
  background: #fff;
  color: var(--color-primary-text);
  padding: 16px 64px;
  font-size: 1.3rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.recurring-pitch--opt-b .body-cta-btn:hover {
  background: var(--color-bg-page);
  box-shadow: 0 6px 32px rgba(0,0,0,0.4);
}

/* 常見疑問：為什麼持續設立圓場（回應「經費拮据為何不收掉場地」的疑問） */
/* max-width:1100px 對齊 campaigns-container / faq-bar__inner，卡片左右邊界才會跟上下區塊一致 */
/* top/bottom 刻意不對稱：faq-bar 自帶 60px 上緣，下方視覺間距已經有了，這裡 bottom 留 0 才不會疊加變成 112px */
.objection-section { max-width: 1100px; margin: 0 auto; padding: 60px 20px 0; }
.objection-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 48px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.objection-question {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary-text);
  text-align: center;
  line-height: 1.6;
  margin: 0 0 24px;
}
.objection-card p {
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--color-text-secondary);
  margin: 0 0 20px;
}
.objection-card p:last-child { margin-bottom: 0; }
/* 字級加大 + 加字距：不是純裝飾，這句本來就是整段的punchline，適合比正文稍大；
   附帶效果：字級越大、字距越寬，粗體的視覺差異越明顯 */
.objection-closing { font-size: 1.45rem; letter-spacing: 0.6px; font-weight: 700; color: var(--color-text-primary); }

.result-wrap { padding: 0 20px; }
.success-card .fa-exclamation-circle { color: #ef4444; }
.campaigns-empty { text-align: center; color: var(--color-text-muted); grid-column: 1 / -1; }
#info-modal-overlay { display: none; }

/* ══════════════════════════════════════════════════════════════
   Responsive — 全部斷點集中於此，由寬到窄排列。
   同一個屬性在多個斷點被設定時，「寬到窄」的排列順序本身就保證窄斷點
   會正確覆寫寬斷點（CSS 對相同優先權的規則，後寫的贏），不需要把
   覆寫規則搬到 base 規則後面這種容易被遺忘的技巧。
   hero 上方位移 = 各版型 fixed navbar 高度（common.css：桌機 170px、平板 100px、手機 80px）
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1300px) {
  .donate-hero { margin-top: 100px; }
  .hero-split { margin-top: 132px; }
}

/* 平板（iPad 及以下） */
@media (max-width: 1024px) {
  .donate-hero h1, .hero-split__text h1 { font-size: 2.3rem; }
  .stories-grid { gap: 32px; }
}

/* 卡片區 / hero responsive（平板） */
@media (max-width: 900px) {
  .campaigns-grid { grid-template-columns: repeat(2, 1fr); }
  /* 剛好3張卡片時，2欄排版會落單1張在第二排、右邊留白——讓它獨佔整排補滿 */
  .campaigns-grid .campaign-card:nth-child(3):last-child { grid-column: 1 / -1; }
  .campaign-featured { flex-direction: column; }
  .campaign-featured__photo { width: 100%; aspect-ratio: 16 / 9; }
  .campaign-featured__body { padding: 24px 28px 28px; }

  /* Hero 同樣寬度不足以左右分欄，改上下堆疊（照片在上，同 .campaign-featured 的堆疊邏輯） */
  .hero-split { flex-direction: column; gap: 28px; min-height: 0; }
  .hero-split__photo { order: 0; width: 100%; align-self: auto; aspect-ratio: auto; }
  .hero-split__photo img { aspect-ratio: 16 / 9; min-height: 0; }
  .hero-split__text { text-align: center; }
  .hero-split__text p { margin: 0 auto 10px; }
}

@media (max-width: 800px) {
  .faq-bar__grid { grid-template-columns: 1fr 1fr; }
}

/* 小平板 / 手機橫向 */
@media (max-width: 768px) {
  .donate-hero { margin: 80px 16px 0; padding: 36px 20px; }
  .donate-hero h1, .hero-split__text h1 { font-size: 1.9rem; }
  .hero-split { margin-top: 112px; }
  .stat-grid { grid-template-columns: 1fr; gap: 10px; }
  .stat-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    padding: 12px 16px;
    text-align: left;
  }
  .stat-card i { grid-column: 1; grid-row: 1 / 3; font-size: 1.5rem; margin-bottom: 0; align-self: center; }
  .stat-number { grid-column: 2; grid-row: 1; font-size: 1.7rem; line-height: 1.2; margin-bottom: 1px; }
  .stat-label { grid-column: 2; grid-row: 2; font-size: 1rem; margin-bottom: 0; }
  .stat-desc { display: none; }
  .impact-section { padding: 28px 0; }
  .impact-title { font-size: 1.45rem; margin-bottom: 24px; }
  .recurring-pitch { padding: 36px 20px; }
  .recurring-pitch__inner { flex-direction: column; align-items: center; }
  .recurring-pitch__left { text-align: center; }
  .recurring-pitch__left h2 { font-size: 1.45rem; }
  .stories-section { padding: 40px 20px 60px; }
  .stories-grid { grid-template-columns: 1fr; gap: 40px; }
  .stories-col--offset { padding-top: 0; }
  /* 手機堆疊時改成「文字在前、照片在後」，跟右欄同順序，避免 hero 照片後面緊接著又是一張（待補的）照片 */
  .story-photo-wrap { order: 2; }
  .story-card { order: 1; margin: 0 0 16px; }
  /* 小圓照是為了解決桌機兩欄並排時的跨欄誤讀，手機單欄依序往下捲動沒有這個問題，拿掉不需要的裝飾 */
  .story-avatar { display: none; }
  .campaigns-title { font-size: 1.45rem; margin-bottom: 32px; }
  .objection-card { padding: 28px 24px; }
  .objection-question { font-size: 1.25rem; }
}

@media (max-width: 600px) {
  .campaigns-section { padding: 40px 0; }
  .donate-modal-overlay { padding: 0; align-items: flex-end; }
  .donate-modal {
    max-height: 95vh;
    border-radius: 20px 20px 0 0;
    max-width: 100%;
  }
  /* 600px 以下 campaigns-section 自己多了 40px bottom padding，這裡 top 對應減少，維持上下視覺間距一致 */
  .objection-section { padding-top: 20px; }
}

/* 卡片區 responsive（手機） */
@media (max-width: 560px) {
  .campaigns-grid { grid-template-columns: 1fr; }
  .campaign-card { aspect-ratio: 3 / 2; }
  .campaign-featured__body { padding: 20px 20px 24px; }
  .campaign-featured__name { font-size: 1.55rem; }
  .campaign-featured__tagline { font-size: 1.3rem; line-height: 1.6; }
  .campaign-featured__actions { flex-direction: column; }
  .campaign-featured__btn { width: 100%; }
}

@media (max-width: 500px) {
  .faq-bar__grid { grid-template-columns: 1fr; }
}

/* 手機直向 */
@media (max-width: 480px) {
  .donate-hero { margin: 80px 12px 0; padding: 28px 20px; border-radius: 18px; }
  .hero-split { margin-top: 112px; gap: 20px; }
  .donate-hero h1, .hero-split__text h1 { font-size: 1.45rem; margin-bottom: 10px; }
  .donate-hero p, .hero-split__text p { font-size: 1rem; line-height: 1.6; margin: 0 0 8px; }
  .donate-hero .hero-tagline, .hero-split__text .hero-tagline { font-size: 1.3rem; }
  .hero-split__text .body-cta-btn { margin-top: 20px; }
  .body-cta-btn { padding: 12px 28px; font-size: 1.1rem; }
  .stat-number { font-size: 2.1rem; }
  .story-card { margin: 0 0 12px; }
  .story-card__quote { font-size: 1.1rem; }
  .story-standalone-quote { font-size: 1.1rem; }
  .faq-bar__card { padding: 20px; }
  .success-card { padding: 32px 20px; }
  .success-card h2 { font-size: 1.5rem; }
  .success-card i { font-size: 3rem; margin-bottom: 16px; }
  .success-card p { font-size: 1.05rem; margin-bottom: 20px; }
  .recurring-pitch--opt-b .body-cta-btn { padding: 14px 36px; font-size: 1.15rem; }
  .objection-section { padding: 32px 16px 0; }
  .objection-card { padding: 24px 20px; }
  .objection-question { font-size: 1.15rem; margin-bottom: 18px; }
  .objection-card p { font-size: 1.05rem; line-height: 1.8; margin-bottom: 16px; }
}