/* ==========================================
   courses.html 專屬樣式
   （page-hero、課程卡片皆為共用元件，寫在 style.css）
   ========================================== */

/* LINE LIFF 模式（html.is-liff，見 style.css）不顯示上方 BANNER，打開就直接是篩選列與課程。
   課程改用「本月課程」樣式的全部課程清單（#course-agenda，site.js liffAgenda），
   卡片（PHP 先輸出的第一頁）、檢視切換與排序一開始就藏起來，避免 JS 接手前閃一下卡片。 */
html.is-liff .courses-hero,
html.is-liff .course-list-grid,
html.is-liff .course-view-switch,
html.is-liff #filter-sort-wrap {
  display: none;
}

/* ==========================================
   課程列表
   ========================================== */
.course-list-section {
  padding: 32px var(--page-gutter) 96px;
}

.course-list-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.course-list-grid {
  margin-bottom: 40px;
}

/* 🔴 卡片的進場動畫交給 data-aos（PHP 首屏與 site.js 重畫都有掛），這裡原本的 course-card-in 關鍵影格已移除（2026-09-18）。
   它用 animation-fill-mode: forwards，跑完後終值 transform: translateY(0) 停在動畫層級，
   權重再高的一般規則都蓋不過——AOS 的淡入被吃掉、style.css 的 hover 上浮也永遠不會動。不要加回來。 */

/* `.course-list-empty` 已於 2026-08-13（H4）搬到 `style.css`：
   它有 4 個消費端（`courses`／`index`／`links`／`news`），
   放在 courses.css 等於只有報名課程頁吃得到樣式。 */

/* .pagination / .pagination-btn 已移至 style.css（本會會務、活動相簿等列表頁共用） */

/* ==========================================
   瀏覽方式切換（卡片／列表／行事曆）
   ------------------------------------------
   客戶 2026-08-12 第 1 項：卡片之外要能用列表快速比較、用行事曆依日期找課。
   ========================================== */
.course-view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.course-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  /* 2.5rem ＝ 45px（預設 18px 根字級），高於 44px 觸控下限 */
  min-height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.course-view-btn svg {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
}

/* hover 沿用全站標準：金色漸層 ＋ 深字（見 style.css 七之二節） */
.course-view-btn:hover,
.course-view-btn:focus-visible {
  background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to));
  border-color: var(--gold-from);
  color: var(--color-on-gold);
}

.course-view-btn.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

/* 🔴 選中的那一顆 hover 時也要變金色。
   理由與 header 的字級切換鈕完全相同：:hover 設的是 background-image、
   .is-active 設的是 background-color，兩者不是同一個屬性、不會互相覆蓋，
   不寫這一條就會變成「金色漸層疊在紫底上、文字卻還是白色」的半生效狀態。
   ⚠️ background-color 要設 transparent，否則紫底仍在漸層下層。 */
.course-view-btn.is-active:hover,
.course-view-btn.is-active:focus-visible {
  background-color: transparent;
  background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to));
  border-color: var(--gold-from);
  color: var(--color-on-gold);
}

/* ==========================================
   列表檢視
   ------------------------------------------
   用 <table> 是因為這是有欄位標題的表格資料，讀螢幕軟體才念得出對應關係。
   手機改成「一課一張卡」：7 欄在手機一定擠爆，用 td 的 data-label
   以 ::before 顯示欄名（與會員名錄、課程表同一套做法，不為手機另寫一份 HTML）。
   ========================================== */
.course-table-wrap {
  margin-bottom: 2.5rem;
}

.course-table {
  width: 100%;
  border-collapse: collapse;
}

/* 表格標題給讀螢幕軟體用，視覺上隱藏。
   ⚠️ 不用 display: none——那樣會被略讀，等於沒寫。 */
.course-table-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 手機：整列變一張卡 */
.course-table thead {
  display: none;
}

