/* 原動力跆拳道館 — /about、/achievements、/schools 專用樣式
   接在 style.css 之後載入。只放這三頁才用到的元件。 */

/* ---------- 館名由來:袁 ≈ 原 ---------- */
.name-origin { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .name-origin { grid-template-columns: auto 1fr; gap: 56px; } }
.name-origin__chars {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-size: 88px; font-weight: 800; line-height: 1;
}
@media (min-width: 1024px) { .name-origin__chars { font-size: 120px; } }
.name-origin__chars span { display: block; }
.name-origin__chars .is-surname { color: var(--red); }
.name-origin__chars .eq { font-size: .35em; color: var(--muted); font-weight: 700; }
.name-origin__text { max-width: var(--text-max); }
.name-origin__text p { font-size: 1.1em; }
.name-origin__text .key { font-size: var(--fs-h3); font-weight: 800; color: var(--ink); }

/* ---------- 一段話(四段) ---------- */
.history { max-width: var(--text-max); }
.history p { font-size: 1.05em; }
.history p:first-child { font-size: var(--fs-h3); font-weight: 800; }

/* ---------- 傳承:兩張臉 ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin-bottom: 24px; }
.duo a { display: block; text-decoration: none; color: var(--ink); }
.duo img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--line);
}
.duo strong { display: block; margin-top: 8px; font-size: var(--fs-h3); }
.duo span { color: var(--muted); font-size: var(--fs-note); }

/* 小表格:欄位少,手機上不必強制 640px 寬 */
.table-wrap .table--compact { min-width: 0; }
.table--compact th, .table--compact td { text-align: left; }
.table--compact thead th { white-space: nowrap; }

.pull {
  max-width: var(--text-max); margin: 28px 0 0;
  font-size: var(--fs-h3); font-weight: 800; line-height: 1.6;
}

/* ---------- 直式時間軸 ---------- */
.timeline { list-style: none; margin: 0; padding: 0; max-width: var(--text-max); }
.timeline li {
  position: relative; padding: 0 0 28px 30px;
  border-left: 3px solid var(--ink);
  margin-left: 9px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -9px; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--ink);
}
.timeline__year { display: block; font-family: var(--font-num); font-weight: 800; font-size: 1.05em; }
.timeline li p { margin: 2px 0 0; color: var(--ink-soft); }

