/* We — 集合・你的臺中味 */

/* Hero 標題改用大字級後，這兩個底下區塊標題縮小一級，避免比 hero 標題還搶眼 */
.svc .section-head__title,
.event-section .section-head__title {
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

/* —— We Hero（照片背景大標題，靠左對齊，比照 live-hero 語彙）—— */
.we-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--c-bg);
  isolation: isolate;
}
/* 純色底版本（尚無照片時使用；要換回照片就移除 --solid 並放回 <img> + overlay）*/
.we-hero--solid {
  min-height: clamp(320px, 42vh, 460px);
  background: var(--c-deep);
}
.we-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  z-index: 0;
}
.we-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* 全版均勻加深底色，確保整張照片都比原圖暗 */
    linear-gradient(rgba(6,13,25,.5), rgba(6,13,25,.5)),
    /* 左側加重暗幕：文字靠左，需壓過人物與雜訊；右側保持透明留住主體臉部 */
    linear-gradient(90deg, rgba(11,24,44,.94) 0%, rgba(11,24,44,.78) 34%, rgba(11,24,44,.55) 62%, rgba(11,24,44,.4) 78%, rgba(11,24,44,.48) 100%),
    /* 由下而上漸暗，底部文字更清晰 */
    linear-gradient(0deg, rgba(9,17,30,.9) 0%, rgba(9,17,30,.5) 48%, rgba(9,17,30,.32) 72%, rgba(9,17,30,.42) 100%),
    /* 臺中藍 tint 呼應「集合」主題 */
    linear-gradient(120deg, rgba(26,99,200,.24) 0%, transparent 50%);
}
.we-hero__inner {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin-inline: auto;
  padding-block: var(--sp-8);
}
.we-hero .eyebrow { color: var(--c-accent); }
.we-hero .eyebrow::before { background: var(--c-accent); }
.we-hero__title {
  font-size: clamp(3rem, 2.20rem + 4.00vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--c-bg);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.we-hero__title .accent { color: var(--c-accent); }
.we-hero__lede {
  margin-top: var(--sp-4);
  max-width: 46ch;
  color: rgba(255,255,255,.9);
  font-size: 1.05rem;
  line-height: 1.85;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}

/* —— 三大行動 —— */
.we-actions {
  padding-block: var(--sp-9);
}
.we-actions__grid {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 460px));  /* 2 張卡回到舒服寬度並置中，避免拉滿變稀疏 */
  justify-content: center;
  gap: var(--sp-6);
}
.action-card {
  padding: var(--sp-6);
  border-radius: var(--radius-xl);
  background: var(--c-bg-alt);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 320px;
  transition: transform .3s var(--ease-out);
}
.action-card:hover { transform: translateY(-6px); }
.action-card--volunteer { background: #FCE9D2; }
.action-card--event     { background: #D8E9F0; }
.action-card--voice     { background: #DCEED0; }
.action-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--c-ink);
  color: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
}
.action-card__title { font-size: 1.5rem; }
.action-card__desc  { color: var(--c-ink-2); flex: 1; }
@media (max-width: 880px) {
  .we-actions__grid { grid-template-columns: 1fr; }
}

/* —— 服務處（重新設計）—— */
.svc { padding-block: var(--sp-9); }
.svc .section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

/* 主服務處：照片 ＋ 藍圖網格資訊面板 */
.svc-card {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--c-bg-alt);
}
.svc-card__photo { position: relative; margin: 0; min-height: 340px; }
.svc-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card__pin {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(26,99,200,.94); color: #fff;
  font-size: .82rem; font-weight: 700; border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}
.svc-card__info {
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  display: flex; flex-direction: column;
  background-color: var(--c-bg-alt);
  background-image:
    linear-gradient(rgba(26,99,200,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,99,200,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.svc-card__kicker {
  font-family: var(--font-sans-en); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3);
  margin-bottom: var(--sp-2);
}
.svc-card__name {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); font-weight: 800;
  color: var(--c-ink); margin-bottom: var(--sp-5);
}
/* 電話：主要行動 */
.svc-phone {
  display: inline-flex; align-items: center; gap: var(--sp-4); align-self: flex-start;
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-3);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-full);
  text-decoration: none; color: var(--c-ink); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
