/* ============================================================
   sanmenxia-zheng-shu.html 三门峡证书查询核验页专属样式（类名前缀 szs-）
   ============================================================ */

/* ---------- 1. 头图 ---------- */
.szs-hero{position:relative;padding:150px 0 110px;background:var(--g-deep);overflow:hidden}
.szs-hero-bg{position:absolute;inset:0;background:url("../images/heyan-1.jpg") center/cover no-repeat;opacity:.4}
.szs-hero-mask{position:absolute;inset:0;background:linear-gradient(100deg,rgba(38,74,54,.9),rgba(38,74,54,.4))}
.szs-hero-box{position:relative;z-index:2;color:#fff}
.szs-crumbs{display:flex;gap:8px;align-items:center;font-size:.85rem;color:#cfe0d4;margin-bottom:24px}
.szs-crumbs a{color:#cfe0d4}.szs-crumbs a:hover{color:#fff}
.szs-crumbs i{font-style:normal;color:#9dbfa8}
.szs-hero h1{font-size:clamp(1.9rem,4.5vw,2.9rem);font-weight:800;letter-spacing:1px}
.szs-hero p{margin:18px 0 30px;color:#dcebe1;max-width:620px;line-height:2}
.szs-hero-acts{display:flex;gap:14px;flex-wrap:wrap}
.szs-hero-acts .btn-line{border-color:rgba(255,255,255,.5);color:#fff}
.szs-hero-acts .btn-line:hover{background:rgba(255,255,255,.12)}

/* ---------- 2. 三步核验（对撞，竖向步骤条） ---------- */
.szs-how{background:var(--paper)}
.szs-how-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.szs-how-txt h2{font-size:1.75rem;line-height:1.4;margin:12px 0 20px}
.szs-how-steps{margin-bottom:18px}
.szs-how-step{background:var(--g-mist);border-radius:var(--radius-m);padding:18px 22px;margin-bottom:12px;border-left:4px solid var(--g-mid);transition:all .3s ease}
.szs-how-step:hover{transform:translateX(6px);box-shadow:var(--shadow-s)}
.szs-how-step b{display:block;color:var(--g-deep);margin-bottom:6px;font-size:1rem}
.szs-how-step p{font-size:.9rem;color:var(--ink-soft)}
.szs-how-txt>p{color:var(--ink-soft);font-size:.94rem}
.szs-how-img{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-m)}
.szs-how-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.szs-how-img:hover img{transform:scale(1.04)}

/* ---------- 3. 证面信息（对撞反排） ---------- */
.szs-face{background:var(--g-mist)}
.szs-face-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.szs-face-img{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-m)}
.szs-face-img img{width:100%;height:100%;object-fit:cover}
.szs-face-txt h2{font-size:1.75rem;line-height:1.4;margin:12px 0 16px}
.szs-face-list{margin-bottom:16px}
.szs-face-list li{padding:9px 0 9px 30px;position:relative;color:var(--ink-soft);font-size:.95rem}
.szs-face-list li::before{content:"✓";position:absolute;left:2px;top:9px;color:var(--g-deep);font-weight:700}
.szs-face-txt>p{color:var(--ink-soft);font-size:.94rem}

/* ---------- 本页局部锯齿装饰带 ---------- */
.szs-zig{height:20px;background:var(--w-soft);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}

/* ---------- 4. 查不到信息（2×2 格） ---------- */
.szs-abnormal{background:var(--cream)}
.szs-abn-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.szs-abn-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:26px 26px;transition:all .3s ease;border-top:4px solid var(--w-soft)}
.szs-abn-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-top-color:var(--w)}
.szs-abn-item h3{font-size:1.05rem;color:var(--w-deep);margin-bottom:10px}
.szs-abn-item p{font-size:.9rem;color:var(--ink-soft)}
.szs-abn-item p a{color:var(--g-deep);font-weight:600}

/* ---------- 5. 新证三步（编号圆卡横排） ---------- */
.szs-check{background:var(--paper)}
.szs-check-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.szs-check-card{background:var(--g-mist);border-radius:var(--radius-l);padding:32px 28px;text-align:center;transition:all .3s ease}
.szs-check-card:hover{background:var(--g-soft);transform:translateY(-6px)}
.szs-check-card b{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--g-deep);color:#fff;font-size:1.3rem;margin-bottom:16px}
.szs-check-card h3{font-size:1.12rem;margin-bottom:8px}
.szs-check-card p{font-size:.88rem;color:var(--ink-soft)}

/* ---------- 6. 查询小贴士（浅绿横条卡） ---------- */
.szs-tip{background:var(--cream)}
.szs-tip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.szs-tip-item{background:var(--g-mist);border-radius:var(--radius-m);padding:24px 22px;transition:all .3s ease;border-bottom:3px solid transparent}
.szs-tip-item:hover{border-bottom-color:var(--g-deep);transform:translateY(-5px)}
.szs-tip-item h3{font-size:1rem;color:var(--g-deep);margin-bottom:8px}
.szs-tip-item p{font-size:.88rem;color:var(--ink-soft)}

/* ---------- 7. 资讯入口 ---------- */
.szs-news{background:var(--g-mist)}
.szs-news-box{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:38px 42px}
.szs-news-box h2{font-size:1.4rem;margin:8px 0 8px}
.szs-news-box p{color:var(--ink-soft)}

/* ---------- 7. CTA ---------- */
.szs-cta{background:var(--g-deep);padding:74px 0}
.szs-cta-box{text-align:center;color:#fff}
.szs-cta-box h2{font-size:1.9rem;margin-bottom:14px}
.szs-cta-box p{color:#d8e6dc;margin-bottom:26px}
.szs-cta-box p a{color:#fff;font-weight:700;border-bottom:1px dashed rgba(255,255,255,.5)}
.szs-cta-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.szs-cta-acts .btn-line{border-color:rgba(255,255,255,.5);color:#fff}
.szs-cta-acts .btn-line:hover{background:rgba(255,255,255,.12)}

/* ---------- 7. 有效期时间线（箭头横条） ---------- */
.szs-life{background:var(--paper)}
.szs-life-row{display:flex;align-items:stretch;justify-content:center;gap:0;max-width:820px;margin:0 auto}
.szs-life-step{flex:1;background:var(--g-mist);border-radius:var(--radius-m);padding:24px 20px;text-align:center}
.szs-life-step b{display:block;color:var(--g-deep);font-size:1.1rem;margin-bottom:8px}
.szs-life-step p{font-size:.88rem;color:var(--ink-soft)}
.szs-life-arrow{align-self:center;padding:0 14px;color:var(--g-mid);font-weight:800}
.szs-life-note{text-align:center;font-size:.85rem;color:var(--ink-soft);margin-top:18px}

/* ---------- 8. 真假证 VS 双卡 ---------- */
.szs-real{background:var(--w-mist)}
.szs-real-grid{display:flex;align-items:stretch;gap:0;max-width:880px;margin:0 auto}
.szs-real-card{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:30px 28px}
.szs-real-card:first-child{border-radius:var(--radius-m) 0 0 var(--radius-m);border-right:none}
.szs-real-card:last-child{border-radius:0 var(--radius-m) var(--radius-m) 0;background:#fdf3f0}
.szs-real-card h3{font-size:1.1rem;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.szs-real-card:first-child h3{color:var(--g-deep);border-bottom-color:var(--g-soft)}
.szs-real-card:last-child h3{color:var(--w-deep)}
.szs-real-card ul{list-style:none}
.szs-real-card li{padding:7px 0 7px 22px;position:relative;font-size:.9rem;color:var(--ink-soft);border-bottom:1px dashed var(--line)}
.szs-real-card:first-child li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--g);font-weight:700}
.szs-real-card:last-child li::before{content:"✕";position:absolute;left:0;top:7px;color:var(--w);font-weight:700}
.szs-real-vs{flex:none;align-self:center;padding:0 16px;font-weight:800;color:var(--ink-soft);font-size:1.1rem}

/* ---------- 9. 证在手干啥踏实（4 卡） ---------- */
.szs-use{background:var(--paper)}
.szs-use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.szs-use-card{background:var(--g-mist);border-radius:var(--radius-m);padding:26px 22px;transition:all .3s ease;text-align:center}
.szs-use-card h3{font-size:1.05rem;color:var(--g-deep);margin-bottom:8px}
.szs-use-card p{font-size:.86rem;color:var(--ink-soft);line-height:1.8}
.szs-use-card:hover{background:var(--g-soft);transform:translateY(-5px);box-shadow:var(--shadow-s)}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .szs-how-grid,.szs-face-grid{grid-template-columns:1fr;gap:34px}
  .szs-abn-grid{grid-template-columns:1fr}
  .szs-check-row{grid-template-columns:1fr}
  .szs-life-row{flex-direction:column;gap:10px}
  .szs-life-arrow{transform:rotate(90deg);padding:4px 0}
  .szs-real-grid{flex-direction:column}
  .szs-real-card:first-child{border-radius:var(--radius-m) var(--radius-m) 0 0;border-right:1px solid var(--line);border-bottom:none}
  .szs-real-card:last-child{border-radius:0 0 var(--radius-m) var(--radius-m)}
  .szs-real-vs{padding:8px 0}
  .szs-use-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .szs-use-grid{grid-template-columns:1fr}
}