/* ============================================================
   work.css · 特种作业工种页族（低压/高压电工、焊工、高处、
   登高架设、制冷、危化品、矿山、煤矿、煤气、油气、冶金、
   烟花爆竹、防爆电气、工种一览）
   布局：图文 Hero + 参数条 + 知识图文交错 + 技能卡 + 报考表
        + 前景带 + 迷你问答
   ============================================================ */

/* ---------- Hero：图文分栏 ---------- */
.hero-work{ min-height:560px; padding:160px 0 100px; }
.hero-work .hw-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.hero-work h1{ color:#FFF; margin-bottom:16px; text-shadow:0 2px 16px rgba(0,0,0,.22); }
.hero-work .hw-content p{ color:rgba(255,255,255,.9); max-width:540px; margin-bottom:26px; }
.hw-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-work .hw-figure{ position:relative; }
.hw-figure .hf-main{
  border-radius:26px; overflow:hidden; box-shadow:var(--shadow-l); border:5px solid rgba(255,255,255,.75);
  transform:rotate(1.6deg);
}
.hw-figure .hf-sub{
  position:absolute; left:-34px; bottom:-34px; width:46%; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-l); border:5px solid rgba(255,255,255,.9); transform:rotate(-3.2deg);
}
.hw-figure .hf-tag{
  position:absolute; right:-18px; top:-20px; background:linear-gradient(135deg,#E7C878,#C89B4A);
  color:#FFF; font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px; box-shadow:var(--shadow-s);
}
.hw-figure img{ width:100%; display:block; }

/* ---------- 参数条 ---------- */
.wk-params{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.wk-param{
  background:#FFF; border:1px solid var(--line); border-radius:18px; padding:24px 20px;
  text-align:center; box-shadow:var(--shadow-c); position:relative; transition:transform .3s;
}
.wk-param:hover{ transform:translateY(-6px); }
.wk-param .wp-ico{ width:46px; height:46px; margin:0 auto 12px; border-radius:14px; background:var(--yellow); color:var(--amber); display:flex; align-items:center; justify-content:center; }
.wk-param.pink .wp-ico{ background:var(--pink); color:var(--rose); }
.wk-param h4{ font-size:14px; margin-bottom:6px; }
.wk-param p{ font-size:12.5px; color:var(--ink-3); }

/* ---------- 图文交错区 ---------- */
.zig{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:56px; }
.zig:last-child{ margin-bottom:0; }
.zig.flip .zig-img{ order:2; }
.zig-img{ position:relative; }
.zig-img img{ width:100%; border-radius:24px; box-shadow:var(--shadow-c); }
.zig-img::after{
  content:""; position:absolute; inset:auto -18px -18px auto; width:54%; height:54%;
  background:linear-gradient(140deg,var(--yellow),var(--pink)); border-radius:24px; z-index:-1; opacity:.55;
}
.zig-text .kicker{ margin-bottom:8px; }
.zig-text h2{ margin-bottom:16px; }
.zig-text p{ margin-bottom:12px; font-size:15px; }
.zig-text ul li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); margin-bottom:10px; }
.zig-text ul svg{ flex:none; margin-top:5px; color:var(--amber); }

/* ---------- 技能卡 ---------- */
.wk-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.wk-card{
  background:#FFF; border:1px solid var(--line); border-radius:20px; padding:28px 24px;
  box-shadow:var(--shadow-c); transition:transform .35s,box-shadow .35s; position:relative; overflow:hidden;
}
.wk-card::after{ content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:var(--bg-2); z-index:0; }
.wk-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-l); }
.wk-card .wc-ico{ position:relative; z-index:1; width:52px; height:52px; border-radius:16px; background:var(--yellow); color:var(--amber); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.wk-card.pink .wc-ico{ background:var(--pink); color:var(--rose); }
.wk-card h3{ font-size:16px; margin-bottom:10px; }
.wk-card p{ font-size:13.5px; }

/* ---------- 报考要求表 ---------- */
.wk-table-wrap{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow-l); border:1px solid var(--line); }
.wk-table-wrap .tbl{ background:#FFF; }

/* ---------- 前景带 ---------- */
.wk-band{
  background:linear-gradient(135deg,#3D362C,#5C5140); color:#FFF; border-radius:26px;
  padding:56px 50px; position:relative; overflow:hidden;
}
.wk-band::after{ content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; background:rgba(240,223,166,.14); }
.wk-band::before{ content:""; position:absolute; left:-40px; bottom:-90px; width:220px; height:220px; border-radius:50%; background:rgba(246,216,206,.12); }
.wk-band h2{ color:#FFF; margin-bottom:10px; }
.wk-band .band-sub{ color:rgba(255,255,255,.8); max-width:640px; margin-bottom:30px; }
.wk-band .band-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; z-index:1; }
.wk-band .bs{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:18px; text-align:center; backdrop-filter:blur(4px); }
.wk-band .bs strong{ display:block; font-size:26px; color:#F5E3B3; }
.wk-band .bs span{ font-size:12.5px; color:rgba(255,255,255,.75); }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-work .hw-grid{ grid-template-columns:1fr; }
  .hw-figure{ max-width:560px; }
  .wk-cards{ grid-template-columns:1fr 1fr; }
  .wk-params{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .zig{ grid-template-columns:1fr; gap:28px; }
  .zig.flip .zig-img{ order:0; }
  .wk-cards,.wk-params{ grid-template-columns:1fr; }
  .wk-band .band-stats{ grid-template-columns:1fr 1fr; }
  .hero-work{ padding:130px 0 70px; }
  .hw-figure .hf-sub{ left:10px; bottom:-20px; }
}