@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   common.css — 共用元件

   跨 Section 重複使用的小元件：
   標題組、按鈕、卡片、標籤、圖片框、網格。

   ★ 這一版沒有任何進場動畫。
     只有滑鼠移上去的狀態變化，那屬於互動回饋。
   ═══════════════════════════════════════════════════════════ */

/* ── 標題組 ── */
.sec-head{ max-width:640px; margin-bottom:var(--s-6) }
.sec-head--center{ text-align:center; margin-inline:auto }

.eyebrow{
  font-family:var(--f-en);
  font-size:var(--fs-note); font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--c-gray-2);
}
.sec-title{
  margin-top:var(--s-2);
  font-size:var(--fs-h2); font-weight:700;
  line-height:var(--lh-tight); letter-spacing:.06em;
}
.sec-lead{
  margin-top:var(--s-2);
  font-size:var(--fs-note); line-height:var(--lh-base);
  color:var(--c-gray-2);
}

/* ── 按鈕 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1);
  padding:12px 24px;
  border-radius:var(--r-btn);
  font-size:var(--fs-btn); font-weight:500; line-height:1.4; letter-spacing:.06em;
  transition:background var(--t-hover) var(--ease),
             color      var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease);
}
.btn--primary{ background:var(--c-accent); color:var(--c-ink) }
.btn--primary:hover{ background:var(--c-accent-dark); box-shadow:var(--sh-2) }

.btn--secondary{ background:var(--c-blue); color:var(--c-navy) }
.btn--secondary:hover{ box-shadow:var(--sh-1) }

.btn--outline{ border:1px solid var(--c-line); color:var(--c-ink) }
.btn--outline:hover{ border-color:var(--c-accent); color:var(--c-navy) }

.btn--text{ padding:0; color:var(--c-navy) }
.btn--text::after{ content:"→" }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-2) }
.btn-row--center{ justify-content:center }

/* ── 卡片 ── */
.card{
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
  padding:var(--s-3);
}
.card__title{ font-size:var(--fs-h3); font-weight:600; line-height:1.4; letter-spacing:.04em }
.card__text { margin-top:var(--s-2); font-size:var(--fs-note); line-height:var(--lh-base); color:var(--c-gray-2) }

/* ── 標籤 ── */
.tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:var(--r-pill);
  background:var(--c-pink);
  color:var(--c-navy);
  font-size:var(--fs-note); font-weight:500; letter-spacing:.06em;
}
.tag-row{ display:flex; flex-wrap:wrap; gap:var(--s-1) }

/* ── 圖片框 ──
   <picture> 是 block，內部 <img> 撐滿外框。
   寬高由 config 給，避免載入時跳版。 */
.media{
  position:relative; overflow:hidden;
  border-radius:var(--r-card);
  background:var(--c-gray-1);
}
.media picture,
.media img{ width:100%; height:100%; object-fit:cover }
.media--1x1 { aspect-ratio:1/1 }
.media--4x3 { aspect-ratio:4/3 }
.media--3x2 { aspect-ratio:3/2 }
.media--4x5 { aspect-ratio:4/5 }
.media--16x9{ aspect-ratio:16/9 }
.media--contain img{ object-fit:contain }

/* ── 網格 ── */
.grid{ display:grid; gap:var(--s-3) }
.grid--2{ grid-template-columns:repeat(2,1fr) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:900px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr } }

/* ── 輔助 ── */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ── 減少動態偏好 ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important }
}