/* ==========================================================================
   继续教育专题样式 zhengce-jixu.css（周口八大员人才网 pzsr.cn）
   骨架：页头(图文) → 学分要求表 → 横向学习流程(箭头连线)
       → 学时查询三卡 → 别让证书过期图文 → 相关互链 → CTA
   专属前缀 jx-，不污染全局
   ========================================================================== */

/* ---------- 页头 ---------- */
.jx-hero{padding-bottom:clamp(56px,7vw,90px)}
.jx-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,54px);align-items:center}
.jx-hero-text .tag{margin-bottom:16px}
.jx-hero-text h1{font-size:clamp(28px,4vw,46px);margin:8px 0 16px}
.jx-hero-text .sub{font-size:clamp(14px,1.5vw,16px);color:var(--ink-3);max-width:560px}
.jx-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.jx-hero-visual img{width:100%;height:340px;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-lg)}

/* ---------- 学分表 ---------- */
.jx-tablewrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fff}
.jx-table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:700px}
.jx-table th,.jx-table td{padding:14px 16px;text-align:left;font-size:14px;vertical-align:top;word-wrap:break-word}
.jx-table thead th{background:var(--grad-blue);color:#fff;font-weight:600}
.jx-table tbody tr{border-top:1px solid var(--line);transition:background .25s}
.jx-table tbody tr:nth-child(even){background:#F4FAFF}
.jx-table tbody tr:hover{background:var(--blue-mist)}
.jx-table td b{color:#3E8BC7}

/* ---------- 横向学习流程 ---------- */
.jx-flow{display:flex;align-items:stretch;gap:14px;flex-wrap:nowrap}
.jx-step{
  flex:1;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 20px;box-shadow:var(--shadow-sm);position:relative;transition:transform .35s,box-shadow .35s;
}
.jx-step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.jx-stepno{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;font-weight:800;color:#fff;
  background:var(--grad-blue);margin-bottom:14px;
}
.jx-step h3{font-size:17px;margin-bottom:8px}
.jx-step p{font-size:13px;color:var(--ink-3)}
.jx-arrow{display:flex;align-items:center;color:var(--purple);flex:none}
.jx-arrow svg{width:26px;height:26px}

/* ---------- 学时查询三卡 ---------- */
.jx-query{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jx-qcard{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .35s,box-shadow .35s;
}
.jx-qcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.jx-qico{
  width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--purple-mist);color:var(--purple-deep);margin-bottom:16px;
}
.jx-qico svg{width:26px;height:26px}
.jx-qcard h3{font-size:18px;margin-bottom:10px}
.jx-qcard p{font-size:14px;color:var(--ink-3)}

/* ---------- 图文 ---------- */
.jx-media{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,54px);align-items:center}
.jx-media-img img{width:100%;height:360px;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.jx-media-body .eyebrow{margin-bottom:12px}
.jx-media-body h2{font-size:clamp(22px,2.8vw,32px);margin-bottom:16px}
.jx-media-body p{font-size:15px;color:var(--ink-2);margin-bottom:14px}
.jx-media-body .btn{margin-top:8px}

/* ---------- 互链 ---------- */
.jx-relgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.jx-rel{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.jx-rel:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--blue-soft)}
.jx-rel b{font-size:17px}
.jx-rel span{font-size:13px;color:#3E8BC7}

/* ---------- CTA ---------- */
.jx-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#6FBFF3 0%,#8FD0F7 50%,#C9B8F5 100%);
  padding:clamp(50px,7vw,80px) 0;border-radius:var(--r-xl);
  width:min(1200,92%);margin:0 auto var(--sec-pad);
}
.jx-cta .container{position:relative;z-index:2;text-align:center}
.jx-cta h2{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:12px}
.jx-cta p{color:rgba(255,255,255,.95);max-width:560px;margin:0 auto 26px}
.jx-cta-form{display:flex;gap:10px;max-width:560px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.jx-cta-form input{flex:1;min-width:200px;padding:14px 20px;border-radius:var(--r-full);border:none;outline:none;font-size:15px}
.jx-cta-form .btn{box-shadow:0 10px 26px rgba(0,0,0,.18)}
.jx-cta-link{font-size:13px;color:rgba(255,255,255,.9);margin-top:18px}
.jx-cta-link a{color:#fff;font-weight:600;text-decoration:underline}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .jx-hero-grid{grid-template-columns:1fr}
  .jx-hero-visual img{height:250px}
  .jx-flow{flex-wrap:wrap}
  .jx-step{flex:1 1 40%}
  .jx-arrow{display:none}
  .jx-query{grid-template-columns:1fr}
  .jx-media{grid-template-columns:1fr}
  .jx-relgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .jx-step{flex:1 1 100%}
  .jx-relgrid{grid-template-columns:1fr}
  .jx-cta{border-radius:var(--r-lg)}
  .jx-table th,.jx-table td{padding:11px 11px;font-size:13px}
}

/* ---------- 列宽 ---------- */
.jx-table th:nth-child(1),.jx-table td:nth-child(1){width:22%}
.jx-table th:nth-child(2),.jx-table td:nth-child(2){width:26%}
.jx-table th:nth-child(3),.jx-table td:nth-child(3){width:26%}
.jx-table th:nth-child(4),.jx-table td:nth-child(4){width:26%}


/* ===== 新增：学时勾选清单 ===== */
.jx-check{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:960px;margin:0 auto}
.jx-citem{display:flex;gap:14px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-sm)}
.jx-box{flex:none;width:26px;height:26px;border-radius:8px;background:var(--pink-soft);color:var(--pink-deep);display:flex;align-items:center;justify-content:center}
.jx-box svg{width:16px;height:16px}
.jx-citem b{font-size:15px;display:block;margin-bottom:4px}
.jx-citem p{font-size:13px;color:var(--ink-3);line-height:1.6}
/* ===== 新增：服务承诺 ===== */
.jx-promise{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.jx-pitem{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)}
.jx-pitem b{display:block;font-size:17px;margin-bottom:8px;color:var(--pink-deep)}
.jx-pitem span{font-size:14px;color:var(--ink-3);line-height:1.7}
@media(max-width:768px){.jx-check{grid-template-columns:1fr}.jx-promise{grid-template-columns:1fr}}