/* ==========================================================================
   yanhua.html — 烟花爆竹安全作业：储存防火防爆要点骨架
   模块：内页hero(work-yanhua) / 生产储存图文大卡 / 储存要点编号清单
        / 风险警示三卡 / 考试内容表 / 报考六步 / FAQ(墨底)
   ========================================================================== */

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

/* ---------- 模块一：方向图文大卡 ---------- */
.yh-dir{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:26px}
.yh-dir-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;
}
.yh-dir-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.yh-dir-card img{width:100%;height:210px;object-fit:cover}
.yh-dir-body{padding:22px 24px 24px}
.yh-dir-tag{
  display:inline-block;font-size:12.5px;letter-spacing:.16em;color:var(--gold-deep);
  border:1px solid var(--gold-line);border-radius:999px;padding:3px 12px;margin-bottom:14px;
}
.yh-dir-body h3{font-size:18px;margin-bottom:10px}
.yh-dir-body p{font-size:14px;color:var(--muted);line-height:1.85;margin-bottom:10px}

/* ---------- 模块二：储存要点编号清单（纵向大序号） ---------- */
.yh-steps{counter-reset:yh;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.yh-step{
  display:flex;gap:18px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 24px;align-items:flex-start;
}
.yh-step em{
  font-family:var(--serif);font-style:normal;font-size:30px;line-height:1;color:var(--gold-pale);
  flex:0 0 auto;
}
.yh-step h3{font-size:16.5px;margin-bottom:8px}
.yh-step p{font-size:13.8px;color:var(--muted);line-height:1.85;margin:0}

/* ---------- 模块三：风险警示三卡 ---------- */
.yh-warn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.yh-warn{
  background:var(--paper);border:1px solid var(--line);border-left:4px solid #b23a2e;
  border-radius:var(--radius-sm);padding:20px 22px;
}
.yh-warn strong{display:block;color:#b23a2e;font-size:15px;margin-bottom:8px}
.yh-warn p{font-size:13.8px;color:var(--muted);line-height:1.8;margin:0}

/* ---------- 模块五：报考六步（无边框，纵向编号小卡） ---------- */
.yh-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.yh-flow-step{
  border-top:2px solid var(--gold-line);padding-top:20px;
}
.yh-flow-step h3{font-size:16px;margin-bottom:8px}
.yh-flow-step p{font-size:13.8px;color:var(--muted);line-height:1.85;margin:0}

/* ---------- 模块六：取证之后三卡 ---------- */
.yh-after{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.yh-after-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;
}
.yh-after-item h3{font-size:16.5px;margin-bottom:10px}
.yh-after-item p{font-size:13.6px;color:var(--muted);line-height:1.85;margin:0}

/* ---------- 墨底 FAQ 反色 ---------- */
.faq-item-dark{background:transparent;border-color:rgba(255,255,255,.16)}
.faq-item-dark summary{color:var(--paper)}
.faq-item-dark summary::after{border-color:var(--gold)}
.faq-item-dark .faq-body{color:#b9b6ae}

/* ---------- 报名材料清单（.mat 通用） ---------- */
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mat-col{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px;
}
.mat-col h3{font-size:15.5px;margin-bottom:12px;color:var(--ink)}
.mat-col ul li{
  position:relative;padding-left:18px;font-size:13.6px;color:var(--muted);
  line-height:1.9;margin-bottom:6px;
}
.mat-col ul li::before{
  content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--gold);
}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .yh-dir{grid-template-columns:1fr}
  .yh-steps{grid-template-columns:1fr}
  .yh-warn-grid{grid-template-columns:1fr}
  .yh-flow{grid-template-columns:1fr 1fr}
  .yh-after{grid-template-columns:1fr}
  .mat-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .yh-flow{grid-template-columns:1fr}
  .yh-dir-card img{height:190px}
}