/* 洄流 Reflow — 教練團隊頁
   延續公開站敘事語言：淺色水面開場，入水後交給深藍。照片是主角，動效只交代進場。 */

/* ---------- 水面開場 ---------- */

.crew-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: max(62svh, 480px);
  padding: calc(120px + env(safe-area-inset-top)) clamp(24px, 7vw, 110px) 96px;
  background: linear-gradient(150deg, #F9F6EF 0%, var(--shell) 52%, var(--shell-soft) 100%);
  overflow: clip;
}
.crew-hero-inner { width: min(1120px, 100%); margin: 0 auto; }
.crew-hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.crew-hero h1 span { display: block; }
.crew-hero .hero-note { max-width: 620px; }
.crew-hero .hero-depth { bottom: 26px; }

@media (min-width: 901px) {
  .crew-hero h1 span { white-space: nowrap; }
}

.crew-hero-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.crew-hero-person {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--ink-water) 20%, transparent);
  border-radius: var(--r);
  padding: 12px;
  color: var(--ink-water);
  background: var(--card);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.crew-hero-person:hover {
  border-color: color-mix(in srgb, var(--ink-water) 46%, transparent);
  background: var(--shell);
}
.crew-hero-person img {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.crew-hero-person > span { display: grid; gap: 4px; min-width: 0; }
.crew-hero-person strong {
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 600;
}
.crew-hero-person small {
  overflow: hidden;
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  text-overflow: ellipsis;
}
/* 四段教練章節很長，捲動時提供 sticky 快速切換列；
   收在 .crew-chapters 裡，sticky 的作用範圍就自然等於教練區。 */
.crew-chapters { position: relative; }
.crew-switch {
  position: sticky;
  z-index: 20;
  /* 固定導覽列實測 73px，再留 11px 呼吸 */
  top: calc(84px + env(safe-area-inset-top));
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  width: fit-content;
  max-width: calc(100% - 32px);
  /* 負的下邊距：不佔流動高度，直接浮在章節的上留白上 */
  margin: 0 auto -52px;
  padding: 5px;
  border: 1px solid var(--surface-ink-line);
  border-radius: 999px;
  background: rgba(10, 28, 39, .84);
  backdrop-filter: blur(14px);
  overflow-x: auto;
  scrollbar-width: none;
}
.crew-switch::-webkit-scrollbar { display: none; }
.crew-switch a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  color: var(--white-76);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.crew-switch img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.crew-switch a:hover { background: var(--white-8); color: var(--foam); }
.crew-switch a[aria-current="true"] { background: var(--foam); color: var(--ink-water); }
/* 專案觸控標準：coarse pointer 下互動元件至少 44px */
@media (pointer: coarse) {
  .crew-switch a { min-height: 44px; }
}

/* 錨點跳轉要讓標題落在固定導覽列與切換列下方 */
.crew-chapter { scroll-margin-top: 132px; }

/* ---------- 水下章節 ---------- */

.crew-story { position: relative; background: var(--ink-deep); color: var(--foam); }

/* 品牌故事採「一線成流」：字義交給單欄正文，讓全文沿同一條潮線讀完。 */
.crew-origin {
  position: relative;
  padding: clamp(80px, 8vw, 112px) clamp(24px, 8vw, 126px) clamp(88px, 9vw, 124px);
  background: linear-gradient(150deg, var(--water) 0%, var(--water-mid) 68%, var(--ink-deep) 100%);
  overflow: clip;
}
.crew-origin-shell {
  --origin-reading-width: min(660px, 64%);
  --origin-bank-gap: clamp(56px, 7vw, 84px);
  --origin-line-gap: clamp(28px, 3.5vw, 42px);
  position: relative;
  width: min(1040px, 100%);
  margin: 0 auto;
}
.crew-origin .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.crew-origin-definitions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--origin-reading-width));
  gap: var(--origin-bank-gap);
  align-items: end;
  margin: 0;
  padding: 0 0 clamp(52px, 6vw, 72px);
}
.crew-origin-definition {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  align-items: center;
}
.crew-origin-word {
  font-family: var(--logo-zh);
  font-size: clamp(76px, 7vw, 96px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: .02em;
}
.crew-origin-definition > dd {
  min-width: 0;
  margin: 0;
  color: var(--current-readable);
  font-family: var(--serif);
  font-size: clamp(16px, 1.35vw, 18px);
  font-weight: 700;
  line-height: 1.85;
}
.crew-origin-current {
  position: relative;
}
.crew-origin-current::before,
.crew-origin-current::after {
  content: '';
  position: absolute;
  left: calc(100% - var(--origin-reading-width) - var(--origin-line-gap));
  pointer-events: none;
}
.crew-origin-current::before {
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--current-readable), color-mix(in srgb, var(--current-readable) 18%, transparent));
}
.crew-origin-current::after {
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral-highlight);
  transform: translate(-3.5px, -1px);
}
.crew-origin-reading { width: var(--origin-reading-width); margin-left: auto; }
.crew-origin-story > p {
  color: var(--white-76);
  font-size: 16px;
  line-height: 2.1;
}
.crew-origin-story > p + p { margin-top: 24px; }
.crew-origin-closing {
  margin-top: clamp(48px, 6vw, 64px);
}
.crew-origin-closing > p {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.68;
  text-wrap: balance;
}
.crew-chapter {
  position: relative;
  padding: clamp(84px, 10vw, 140px) clamp(24px, 8vw, 126px);
  background: linear-gradient(180deg, var(--water) 0%, var(--water-mid) 100%);
  overflow: clip;
}
.crew-origin + .crew-chapter {
  background: linear-gradient(180deg, var(--ink-deep) 0%, var(--water) 32%, var(--water-mid) 100%);
}
.crew-chapter-alt { background: linear-gradient(180deg, var(--water-mid), #10334A); }
.crew-chapter::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: min(12vw, 150px) 100%;
  opacity: .5;
}
.crew-shell { position: relative; z-index: 1; width: min(1120px, 100%); margin: 0 auto; }

.crew-head { margin-bottom: clamp(36px, 5vw, 56px); }
.crew-id { display: flex; align-items: center; gap: 22px; margin-top: 20px; }
.crew-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--white-14);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .35);
}
.crew-id h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.crew-id h2 small {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: .42em;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--current-readable);
}
.crew-ig {
  display: inline-block;
  margin-top: 7px;
  color: var(--white-76);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 1px solid var(--white-14);
  padding-bottom: 2px;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.crew-ig:hover { color: var(--foam); border-color: var(--current); }

/* 主圖 × 文案：桌面左右對望，交錯章節鏡像 */
.crew-grid {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}
.crew-chapter-alt .crew-grid { grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr); }
.crew-chapter-alt .crew-feature { order: 2; }
.crew-chapter-alt .crew-copy { order: 1; }