.svc-phone:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--c-brand); }
.svc-phone__icon {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: var(--c-brand); color: #fff; border-radius: 50%; font-size: 1.05rem;
}
.svc-phone__body { display: flex; flex-direction: column; line-height: 1.2; }
.svc-phone__body small { font-size: .72rem; color: var(--c-ink-3); margin-bottom: 3px; }
.svc-phone__body strong {
  font-family: var(--font-sans-en); font-size: 1.5rem; font-weight: 800;
  letter-spacing: .01em; color: var(--c-ink);
}
.svc-phone:hover .svc-phone__body strong { color: var(--c-brand); }
/* 其餘資訊：定義清單 */
.svc-meta { margin: var(--sp-6) 0 0; display: flex; flex-direction: column; }
.svc-meta__row {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-4);
  padding: var(--sp-4) 0; align-items: baseline;
}
.svc-meta__row + .svc-meta__row { border-top: 1px solid var(--c-line); }
.svc-meta__row dt {
  font-size: .82rem; font-weight: 700; color: var(--c-ink-2);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.svc-meta__row dt i { color: var(--c-brand); width: 16px; text-align: center; }
.svc-meta__row dd { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.6; color: var(--c-ink); }
.svc-meta__row dd a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.svc-meta__row dd a:hover { color: var(--c-brand); border-bottom-color: currentColor; }
.svc-meta__map {
  display: inline-flex; align-items: center; gap: 5px; margin-left: var(--sp-3);
  font-size: .82rem; font-weight: 700; color: var(--c-brand); white-space: nowrap;
  border-bottom: none !important;
}
.svc-meta__map i { font-size: .72rem; }
.svc-meta__map:hover { color: var(--c-brand-dk); }

/* 次要工作站：與服務處同款卡片 */
.svc-card--flag { margin-top: var(--sp-5); }
.svc-card--flag .svc-card__info { justify-content: center; }
.svc-card--flag .svc-meta { margin-top: var(--sp-3); }
/* 色塊圖 */
.svc-card__photo--ph {
  background:
    linear-gradient(135deg, rgba(26,99,200,.16) 0%, rgba(60,161,238,.10) 100%),
    var(--c-bg-alt);
}
.svc-card__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
}
.svc-card__ph i { font-size: 2.6rem; color: var(--c-brand); opacity: .45; }
.svc-card__ph span { font-size: .8rem; letter-spacing: .12em; color: var(--c-ink-3); }

@media (max-width: 880px) {
  .svc-card { grid-template-columns: 1fr; }
  .svc-card__photo { min-height: 0; aspect-ratio: 16 / 10; }
}

/* —— 志工表單 —— */
.volunteer {
  background: var(--c-ink);
  color: var(--c-bg);
  padding-block: var(--sp-9);
}
.volunteer__inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-7);
  align-items: start;
}
.volunteer__intro h2 { color: var(--c-bg); font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.volunteer__intro p  { color: rgba(250,247,242,.85); line-height: 1.8; }
.volunteer__intro .eyebrow { color: var(--c-accent); }
.volunteer__intro .eyebrow::before { background: var(--c-accent); }

/* —— 改用 Google 表單後的志工 CTA 卡 —— */
.volunteer__cta {
  background: var(--c-bg);
  color: var(--c-ink);
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.volunteer__cta-head {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-bg-alt);
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-ink-2);
  align-self: flex-start;
}
.volunteer__cta-head i { color: var(--c-brand); }
.volunteer__cta h3 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}
.volunteer__cta p { color: var(--c-ink-2); line-height: 1.85; margin: 0; }
.volunteer__cta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.volunteer__cta-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .95rem;
  color: var(--c-ink-2);
}
.volunteer__cta-list i {
  color: var(--c-brand);
  font-size: .8rem;
  background: var(--c-accent);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.volunteer__cta-btn { justify-content: center; width: 100%; margin-top: var(--sp-2); }
.volunteer__cta-btn .btn__arrow { width: auto; opacity: .7; }
@media (max-width: 880px) {
  .volunteer__inner { grid-template-columns: 1fr; }
}

/* —— 活動行事曆 —— */
.events {
  padding-block: var(--sp-9);
}
.events__list {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 340px));
  gap: var(--sp-5);
  justify-content: start;
}