.course-table tbody tr {
  display: block;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.course-table td {
  display: flex;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* 欄名的寬度是單一來源：M12 的「時段另起一行並與課名對齊」要用同一個值算左邊距，
   兩處各寫一次 5.5rem 的話改一邊就會對不齊（而且不會報錯，只是看起來歪）。 */
.course-table {
  --course-label-width: 5.5rem;
  --course-label-gap: 0.75rem;
}

.course-table td::before {
  content: attr(data-label);
  flex: 0 0 var(--course-label-width);
  font-weight: 600;
  color: var(--color-muted);
}

/* 🔴 M12（客戶 2026-08-17）：手機卡片模式下「課程名稱」與「上課時段」要分兩行。
   原本兩者都是 `<a>` 與 `<span>` 兩個 inline 元素，在 `display: flex` 的 td 裡
   排在同一列——課名被壓窄折成三行、時段擠在右邊（客戶截圖那個樣子）。

   作法：讓這個 td 可換行，時段 `flex: 1 1 100%` 自己占一列，
   再用欄名寬度 ＋ 間隙做左邊距，讓它與上一行的課名左緣對齊
   （不對齊的話它會貼到欄名底下，看起來像另一個欄位的值）。

   ⚠️ 這與 2026-08-14 的 `32e067c`（課名欄改上下兩排）**不是同一件事**：
      那次改的是 **1024 以上的真表格**（用 `display: block`），
      這次是**手機的卡片模式**（flex 換行）。兩處各自需要一份。
   🔴 **「1024 以上不受影響」這句原本是錯的，2026-08-19 客戶回報後才發現。**
      `flex: 1 1 100%` 在 `table-cell` 裡確實不生效，
      **但 `margin-left` 是一般屬性，照樣生效**——桌機的時段因此被往右推 112.5px，
      與課名對不齊（實測 1280：課名 left 316、時段 left 428）。
      所以下方 1024 以上的區塊要把它歸零。
   🔴 **判準：「這條規則在那個斷點不生效」要逐個屬性判斷。**
      同一條規則裡 flex 屬性失效，不代表 margin／padding 也失效——
      這與五節 2-2 的 `[hidden]` 是同一類錯誤：**以為規則不生效，實際上生效了一半。**

   ⚠️ **上面描述的 flex ＋ margin-left 做法已於 2026-08-19 改成 grid**（見下一段），
      這段留著是為了說明「為什麼會有 --course-label-width 這個變數」與那個判準。 */

/* 🔴 課程名稱這一格在卡片模式改用**兩欄 grid**（PM 2026-08-19 定案，推翻先前兩版做法）。

   要的樣子：
     課程名稱｜114年度營所稅申報解析（三      ← 欄名與課名**同一行起始**
     　　　　　重班）                          ← 長課名在第 2 欄內換行
     　　　　　上午 09:00–12:00 / 下午…        ← 時段左緣自動與課名一致

   走過的兩條死路，不要再回去：
     ① 時段用固定 `margin-left` 縮排 → 短課名對齊、**長課名被 flex 擠到下一行後貼齊最左邊**，
        於是同一畫面上有些列對齊有些沒有（375px 實測 6/10 沒對齊、320px 是 10/10）。
     ② 課名與時段**都**獨佔一行 → 確實都對齊了，但欄名標籤變成自己占一行，
        **PM 看到實際畫面後不接受那個空排**。
   🔴 兩條死路的共同原因是一樣的：**固定 `margin-left` 只能做縮排，
      無法讓「課名與時段」變成同一個區塊**，而 CSS 也無法知道前一個元素被擠到第幾行。

   grid 讓三件事同時成立，而且都不靠計算：
     欄名在第 1 欄、課名與時段都在第 2 欄
     → 同一行起始、長課名在第 2 欄內換行、時段左緣天生與課名一致。

   ⚠️ **只改這一格**，其他 td 維持 `display: flex` 的「欄名｜值」排法。
   ⚠️ `td::before` 的 `flex: 0 0 …`（共用規則）在 grid 下不生效，
      改用 `grid-column: 1` 指定即可，**不必也不要去刪那條共用規則**——其他 td 還要用它。
   🔴 這幾條**只在卡片模式**成立，桌機的還原見下方 1024 區塊。

   🔴 **選擇器要疊寫成 `.course-table .course-td-title`（0,2,0），不能只寫 `.course-td-title`。**
      上面的 `.course-table td { display: flex }` 是 **(0,1,1)**，比單一 class 的 (0,1,0) 高，
      **只寫 `.course-td-title { display: grid }` 完全不會生效**——
      實測 375 量到 `display: flex`、10 列全部沒對齊，畫面上看起來就像「這次改動沒做」。
      ⚠️ 提權重是本專案處理這類衝突的既定作法（見 `CLAUDE.md`：`.btn--nav-cta` 那一則），
         **不要改用 `!important`，也不要靠搬動順序**。 */
.course-table .course-td-title {
  display: grid;
  grid-template-columns: var(--course-label-width) 1fr;
  column-gap: var(--course-label-gap);
  align-items: baseline;
}

.course-table .course-td-title::before {
  grid-column: 1;
}

.course-td-title a,
.course-td-title .course-td-period {
  grid-column: 2;
}

.course-td-title a {
  font-weight: 600;
  color: var(--color-text);
  /* 長課程名稱要能斷行，否則會把卡片撐寬造成橫向溢出 */
  overflow-wrap: anywhere;
  transition: color 0.2s ease-out;
}

.course-td-title a:hover,
.course-td-title a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 費用兩段各自一行（手機），顏色沿用共用元件的定義 */
.course-td-fee {
  flex-wrap: wrap;
}

.course-td-fee .course-price-member,
.course-td-fee .course-price-guest {
  font-weight: 600;
}

/* `.course-row-status` 已於 2026-08-13（H2）刪除：
   狀態標籤改用 `style.css` 的共用元件 `.course-status`（三個消費端共用一份）。
   ⚠️ 被取代卻留著的規則就是隱形分叉，所以連規則一起刪。 */

/* 1024px 起回到真正的表格 */
@media (min-width: 1024px) {
  .course-table thead {
    display: table-header-group;
  }

  .course-table th {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-alt);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-muted);
    text-align: left;
    white-space: nowrap;
  }

  .course-table tbody tr {
    display: table-row;
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }

  .course-table td {
    display: table-cell;
    padding: 0.875rem;
    vertical-align: middle;
  }

  /* 回到表格時欄名由 <th> 提供，td::before 要收起來 */
  .course-table td::before {
    display: none;
  }

  /* 費用兩段在表格模式下上下排（欄位窄，並排會撐寬整欄） */
  .course-td-fee {
    display: table-cell;
  }

  .course-td-fee .course-price-member,
  .course-td-fee .course-price-guest {
    display: block;
    white-space: nowrap;
  }

  .course-td-date {
    white-space: nowrap;
  }

  /* 課程名稱吃掉剩餘寬度，其他欄位維持內容寬。
     🔴 32% 不是 40%（2026-08-14 客戶反映「課名和時段放同一排很擠」）：
        40% 時課名欄吃太寬，右邊每一欄都被壓到折行——分類折成「年度班／別」、
        時數折成「40 小／時」、狀態折成「報名／中」，整個表格高度 1181px。
     ⚠️ **32% 就到底了**：實測再降到 28%／24%，表格總高都是 929px，沒有進一步效果。
        會這樣是因為右側各欄已經不折行了，再讓寬也不會變矮。 */
  .course-td-title {
    width: 32%;
  }

  /* 課名一排、上課時段一排——兩者原本都是 inline，擠在同一排 */
  .course-td-title a,
  .course-td-title .course-td-period {
    display: block;
  }

  /* 🔴 課名這一格在桌機要還原成表格儲存格，不能留著卡片模式的 grid。
     客戶 2026-08-19：「課程名稱下方的時段，應該也要靠左，對齊課程名稱才對，
     不應該前面有空格。」——那個空格就是卡片模式的縮排漏到桌機來。

     🔴 **`display` 必須明確寫回 `table-cell`**：卡片模式那條 `display: grid` 是
        一般宣告，**不會因為換了斷點就自動失效**——這正是本檔連續踩兩次的同一個坑
        （先是 `margin-left` 漏過來，現在換成 `display`）。
        ⚠️ 上面那個 `.course-table td { display: flex }` 也是同理，
           在這個區塊裡由 `td { display: table-cell }` 統一還原（見本區塊開頭）。
     ⚠️ `grid-column` 不必歸零：它在非 grid 容器裡本來就沒有作用。
        🔴 但**不要因此推論「grid 相關的都不必管」**——`display` 是會漏的那一個。
        判準仍然是「逐個屬性判斷哪些會漏過來」。
     🔴 這裡也要疊寫成 `.course-table .course-td-title`（0,2,0）：
        卡片模式那條已經是 (0,2,0)，只寫 `.course-td-title`（0,1,0）壓不過它，
        **桌機就會留著 grid**。⚠️ 同權重時靠的是這個區塊排在後面，不要調換順序。 */
  .course-table .course-td-title {
    display: table-cell;
  }

  /* 狀態標籤是藥丸狀，折兩行特別醜（圓角會被切開）；它夠短，1024 也放得下 */
  .course-table td[data-label="狀態"] {
    white-space: nowrap;
  }
}

@media (min-width: 1280px) {
  /* 🔴 分類與時數只能在 1280 以上 nowrap，不可以併進上面那個 1024 區塊。
     實測 1024px ＋ 最大字級時，這兩欄 nowrap 會讓整頁橫向溢出 23px。
     ⚠️ 1024 是本專案吃過虧的斷點（見 CLAUDE.md 四之二節與六節）——
        媒體查詢的邊界值本身就是最危險的一點，改這裡務必重跑斷點掃描。 */
  .course-table td[data-label="分類"],
  .course-table td[data-label="時數"] {
    white-space: nowrap;
  }
}