.crew-feature { position: relative; margin: 0; }
.crew-feature img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
}
.crew-feature figcaption {
  margin-top: 12px;
  color: var(--deep-muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
}

.crew-role {
  color: var(--current-readable);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.crew-bio { max-width: 560px; color: var(--white-76); font-size: 15px; line-height: 2.05; }
/* 全域 * { margin: 0 } 會讓連續段落黏成一整塊，簡介分段時看不出斷句 */
.crew-bio + .crew-bio { margin-top: 1.05em; }

/* 履歷帳目：延續 offer-ledger 的行式語言 */
.crew-facts { margin-top: 30px; border-bottom: 1px solid var(--white-14); }
.crew-facts > div {
  display: grid;
  grid-template-columns: minmax(120px, .38fr) minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--white-14);
}
.crew-facts dt {
  color: var(--current-readable);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-top: 3px;
}
.crew-facts dd { color: var(--foam); font-size: 14px; line-height: 1.75; }
.crew-facts dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--white-14); text-underline-offset: 4px; }
.crew-facts dd a:hover { text-decoration-color: var(--current); }

/* 「適合的學生」：教練自己提供的 2–4 項情境，用細短線當項目符號，
   維持 crew-facts 的安靜節奏，不引入新的色塊或圖示。 */
.crew-fit {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crew-fit li { position: relative; padding-left: 18px; }
.crew-fit li::before {
  content: '';
  position: absolute;
  top: .8em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--current);
}