/* 直式活動卡（圖上・內容下）— 參考 Luma / Eventbrite / Accupass；單場或多場都成立 */
.event-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.event-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg);
}
.event-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* 日期日曆徽章（疊在圖片左上）*/
.event-card__badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
  padding: 7px 10px 6px;
  background: var(--c-white);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 16px rgba(17,42,77,.2);
  line-height: 1;
}
.event-card__badge strong { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: var(--c-brand); }
.event-card__badge small  { font-size: .72rem; font-weight: 600; color: var(--c-ink-2); margin-top: 3px; }

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-5);
}
.event-card__when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-brand);
  letter-spacing: .02em;
}
.event-card__title {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--c-ink);
}
/* 地點特別標記：品牌色定位圖示 + 加重文字 */
.event-card__location {
  display: flex;
  gap: 7px;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-ink);
}
.event-card__location i { flex: none; margin-top: .3em; color: var(--c-brand); }
.event-card__detail {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-ink-3);
}
.event-card__btn {
  align-self: stretch;
  justify-content: center;
  margin-top: var(--sp-2);
}

@media (max-width: 520px) {
  .events__list { grid-template-columns: 1fr; }
}

/* —— 市民發聲筒 —— */
.voices {
  background: var(--c-bg-alt);
  padding-block: var(--sp-9);
}
.voices__inner {
  width: var(--container);
  margin-inline: auto;
}
.voices__wall {
  margin-top: var(--sp-7);
  columns: 3 280px;
  column-gap: var(--sp-4);
}
.voice {
  break-inside: avoid;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  transition: transform .25s var(--ease-out);
}
.voice:hover { transform: translateY(-3px); }
.voice__quote { font-size: 1rem; font-weight: 600; line-height: 1.6; margin-bottom: var(--sp-3); color: var(--c-ink); }
.voice__quote::before { content: "「"; color: var(--c-brand); font-weight: 800; }
.voice__quote::after  { content: "」"; color: var(--c-brand); font-weight: 800; }
.voice__meta { display: flex; justify-content: space-between; font-size: .75rem; color: var(--c-ink-3); }
.voice--featured {
  background: var(--c-brand);
  color: var(--c-bg);
  border-color: var(--c-brand);
}
.voice--featured .voice__quote { color: var(--c-bg); }
.voice--featured .voice__quote::before,
.voice--featured .voice__quote::after { color: var(--c-accent); }
.voice--featured .voice__meta { color: rgba(250,247,242,.85); }

.voices__compose {
  margin-top: var(--sp-7);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: var(--sp-7) var(--sp-6);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.voices__compose-head {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-bg-alt);
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-4);
}
.voices__compose-head i { color: var(--c-brand); }
.voices__compose h3 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 800;
  margin-bottom: var(--sp-4);
}
.voices__compose p {
  color: var(--c-ink-2);
  line-height: 1.85;
  margin-bottom: var(--sp-5);
  max-width: 40ch;
  margin-inline: auto;
}
.voices__compose .btn .btn__arrow { width: auto; opacity: .7; }

/* —— Action card CTA 文字（取代 inline style）—— */
.action-card__cta {
  font-weight: 600;
  margin-top: auto;
}
.action-card--volunteer .action-card__cta { color: var(--c-brand); }
.action-card--event     .action-card__cta { color: var(--c-deep); }
.action-card--voice     .action-card__cta { color: var(--c-ink); }

/* ============ 近期活動：橫條列表 ============ */
/* 與上方「服務處」區塊（預設米白 --c-bg）區隔：換淺米 --c-bg-alt */
.event-section { padding-block: var(--sp-9); background: var(--c-bg-alt); }
.event-section .events__list { margin-top: var(--sp-6); }
/* 游標配圖：hover 時跟著滑鼠出現 */
.event-row[data-hover-img] { cursor: pointer; }
/* 注意：全站 animations.css 有 `.js img.is-loaded{opacity:1}`（0,2,1）會蓋掉一般 img 的
   opacity，故此處選擇器需拉高權重（用 img.event-hover-img + :not/.is-visible = 0,3,1）才壓得過。 */
