/* 針灸學 · 課堂目錄「每行一個 block、topics 橫向排列」（2026-10-08 v5）
   沿革：
     v1  單欄直落 —— 十四經 11 條令整頁好幾屏。
     v2  CSS multi-column（column-count:3）—— 但 multi-column 係由上而下填滿每欄，
         閱讀順序變亂，Alvin 指正為「打横」。
     v3  grid 逐行格狀 —— 但 Alvin 唔喜歡卡與卡之間嘅高低差。
     v4  每組 = 一個全寬 block（一行一個）；block 內標題在左、topics 由左至右橫排。
     v5（現行，2026-10-08）修正「唔整齊」：舊版條目闊度跟文字長短，換行後第二行
         同第一行嘅欄位對唔齊，行首亦多咗一條孤立分隔線。現改為每個條目固定最小
         闊度、去除逐條分隔線 → 欄位左右對齊，換行都齊輯輯。
   只作用於 zhenjiu（scoped），唔影響其他五科。 */

.subject-view[data-subject="zhenjiu"] .lesson-list {
  /* ⚠️ 共用 main.css 對 .lesson-list 設咗 display:flex + gap；
     呢度改為單欄 flex column（每組一行）。 */
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1180px;
}

.subject-view[data-subject="zhenjiu"] .lesson-group {
  /* 一行一個 block：標題在左（固定欄），topics 在右（自適應） */
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  box-shadow: 0 1px 3px rgba(60, 50, 30, .05);
}

.subject-view[data-subject="zhenjiu"] .lesson-group-title {
  align-self: start;
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: 700;
  color: #2E6F6B;
  padding: 5px 0 4px;
  border-bottom: 2px solid #2E6F6B;
  white-space: nowrap;
}

/* topics 橫向排列、自動換行；每個條目固定最小闊度 → 換行後欄位左右對齊 */
.subject-view[data-subject="zhenjiu"] .lesson-group-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
}

.subject-view[data-subject="zhenjiu"] .lesson-group-body .lesson-row {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-width: 124px;          /* 固定欄距：短條目都佔同一闊度，換行都對齊 */
  padding: 5px 18px 5px 0;
  border-bottom: none;       /* 取消直排時嘅底線 */
}

.subject-view[data-subject="zhenjiu"] .lesson-group-body .lesson-row .title {
  font-size: 15.5px;
  line-height: 1.5;
}

/* 窄屏：標題移到上面，topics 仍然橫向 wrap */
@media (max-width: 720px) {
  .subject-view[data-subject="zhenjiu"] .lesson-group {
    grid-template-columns: 1fr;
    gap: 2px 0;
    padding: 14px 16px;
  }
  .subject-view[data-subject="zhenjiu"] .lesson-group-title {
    justify-self: start;
    margin-bottom: 6px;
  }
  .subject-view[data-subject="zhenjiu"] .lesson-group-body .lesson-row {
    min-width: 108px;
    padding: 5px 14px 5px 0;
  }
}

/* 極窄屏：唔再鎖欄距，跟文字自然換行 */
@media (max-width: 420px) {
  .subject-view[data-subject="zhenjiu"] .lesson-group-body .lesson-row { min-width: 0; }
  .subject-view[data-subject="zhenjiu"] .lesson-group-body .lesson-row .title { font-size: 14.5px; }
}