/* ============================================================
   The Cyclink — V2 layer
   Extends css/styles.css (design system v1). Tokens only:
   no new colours, no new fonts, no new radii.
   Loaded after styles.css, before css/book.css where relevant.
   ============================================================ */

/* ---------- Nav: seven items have to fit ----------
   English labels are longer than the Chinese ones, so the inline nav only
   appears once there is room for it; 900–979px keeps the burger menu. */
@media (min-width: 900px) and (max-width: 999px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__menu { display: grid; }
}
@media (min-width: 1000px) {
  .nav__links { gap: 1.15rem; }
  .nav__link { font-size: 0.9rem; white-space: nowrap; }
}
@media (min-width: 1180px) {
  .nav__links { gap: 1.5rem; }
  .nav__link { font-size: 0.94rem; }
}

/* ---------- Audience routing (home, right under the hero) ---------- */
.aud-grid { display: grid; gap: 1.1rem; }
.aud-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.6rem 1.5rem 1.4rem;
  text-decoration: none;
  position: relative;
}
.aud-card__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.aud-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 4.4vw, 1.5rem);
  line-height: 1.15;
}
.aud-card__text { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
.aud-card__link {
  margin-top: auto;
  padding-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 800;
  font-size: 0.94rem;
}
.aud-card__link .icon { font-size: 1.4rem; transition: transform 0.3s var(--ease); }
.aud-card:hover .aud-card__link .icon { transform: translateX(4px); }
.aud-card--lead { border: 2.5px solid var(--ink); }
.aud-card--lead .aud-card__num { color: var(--ink); }
@media (min-width: 860px) {
  .aud-grid { grid-template-columns: 1.25fr 1fr 1fr; gap: 1.3rem; align-items: stretch; }
  .aud-card { padding: 1.9rem 1.8rem 1.6rem; }
}

/* ---------- Prices ---------- */
.price {
  margin-top: 1rem;
  padding: 0.95rem 1.1rem 1rem;
  background: var(--yellow-soft);
  border-radius: var(--radius-card-sm);
}
.price__label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.price__list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.18rem; }
.price__list li { font-weight: 800; font-size: 1.02rem; }
.price__list li + li { font-size: 0.96rem; font-weight: 700; color: var(--ink-soft); }
.price__note { margin: 0.45rem 0 0; font-size: 0.88rem; color: var(--ink-soft); font-weight: 600; }
.price--ask .price__list li { font-size: 0.98rem; font-weight: 800; }