.event-hover-img,
.js img.event-hover-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: 90;
  transform: translate(-50%, -50%) scale(.9) rotate(-3deg);
  transition: opacity .18s var(--ease-out), transform .25s var(--ease-out);
}
.event-hover-img,
.js img.event-hover-img:not(.is-visible) { opacity: 0; }
.js img.event-hover-img.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-3deg);
}
@media (prefers-reduced-motion: reduce) {
  .event-hover-img,
  .js img.event-hover-img { transition: opacity .18s linear; transform: translate(-50%, -50%) rotate(-3deg); }
  .js img.event-hover-img.is-visible { transform: translate(-50%, -50%) rotate(-3deg); }
}
@media (max-width: 640px) {
  .event-hover-img,
  .js img.event-hover-img { width: 168px; height: 168px; }
}

/* —— 近期活動：入場券式卡片（撕票缺口＋日期戳章）—— */
.event-section .ticket { margin-top: var(--sp-6); }
.ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) 1fr;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.ticket__poster {
  position: relative;
  align-self: start;            /* 不隨卡片高度拉伸，維持正方形 */
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  overflow: hidden;
}
/* 正方形放在 <img> 上（放在 grid item 上會因 fr+aspect-ratio 崩塌）*/
.ticket__poster img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center; display: block; }
.ticket__date {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  width: 58px; padding: var(--sp-3) 0;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.ticket__date strong { font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; color: var(--c-brand); }
.ticket__date span { font-size: .72rem; font-weight: 700; color: var(--c-ink-2); margin-top: 4px; }
.ticket__body {
  position: relative;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  padding-left: clamp(var(--sp-6), 3.5vw, var(--sp-8));
  display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.ticket__body::before {
  content: ""; position: absolute; left: 0; top: 20px; bottom: 20px;
  border-left: 2px dashed var(--c-line);
}
.ticket__notch {
  position: absolute; left: -11px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-line);
}
.ticket__notch--top { top: -11px; }
.ticket__notch--bottom { bottom: -11px; }
.ticket__status {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-3);
  background: rgba(60,161,238,.14); color: var(--c-brand-dk);
  border-radius: var(--radius-full); font-size: .78rem; font-weight: 700;
}
.ticket__pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent);
  box-shadow: 0 0 0 0 rgba(60,161,238,.5); animation: ticket-pulse 2s ease-out infinite;
}
@keyframes ticket-pulse { to { box-shadow: 0 0 0 8px rgba(60,161,238,0); } }
.ticket__title {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem); font-weight: 800;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink);
}
.ticket__desc { width: 100%; }
.ticket__desc p { font-size: 1rem; line-height: 1.9; color: var(--c-ink-2); text-wrap: pretty; }
.ticket__desc p + p { margin-top: var(--sp-3); }
.ticket__meta {
  list-style: none; margin: 0; padding: var(--sp-4) 0; width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-3);
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.ticket__meta li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: .98rem; line-height: 1.55; font-weight: 600; color: var(--c-ink); }
.ticket__meta li i { flex: none; width: 20px; text-align: center; margin-top: .2em; color: var(--c-brand); }
/* 報名鈕：卡片下方、靠左、常規尺寸 */
.ticket__cta { align-self: flex-start; margin-top: auto; }

@media (prefers-reduced-motion: reduce) { .ticket__pulse { animation: none; } }
@media (max-width: 820px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket__poster { border-radius: var(--radius-xl) var(--radius-xl) 0 0; min-height: 0; }
  .ticket__body { border-radius: 0 0 var(--radius-xl) var(--radius-xl); padding-left: clamp(var(--sp-5), 3vw, var(--sp-7)); padding-top: var(--sp-6); }
  .ticket__body::before { left: 20px; right: 20px; top: 0; bottom: auto; border-left: none; border-top: 2px dashed var(--c-line); }
  .ticket__notch--top { left: -11px; top: -11px; }
  .ticket__notch--bottom { left: auto; right: -11px; top: -11px; bottom: auto; }
}