/* ============================================================
   课程库（课程二级页）样式
   复用 points.css 的：左侧筛选栏(.pts-block/.pts-cat/.pts-tag)、
   chips(.pts-chip)、分页器(.pg)、骨架(.sk)
   这里只写课程页特有的模块
   ============================================================ */

/* ---------- 模块外壳 ---------- */
.cs-mod { margin-bottom: 26px; }
.cs-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cs-head h2 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.cs-head h2::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--cyan); }
.cs-head .en { font-size: 11px; color: var(--text-3); letter-spacing: 1.4px; }
.cs-head .tip { margin-left: auto; font-size: 12px; color: var(--text-3); }
.cs-head.sm { margin-bottom: 11px; }
.cs-head.sm h2 { font-size: 14.5px; }

/* ---------- 模块 1：分类磁贴墙（已下线，2026-09-19） ----------
   右侧原本有一块「全部课程分类」三列磁贴墙，与左侧「课程分类」栏重复，
   按郭总要求整块去掉。样式一并删除，历史上线版本见
   /var/www/pc/courses.css.bak-<日期>。 */

/* ---------- 模块 2：分类概览条 ---------- */
.cs-overview {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border: 1px solid rgba(0, 212, 255, .28); border-radius: var(--r);
  background: linear-gradient(120deg, rgba(0, 212, 255, .07), transparent 60%), var(--bg-2);
}
.cs-overview .ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cs-overview .ico svg { width: 24px; height: 24px; }
.cs-overview .ov-t { font-size: 19px; font-weight: 800; }
.cs-overview .ov-s { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }
.cs-overview .ov-link {
  margin-left: auto; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--cyan);
  padding: 6px 14px; border: 1px solid rgba(0, 212, 255, .4); border-radius: 16px; transition: all .16s;
}
.cs-overview .ov-link:hover { background: rgba(0, 212, 255, .12); }

