/* =========================================
   tablet.css — 平板模式（768px ~ 1024px）
   必須最後載入，覆寫各區塊原本 992 / 768 的斷點設定
   ========================================= */
@media (min-width:768px) and (max-width:1024px){

  /* 首屏平板樣式寫在 hero.css（課程大綱頁也共用） */

  /* ---------- 各區塊左右留 30px（首屏除外） ---------- */
  .pain-points,
  .course-modules,
  .core-capabilities,
  .student-outcomes,
  .scenarios-section,
  .consultation-section{padding-left:30px;padding-right:30px}

  /* ---------- 區塊一：痛點與解決方案（與電腦版相同：三欄高低錯落） ---------- */
  .card-grid{grid-template-columns:repeat(3,1fr);gap:1rem}
  .card--1{margin-top:0}.card--2{margin-top:56px}.card--3{margin-top:12px}
  .card__bar{height:38px}
  .card__body{padding:2rem 1.25rem 2.25rem}
  .card__question{white-space:normal;font-size:18px}
  .card__answer{font-size:16px}

  /* ---------- 區塊三：核心能力（與電腦版相同：左卡片 / 中圖 / 右卡片） ---------- */
  .capabilities-grid{grid-template-columns:1.2fr 1fr 1.2fr;gap:16px}
  .cards-column{gap:16px}
  .center-image-wrapper{grid-column:auto;order:0;margin-bottom:0;aspect-ratio:auto}
  .cap-card{padding:20px 14px}
  .cap-card .card-title{font-size:16px;white-space:normal}
  .card-list li{font-size:14px;white-space:normal}
}