/* ==========================================================================
   zhengshu-jieshao.html — 特种作业操作证介绍
   模块：内页hero / 证书要素图解 / 全国通用性图文行 / 电子证与实体卡对照表
        / 含金量与用途卡 / 常见误区列表
   ========================================================================== */

/* 内页 hero 背景 */
.js-hero{background-image:url('../../images/svc-zhengshu.jpg')}

/* CTA 条通用排布（内页统一） */
.cta-flex{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-kicker{display:inline-block;color:var(--gold);font-size:13px;letter-spacing:.2em;font-weight:600;margin-bottom:14px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.container-narrow{max-width:860px}

/* ---------- 模块一：证书要素图解 ---------- */
.cert-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start}
.cert-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-sm);position:relative;
}
.cert-card::before{
  content:"";position:absolute;inset:10px;border:1px dashed var(--gold-line);border-radius:var(--radius-sm);pointer-events:none;
}
.cert-card .cert-org{font-size:13px;color:var(--muted);letter-spacing:.08em;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:12px}
.cert-card h3{font-size:22px;margin-bottom:4px}
.cert-card .cert-no{font-size:13px;color:var(--muted);font-family:var(--sans);margin-bottom:16px}
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.cert-grid div{font-size:13.5px;color:var(--text)}
.cert-grid div b{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:2px}

.elem-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.elem-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;background:var(--paper)}
.elem-item h4{font-size:15px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.elem-item h4 svg{color:var(--gold-deep);flex:0 0 auto}
.elem-item p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.7}

/* ---------- 模块二：图文交替行 ---------- */
.fact-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:64px}
.fact-row:last-child{margin-bottom:0}
.fact-row.flip .fact-media{order:2}
.fact-media{margin:0}
.fact-media img{border-radius:var(--radius);box-shadow:var(--shadow-sm);width:100%;height:auto}
.fact-media figcaption{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
.fact-text h3{font-size:24px;margin-bottom:14px;line-height:1.4}
.fact-text>p{color:var(--muted);font-size:15px}
.fact-points{margin-top:16px}
.fact-points li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.fact-points li:last-child{border-bottom:0}
.fact-points svg{color:var(--gold-deep);flex:0 0 auto;margin-top:4px}

/* ---------- 模块三：电子证/实体卡对照表（data-table 已共享，只做容器微调） ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius)}

/* ---------- 模块四：含金量与用途 ---------- */
.use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.use-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:left}
.use-card .use-ico{
  width:46px;height:46px;border-radius:50%;background:var(--gold-pale);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.use-card h3{font-size:16.5px;margin-bottom:8px}
.use-card p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.75}

/* ---------- 模块五：常见误区 ---------- */
.myth-list{max-width:860px;margin:0 auto}
.myth-item{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);margin-bottom:14px;overflow:hidden}
.myth-q{padding:18px 22px;font-weight:600;color:var(--ink);font-size:15.5px;display:flex;gap:12px;align-items:flex-start}
.myth-q .no{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--paper-warm);color:#b23a2e;font-size:13px;font-family:var(--serif);display:flex;align-items:center;justify-content:center;font-weight:700}
.myth-a{padding:0 22px 18px 60px;color:var(--muted);font-size:14.5px;line-height:1.8}
.myth-a b{color:var(--gold-deep);font-weight:600}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .cert-layout{grid-template-columns:1fr;gap:28px}
  .elem-list{grid-template-columns:1fr}
  .fact-row{grid-template-columns:1fr;gap:24px}
  .fact-row.flip .fact-media{order:0}
  .use-grid{grid-template-columns:1fr 1fr}
  .myth-a{padding-left:22px}
}
@media (max-width:640px){
  .use-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:1fr}
}