/* ═══════════════════════════════════════════════════════════════
   好好生活物理治療所 — 影片頁（video-*.html）共用樣式（2026-10-20）

   每支影片一頁：上面是影片＋「影片重點」（點了跳到那一段），下面是衛教文字與 FAQ。
   搭配 nav.css ＋ article.css 使用（本區不吃 pages.css，見 docs/架構-好好生活官網.md §0）。
   行為在 watch.js；改版型前先讀 docs/架構-好好生活-影片文章與成效追蹤.md。

   版面：
   - 手機：標題 → 影片 → 一句說明 → 影片重點 → 按鈕，一路往下。
   - 電腦（≥900px）：直式影片在左（約 380px），標題、重點、按鈕在右；
     橫式影片（.watch--h）左邊放寬成 3:2。
   ⚠️ <video> 一定要 height:auto —— HTML 的 height 屬性會蓋過 aspect-ratio，框會被撐高。
   ═══════════════════════════════════════════════════════════════ */

.watch{
  display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "media" "side";
  gap:18px; padding-top:clamp(20px,3vw,34px);
}
.watch-head{grid-area:head}
.watch-media{grid-area:media}
.watch-side{grid-area:side}

.watch-head h1{
  font-family:var(--serif); font-size:clamp(25px,3.6vw,36px); font-weight:700;
  line-height:1.45; margin-top:10px; letter-spacing:.01em; text-wrap:balance;
}
/* 標題用 <span class="nw"> 包詞組：中文預設任何兩字之間都能斷，「好好生活」會被拆成「好／好生活」，
   包起來之後只在詞組之間換行 */
.watch-head h1 .nw{display:inline-block}
.watch--h .watch-head h1{font-size:clamp(24px,2.6vw,30px)}

/* 影片：手機上直式影片最寬 320px、高度留約 300px 給標題與下面的「影片重點」，
   第一屏看得到標題、影片和下一步，不會一張影片蓋滿整個畫面（按全螢幕照樣能放大看） */
.watch-frame{margin:0 auto;width:min(100%, 320px, calc((100vh - 300px) * 9 / 16))}
@supports (height:100svh){ .watch-frame{width:min(100%, 320px, calc((100svh - 300px) * 9 / 16))} }
.watch--h .watch-frame{width:100%}
.watch-v{
  display:block; width:100%; height:auto; aspect-ratio:9/16;
  background:var(--navy-deep); border-radius:12px; box-shadow:0 10px 30px rgba(15,35,68,.18);
}
.watch--h .watch-v{aspect-ratio:16/9}
.watch-meta{
  margin-top:10px; text-align:center; font-size:12.5px; letter-spacing:.06em; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

.watch-lead{color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,17px);line-height:1.95}

/* 影片重點（章節）：整列是按鈕，點了跳到那一段並播放 */
.chapters{
  margin-top:18px; background:var(--white); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px 8px; box-shadow:0 1px 3px var(--shadow-navy);
}
.chapters-k{font-size:11.5px;letter-spacing:.2em;color:var(--gold-text);font-weight:700}
.chapters ol{list-style:none;margin:8px 0 0;padding:0}
.chapters li{border-top:1px solid var(--border)}
.chapters li:first-child{border-top:0}
.chapters button{
  display:flex; align-items:baseline; gap:12px; width:100%; padding:10px 2px;
  border:0; background:none; cursor:pointer; text-align:left;
  font:inherit; font-size:14.5px; line-height:1.6; color:var(--navy);
  transition:color .2s ease;
}
.chapters button:hover{color:var(--gold-text)}
.chapters button[aria-current="true"]{font-weight:700}
.chapters button[aria-current="true"] .ch-t{background:var(--gold);color:var(--navy-deep)}
.ch-t{
  flex:0 0 auto; min-width:46px; text-align:center; font-size:12.5px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; color:var(--navy);
  background:var(--cream-2); border-radius:999px; padding:2px 8px;
  transition:background-color .2s ease;
}

.watch-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:20px}
.watch-actions .btn-line{margin-top:0}
.watch-more{
  font-size:14.5px; font-weight:700; letter-spacing:.04em; color:var(--navy);
  text-decoration:none; border-bottom:1px solid var(--gold-hair); padding-bottom:2px;
}
.watch-more:hover{border-bottom-color:var(--gold)}
.watch-fine{margin-top:12px;font-size:12.5px;line-height:1.8;color:var(--ink-soft)}

@media (min-width:900px){
  .watch{
    grid-template-columns:minmax(0,380px) minmax(0,1fr);
    grid-template-areas:"media head" "media side";
    grid-template-rows:auto 1fr; column-gap:clamp(36px,5vw,64px); row-gap:0;
    max-width:1000px; margin:0 auto;
  }
  .watch-head{align-self:end}
  .watch-side{margin-top:14px}
  .watch-frame{width:100%}
  .watch--h{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
}

/* 逐字稿（<details>，預設收合） */
.transcript{margin-top:18px;border:1px solid var(--border);border-radius:3px;background:var(--white)}
.transcript summary{
  cursor:pointer; padding:14px 18px; font-weight:700; color:var(--navy); list-style:none;
}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary::after{content:"＋";float:right;color:var(--gold-text)}
.transcript[open] summary::after{content:"－"}
.transcript .tx{padding:0 18px 16px;color:var(--ink-soft);font-size:var(--fs-small);line-height:2}
.transcript .tx p{margin-top:10px}

/* 接著看：其他影片（小海報＋標題），連到各自的影片頁 */
.next{margin-top:34px}
.next-k{font-size:11.5px;letter-spacing:.22em;color:var(--ink-soft)}
.next ul{list-style:none;margin:14px 0 0;padding:0}
.next li{margin:0;border-bottom:1px solid var(--border)}
.next a{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; align-items:center;
  padding:12px 0; text-decoration:none; color:var(--navy);
}
.next img{width:64px;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:6px;background:var(--navy-deep)}
.next .n-t{font-weight:700;line-height:1.6}
.next .n-d{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--ink-soft);line-height:1.7}
.next a:hover .n-t{color:var(--gold-text)}