/* ==========================================================================
   weixian-huaxue.html 危化品安全作业证 私有样式
   版式：顶部警示条 + 阶梯条件 + 红黄警示 + 三栏考核
   ========================================================================== */

/* ---------- 顶部警示条 ---------- */
.wx-topwarn{background:#c0604a;color:#fff;font-size:13.5px}
.wx-topwarn-inner{display:flex;gap:10px;align-items:center;padding:11px 0}
.wx-topwarn svg{flex-shrink:0}

/* ---------- Hero ---------- */
.wx-hero{
  padding:calc(var(--topbar-h) + var(--header-h) + 56px) 0 80px;
  background:linear-gradient(150deg,var(--cream-2),var(--cream) 60%);
}
.wx-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.wx-kicker{font-size:13px;letter-spacing:3px;color:#c0604a;font-weight:700;margin-bottom:16px}
.wx-title{font-size:clamp(30px,4.2vw,48px);line-height:1.28;letter-spacing:2px;margin-bottom:20px}
.wx-line{display:block;opacity:0;transform:translateX(-20px);animation:wxSlide .8s var(--ease) forwards}
.wx-line::before{content:"";display:inline-block;width:6px;height:.8em;background:#c0604a;margin-right:12px;vertical-align:baseline;transform:scaleY(0);animation:wxBar .6s .2s var(--ease) forwards}
.wx-line-2{color:var(--ink);animation-delay:.22s}
@keyframes wxSlide{to{opacity:1;transform:translateX(0)}}
@keyframes wxBar{to{transform:scaleY(1)}}
.wx-desc{font-size:15.5px;line-height:2;max-width:560px;margin-bottom:28px}
.wx-actions{display:flex;gap:14px;flex-wrap:wrap}
.wx-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.wx-photo img{width:100%;height:auto}

/* ---------- 阶梯条件 ---------- */
.wx-steps{background:var(--white)}
.wx-step{
  background:var(--cream-3);border-radius:var(--radius);padding:26px 30px 26px 96px;position:relative;
  max-width:760px;margin:0 auto 16px;box-shadow:var(--shadow-sm);
}
.wx-step-tag{
  position:absolute;left:24px;top:26px;width:52px;height:52px;border-radius:50%;
  background:var(--green-deep);color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:700;letter-spacing:1px;
}
.wx-step-2{margin-left:6%}
.wx-step-2 .wx-step-tag{background:var(--green-dark)}
.wx-step-3{margin-left:12%}
.wx-step-3 .wx-step-tag{background:var(--wood)}
.wx-step-4{margin-left:18%}
.wx-step-4 .wx-step-tag{background:var(--wood-deep)}
.wx-step h3{font-size:17px;margin-bottom:6px}
.wx-step p{font-size:14px;line-height:1.85;color:var(--ink-soft)}

/* ---------- 红黄警示 ---------- */
.wx-alerts{background:var(--cream);padding:76px 0}
.wx-alert-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.wx-alert{border-radius:var(--radius);padding:32px 30px;box-shadow:var(--shadow-sm)}
.wx-alert h3{font-size:19px;letter-spacing:1px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.wx-alert h3::before{content:"";width:10px;height:10px;border-radius:50%}
.wx-alert ul{display:flex;flex-direction:column;gap:11px}
.wx-alert li{font-size:14px;line-height:1.85;padding-left:20px;position:relative}
.wx-alert li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:2px}
.wx-alert-red{background:#fdf0ec;border:1px solid #e8c4b8}
.wx-alert-red h3{color:#a34a33}
.wx-alert-red h3::before{background:#c0604a}
.wx-alert-red li{color:#7d4a3d}
.wx-alert-red li::before{background:#c0604a}
.wx-alert-yellow{background:#fdf6e3;border:1px solid #e8d9a8}
.wx-alert-yellow h3{color:#96712a}
.wx-alert-yellow h3::before{background:#d9a63e}
.wx-alert-yellow li{color:#7a6334}
.wx-alert-yellow li::before{background:#d9a63e}

/* ---------- 考核内容 ---------- */
.wx-exam{background:var(--white)}
.wx-exam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.wx-exam-item{
  background:var(--cream-3);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
  border-bottom:4px solid var(--green-deep);transition:transform .35s var(--ease);
}
.wx-exam-item:nth-child(2){border-bottom-color:var(--wood)}
.wx-exam-item:nth-child(3){border-bottom-color:#c0604a}
.wx-exam-item:hover{transform:translateY(-5px)}
.wx-exam-item h3{font-size:17.5px;margin-bottom:10px}
.wx-exam-item p{font-size:14px;line-height:1.9}
.wx-exam-note{text-align:center;font-size:13px;color:var(--ink-faint);margin-top:26px}

/* ---------- 材料 + 费用 ---------- */
.wx-material{background:var(--cream)}
.wx-mat-flex{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.wx-h2{font-size:clamp(22px,2.6vw,30px);margin:8px 0 22px}
.wx-mat-list{display:flex;flex-direction:column;gap:12px}
.wx-mat-list li{
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px 18px;
  font-size:14px;color:var(--ink-soft);
}
.wx-fee{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--shadow-sm);position:sticky;top:110px;
}
.wx-fee h3{font-size:18px;margin-bottom:12px}
.wx-fee p{font-size:14px;line-height:1.9;margin-bottom:10px}
.wx-fee-small{font-size:12.5px;color:var(--ink-faint)}

/* ---------- FAQ ---------- */
.wx-faq{background:var(--white)}
.wx-faq-wrap{max-width:840px}
.wx-faq-list{display:flex;flex-direction:column;gap:12px}
.wx-faq-item{background:var(--cream-3);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.wx-faq-item summary{cursor:pointer;list-style:none;padding:16px 22px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;gap:14px}
.wx-faq-item summary::-webkit-details-marker{display:none}
.wx-faq-item summary::after{content:"+";font-size:20px;color:#c0604a;flex-shrink:0;transition:transform .3s}
.wx-faq-item[open] summary::after{transform:rotate(45deg)}
.wx-faq-item p{padding:0 22px 16px;font-size:14px;line-height:1.9}

/* ---------- 相关阅读 ---------- */
.wx-rel{background:var(--cream)}
.wx-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wx-rel-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 22px;transition:transform .3s,border-color .3s}
.wx-rel-card:hover{transform:translateY(-3px);border-color:#c0604a}
.wx-rel-card h3{font-size:15px;margin-bottom:6px}
.wx-rel-card p{font-size:12.5px;color:var(--ink-faint)}

/* ---------- 底部 CTA ---------- */
.wx-cta{background:linear-gradient(135deg,#3a352d,#5c4a36)}
.wx-cta-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center;padding:72px 0}
.wx-cta-inner h2{color:#f6f2e6;font-size:clamp(22px,2.8vw,32px);letter-spacing:1.5px;line-height:1.5;margin:10px 0 12px}
.wx-cta-inner p{color:#d8cdbb;font-size:14.5px}
.wx-cta-btn{display:flex;flex-direction:column;align-items:flex-start}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .wx-hero-grid{grid-template-columns:1fr;gap:40px}
  .wx-photo{max-width:620px;margin:0 auto}
  .wx-step,.wx-step-2,.wx-step-3,.wx-step-4{margin-left:0}
  .wx-alert-grid{grid-template-columns:1fr}
  .wx-exam-grid{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .wx-mat-flex{grid-template-columns:1fr;gap:36px}
  .wx-fee{position:static}
  .wx-rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .wx-rel-grid{grid-template-columns:1fr}
  .wx-cta-inner{grid-template-columns:1fr;padding:52px 0}
  .wx-cta-btn{align-items:stretch}
}