/* =========================================================
   在线学习平台单页 learning.css
   仅复用全站设计令牌与内页骨架（news.css banner/面包屑/页脚内页覆盖），
   其余 lb- 前缀自成体系：课程入口卡网格（桌面一行 2 卡、色带取首页步骤条同族色轮转、
   右上角水印大序号与练兵页入口卡同款语言、标题两行定高截断）
   ========================================================= */
:root{
  --primary:#1A5CFF; --primary-2:#2E7CFF;
  --navy:#14317C;
  --t1:#16233F; --t2:#5A6A8C; --line:#E3EAF7;
  --surface:#F5F8FF;
  --shadow:0 10px 30px rgba(26,92,255,.10);
  --shadow-lg:0 22px 48px rgba(10,35,90,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-cn:"MiSans","HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-num:"Bahnschrift","DIN Alternate","Segoe UI",var(--font-cn);
  --lb-blue:#0678F5; --lb-teal:#0FB5BA; --lb-green:#0CBF88; --lb-orange:#F68211;
}

.lb-wrap{padding-bottom:40px}

/* 课程偏少时给中间内容区保底高度，让 PC 端整页至少铺满一屏、页脚不再"浮"在中段
   （取整算式：100vh − 固定导航占位83 − banner220 − 面包屑区42+折叠margin18 − 本区底padding32 − 页脚292 = 100vh − 687）
   仅桌面档启用；窄屏页脚变高、内容本身已超一屏，无需兜底 */
@media (min-width:996px){
  .lb-wrap{min-height:calc(100vh - 687px)}
}

/* ============ 课程入口卡网格：桌面一行 2 卡 ============ */
.lb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.lb-card{position:relative;background:#fff;border-radius:18px;padding:22px 20px 18px;min-width:0;
  box-shadow:var(--shadow);border:1px solid rgba(227,234,247,.9);overflow:hidden;text-decoration:none;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lb-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.lb-card:focus-visible{outline:3px solid rgba(26,92,255,.4);outline-offset:2px}
/* 顶部色条（4 色轮转，色值取首页步骤条 NC 同族） */
.lb-card::before{content:"";position:absolute;inset:0 0 auto;height:5px}
.lb-card:nth-child(4n+1)::before{background:linear-gradient(90deg,var(--primary-2),var(--lb-blue))}
.lb-card:nth-child(4n+2)::before{background:linear-gradient(90deg,#17C6C0,var(--lb-teal))}
.lb-card:nth-child(4n+3)::before{background:linear-gradient(90deg,#13D69C,var(--lb-green))}
.lb-card:nth-child(4n+4)::before{background:linear-gradient(90deg,#FFA65C,var(--lb-orange))}
/* 右上角水印大序号 */
.lb-num{position:absolute;right:14px;top:12px;pointer-events:none;
  font-family:var(--font-num);font-size:44px;font-weight:800;line-height:1;letter-spacing:.04em;opacity:.09}
.lb-card:nth-child(4n+1) .lb-num{color:var(--lb-blue)}
.lb-card:nth-child(4n+2) .lb-num{color:var(--lb-teal)}
.lb-card:nth-child(4n+3) .lb-num{color:var(--lb-green)}
.lb-card:nth-child(4n+4) .lb-num{color:var(--lb-orange)}
/* 课程名：两行定高截断，八卡基线齐平 */
.lb-name{position:relative;z-index:1;margin:6px 0 0;font-size:15.5px;font-weight:800;line-height:1.5;
  letter-spacing:.02em;color:var(--navy);height:3em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* 进入学习提示（贴卡底） */
.lb-go{position:relative;z-index:1;margin-top:auto;padding-top:16px;
  display:flex;align-items:center;gap:5px;font-size:13px;font-weight:800;letter-spacing:.04em}
.lb-go .ic{width:14px;height:14px;transition:transform .25s var(--ease)}
.lb-card:nth-child(4n+1) .lb-go{color:var(--lb-blue)}
.lb-card:nth-child(4n+2) .lb-go{color:var(--lb-teal)}
.lb-card:nth-child(4n+3) .lb-go{color:var(--lb-green)}
.lb-card:nth-child(4n+4) .lb-go{color:var(--lb-orange)}
.lb-card:hover .lb-go .ic{transform:translateX(4px)}

/* ============ 响应式 ============ */
@media (max-width:995px){
  .lb-grid{gap:14px}
  .lb-num{font-size:36px;right:12px}
}
@media (max-width:620px){
  .lb-wrap{padding-bottom:28px}
  .lb-grid{grid-template-columns:1fr;gap:12px}
  .lb-card{padding:18px 16px 14px;border-radius:16px}
  .lb-name{font-size:14px}
  .lb-num{font-size:32px;top:10px}
  .lb-go{padding-top:12px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .lb-card,.lb-go .ic{transition:none}
}