/* ==========================================================================
   濮阳职称 fszg.cn · 继续教育页样式 jixu.css
   ========================================================================== */

.page-hero { padding: 74px 0 88px; }
.ph-title { font-family: var(--font-serif); font-size: clamp(34px, 4.6vw, 52px); color: var(--ink); font-weight: 600; margin-top: 8px; letter-spacing: .05em; }
.ph-sub { margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.9; }

/* ---------- 学时要求 ---------- */
.jx-num { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; align-items: stretch; }
.jx-total {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ink); border-radius: 18px; padding: 44px 30px; color: #f2efe7;
  position: relative; overflow: hidden;
}
.jx-total::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(156,133,89,.35), transparent 70%); }
.jx-t-num { font-family: var(--font-serif); font-size: 96px; color: var(--gold); line-height: 1; }
.jx-t-cap { margin-top: 14px; font-size: 16px; letter-spacing: .14em; }
.jx-t-sub { margin-top: 6px; font-size: 13px; color: #8f887a; }
.jx-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.jx-part { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 36px 30px; transition: all .35s ease; }
.jx-part:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--bronze-l); }
.jx-p-num { font-family: var(--font-serif); font-size: 52px; color: var(--bronze-d); line-height: 1; }
.jx-p-num span { font-size: 17px; color: var(--muted); margin-left: 6px; font-family: var(--font-sans); }
.jx-part h3 { font-size: 18px; color: var(--ink); margin: 16px 0 10px; }
.jx-part p { font-size: 14px; color: var(--muted); line-height: 1.9; }

.jx-warn {
  margin-top: 24px; display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--bronze);
  border-radius: 12px; padding: 20px 24px;
}
.jx-warn svg { flex-shrink: 0; color: var(--bronze-d); margin-top: 3px; }
.jx-warn p { font-size: 14px; color: var(--ink-2); line-height: 1.9; }
.jx-warn b { color: var(--bronze-d); }

/* ---------- 学习方式 ---------- */
.jx-way-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.way-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 36px 30px; text-align: center; transition: all .35s ease;
}
.way-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--bronze-l); }
.way-ico {
  display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--bg-soft); color: var(--bronze-d); transition: all .4s ease;
}
.way-ico svg { width: 30px; height: 30px; }
.way-card:hover .way-ico { background: var(--bronze); color: #fff; transform: rotate(8deg); }
.way-card h3 { font-size: 17.5px; color: var(--ink); margin: 20px 0 10px; }
.way-card p { font-size: 14px; color: var(--muted); line-height: 1.9; }

/* ---------- 办理流程 ---------- */
.jx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: js; }
.jx-step {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px 24px; transition: all .32s ease;
}
.jx-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--bronze-l); }
.js-no {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--gold); font-family: var(--font-serif); font-size: 18px;
  margin-bottom: 16px; transition: all .3s;
}
.jx-step:hover .js-no { background: var(--bronze); color: #fff; }
.jx-step h3 { font-size: 16.5px; color: var(--ink); margin-bottom: 8px; }
.jx-step p { font-size: 13.5px; color: var(--muted); line-height: 1.8; }

/* ---------- FAQ ---------- */
.jx-faq-wrap { max-width: 860px; margin: 0 auto; }

/* ---------- 底部行动区 ---------- */
.cta-band { background: var(--ink); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(156,133,89,.28), transparent 65%); }
.cta-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 76px 0; position: relative; z-index: 2; flex-wrap: wrap; }
.cta-kicker { font-size: 12.5px; letter-spacing: .3em; color: var(--gold); margin-bottom: 14px; }
.cta-copy h2 { font-family: var(--font-serif); font-size: clamp(26px, 3.4vw, 38px); color: #f2efe7; font-weight: 600; line-height: 1.4; }
.cta-copy p { margin-top: 16px; color: #a9a296; font-size: 15px; max-width: 560px; }
.cta-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .jx-num { grid-template-columns: 1fr; }
  .jx-way-grid { grid-template-columns: 1fr; }
  .jx-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .jx-parts, .jx-steps { grid-template-columns: 1fr; }
  .jx-t-num { font-size: 72px; }
}