/* ==========================================================================
   fushen.html — 复审换证（规则表 + 周期时间轴骨架）
   模块：内页hero / 3年复审规则表 / 复审周期时间轴 / 复审办理流程
        / 复审材料卡 / 异地复审双栏 / 错过复审警示区
   ========================================================================== */

/* 内页 hero 背景 */
.fushen-hero{background-image:url('../../images/svc-fushen.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}

/* ---------- 模块一：规则表上方说明条 ---------- */
.rule-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:36px}
.rule-strip .strip-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 18px;text-align:center;
}
.strip-item .num{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--gold-deep);line-height:1.1}
.strip-item .num small{font-size:15px;color:var(--muted);font-family:var(--sans);font-weight:400;margin-left:4px}
.strip-item p{font-size:13.5px;color:var(--muted);margin:10px 0 0}

/* ---------- 模块二：复审周期时间轴（横向四节点，grid 保证对齐） ---------- */
.cycle{position:relative;margin:20px 0 8px}
.cycle-track{
  display:grid;grid-template-columns:repeat(4,1fr);position:relative;
}
.cycle-track::before{
  content:"";position:absolute;left:12%;right:12%;top:21px;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-line) 100%);
}
.c-node{position:relative;text-align:center;padding:0 12px}
.c-dot{
  width:16px;height:16px;border-radius:50%;background:var(--paper);
  border:3px solid var(--gold);margin:14px auto 16px;position:relative;z-index:1;
}
.c-node.now .c-dot{background:var(--gold-deep);border-color:var(--gold-deep)}
.c-node h3{font-size:16px;margin-bottom:6px}
.c-node .c-when{font-size:12.5px;color:var(--gold-deep);font-weight:600;letter-spacing:.08em;display:block;margin-bottom:8px}
.c-node p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.7}

/* ---------- 模块三：复审办理流程（竖向编号步骤） ---------- */
.fs-flow{counter-reset:fsf;list-style:none;max-width:860px;margin:0 auto}
.fs-flow li{
  counter-increment:fsf;position:relative;padding:0 0 30px 76px;
}
.fs-flow li:last-child{padding-bottom:0}
.fs-flow li::before{
  content:"0" counter(fsf);position:absolute;left:0;top:0;width:52px;height:52px;
  border-radius:50%;background:var(--ink);color:var(--gold-pale);
  font-family:var(--serif);font-size:19px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.fs-flow li::after{
  content:"";position:absolute;left:25px;top:56px;bottom:2px;width:2px;background:var(--gold-line);
}
.fs-flow li:last-child::after{display:none}
.fs-flow h3{font-size:17px;margin-bottom:6px}
.fs-flow p{font-size:14.5px;color:var(--muted);margin:0}
.fs-flow .fs-time{
  display:inline-block;margin-top:8px;font-size:12.5px;color:var(--gold-deep);
  border:1px solid var(--gold-line);border-radius:999px;padding:2px 12px;background:var(--paper);
}

/* ---------- 模块四：复审材料卡 ---------- */
.fs-mat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fs-mat .mat-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;
}
.mat-card .mat-ico{
  width:46px;height:46px;border-radius:10px;background:var(--gold-pale);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.mat-card h3{font-size:16.5px;margin-bottom:8px}
.mat-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.75}
.mat-card .mat-tag{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--gold-deep)}

/* ---------- 模块五：异地复审双栏 ---------- */
.yidi-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.yidi-col{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:var(--paper)}
.yidi-col h3{font-size:19px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.yidi-col h3 .city{font-size:12px;color:var(--gold-deep);border:1px solid var(--gold-line);border-radius:999px;padding:2px 10px;font-family:var(--sans);font-weight:600}
.yidi-col p{font-size:14.5px;color:var(--muted)}
.yidi-col ul{margin-top:8px}
.yidi-col ul li{position:relative;padding-left:20px;font-size:14px;color:var(--text);margin-bottom:8px}
.yidi-col ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}

/* ---------- 模块六：错过复审警示区 ---------- */
.late-band{background:var(--paper-soft);border:1px solid var(--line);border-top:4px solid #b23a2e;border-radius:var(--radius);padding:36px}
.late-band h2{font-size:24px;margin-bottom:10px;display:flex;align-items:center;gap:12px}
.late-band>p{color:var(--muted);font-size:15px;max-width:760px}
.late-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px}
.late-col{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px 24px}
.late-col h4{font-size:16px;margin-bottom:10px}
.late-col h4.bad{color:#b23a2e}
.late-col h4.ok{color:#3f7d4e}
.late-col p{font-size:14px;color:var(--muted);margin:0}

/* ---------- 模块七：复审到期提醒图文 ---------- */
.remind-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.remind-media{margin:0}
.remind-media img{border-radius:var(--radius);box-shadow:var(--shadow-sm);width:100%;height:auto}
.remind-media figcaption{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}
.remind-text .tag{margin-bottom:16px}
.remind-text h2{font-size:30px;margin-bottom:16px;line-height:1.4}
.remind-text>p{color:var(--muted);font-size:15.5px}
.remind-points{margin-top:18px}
.remind-points li{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14.5px;color:var(--text)}
.remind-points li:last-child{border-bottom:0}
.remind-points svg{color:var(--gold-deep);flex:0 0 auto}

/* ---------- FAQ 区段 ---------- */
.faq-section .container-narrow .faq-item{margin-bottom:12px}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .remind-grid{grid-template-columns:1fr;gap:28px}
  .rule-strip{grid-template-columns:1fr}
  .cycle-track{grid-template-columns:1fr;gap:22px}
  .cycle-track::before{display:none}
  .fs-mat{grid-template-columns:1fr 1fr}
  .yidi-grid{grid-template-columns:1fr}
  .late-cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fs-mat{grid-template-columns:1fr}
  .fs-flow li{padding-left:60px}
  .fs-flow li::before{width:42px;height:42px;font-size:16px}
  .late-band{padding:24px}
}