/* ---------- 模块 3：置顶精选 ---------- */
.cs-feat { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 14px; align-items: stretch; }
.cs-lead { cursor: pointer; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cs-lead:hover { border-color: rgba(0, 212, 255, .45); }
.cs-lead .cv {
  position: relative; height: 100%; min-height: 268px;
  background: linear-gradient(135deg, #0f1729, #1a0f2e) center/cover no-repeat;
}
.cs-lead .cv::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 8, 20, .95) 0%, rgba(5, 8, 20, .6) 42%, rgba(5, 8, 20, .08) 76%); }
.cs-lead .bd { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 22px; }
.cs-lead .pills { display: flex; gap: 8px; margin-bottom: 10px; }
.cs-lead .pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--cyan); color: #041018; }
.cs-lead .pill.gray { background: rgba(255, 255, 255, .14); color: var(--text-2); font-weight: 400; }
.cs-lead .tt { font-size: 22px; font-weight: 800; line-height: 1.35; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.cs-lead .ds {
  margin-top: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.7; max-width: 560px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-lead .mt { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--text-3); }
.cs-lead .mt .hl { color: var(--cyan); }
/* 隐式列必须显式写成 minmax(0,1fr)：不写 grid-template-columns 时，隐式列按内容
   min-content 撑开（实测被撑到 480px，突破父级 316px 造成 34px 横向溢出） */
.cs-mids { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 14px; }
.cs-mid { display: flex; gap: 12px; padding: 10px; min-width: 0; cursor: pointer; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); transition: all .16s; }
.cs-mid:hover { border-color: rgba(0, 212, 255, .42); background: var(--bg-3); }
.cs-mid .cv { width: 132px; height: 76px; flex-shrink: 0; border-radius: 6px; background: var(--bg-3) center/cover no-repeat; }
.cs-mid .bd { min-width: 0; display: flex; flex-direction: column; }
.cs-mid .tt {
  font-size: 13.5px; font-weight: 600; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-mid:hover .tt { color: var(--cyan); }
/* 中卡窄，讲师名可能很长（如 "Harley Academy 💉 Medical Aesthetics Training"），
   不加 nowrap + ellipsis 会把右侧的时间挤成竖排 */
.cs-mid .mt { margin-top: auto; display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 11.5px; color: var(--text-3); }
.cs-mid .mt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-mid .mt .sp { margin-left: auto; flex-shrink: 0; }

/* ---------- 模块 4：主列表 ---------- */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cs-card {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.cs-card:hover { border-color: rgba(0, 212, 255, .45); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .32); }
.cs-card .cv { position: relative; aspect-ratio: 16 / 9; background: var(--bg-3) center/cover no-repeat; }
.cs-card .cv::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 8, 20, .7), rgba(5, 8, 20, 0) 58%); }
.cs-card .cv .cat { position: absolute; left: 9px; top: 9px; z-index: 2; font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(4, 16, 24, .8); color: var(--cyan); }
.cs-card .cv .free { position: absolute; right: 9px; top: 9px; z-index: 2; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--green); color: #041018; }
.cs-card .cv .vip { position: absolute; right: 9px; top: 9px; z-index: 2; font-size: 10.5px; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, .62); color: var(--text-2); }
.cs-card .cv .dur { position: absolute; right: 9px; bottom: 9px; z-index: 2; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .72); padding: 1px 6px; border-radius: 3px; }
.cs-card .bd { padding: 12px 13px 13px; display: flex; flex-direction: column; flex: 1; }
.cs-card .tt { font-size: 14.5px; font-weight: 700; line-height: 1.5; min-height: 44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-card:hover .tt { color: var(--cyan); }
.cs-card .ds { margin-top: 8px; font-size: 12px; line-height: 1.72; color: var(--text-2); min-height: 41px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-card .mt { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-3); }
.cs-card .mt .tc { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56%; }
.cs-card .mt .sp { margin-left: auto; white-space: nowrap; }
/* 卡片上的跨板块入口：课程 ↔ 论点 */
.cs-card .ptlink {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(30, 39, 64, .9);
  font-size: 11.5px; color: var(--violet); cursor: pointer; transition: color .15s;
}
.cs-card .ptlink:hover { color: #c4a8ff; }

.cs-rows { display: flex; flex-direction: column; gap: 10px; }
.cs-row {
  display: flex; gap: 14px; padding: 12px; align-items: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2);
  transition: border-color .18s, background .18s;
}
.cs-row:hover { border-color: rgba(0, 212, 255, .42); background: var(--bg-3); }
.cs-row .cv { position: relative; width: 172px; height: 97px; flex-shrink: 0; border-radius: 6px; background: var(--bg-3) center/cover no-repeat; overflow: hidden; }
.cs-row .cv .dur { position: absolute; right: 5px; bottom: 5px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .72); padding: 1px 6px; border-radius: 3px; }
.cs-row .bd { flex: 1; min-width: 0; }
.cs-row .tt { font-size: 15px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-row:hover .tt { color: var(--cyan); }
.cs-row .ds { margin-top: 7px; font-size: 12.5px; line-height: 1.7; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-row .mt { margin-top: 9px; display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--text-3); }
.cs-row .mt .cat { color: var(--cyan); padding: 1px 8px; border-radius: 4px; background: rgba(0, 212, 255, .1); }
.cs-row .mt .free-t { color: var(--green); padding: 1px 8px; border-radius: 4px; background: rgba(6, 255, 165, .1); }
.cs-row .mt .sp { margin-left: auto; }
.cs-row .ptbtn {
  flex-shrink: 0; font-size: 12px; color: var(--violet); padding: 7px 14px;
  border: 1px solid rgba(163, 113, 247, .4); border-radius: 16px; transition: all .16s;
}
.cs-row .ptbtn:hover { background: rgba(163, 113, 247, .14); border-color: var(--violet); }

.cs-empty { padding: 70px 0; text-align: center; color: var(--text-3); font-size: 13.5px; line-height: 2; }
.cs-empty .big { font-size: 30px; opacity: .5; }

/* ---------- 模块 5：讲师阵容 ｜ 关联论点（并排双栏，强制等高） ---------- */
.cs-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.cs-box { display: flex; flex-direction: column; padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); }
.cs-ts { display: flex; flex-direction: column; }
.cs-tcard { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 6px; cursor: pointer; transition: background .14s; }
.cs-tcard:hover { background: var(--panel-2); }
.cs-tcard .av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #a371f7, #c084fc); }
.cs-tcard .tx { min-width: 0; display: flex; flex-direction: column; }
.cs-tcard .tx b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-tcard .tx i { font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-tcard:hover .tx b { color: var(--cyan); }
.cs-tcard .go { margin-left: auto; color: var(--text-3); font-size: 14px; }
.cs-pts { display: flex; flex-direction: column; }
.cs-p { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 6px; cursor: pointer; transition: background .14s; }
.cs-p:hover { background: var(--panel-2); }
.cs-p .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--violet); flex-shrink: 0; }
.cs-p .t { min-width: 0; flex: 1; font-size: 12.5px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-p:hover .t { color: var(--cyan); }
.cs-p .go { color: var(--text-3); font-size: 13px; }
.cs-more { margin-top: auto; padding-top: 10px; border-top: 1px dashed rgba(30, 39, 64, .8); font-size: 12px; color: var(--violet); }
.cs-more:hover { color: #c4a8ff; }

/* ---------- 左侧快捷开关 ---------- */
.cs-quick { display: flex; flex-direction: column; gap: 2px; }
.cs-q { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: all .14s; }
.cs-q:hover { background: var(--panel-2); color: var(--text); }
.cs-q.on { background: rgba(0, 212, 255, .12); color: var(--cyan); font-weight: 600; box-shadow: inset 2px 0 0 var(--cyan); }
.cs-q b { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cs-q.on b { color: var(--cyan); }