/* 2000–2015:原動力之前的歷史,線條與節點較淡 */
.timeline .is-pre { border-left-color: #4A4642; }
.timeline .is-pre::before { border-color: #6B6560; }
.timeline .is-pre .timeline__year { color: var(--muted); }
/* 重要節點:2000 起點、2015 接手、2026 現在 */
.timeline .is-key::before { width: 23px; height: 23px; left: -13px; top: 2px; background: var(--brand-red); border-color: var(--red); }
.timeline .is-key.is-pre::before { background: #6B6560; border-color: #6B6560; }
.timeline .is-key .timeline__year { font-size: var(--fs-h3); }
.timeline .is-key p { color: var(--ink); font-weight: 700; }

/* ---------- Before / After ---------- */
.ba { display: grid; gap: 16px; margin: 0; }
@media (min-width: 768px) { .ba { grid-template-columns: 1fr 1fr; gap: 20px; } }
.ba figure { margin: 0; }
.ba__frame { position: relative; }
.ba img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius);
}
.ba__label {
  position: absolute; top: 12px; left: 12px;
  background: var(--black); color: #fff; font-weight: 800; font-family: var(--font-num);
  padding: 4px 12px; border-radius: 6px; font-size: 16px; line-height: 1.5;
}
.ba figcaption { margin-top: 8px; font-size: var(--fs-note); color: var(--muted); line-height: 1.6; }
.ba-copy { max-width: var(--text-max); margin: 20px 0 48px; }
.ba-copy p { font-size: 1.05em; }
.ba-copy p:first-child { font-weight: 800; font-size: var(--fs-h3); }

/* ---------- 環境設施 ---------- */
.facility { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .facility { grid-template-columns: 1fr 1fr; gap: 40px; } }
.facility figure { margin: 0; }
.facility img { width: 100%; height: auto; border-radius: var(--radius); }
.facility figcaption { margin-top: 8px; font-size: var(--fs-note); color: var(--muted); }

/* ---------- 館長的話 ---------- */
.founder-quote {
  max-width: var(--text-max); margin: 0;
  background: var(--surface); border-left: 4px solid var(--brand-red); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 24px 24px 20px;
}
.founder-quote blockquote { margin: 0; font-size: 20px; line-height: 1.9; }
.founder-quote figcaption { margin-top: 14px; font-weight: 700; color: var(--ink-soft); }

/* ---------- 學員故事卡 ---------- */
.people { display: grid; gap: 20px; }
@media (min-width: 900px) { .people { grid-template-columns: 1fr 1fr; } }
.person {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
.person__no { font-family: var(--font-num); font-weight: 800; color: var(--red); font-size: 15px; margin: 0 0 4px; }
.person h3 { margin-bottom: .6em; }
.person blockquote {
  margin: 0 0 1em; padding: 0 0 0 16px; border-left: 4px solid var(--brand-red);
  font-size: 1.04em;
}
.person blockquote p:last-child { margin-bottom: 0; }
.person__proves { font-size: var(--fs-note); color: var(--muted); margin: 0; }

/* ---------- 感謝狀 ---------- */
.certificate { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .certificate { grid-template-columns: 340px 1fr; gap: 48px; } }
.certificate figure { margin: 0; }
.certificate img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.certificate figcaption { margin-top: 8px; font-size: var(--fs-note); color: var(--muted); }
.certificate__text {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; line-height: 1.9; margin: 0 0 20px;
}
.certificate__text p { margin: 0; }
.certificate__text .doc-no { font-family: var(--font-num); font-weight: 800; }
.certificate__text .gap { margin-top: 1em; }

/* ---------- 全國賽成績:三張小表 ---------- */
.results { display: grid; gap: 20px; }
@media (min-width: 1024px) { .results { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.results caption small { display: block; font-weight: 400; color: var(--muted); font-size: 15px; }

/* ---------- 合作學校銜接圖 ---------- */
.feeder-lead {
  font-size: 26px; font-weight: 800; line-height: 1.6; max-width: 820px; margin: 0;
}
@media (min-width: 1024px) { .feeder-lead { font-size: 36px; } }

.feeder { display: grid; gap: 12px; align-items: center; max-width: 980px; }
@media (min-width: 768px) { .feeder { grid-template-columns: 1fr 72px 1fr; gap: 0; } }
.feeder__from { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) {
  .feeder__from { padding-right: 20px; border-right: 3px solid var(--ink); }
}
.school {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px;
}
.school--to { border: 2px solid var(--ink); }
.school__name { display: block; font-size: var(--fs-h3); font-weight: 800; line-height: 1.4; }
.school__level { display: inline-block; font-size: var(--fs-note); color: var(--muted); margin-right: 8px; }
.school__coach { display: block; margin-top: 4px; font-size: var(--fs-note); color: var(--ink-soft); }
.school__note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-note); line-height: 1.7; }
.feeder__arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; line-height: 1; color: var(--ink);
}
.feeder__arrow .down { display: inline; }
.feeder__arrow .right { display: none; }
@media (min-width: 768px) {
  .feeder__arrow .down { display: none; }
  .feeder__arrow .right { display: inline; }
}

.meaning { display: grid; gap: 16px; }
@media (min-width: 900px) { .meaning { grid-template-columns: repeat(3, 1fr); } }
.meaning article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.meaning h3 { margin-bottom: .5em; }
.meaning p { color: var(--ink-soft); margin-bottom: 0; }

.link-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.link-list a { font-weight: 700; }