/* ==========================================================================
   培训课程页 peixun-kecheng.css —— 页面前缀 .kc-
   骨架：横幅 → 分类Tab(:checked)课程卡片墙 → 排期表 → 学习方式图文 → 报名表单 → 报名须知 → 相关引导 → CTA
   ========================================================================== */

/* ---------- 1. 横幅 ---------- */
.kc-hero{padding-top:calc(var(--nav-h) + 60px)}

/* ---------- 2. 分类 Tab（纯 CSS 切换） ---------- */
.kc-tabs input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.kc-tab-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:36px}
.kc-tab{
  padding:12px 30px;border-radius:var(--r-full);cursor:pointer;
  background:var(--glass);border:1px solid var(--line);
  font-size:15px;font-weight:600;color:var(--ink-2);
  transition:all .3s ease;
}
.kc-tab:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
/* 选中态：由单选框状态联动 */
#kcCat1:checked ~ .kc-tab-bar label[for="kcCat1"],
#kcCat2:checked ~ .kc-tab-bar label[for="kcCat2"],
#kcCat3:checked ~ .kc-tab-bar label[for="kcCat3"]{
  background:var(--grad-pink);color:#fff;border-color:transparent;box-shadow:var(--shadow-pink);
}
.kc-panels{position:relative}
.kc-panel{display:none;animation:kcFade .5s ease}
#kcCat1:checked ~ .kc-panels #kcp1,
#kcCat2:checked ~ .kc-panels #kcp2,
#kcCat3:checked ~ .kc-panels #kcp3{display:block}
@keyframes kcFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.kc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kc-card{overflow:hidden;display:flex;flex-direction:column}
.kc-card-img{height:170px;overflow:hidden}
.kc-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.kc-card:hover .kc-card-img img{transform:scale(1.06)}
.kc-card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.kc-card-body h3{font-size:16.5px}
.kc-card-body p{font-size:13.5px;color:var(--ink-3);flex:1}
.kc-tags{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 3. 排期表 ---------- */
.kc-schedule-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.kc-schedule{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--surface);min-width:680px}
.kc-schedule col.c1{width:18%}.kc-schedule col.c2{width:26%}.kc-schedule col.c3{width:18%}.kc-schedule col.c4{width:20%}.kc-schedule col.c5{width:18%}
.kc-schedule th,.kc-schedule td{padding:14px 16px;text-align:left;font-size:14px;border-bottom:1px solid var(--line);word-break:break-word}
.kc-schedule thead th{background:var(--grad-purple);color:#fff;border-bottom:none}
.kc-schedule tbody tr:last-child td{border-bottom:none}
.kc-schedule tbody tr{transition:background .25s}
.kc-schedule tbody tr:hover{background:var(--purple-mist)}

/* ---------- 4. 学习方式图文 ---------- */
.kc-mode{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.kc-mode-img img{border-radius:var(--r-lg);box-shadow:var(--shadow-md);object-fit:cover;width:100%;height:auto}
.kc-mode-txt h2{font-size:clamp(24px,3vw,32px);margin:14px 0 18px}
.kc-mode-txt p{font-size:15px;color:var(--ink-2);margin-bottom:12px}

/* ---------- 5. 报名表单 ---------- */
.kc-form{max-width:760px;margin:0 auto;padding:clamp(24px,4vw,44px)}

/* ---------- 6. 报名须知 ---------- */
.kc-notice-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kc-notice-item{padding:26px 22px}
.kc-notice-item h3{font-size:17px;margin-bottom:10px;color:var(--purple-deep)}
.kc-notice-item p{font-size:14px;color:var(--ink-3)}

/* ---------- 7. 相关引导 ---------- */
.kc-relate-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- 8. CTA ---------- */
.kc-cta{padding:clamp(56px,7vw,90px) 0;text-align:center;position:relative;overflow:hidden;background:linear-gradient(140deg,#EDE6FC,#FDF1F8 55%,#DDF1FD)}
.kc-cta h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:12px}
.kc-cta p{color:var(--ink-3);margin-bottom:26px}
.kc-cta .cta-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}

/* ---------- 响应式：1024 ---------- */
@media (max-width:1024px){
  .kc-grid{grid-template-columns:1fr 1fr}
  .kc-mode{grid-template-columns:1fr}
  .kc-notice-cols{grid-template-columns:1fr}
}
/* ---------- 响应式：768 ---------- */
@media (max-width:768px){
  .kc-tab{padding:10px 20px;font-size:14px}
}
/* ---------- 响应式：480 ---------- */
@media (max-width:480px){
  .kc-grid{grid-template-columns:1fr}
  .kc-cta .cta-btns .btn{width:100%}
  .kc-schedule th,.kc-schedule td{padding:11px 10px;font-size:13px}
}

/* ---------- 新增：课程对比表 ---------- */
.kc-compare-wrap{overflow-x:auto;border-radius:var(--r-md)}
.sec-sub{max-width:860px;margin:-6px auto 30px;text-align:center;font-size:14px;color:var(--ink-3);line-height:1.9}
.kc-compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--glass);border:1px solid var(--line);table-layout:fixed}
.kc-compare col.c1{width:18%}.kc-compare col.c2{width:27.33%}.kc-compare col.c3{width:27.33%}.kc-compare col.c4{width:27.34%}
.kc-compare th,.kc-compare td{padding:13px 14px;font-size:14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;word-break:break-word}
.kc-compare thead th{background:linear-gradient(135deg,#f3e8ff,#fdf2f8);font-weight:600;color:var(--purple-deep)}
.kc-compare tbody tr:last-child td{border-bottom:0}
.kc-compare tbody tr td:first-child{font-weight:600}

/* ---------- 新增：选课场景卡 ---------- */
.kc-scenes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.kc-scene{padding:24px 22px}
.kc-scene h3{font-size:16px;margin-bottom:10px;color:var(--purple-deep)}
.kc-scene p{font-size:14px;color:var(--ink-3);line-height:1.85}

@media (max-width:768px){
  .kc-scenes{grid-template-columns:1fr}
}