a {
  text-decoration: none;
  color: black;
}
/* ===== 課程區塊標題（置中＋水平線） ===== */
.course-status {
  position: relative;
  text-align: center;
  margin: 40px auto 24px;
  width: min(90%, 1600px);
}
.course-status::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  height: 2px;
  background-color: #cfd6c7; /* 淺灰綠分隔線 */
  z-index: 0;
}
.course-status p {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 6px 16px;
  font-size: 28px;
  font-weight: 700;
  color: #2f3a26;
  background: #fff;
  border-radius: 999px;
  z-index: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

/* ===== 可調參數 ===== */
:root {
  --table-max-w: 1600px;
  --img-text-gap: 5px;
  --title-size: 27px;
  --text-size: 15px;
  --sep-gap: 60px; /* 每筆課程之間的距離 */
}

/* ===== 外層分區 ===== */
.course-section {
  width: min(90%, var(--table-max-w));
  margin: 36px auto;
  padding: 28px 24px 32px;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.course-section.opening {
  background: linear-gradient(180deg, #f5fbf2 0%, #f7faf4 100%);
}
.course-section.finished {
  background: linear-gradient(180deg, #fafafa 0%, #f7f7f7 100%);
}

/* ===== 課程內容：表格版面 ===== */
.class-information {
  width:100%;
  margin: 0 auto;
  border-collapse: separate; /* 改為分離模式才能使用 row-gap */
  border-spacing: 0  var(--sep-gap); /* 自動在每筆課程間留距 */
}


.class-information td {
  width: 25%;
  padding: 16px 0;
  vertical-align: middle;
}

/* 奇數欄（圖片） */
.class-information td:nth-child(odd) {
  text-align: right;
  padding-right: var(--img-text-gap);
}
/* 偶數欄（文字） */
.class-information td:nth-child(even) {
  text-align: left;
  padding-left: var(--img-text-gap);
}

.class-information img {
  display: inline-block;
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 8px;
}

/* 文字樣式與間距 */
.class-information .class-information-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #bbb;
  width: 83%;
  font-size: var(--title-size);
  font-weight: 500;
}
.class-information .class-information-content {
  font-size: var(--text-size);
  font-weight: 400;
}
.class-information p {
  margin: 4px 0;
}

/* 手機版調整 */
@media (max-width: 1040px) {
  .course-section {
    padding: 20px 14px 26px;
  }
  .course-status {
    margin: 28px auto 18px;
  }
  .course-status::before {
    left: 4%;
    right: 4%;
  }
  .course-status p {
    font-size: 22px;
    font-weight: 500;
    padding: 6px 12px;
  }

  .class-information td {
    display: block;
    width: 100%;
  }
  .class-information td:nth-child(odd) {
    text-align: center;
    padding-right: 0;
    margin-bottom: 12px;
  }
  .class-information td:nth-child(even) {
    padding-left: 0;
  }
}

/* ===== 強制優化：重新分配圖文比例 ===== */
/* 當視窗寬度介於 1041px (手機版之上) 到 1550px (大螢幕之下) 時觸發 */
@media (min-width: 1041px) and (max-width: 1550px) {
  
  /* 1. 調整全域變數：縮小字體與間距，爭取空間 */
  :root {
    --text-size: 14px;  /* 字體稍微改小一點點 */
    --img-text-gap: 15px; /* 讓圖片跟文字靠緊一點，減少浪費空間 */
  }

  /* 2. 關鍵修改：改變欄位寬度比例 */
  /* 原本是 25% / 25% / 25% / 25% */
  /* 現在改成 18% / 32% / 18% / 32% => 讓文字區塊變寬很多！ */

  /* 圖片欄位 (奇數) */
  .class-information td:nth-child(odd) {
    width: 18%;  /* 圖片縮小，把空間讓出來 */
    padding-right: 5px; /* 減少圖片右邊的留白 */
  }

  /* 文字欄位 (偶數) */
  .class-information td:nth-child(even) {
    width: 32%;  /* 文字變寬，這樣就不會斷行了 */
    padding-left: 5px; /* 減少文字左邊的留白 */
  }

  /* 3. 確保圖片自適應縮放 */
  .class-information img {
    width: 100%;
    height: auto;
    object-fit: cover; /* 保持圖片比例 */
  }

  /* 4. 針對文字內容的微調 */
  /* 讓標題與內容稍微緊湊一點，避免標題被擠壓 */
  .class-information .class-information-title {
    font-size: 20px; /* 標題字體縮小 */
    margin-bottom: 8px;
    white-space: nowrap; /* 強制標題不換行 */
    overflow: hidden;    /* 超出部分隱藏 */
    text-overflow: ellipsis; /* 超出顯示... */
  }
}