/* 2026-11-08 課程卡片統一（畫布「課程卡片統一」「電腦版｜課程列表統一」）
   /course、/exam、/french-for-kids 共用 .nv26-cc（views/product/nv26_course_card.php）；
   /online-course 手機版精簡卡片 .nv26-oc、電腦版卡片 .nv26-oc-d（沿用原本的格線區域名稱 fig、meta、title、desc、sel、btns）。 */

.nv26-cc,
.root ul.onlineList li.nv26-oc,
.root ul.onlineList li.nv26-oc-d {
  --nv26-rust: #aa4c25;
  --nv26-cream: #f3e8d7;
  --nv26-navy: #143d4f;
  --nv26-mustard: #d58e2b;
  --nv26-gray: #4a5a63;
}

/* ---------- 共用：按鈕、類別標籤 ---------- */
.nv26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border: 2px solid #143d4f;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.nv26-btn--solid,
.nv26-btn--solid:visited { background: #143d4f; color: #f3e8d7; }
.nv26-btn--solid:hover,
.nv26-btn--solid:focus-visible { background: #0d2a37; border-color: #0d2a37; color: #f3e8d7; text-decoration: none; }
.nv26-btn--line,
.nv26-btn--line:visited { background: #fff; color: #143d4f; }
.nv26-btn--line:hover,
.nv26-btn--line:focus-visible { background: #f3e8d7; color: #143d4f; text-decoration: none; }
.nv26-btn:focus-visible { outline: 3px solid #d58e2b; outline-offset: 2px; }

.nv26-cc__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3e8d7;
  color: #d58e2b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ---------- 課程卡片（手機版與 /french-for-kids） ---------- */
.nv26-cc {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  grid-template-areas:
    "img  meta"
    "main main"
    "list list"
    "intro intro";
  column-gap: 14px;
  row-gap: 14px;
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  color: #143d4f;
  text-align: left;
  box-sizing: border-box;
}

.nv26-cc__img {
  grid-area: img;
  position: relative;
  display: block;
  width: 176px;
  height: 132px;
  overflow: hidden;
  border-radius: 12px;
  background: #f3e8d7 center / cover no-repeat;
}

.nv26-cc__level {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  color: #143d4f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.nv26-cc__meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding-top: 2px;
}

.nv26-cc__loc,
.nv26-cc__date,
.nv26-cc__time,
.nv26-cc__sloc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #143d4f;
  white-space: nowrap;
}

.nv26-cc__loc { font-size: 14px; font-weight: 500; white-space: normal; }
.nv26-cc__icon { flex-shrink: 0; }
.nv26-cc__hours { color: #4a5a63; font-size: 13px; }

.nv26-cc__main { grid-area: main; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.nv26-cc .nv26-cc__title {
  margin: 0;
  padding: 0;
  color: #aa4c25;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.nv26-cc .nv26-cc__title a,
.nv26-cc .nv26-cc__title a:visited { color: inherit; text-decoration: none; }
.nv26-cc .nv26-cc__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.nv26-cc__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #4a5a63;
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
}

.nv26-cc__desc * { display: inline; margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.nv26-cc__desc br { display: none; }
.nv26-cc__note { margin: 0; color: #aa4c25; font-size: 13px; font-weight: 700; }

.nv26-cc__list { grid-area: list; display: flex; flex-direction: column; gap: 10px; }

.nv26-cc__session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "when when"
    "price book";
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f3e8d7;
}

.nv26-cc__session[hidden] { display: none; }

.nv26-cc__when {
  grid-area: when;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  margin: 0;
  font-size: 14px;
}

.nv26-cc__date { font-weight: 700; }
.nv26-cc__time { font-weight: 500; }
.nv26-cc__sloc { display: none; font-weight: 500; }

.nv26-cc__price { grid-area: price; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin: 0; }
.nv26-cc__origin { color: #8a969c; font-size: 13px; }
.nv26-cc__sale { color: #143d4f; font-size: 20px; font-weight: 700; line-height: 1.3; }
.nv26-cc .nv26-cc__book { grid-area: book; height: 40px; padding: 0 18px; font-size: 14px; }

.nv26-cc__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  border: 1.5px dashed rgba(20, 61, 79, .35);
  border-radius: 999px;
  background: none;
  color: #143d4f;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}

.nv26-cc__more:hover { background: rgba(243, 232, 215, .6); }
.nv26-cc__more:focus-visible { outline: 3px solid #d58e2b; outline-offset: 2px; }
.nv26-cc__more[aria-expanded="true"] .nv26-cc__chev { transform: rotate(180deg); }

.nv26-cc__soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #f3e8d7;
  color: #143d4f;
  font-size: 15px;
  text-align: center;
}

.nv26-cc__soon span { color: #4a5a63; font-size: 13px; }
.nv26-cc .nv26-cc__intro { grid-area: intro; width: 100%; }

/* 原本的課程區塊容器不再加白底與左右留白，卡片直接放在灰底上 */
.courseContent:has(.nv26-cc) {
  padding: 0 0 48px;
  border: 0;
  background: none;
  box-shadow: none;
}

@media (max-width: 374px) {
  .nv26-cc { grid-template-columns: 136px minmax(0, 1fr); padding: 14px; }
  .nv26-cc__img { width: 136px; height: 102px; }
}

/* ---------- 電腦版：/course、/exam 橫式條列 ---------- */
@media (min-width: 1024px) {
  .nv26-cc--row {
    grid-template-columns: 176px minmax(0, 1fr) auto;
    grid-template-areas:
      "img meta intro"
      "img main intro"
      "list list list";
    grid-template-rows: auto 1fr auto;
    column-gap: 24px;
    row-gap: 10px;
    margin-bottom: 20px;
    padding: 24px;
  }

  .nv26-cc--row .nv26-cc__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 0; }
  .nv26-cc--row .nv26-cc__title { font-size: 22px; }
  .nv26-cc--row .nv26-cc__desc { font-size: 15px; line-height: 1.7; }
  .nv26-cc--row .nv26-cc__list { margin-top: 6px; }
  .nv26-cc--row .nv26-cc__intro { align-self: start; width: auto; }

  .nv26-cc--row .nv26-cc__session {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "when price book";
    gap: 24px;
    padding: 12px 16px 12px 20px;
  }

  .nv26-cc--row .nv26-cc__when {
    display: grid;
    grid-template-columns: 150px 190px minmax(0, 1fr);
    column-gap: 20px;
    font-size: 15px;
  }

  .nv26-cc--row .nv26-cc__sloc { display: inline-flex; overflow: hidden; text-overflow: ellipsis; }
  .nv26-cc--row .nv26-cc__price { flex-wrap: nowrap; }
  .nv26-cc--row .nv26-cc__soon { flex-direction: row; justify-content: center; gap: 12px; }
  .nv26-cc--row .nv26-cc__more { margin-top: 0; }

  /* /french-for-kids：一排 3 張卡片，照片放上方 */
  .nv26-cc--stack {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "img" "meta" "main" "list" "intro";
    row-gap: 12px;
    height: 100%;
    margin: 0;
    padding: 14px;
  }

  .nv26-cc--stack .nv26-cc__img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .nv26-cc--stack .nv26-cc__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .nv26-cc--stack .nv26-cc__title { font-size: 18px; }
  .nv26-cc--stack .nv26-cc__intro { align-self: end; }
}

/* /french-for-kids 外框：卡片直接放在格線裡 */
.kidsCoursePage .onlineList .nv26-cc-cell {
  display: block;
  flex: none !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  list-style: none;
}

@media (min-width: 1024px) {
  .kidsCoursePage ul.threeItemList.onlineList:has(.nv26-cc) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
    margin: 0 0 40px;
    padding: 0;
  }
}

/* 電腦版一排 4 張（與原本兒童課程頁相同）；1024–1199px 放 3 張 */
@media (min-width: 1200px) {
  .kidsCoursePage ul.threeItemList.onlineList:has(.nv26-cc) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 1023px) {
  .kidsCoursePage ul.threeItemList.onlineList:has(.nv26-cc) { display: block; margin: 0 0 24px; padding: 0; }
}

/* ---------- /online-course 共用：類別標籤、下拉選單、按鈕 ---------- */
.root ul.onlineList li.nv26-oc .catalogTag,
.root ul.onlineList li.nv26-oc-d .catalogTag {
  margin: 0;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: #f3e8d7;
  color: #d58e2b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.root ul.onlineList li.nv26-oc .onlineCourseSelect,
.root ul.onlineList li.nv26-oc-d .onlineCourseSelect {
  height: 44px;
  padding: 0 36px 0 14px;
  border: 1.5px solid rgba(20, 61, 79, .3);
  border-radius: 10px;
  background-color: #fff;
  color: #143d4f;
  font-size: 14px;
  font-weight: 500;
}

.root ul.onlineList li.nv26-oc .title h2,
.root ul.onlineList li.nv26-oc-d .title h2 { color: #aa4c25; }

.root ul.onlineList li.nv26-oc-d .roundBtns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.root ul.onlineList li.nv26-oc-d .roundBtns .divider { display: none; }

.root ul.onlineList li.nv26-oc-d .roundBtns button,
.root ul.onlineList li.nv26-oc .roundBtns .bookingBtn {
  height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 2px solid #143d4f;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}

.root ul.onlineList li.nv26-oc-d .roundBtns .onlineCourseInfo { background: #fff; color: #143d4f; }
.root ul.onlineList li.nv26-oc-d .roundBtns .onlineCourseInfo:hover { background: #f3e8d7; }
.root ul.onlineList li.nv26-oc-d .roundBtns .bookingBtn,
.root ul.onlineList li.nv26-oc .roundBtns .bookingBtn { background: #143d4f; color: #f3e8d7; }

/* ---------- /online-course 手機版精簡卡片 ---------- */
.nv26-oc__more { display: none; }

@media (max-width: 768px) {
  .root ul.onlineList li.nv26-oc > .cellLeft {
    position: relative;
    display: grid !important;
    height: auto !important;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    grid-template-areas:
      "fig meta  meta"
      "fig title title"
      "fig desc  desc"
      "sel sel   btns";
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 4px;
    padding: 0 !important;
    border-radius: 0;
    background: none;
    cursor: pointer;
  }

  .root ul.onlineList li.nv26-oc > .cellLeft > figure {
    grid-area: fig;
    width: 104px !important;
    height: 104px !important;
    min-height: 0 !important;
    max-height: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
  }

  .root ul.onlineList li.nv26-oc > .cellLeft > .noteList,
  .root ul.onlineList li.nv26-oc > .cellLeft > .featuredCourseBadge,
  .root ul.onlineList li.nv26-oc .roundBtns .onlineCourseInfo,
  .root ul.onlineList li.nv26-oc .roundBtns .divider { display: none !important; }

  .root ul.onlineList li.nv26-oc > .cellLeft > .tags {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    margin: 0;
    padding: 0;
    transform: none !important;
  }

  .root ul.onlineList li.nv26-oc > .cellLeft > .tags .levelTag {
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff;
    color: #143d4f;
    font-size: 11px;
    font-weight: 700;
  }

  .root ul.onlineList li.nv26-oc > .cellLeft > .courseMetaLine { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; gap: 6px; margin: 0; }
  .root ul.onlineList li.nv26-oc .schoolLabel { flex: 0 0 auto !important; color: #143d4f; font-size: 13px; font-weight: 500; }
  .root ul.onlineList li.nv26-oc .catalogTag { margin: 0 !important; padding: 1px 8px; font-size: 11px; }

  .root ul.onlineList li.nv26-oc > .cellLeft > .title { grid-area: title; margin: 0; padding: 0; }
  .root ul.onlineList li.nv26-oc > .cellLeft > .title h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
  }

  /* 說明只顯示 1 行，後面接「more」 */
  .root ul.onlineList li.nv26-oc > .cellLeft > .nv26-oc__descrow { grid-area: desc; display: flex; align-items: baseline; gap: 4px; min-width: 0; }
  .root ul.onlineList li.nv26-oc .nv26-oc__descrow > .desc {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: #4a5a63;
    font-size: 13px;
    line-height: 1.55;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .root ul.onlineList li.nv26-oc .nv26-oc__descrow > .desc * { display: inline; margin: 0; padding: 0; font-size: inherit; }
  .root ul.onlineList li.nv26-oc .nv26-oc__descrow > .desc br { display: none; }
  .root ul.onlineList li.nv26-oc .nv26-oc__more { display: block; flex-shrink: 0; color: #143d4f; font-size: 13px; font-weight: 700; line-height: 1.55; }

  .root ul.onlineList li.nv26-oc > .cellLeft > .onlineCourseSelect { grid-area: sel; width: 100%; margin: 8px 0 0; }
  .root ul.onlineList li.nv26-oc > .cellLeft > .roundBtns {
    grid-area: btns;
    display: block;
    width: auto;
    height: auto;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .root ul.onlineList li.nv26-oc .roundBtns .bookingBtn { width: auto; padding: 0 16px; }
}