/* ============================================================
   课程详情页（四门新课共用）
   只被 host.html / speech.html / english.html / logic.html 引用。
   全部规则挂在 .page-course 下，不影响其他页面。

   页面骨架只有四节：卡在哪 / 怎么练 / 对应学科 / 生活场景。
   不写阶数、课时、学段——那些要课程方确认。

   四个模块刻意用四种形状：
   问题是大编号横条、方法是四格连排、学科是标签卡、场景是无框清单。
   全站玻璃卡已经很多，四节再各来一组同样的方块，整页就成了一页表格。
   ============================================================ */

/* ===== 首屏 =====
   只有课程名和一张图。标签、副标、按钮都撤了：
   导航里有入口，页脚有联系方式，首屏再放一遍是同一件事说三次。 */
.page-course .crs-hero{padding:56px 0 48px;}
.page-course .crs-hero .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center;
}
.page-course .crs-hero h1{
  margin:0;font-size:clamp(34px,4.8vw,58px);line-height:1.14;
  letter-spacing:-1.4px;font-weight:800;color:var(--ink);
}
.page-course .crs-hero .sub{
  margin:18px 0 0;font-size:16.5px;line-height:1.7;color:var(--ink-2);
  letter-spacing:.02em;text-wrap:pretty;
}
/* 有真图时按图片原始比例显示。素材有 4:3 也有 16:9，
   锁死 4:3 会把 16:9 的图左右切掉，画面里的人和字都断。 */
.page-course .crs-hero .img-ph.is-filled{aspect-ratio:auto;}
.page-course .crs-hero .img-ph.is-filled img{height:auto;}
.page-course .crs-hero .img-ph{border-radius:var(--r-card);aspect-ratio:4 / 3;}
.page-course .crs-hero .img-ph .ph-ico{width:34px;height:34px;}
.page-course .crs-hero .img-ph .ph-label{font-size:13.5px;}
.page-course .crs-hero .img-ph b{font-size:12.5px;}
.page-course .crs-hero .img-ph i{font-size:12.5px;}

/* ===== 节 =====
   节间距只写在 section 自己的 padding 上。main>section 没有 margin，
   两边各加一次就会翻倍。 */
.page-course .crs-sec{padding:52px 0;}
.page-course .crs-sec .sec-head{margin-bottom:32px;}

/* ===== 课程设计：整页唯一的板块 =====
   一个 section 里三组：01 方法体系 / 02 学习收益 / 03 落地支持。
   三组用三种形状——两列卡、三列卡、四格连排。
   全站玻璃卡已经很多，三组再各来一组同样的方块，整页就成了一页表格。 */
.page-course .cs-body{padding:52px 0;}
.page-course .cs-body .sec-head{margin-bottom:34px;}

.page-course .cs-part + .cs-part{margin-top:46px;}
.page-course .cs-part-h{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin-bottom:18px;
}
.page-course .cs-part-h > span{
  font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--blue);
  font-variant-numeric:tabular-nums;line-height:1.6;
}
.page-course .cs-part-h h3{margin:0;font-size:19px;font-weight:800;line-height:1.5;color:var(--ink);}
.page-course .cs-part-h p{flex:1 1 340px;margin:0;font-size:14px;line-height:1.7;color:var(--muted);}

/* 01 方法体系：两列卡。出处做成胶囊标签，压在标题下方 */
.page-course .cs-meths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.page-course .cs-meth{
  padding:24px 26px;border-radius:var(--r-card);
  background:var(--glass-2-bg);border:1px solid var(--glass-2-edge);
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
}
.page-course .cs-meth h4{margin:0;font-size:17px;font-weight:800;line-height:1.45;color:var(--ink);}
.page-course .cs-meth .cs-src{
  display:inline-block;margin-top:9px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--blue);
  background:rgba(11,99,197,.09);
}
.page-course .cs-meth p{margin:11px 0 0;font-size:14.5px;line-height:1.8;color:var(--ink-2);text-wrap:pretty;}

/* 02 学习收益：三列卡。接学科 / 进生活 / 长能力 */
.page-course .cs-gain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.page-course .cs-col{
  padding:24px 26px;border-radius:var(--r-card);
  background:var(--glass-2-bg);border:1px solid var(--glass-2-edge);
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
}
.page-course .cs-col > b{
  display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--blue);
}
.page-course .cs-col ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:14px;}
.page-course .cs-col li{font-size:14px;line-height:1.75;color:var(--ink-2);text-wrap:pretty;}
.page-course .cs-col li b{display:block;margin-bottom:3px;font-size:14.5px;font-weight:800;color:var(--ink);}

/* 03 落地支持：四格连排，中间一条发丝线。
   四样是一起交付的，不该拆成四张各自飘着的卡 */
.page-course .cs-supports{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-radius:var(--r-card);overflow:hidden;
  background:var(--glass-2-bg);border:1px solid var(--glass-2-edge);
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
}
.page-course .cs-support{padding:24px 22px;border-left:1px solid var(--line);}
.page-course .cs-support:first-child{border-left:0;}
.page-course .cs-support h4{margin:0;font-size:15.5px;font-weight:800;line-height:1.45;color:var(--ink);}
.page-course .cs-support p{margin:9px 0 0;font-size:13.8px;line-height:1.78;color:var(--ink-2);text-wrap:pretty;}

/* ===== 断点 =====
   1020：首屏单列、收益三列改一列、落地四格改两行。
   760：全部单列。 */
@media (max-width:1020px){
  .page-course .crs-hero{padding:56px 0 44px;}
  .page-course .crs-hero .wrap{grid-template-columns:1fr;gap:32px;}
  .page-course .cs-gain{grid-template-columns:1fr;}
  .page-course .cs-supports{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-course .cs-support:nth-child(3){border-left:0;}
  .page-course .cs-support:nth-child(n+3){border-top:1px solid var(--line);}
}
@media (max-width:760px){
  .page-course .crs-hero{padding:44px 0 36px;}
  .page-course .cs-body{padding:40px 0;}
  .page-course .cs-part + .cs-part{margin-top:36px;}
  .page-course .cs-meths{grid-template-columns:1fr;}
  .page-course .cs-supports{grid-template-columns:1fr;}
  .page-course .cs-support{border-left:0;padding:22px;}
  .page-course .cs-support:nth-child(n+2){border-top:1px solid var(--line);}
}