.crew-quote {
  margin-top: 30px;
  padding-left: 18px;
  border-left: 2px solid color-mix(in srgb, var(--current) 55%, transparent);
  color: var(--white-76);
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.8;
}

/* 相片列：不足兩張時單張滿版 */
.crew-strip {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
  margin-top: clamp(40px, 6vw, 64px);
}
.crew-strip figure { margin: 0; }
.crew-strip figcaption {
  margin-top: 10px;
  color: var(--deep-muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
}
.crew-strip figure:only-child { grid-column: 1 / -1; }
.crew-strip img {
  display: block;
  width: 100%;
  height: min(38vw, 360px);
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
}

/* 教練自己提供直幅原圖時改用原比例，不套固定高度硬裁。
   img 帶了真實 width/height，height:auto 就會沿用原始長寬比；
   雙 class 提權，避免被下方 RWD 區塊的固定高度蓋回去。 */
.crew-feature.crew-feature--natural img {
  max-height: none;
  height: auto;
}
.crew-strip--natural {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.crew-strip.crew-strip--natural img { height: auto; }

/* ---------- 收尾 CTA ---------- */

.crew-cta {
  position: relative;
  padding: clamp(90px, 12vw, 150px) clamp(24px, 8vw, 126px);
  background: linear-gradient(180deg, #10334A, var(--ink-deep));
  text-align: center;
  overflow: clip;
}
.crew-cta-inner { width: min(760px, 100%); margin: 0 auto; }
.crew-cta h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--foam);
  text-wrap: balance;
}
.crew-cta .hero-actions { justify-content: center; margin-top: 38px; }
.crew-cta .text-link { color: var(--white-76); }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .crew-origin-shell {
    --origin-reading-width: calc(100% - 36px);
    --origin-bank-gap: 0px;
  }
  .crew-origin-definitions { grid-template-columns: 1fr; gap: 20px; padding-bottom: 48px; }
  .crew-origin-definition { grid-template-columns: 80px minmax(0, 1fr); }
  .crew-origin-current::before,
  .crew-origin-current::after { left: 0; }
}

@media (max-width: 900px) {
  .crew-hero { min-height: auto; padding-top: calc(128px + env(safe-area-inset-top)); }
  .crew-grid,
  .crew-chapter-alt .crew-grid { grid-template-columns: 1fr; gap: 30px; }
  .crew-chapter-alt .crew-feature { order: 0; }
  .crew-chapter-alt .crew-copy { order: 0; }
  .crew-feature img { max-height: 440px; }
}

@media (max-width: 700px) {
  .crew-hero { padding-left: 20px; padding-right: 20px; padding-bottom: 84px; }
  .crew-hero .hero-depth { left: 20px; right: 20px; bottom: 20px; }
  .crew-hero-person { grid-template-columns: 48px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .crew-hero-person img { width: 48px; height: 48px; }
  .crew-hero-person strong { font-size: var(--fs-title); }
  .crew-origin { padding: 64px 20px 72px; }
  .crew-origin-shell { --origin-reading-width: calc(100% - 28px); }
  .crew-origin-definitions { gap: 18px; padding-bottom: 40px; }
  .crew-origin-definition { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; }
  .crew-origin-word { font-size: 68px; }
  .crew-origin-definition > dd { font-size: 16px; line-height: 1.8; }
  .crew-origin-story > p { font-size: 15px; line-height: 2; }
  .crew-origin-story > p + p { margin-top: 22px; }
  .crew-origin-closing { margin-top: 44px; }
  .crew-origin-closing > p { font-size: clamp(24px, 7vw, 28px); line-height: 1.7; }
  .crew-chapter { padding: 72px 22px; }
  .crew-id { gap: 16px; }
  .crew-avatar { width: 68px; height: 68px; }
  .crew-facts > div { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
  .crew-strip { grid-template-columns: 1fr; }
  .crew-strip img { height: min(58vw, 300px); }
  /* 窄螢幕收起頭像，讓四個入口一次看得完，不必橫向捲 */
  .crew-switch { gap: 2px; padding: 4px; }
  .crew-switch img { display: none; }
  .crew-switch a { padding: 4px 13px; }
  .crew-cta { padding: 84px 22px; }
}