/* ============================================================
   zhengshu-lingqu.css · 证书领取与使用
   题头④：大图卡片；领取双栏 + 电子vs纸质 + 使用场景三列 + 补办步骤 + 手风琴
   ============================================================ */

.narrow{ max-width:860px; margin-left:auto; margin-right:auto; }

/* ---------- 题头④：大图卡片 ---------- */
.lhead{ padding:120px 0 40px; background:var(--bg-soft); }
.lcard{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr 1.1fr;
}
.lcard-img{ width:100%; height:100%; min-height:340px; object-fit:cover; }
.lcard-body{ padding:40px 44px; }
.lc-kicker{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:3px;
  color:var(--orange-deep); margin:14px 0 12px;
}
.lc-title{ font-size:30px; font-weight:800; line-height:1.35; }
.lc-sub{ margin-top:14px; color:var(--ink-2); font-size:15px; }

/* ---------- 领取方式双栏 ---------- */
.get-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.get-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 32px; box-shadow:var(--shadow-sm); position:relative;
}
.get-tag{
  display:inline-block; font-size:13px; font-weight:700; color:#fff;
  background:var(--green); padding:5px 16px; border-radius:999px; margin-bottom:14px;
}
.get-tag-alt{ background:var(--orange); }
.get-card h3{ font-size:21px; margin-bottom:10px; }
.get-card p{ font-size:14.5px; color:var(--ink-2); }

/* ---------- 电子 vs 纸质 ---------- */
.bg-soft{ background:var(--bg-soft); }
.vs-grid{
  margin-top:36px; display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:stretch;
}
.vs-col{
  background:#fff; border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm);
}
.vs-col:first-child{ border-top:4px solid var(--green); }
.vs-col:last-child{ border-top:4px solid var(--orange); }
.vs-col h3{ font-size:19px; margin-bottom:16px; }
.vs-col:first-child h3{ color:var(--green-deep); }
.vs-col:last-child h3{ color:var(--orange-deep); }
.vs-col ul{ display:flex; flex-direction:column; gap:11px; }
.vs-col li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--ink-2); }
.vs-col li::before{
  content:""; position:absolute; left:0; top:9px; width:12px; height:12px; border-radius:50%;
  background:var(--line);
}
.vs-vs{
  align-self:center; font-size:18px; font-weight:800; color:var(--ink-3);
  background:#fff; border-radius:50%; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}

/* ---------- 使用场景三列 ---------- */
.use-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }
.use-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow-sm);
}
.use-num{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:2px;
  color:var(--orange-deep); margin-bottom:12px;
}
.use-card h3{ font-size:20px; margin-bottom:10px; }
.use-card p{ font-size:14px; color:var(--ink-2); }
.use-extra{
  margin-top:22px; font-size:15px; color:var(--ink-2);
  background:var(--bg-soft); border-radius:12px; padding:18px 22px;
}

/* ---------- 遗失补办步骤 ---------- */
.bg-orange{ background:var(--bg-orange); }
.reissue-steps{
  margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.rs-step{
  background:#fff; border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm);
  border-left:4px solid var(--green);
}
.rs-dot{
  display:inline-block; font-size:13px; font-weight:700; color:var(--green-deep);
  background:var(--green-soft); padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.rs-step h3{ font-size:17px; margin-bottom:8px; }
.rs-step p{ font-size:14px; color:var(--ink-2); }
.reissue-tip{
  margin-top:22px; background:#fff; border:1px dashed var(--orange);
  border-radius:12px; padding:14px 20px; font-size:14px; color:var(--ink-2);
}

/* ---------- 手风琴 ---------- */
.acc{ margin-top:30px; }
.acc-item{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  margin-bottom:12px; overflow:hidden;
}
.acc-item summary{
  cursor:pointer; padding:18px 22px; font-weight:700; font-size:16px;
  list-style:none; position:relative; padding-right:44px;
}
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-item summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--green-soft);
  color:var(--green-deep); display:flex; align-items:center; justify-content:center;
  font-weight:700; transition:transform .25s ease;
}
.acc-item[open] summary::after{ content:"−"; transform:translateY(-50%) rotate(180deg); }
.acc-item p{ padding:0 22px 18px; color:var(--ink-2); font-size:14.5px; }
.acc-item p a{ color:var(--orange-deep); text-decoration:underline; }

/* ---------- 行动带 ---------- */
.lcta{
  background:linear-gradient(120deg,#143525 0%,#0F1F17 100%);
  color:#fff; padding:60px 0; text-align:center;
}
.lcta h2{ font-size:30px; margin-bottom:12px; }
.lcta p{ color:#B9C8BF; max-width:600px; margin:0 auto 26px; }
.lcta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .lhead{ padding:100px 0 30px; }
  .lcard{ grid-template-columns:1fr; }
  .lcard-img{ min-height:220px; height:220px; }
  .get-grid{ grid-template-columns:1fr; }
  .vs-grid{ grid-template-columns:1fr; }
  .vs-vs{ margin:0 auto; }
  .use-grid{ grid-template-columns:1fr; }
  .reissue-steps{ grid-template-columns:1fr; }
}