/* ---------- Finder: alternatives + venue note ---------- */
.result-alts-label {
  margin-top: 1.4rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.result-alts { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.result-alts a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  background: var(--cream);
  border: 1.5px solid rgba(43, 33, 24, 0.14);
  border-radius: var(--radius-card-sm);
  font-weight: 800;
  text-decoration: none;
  font-size: 0.96rem;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.result-alts a:hover { border-color: var(--ink); transform: translateY(-2px); }
/* 第 27 輪：山地單車場地提示（.result-venue-note，只有 find-your-class.html 用）。
   客戶要求唔可以只當成頁尾細小免責文字，所以做成跟 .note-strip 同一款奶白提示塊
   （同一組 token：--cream、1.5px 淡邊、--radius-card-sm），位置就喺結果卡課程連結
   下面、查詢按鈕之前；文案由 js/finder.js 按地區揀 i18n key。
   舊值（margin-top .9rem／font .9rem／font-weight 700／冇底色）已由本輪取代。 */
.result-venue-note {
  margin-top: 1.1rem;
  padding: 0.95rem 1.1rem;
  background: var(--cream);
  border: 1.5px solid rgba(43, 33, 24, 0.12);
  border-radius: var(--radius-card-sm);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
}
.result-venue-note a { color: var(--ink); border-bottom: 2px solid var(--yellow-deep); }
@media (min-width: 720px) {
  .result-alts { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Adults / groups: tile grid ---------- */
.tile-grid { display: grid; gap: 1rem; }
.tile { padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tile__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.tile__text { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }
.tile__cta { margin-top: auto; padding-top: 0.9rem; }
.tile__cta .btn { padding: 0.62rem 1rem; font-size: 0.9rem; }
@media (min-width: 760px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
@media (min-width: 1080px) {
  .tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Sports platform cards ---------- */
.sport-grid { display: grid; gap: 1rem; }
.sport-card { padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.sport-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.sport-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
.sport-card__text { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }
.sport-card__cta { margin-top: auto; padding-top: 0.9rem; }
.sport-card__cta .btn { padding: 0.62rem 1rem; font-size: 0.9rem; }
.sport-card--soon { background: transparent; border: 2px dashed rgba(43, 33, 24, 0.28); box-shadow: none; }
.badge {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.24rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--ink);
  white-space: nowrap;
}
.badge--soon { background: transparent; border: 1.5px solid rgba(43, 33, 24, 0.3); color: var(--ink-soft); }
@media (min-width: 760px) { .sport-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
@media (min-width: 1080px) {
  .sport-grid { grid-template-columns: repeat(3, 1fr); }
  .sport-card--lead { grid-column: span 3; }
  .sport-card--lead .sport-card__title { font-size: 1.7rem; }
}

/* ---------- Contact rows (icons instead of emoji) ---------- */
.contact-card__row span { display: inline-flex; align-items: center; gap: 0.45rem; }
.contact-card__row .icon,
.contact-card__row .wa-icon { flex: 0 0 auto; font-size: 1.05rem; }

/* ---------- Inline note strip, reused on new pages ---------- */
.note-strip {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1.4rem;
  padding: 0.95rem 1.1rem;
  background: var(--cream);
  border: 1.5px solid rgba(43, 33, 24, 0.12);
  border-radius: var(--radius-card-sm);
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 0.94rem;
  max-width: 62ch;
}
.note-strip .icon { flex: 0 0 auto; margin-top: 0.15rem; color: var(--sage); }

/* ---------- Section actions row ---------- */
.section-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

/* ---------- Map teaser card (locations page + home) ---------- */
.map-teaser {
  display: grid;
  gap: 0.6rem;
  padding: 1.7rem 1.6rem;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-card);
  max-width: 720px;
}
.map-teaser__title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
.map-teaser__text { color: var(--ink-soft); margin: 0; }

/* the finder hides progress dots in the 3-step branch */
[hidden] { display: none !important; }

/* the wordmark never wraps */
.logo__word { white-space: nowrap; }

/* ---------- FAQ page：五個分類（第 20 輪結構；第 21 輪只調 spacing 同標題層次）----------
   第 21 輪客戶指定：只改完整 FAQ 頁嘅間距同分類小標題層次；唔改文案、唔改價錢、唔改其他頁。
   · 分類標題層次：字重 900（跟 .section-title 同一字重；Fredoka 只載入 500/600，唔夠重，所以標題改用
     系統既有 body 字體），字號明顯大於問題文字（問題維持 .acc__head 原本 1rem／1.05rem 不變）；
     品牌黃編號標記 01–05 由 CSS counter 產生（HTML 冇加字，所以中英版都不用改文案）。
   · 間距：標題上方 > 標題下方；分類之間 > 問題之間（問題之間只靠 .acc 分隔線 ＋ 1.15rem padding）。
   · 頁頂：介紹文字同第一個分類之間收窄；標題區同列表共用同一 820px 內容欄，左邊界完全對齊。
   · 頁尾：列表之後留白由 112px 收到 64px（手機按比例縮小）；.acc__head 觸控範圍完全不變。 */
.faq-page { counter-reset: faqcat; }
.page-hero + .faq-page { padding-top: 26px; padding-bottom: 44px; }
/* 同一個內容欄：hero 內文（標題／介紹）同 FAQ 列表左右邊界一次對齊 */
.page-hero:has(+ .faq-page) { padding-bottom: 0; }
.page-hero:has(+ .faq-page) > .container { max-width: 820px; margin-inline: auto; }
.page-hero:has(+ .faq-page) .page-hero__title { max-width: 26ch; text-wrap: balance; }
.page-hero:has(+ .faq-page) .page-hero__sub { max-width: 46ch; text-wrap: pretty; }

.faq-cat { counter-increment: faqcat; }
.faq-cat + .faq-cat { margin-top: 3.1rem; }
.faq-cat__title {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(1.36rem, 4.6vw, 1.58rem);
  line-height: 1.24;
  letter-spacing: 0.005em;
  color: var(--ink);
}
/* 01–05：品牌黃膠囊，只作視覺標記，唔係可點擊元素（唔影響觸控範圍） */
.faq-cat__title::before {
  content: counter(faqcat, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3em;
  margin-right: 0.55rem;
  padding: 0.36em 0.5em;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  vertical-align: middle;
}
.faq-cat__list { margin-top: 0.6rem; }
/* 展開後嘅呼吸位：答案同問題之間、答案同下一條問題之間 */
.faq-page .acc__body-inner > .acc__body-text:first-child { padding-top: 0.15rem; }
.faq-page .acc__body-text { padding-bottom: 1.35rem; }
/* 答案有多段時：前面嘅段落收窄下內距，最後一段保留上面嘅呼吸位 */
.faq-cat .acc__body-text:not(:last-child) { padding-bottom: 0.5rem; }
.faq-cat .acc__body .course__list { padding-inline: 0.2rem; margin-bottom: 0.85rem; }
.faq-cat .acc__body .course__list:last-child { margin-bottom: 0; padding-bottom: 1.35rem; }
@media (min-width: 900px) {
  .page-hero + .faq-page { padding-top: 40px; padding-bottom: 64px; }
  .faq-cat + .faq-cat { margin-top: 4rem; }
  .faq-cat__list { margin-top: 0.75rem; }
}

/* ---------- Course overview（「所有課程」總覽：分類膠囊 ＋ 課程卡 ＋ 評估班入口）----------
   第 19 輪（客戶 2026-10-11 指示）：喺同一頁篩選，唔重新載入、唔加日期／地區／價錢／年齡。
   只用現有 tokens（無新顏色、無新字體、無新圓角）；卡片跟課程列表頁一致：
   相片 16/7（窄畫面 16/9）＋ 類別小標 ＋ 課程名 ＋ 一句介紹 ＋ 底部詳情入口，唔撐大固定高度。 */
.ov-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.9rem; }
/* 未選中：奶白底 ＋ 深啡幼邊框；選中：深啡底 ＋ 奶白字（覆蓋 .chip 本身嘅黃色 is-active）。
   focus-visible 保持清楚，唔加入複雜動畫（hover 只轉色，唔再浮起）。 */
.ov-filters .chip {
  border-width: 1px;
  background: var(--cream);
  color: var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.ov-filters .chip:hover { transform: none; background: var(--yellow-soft); }
.ov-filters .chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.ov-filters .chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.ov-grid { display: grid; gap: 1rem; }
.ov-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem 1.4rem 1.3rem;
  color: var(--ink);
  text-decoration: none;
}
a.ov-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.ov-card__media {
  width: 100%;
  margin: 0 0 0.95rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--yellow-soft);
}
.ov-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ov-card__eyebrow { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.01em; color: var(--ink); }
.ov-card__title { margin-top: 0.3rem; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.25; }
.ov-card__text { margin-top: 0.5rem; font-weight: 400; font-size: 0.95rem; color: var(--ink-soft); }
.ov-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 1.1rem;
  padding-bottom: 1px;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ink);
  border-bottom: 2px solid var(--yellow-deep);
}
.ov-card__link .icon { width: 1em; height: 1em; }

/* 評估班：獨立入口，唔屬於任何篩選類別，亦唔會因為篩選而消失 */
.ov-assess {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  margin-top: 2rem;
  padding: 1.5rem 1.6rem;
  background: var(--yellow-soft);
  border-radius: var(--radius-card);
}
.ov-assess__title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.ov-assess__text { margin-top: 0.3rem; max-width: 46ch; font-size: 0.95rem; color: var(--ink-soft); }
.ov-assess__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 1px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--yellow-deep);
}
.ov-assess__link .icon { width: 1em; height: 1em; }

/* 手機一欄 → 較窄畫面兩欄 → 桌面三欄（跟 .tile-grid／.sport-grid 同一節奏） */
@media (min-width: 760px) {
  .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .ov-card__media { aspect-ratio: 16 / 7; }
}
@media (min-width: 1080px) {
  .ov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
  .ov-assess { padding: 1.7rem 1.8rem; }
}

/* ========== 第 27 輪：課程配對頁（find-your-class.html）局部調整 ==========
   只改呢一頁：選擇器全部係本頁獨有嘅 hook（.page-hero--finder、
   .finder__options--multi、.cta-route--arc）或者本頁專用嘅結果卡元件
   （.result-send-note、.result-venue-note）。冇改任何共用 token、
   冇改字體／配色／header／footer，其餘頁面零影響。
   對應客戶要求：① 頁頂 spacing、③ 目標改多選、④ 山地單車提示、
   ⑤ 傳送說明、⑥ 黃色 CTA 上方弧線同首頁一致。 */

/* ① 頁頂 spacing
   問題：.eyebrow 本身冇 margin-bottom（styles.css 只在 .section-head 內加 1rem），
         而 h1/h2 又係 margin:0，所以「課程配對」膠囊同大標題之間係 0px＝貼住；
         另一邊，.page-hero 下緣 8px ＋ .page-hero + .section 上緣 48px
         （≥900px：12px＋64px）＝76px，介紹同進度列之間又留得太大。
   處理：只在本頁 hook 上用正常 margin／padding（冇加任何 spacer 元素）——
         · 膠囊 → 大標題：第 29 輪起改由共用 .eyebrow 提供（桌面 20px／手機 15px），
           本頁唔再自己設（原本 1.15rem）
         · 介紹 → 進度列：36px（≥900px 44px）——比原本收窄，但仍然清楚分開
           兩段，令上、下兩段距離相稱，頁頂同問卷欄位自然銜接。 */
.page-hero--finder { padding-bottom: 0; }
.page-hero--finder + .section { padding-top: 36px; }
@media (min-width: 900px) {
  .page-hero--finder + .section { padding-top: 44px; }
}

/* ③ 目標步驟改多選：方形勾選框（沿用網站 icon sprite 嘅 #icon-check），
   唔再用代表單選嘅圓形 .radio。只套用 .finder__options--multi（只有本頁目標步驟有），
   所以測驗頁（index.html／quiz.html 嘅 .finder__option .radio）完全冇改。
   未選＝空框（勾號 color:transparent，框照舊，唔會令版面跳動）；
   選中＝沿用 .finder__option.is-selected 原有嘅深啡邊＋黃底，只補勾號同框填色。 */
.finder__options--multi .finder__option .checkbox {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2.5px solid rgba(43, 33, 24, 0.3);
  display: grid;
  place-items: center;
  color: transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.finder__options--multi .finder__option .checkbox .icon { width: 14px; height: 14px; }
.finder__options--multi .finder__option.is-selected .checkbox {
  border-color: var(--ink);
  background: var(--yellow);
  color: var(--ink);
}

/* ④ 山地單車場地提示：樣式見本檔上面「Finder: alternatives + venue note」一節
   （第 27 輪已改為奶白提示塊），文案由 js/finder.js 按地區揀 i18n key。 */

/* ⑤ 傳送說明：結果卡「把回答傳到 WhatsApp」按鈕正上方一段字
   （回答唔會自動送給我們；用戶自己按發送，我們才會收到）。
   排版跟 .result-note 一致（info 圖示＋深啡細字），冇新增裝飾。 */
.result-send-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.5;
}
.result-send-note .icon { flex: 0 0 auto; margin-top: 0.15rem; color: var(--sage); }

/* ⑥ 最後黃色 CTA 上方嘅弧線＝首頁同一條：
   viewBox／path／stroke-width 全部照 index.html 第 15 輪（718.0×151.4、stroke 17）。
   第 29 輪：呢條弧線已成為全站共用實作——顏色、寬度、比例同「與標題嘅距離」
   一律由 css/styles.css 嘅 .cta-route 提供，所有頁（含場地頁以外嘅全部 CTA）
   都係同一個來源，所以本頁唔再需要 .cta-route--arc 修飾 class 同呢條局部規則。 */

/* ============================================================================
   第 28 輪：只改「所有課程」頁（courses.html）—— 客戶三項局部指示
   ① 黃色小標膠囊同下面大標題太貼（頁頂「所有課程」＋次段「更多單車體驗」）
   ② 大標題孤字換行（「…值得學習的小事。」被拆成「事。」）
   ③ 上方總覽卡嘅「查看課程詳情」＝展開詳情（下面四格已合併入去）
   全部只 hook 本頁專用嘅 class（.page-hero--courses／.courses-experience／
   #overview 內嘅 .ov-*），冇用全域 selector，其他頁唔受影響。
   ============================================================================ */

/* ① 黃色膠囊 → 大標題：原有 margin 係 0（頁頂）／16px（次段），太貼。
   第 29 輪：全站（包括本頁）已改由共用 .eyebrow 統一提供（桌面 1.25rem＝20px、
   手機 ≤600px 0.9375rem＝15px），所以本頁呢兩條局部規則連同手機覆蓋已移除，
   免得以後改共用值又被本頁蓋返。無新增 spacer 元素，亦唔用固定高度。 */

/* ② 大標題斷行：「在騎行以外，也有值得學習的小事。」
   原本 .section-head max-width 620px，放唔落一行（約 750px），
   換行位又落喺「小事」中間 → 第二行只剩「事。」。
   放寬本段容器（桌面足夠一行），並用 word-break: keep-all 令中文唔會在
   「小事」中間斷開：要換行就喺逗號「，」之後等自然位置（跟首頁
   #kids .section-title 同一做法）；text-wrap: pretty 避免最後一行剩孤立標點。
   冇加大量空格、冇硬縮小字體、冇固定高度；手機照樣自然換行（唔 nowrap）。 */
.courses-experience .section-head { max-width: 780px; }
.courses-experience .section-title { word-break: keep-all; text-wrap: pretty; }

/* ③ 上方總覽卡嘅詳情展開（同站內 accordion 同一套狀態：目標加 .is-open）。
   卡片本身維持簡潔（相片／類別小標／課程名／一句介紹／展開掣），
   收費／適合對象／練習重點／上課安排／場地限制全部收喺展開內容。 */
#overview .ov-card__toggle {
  /* button 版嘅「查看課程詳情」：外觀跟原本 .ov-card__link 連結一致
     （黃色底線、深啡粗字），只清走 button 預設背景／邊框／內距 */
  background: none;
  border: 0;
  border-bottom: 2px solid var(--yellow-deep);
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#overview .ov-card__toggle .icon { width: 1em; height: 1em; transition: transform 0.35s var(--ease); }
#overview .ov-card.is-open .ov-card__toggle .icon { transform: rotate(180deg); }
#overview .ov-card__detail {
  align-self: stretch;
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
#overview .ov-card.is-open .ov-card__detail { grid-template-rows: 1fr; }
#overview .ov-card__detail-inner { overflow: hidden; }
#overview .ov-card__detail-body { padding-top: 1.1rem; }
/* 展開內容第一句＝原本四格嘅課程介紹（保留下來，唔會因為合併而消失） */
.ov-card__detail-lead { margin-top: 0.7rem; font-weight: 600; color: var(--ink-soft); font-size: 0.98rem; }
.ov-card__detail-lead + .price { margin-top: 1rem; }

/* 評估班：黃底提示塊下面嘅簡潔詳情區（同一個 accordion，唔另建大型卡）。
   .ov-assess 本身嘅 margin-top: 2rem 照舊，只係包一層容器放 id 同詳情。 */
#overview .ov-assess__toggle {
  background: none;
  border: 0;
  border-bottom: 2px solid var(--yellow-deep);
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ov-assess__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.ov-assess-block.is-open .ov-assess__detail { grid-template-rows: 1fr; }
.ov-assess__detail-inner { overflow: hidden; }
.ov-assess__detail-body {
  margin-top: 1.4rem;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--cream);
  border: 1.5px solid rgba(43, 33, 24, 0.07);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}

/* 深層連結（#start／#basic／#assessment／#mtb）：目標卡頂部要避開固定導覽列
   （同指定場地提示塊一樣，用正常 scroll-margin，唔加 spacer 元素）。 */
#overview #start,
#overview #basic,
#overview #mtb,
#overview #assessment { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ④ 頁尾黃色 CTA 嘅斷句位置／孤字（客戶第 4 項「標題孤字」嘅同一類問題，
   本頁 CTA 都出現；做法完全照首頁第 26 輪同一組規則，只套用本頁）：
   · 標題「還在想，哪個課程適合你？」390px 原本斷成「還在想，哪個課程適合」＋「你？」（孤字＋問號）
   · 介紹「告訴我們學員的年齡與騎行經驗，一起找到合適的學習起點。」
     受 styles.css 嘅 .cta-band__sub max-width:42ch（1440px 實測 403px）限制，
     26 字嘅句子要換行，第二行只剩「點。」兩個字。
   處理：① 介紹文字容器放寬到 36em（576px ≥ 整句單行 416px）→ 桌面一行放齊；
        ② 標題同介紹都加 word-break: keep-all → 中文只斷在逗號等語意位置
           （拉丁文字唔受影響）。手機 390px 實測：標題「還在想，」＋「哪個課程適合你？」、
           介紹「…騎行經驗，」＋「一起找到合適的學習起點。」，冇孤字／孤標點。
   範圍：只揀 .page-hero--courses 之後嘅 .cta-band（本頁獨有 hook，兩者同為 <main> 直接子元素），
   共用嘅 styles.css 同其他頁（含 find-your-class.html 嘅 CTA）完全冇改；
   冇改字級／行高／字重／文案（文案仍由 js/i18n.js 提供），冇 nowrap、冇硬換行。 */
.page-hero--courses ~ .cta-band .cta-band__sub { max-width: 36em; }
.page-hero--courses ~ .cta-band .cta-band__title,
.page-hero--courses ~ .cta-band .cta-band__sub { word-break: keep-all; }

/* ============================================================================
   第 30 輪：課程獨立詳情頁（示範頁＝course-0-1-basic.html）
   客戶指示：先做一個共用課程版式 ＋ 第一個示範頁，確認後才套用到其餘課程。
   · 全部選擇器只 hook 本頁獨有嘅 class（.page-hero--course／.course-page*／
     .course-facts*），冇用全域 selector，其他頁（含 courses.html）零改動。
   · 沿用現有 token 與元件：.eyebrow（膠囊 → 大標題＝共用 20px／15px）、
     .course__list（勾號清單）、.price（收費色塊）、.how-steps／.how-step（三步）、
     .acc（問答）、.cta-band ＋ .cta-route（首頁同款曲線）。
   · 冇新顏色、冇新字體、冇新圓角、冇新增套件；版面靠留白分段，唔疊色塊。
   ============================================================================ */

/* 頁頂：hero 之後嘅內容（跟課程配對頁同一節奏；.page-hero 本身 padding 不變） */
.page-hero--course { padding-bottom: 0; }
.page-hero--course + .section { padding-top: 36px; }
@media (min-width: 900px) {
  .page-hero--course + .section { padding-top: 44px; }
}

/* 課程主照片：跟站內相片一致嘅 12px 圓角，冇用佔位圖 */
.course-page__media {
  margin: 0 0 2.4rem;
  overflow: hidden;
  border-radius: 12px;
  background: var(--yellow-soft);
}
.course-page__media img { display: block; width: 100%; height: auto; }

/* 段落節奏：靠留白分段（唔加色塊、唔加分隔線） */
.course-page__block + .course-page__block { margin-top: 2.6rem; }
.course-page__h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 4.4vw, 1.8rem);
  line-height: 1.2;
}
.course-page__text { margin-top: 0.8rem; max-width: 62ch; color: var(--ink-soft); }
.course-page__block .course__list { margin-top: 0.9rem; }
.course-page__block .course__list li { font-size: 1rem; }
.course-page__block .how-steps { margin-top: 1.4rem; }
.course-page__block .price { margin-top: 1.1rem; }

