/* Components — 跨頁可重複使用元件 */

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  transition: transform .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out);
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--c-ink);
  color: var(--c-bg);
}
.btn--primary:hover {
  background: var(--c-brand);
  color: var(--c-bg);
  box-shadow: var(--shadow-md);
}
.btn--brand {
  background: var(--c-brand);
  color: var(--c-bg);
}
.btn--brand:hover { background: var(--c-brand-dk); color: var(--c-bg); }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--ghost:hover {
  background: var(--c-ink);
  color: var(--c-bg);
}
.btn--accent {
  background: var(--c-accent);
  color: var(--c-ink);
}
.btn--lg { padding: var(--sp-5) var(--sp-7); font-size: 1rem; }

.btn__arrow {
  width: 16px; height: 16px;
  transition: transform .25s var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* 手機：按鈕在小螢幕收斂，避免過於巨大（桌機 .btn--lg 約 80px 高） */
@media (max-width: 520px) {
  .btn    { padding: var(--sp-3) var(--sp-5); font-size: .9rem; }   /* ~44px 高 */
  .btn--lg { padding: var(--sp-3) var(--sp-6); font-size: .92rem; } /* ~50px 高，比 base 略寬不更高 */
}

/* ============ Tags / Chips ============ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 500;
  background: var(--c-bg-alt);
  color: var(--c-ink-2);
  border: 1px solid var(--c-line);
}
.chip--brand { background: var(--c-brand); color: var(--c-bg); border-color: var(--c-brand); }
.chip--accent { background: var(--c-accent); color: var(--c-ink); border-color: var(--c-accent); }
.chip--dark { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans-en);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--c-brand);
}

/* ============ Cards ============ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  border: 1px solid var(--c-line);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg-alt);
}
/* hover 只讓卡片本身浮起（見 .card:hover），圖片維持不動 */
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.card__meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-size: .75rem;
  color: var(--c-ink-3);
}
.card__title {
  font-family: var(--font-sans-zh);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
}
.card__excerpt {
  font-size: .9rem;
  color: var(--c-ink-2);
  line-height: 1.85;
}
.card__quote {
  font-family: var(--font-sans-zh);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
  padding-block: var(--sp-3);
  border-top: 1px dashed var(--c-line);
  margin-top: auto;
}
.card__quote::before {
  content: "「";
  color: var(--c-brand);
  font-weight: 800;
  margin-right: 2px;
}
.card__quote::after { content: "」"; color: var(--c-brand); }

/* ============ Section Heading ============ */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.section-head__title {
  font-size: var(--fs-2xl);
  max-width: 18ch;
}
.section-head__title .accent { color: var(--c-brand); }
.section-head__desc {
  max-width: 36ch;
  color: var(--c-ink-2);
  font-size: 1rem;
}
/* 堆疊式：eyebrow 在上、標題在下、靠左（與十大政策 / 五大面向同排版邏輯）*/
.section-head--stack {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sp-3);
}

/* ============ Pill Link ============ */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-ink);
  border-radius: var(--radius-full);
  background: var(--c-bg-alt);
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.pill-link:hover {
  background: var(--c-ink);
  color: var(--c-bg);
}
.pill-link__arrow {
  display: inline-block;
  transition: transform .25s var(--ease-out);
}
.pill-link:hover .pill-link__arrow { transform: translateX(4px); }

/* ============ Marquee（跑馬燈 / 字串條）============ */
/* 浮動捐款鈕（全站，捲動離開 hero 後淡入）*/
.donate-fab {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-nav);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-brand);
  color: var(--c-bg);
  border-radius: var(--radius-full);
  font-size: .95rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(26,26,26,.18);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), background .25s var(--ease-out);
}
.donate-fab.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.donate-fab:hover {
  background: var(--c-brand-dk);
  color: var(--c-bg);
  transform: translateY(-3px);
}
.donate-fab i { font-size: 1.1rem; }
@media (max-width: 880px) {
  .donate-fab {
    right: var(--sp-4);
    bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .donate-fab { transition: opacity .3s ease; transform: none; }
  .donate-fab.is-visible { transform: none; }
}

.marquee {
  background: var(--c-deep);
  color: var(--c-bg);
  padding-block: var(--sp-4);
  overflow: hidden;
  border-block: 1px solid var(--c-deep);
}
.marquee__track {
  display: flex;
  gap: var(--sp-7);
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-7);
}
.marquee__item::after {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  background: var(--c-accent);
  border-radius: 50%;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ Sticker / Badge ============ */
.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-accent);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  border-radius: var(--radius-full);
  transform: rotate(-6deg);
}

/* ============ Form ============ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.form-field label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-ink);
}
.form-field input,
.form-field textarea,
.form-field select {
  padding: var(--sp-4);
  border: 2px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-white);
  font-size: 1rem;
  transition: border-color .2s var(--ease-out);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--c-ink);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-help {
  font-size: .8rem;
  color: var(--c-ink-3);
}

/* —— Eyebrow 螢光綠變體（用於暗底區段的 eyebrow）—— */
.eyebrow--accent {
  color: var(--c-accent);
}
.eyebrow--accent::before {
  background: var(--c-accent);
}

/* —— Accent inline color util（取代 inline style）—— */
.t-accent { color: var(--c-accent); }