/* 時長／器材／地點：列出式資料表（視覺跟場地頁 .facts，但唔需要載入 book.css） */
.course-facts { margin-top: 1.2rem; display: grid; }
.course-facts__row {
  display: grid;
  grid-template-columns: 5.4em 1fr;
  gap: 0.6rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(43, 33, 24, 0.10);
  font-size: 0.97rem;
}
.course-facts__row:first-child { border-top: 1px solid rgba(43, 33, 24, 0.10); }
.course-facts__k { font-weight: 800; }
.course-facts__v { color: var(--ink-soft); font-weight: 600; }
.course-facts__v a { color: var(--ink); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--yellow-deep); white-space: nowrap; }
.course-facts__v a:hover { color: var(--ink-soft); }

/* 常見問題：.acc 本身已有全站樣式，呢度只補答案內嘅段落節奏同連結 */
.course-page__faq { margin-top: 0.6rem; }
.course-page__faq .acc__body-text:not(:last-child) { padding-bottom: 0.5rem; }
.course-page__faq .acc__body .course__list { padding-inline: 0.2rem; margin-bottom: 0.85rem; }
.course-page__faq .acc__body .course__list:last-child { margin-bottom: 0; }
.course-page__faq .acc__body-text a,
.course-page__faq .acc__body .course__list a { color: var(--ink); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--yellow-deep); }

/* 返回所有課程：跟站內「查看課程詳情」同一種連結處理（黃色底線粗字） */
.course-page__back-wrap { margin-top: 2.4rem; }
.course-page__back { font-weight: 800; color: var(--ink); text-decoration: none; padding-bottom: 1px; border-bottom: 2px solid var(--yellow-deep); }
.course-page__back:hover { color: var(--ink-soft); }

/* 頁尾 CTA 斷句：跟 courses.html 第 28 輪同一組處理，只換成本頁 hook */
.page-hero--course ~ .cta-band .cta-band__sub { max-width: 36em; }
.page-hero--course ~ .cta-band .cta-band__title,
.page-hero--course ~ .cta-band .cta-band__sub { word-break: keep-all; }

@media (min-width: 900px) {
  .course-facts__row { grid-template-columns: 6.4em 1fr; font-size: 1rem; }
}