/* ============================================================
   zhiliangyuan.html · 质量员岗位详解（重构版）
   题头③顶部色带；数字职责带 / 竖排四步 / zigzag场景 / 磁贴墙 / 清单卡 / 三列递进 / 问答
   ============================================================ */

/* ---------- 题头：顶部绿色带（保留形态） ---------- */
.zl-band{ position:relative; padding:130px 0 70px; overflow:hidden; }
.zl-band-bg{ position:absolute; inset:0; background:linear-gradient(120deg,#0B2A1C 0%,var(--green-deep) 55%,var(--green) 100%); }
.zl-band-inner{ position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:center; }
.zl-crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; margin-bottom:14px; }
.zl-crumbs a{ color:#D7EFE2; }
.zl-crumbs a:hover{ color:#fff; }
.zl-crumbs .sep{ color:rgba(255,255,255,.4); }
.zl-kicker{ display:inline-block; font-size:13px; font-weight:800; letter-spacing:3px; color:var(--orange-2); margin-bottom:12px; }
.zl-title{ font-size:38px; font-weight:800; color:#fff; letter-spacing:.5px; }
.zl-sub{ margin-top:16px; color:#DCEFE4; font-size:15.5px; line-height:1.95; max-width:560px; }
.zl-band-actions{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; }
.zl-band-media img{ width:100%; height:300px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:0 20px 50px rgba(0,0,0,.3); border:4px solid rgba(255,255,255,.25); }

/* ---------- 数字职责统计带 ---------- */
.zl-statband{ background:#0F1F17; padding:44px 0; }
.zl-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.zl-stat{ border-left:3px solid var(--green); padding-left:18px; }
.zl-stat b{ display:block; font-size:24px; font-weight:800; color:var(--green-2); margin-bottom:8px; }
.zl-stat p{ font-size:13.5px; color:#B9C8BF; line-height:1.8; }

/* ---------- 验收四步竖排步骤流 ---------- */
.zl-steps{ background:#fff; }
.zl-steps-list{ margin:40px auto 0; max-width:780px; position:relative; padding-left:30px; }
.zl-steps-list::before{ content:""; position:absolute; left:13px; top:10px; bottom:10px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--green),var(--orange)); }
.zl-steps-list li{ position:relative; display:grid; grid-template-columns:70px 1fr; gap:20px; padding:0 0 30px 24px; align-items:start; }
.zl-steps-list li:last-child{ padding-bottom:0; }
.zl-sl-no{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff; font-weight:800; box-shadow:0 6px 14px rgba(18,183,106,.3); }
.zl-steps-list h3{ font-size:18px; margin-bottom:6px; }
.zl-steps-list p{ font-size:14.5px; color:var(--ink-2); line-height:1.9; }

/* ---------- 工作场景 zigzag ---------- */
.zl-scene{ background:var(--bg-soft); }
.zl-zig{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-top:40px; }
.zl-zig-media img{ width:100%; height:260px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.zl-zig-r .zl-zig-media{ order:2; }
.zl-zig-body h3{ font-size:21px; margin-bottom:10px; }
.zl-zig-body p{ font-size:14.5px; color:var(--ink-2); line-height:1.95; }

/* ---------- 适合人群磁贴墙 ---------- */
.zl-fit{ background:#fff; }
.zl-chips{ margin-top:36px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:860px; margin-left:auto; margin-right:auto; }
.zl-chip{ padding:12px 24px; border-radius:999px; font-size:14.5px; font-weight:600; transition:transform .25s ease, box-shadow .25s ease; }
.zl-chip:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.c-orange{ background:var(--orange-soft); color:var(--orange-deep); border:1px solid #FFD9B3; }
.c-green{ background:var(--green-soft); color:var(--green-deep); border:1px solid #BEEBD4; }

/* ---------- 报考要点清单卡 ---------- */
.zl-apply{ background:var(--bg-green); }
.zl-apply-card{ margin-top:32px; background:#fff; border-radius:var(--radius-lg); padding:14px 34px; box-shadow:var(--shadow-sm); border-top:5px solid var(--green); }
.zl-apply-check li{ padding:18px 0; border-bottom:1px dashed var(--line); }
.zl-apply-check li:last-child{ border-bottom:none; }
.zl-apply-check b{ font-size:16px; color:var(--green-deep); }
.zl-apply-check p{ margin-top:6px; font-size:14.5px; color:var(--ink-2); line-height:1.9; }
.zl-apply-check a{ color:var(--orange-deep); font-weight:700; }

/* ---------- 备考/前景三列递进 ---------- */
.zl-next{ background:#fff; }
.zl-next-grid{ margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.zl-next-col{ background:var(--bg-soft); border-radius:var(--radius-lg); padding:28px 24px; display:flex; flex-direction:column; }
.zl-next-col:nth-child(2){ background:var(--green-soft); }
.zl-next-col:nth-child(3){ background:var(--bg-orange); }
.zl-nc-tag{ display:inline-block; align-self:flex-start; font-size:12.5px; font-weight:800; letter-spacing:2px; color:#fff; background:linear-gradient(135deg,var(--green),var(--green-deep)); padding:4px 14px; border-radius:999px; margin-bottom:14px; }
.zl-next-col p{ font-size:14px; color:var(--ink-2); line-height:1.9; flex:1; }
.zl-next-col a{ margin-top:16px; align-self:flex-start; }
.zl-next-col a{ color:var(--orange-deep); font-weight:700; }

/* ---------- 问答 ---------- */
.zl-faq{ background:var(--bg-soft); }
.zl-faq-list{ margin:32px auto 0; max-width:860px; display:flex; flex-direction:column; gap:14px; }
.zl-faq-list details{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:0 22px; }
.zl-faq-list details[open]{ border-color:var(--green); box-shadow:var(--shadow-sm); }
.zl-faq-list summary{ cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.zl-faq-list summary::-webkit-details-marker{ display:none; }
.zl-faq-list summary::after{ content:"+"; flex-shrink:0; 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:800; transition:transform .3s ease; }
.zl-faq-list details[open] summary::after{ transform:rotate(45deg); background:var(--green); color:#fff; }
.zl-faq-list details p{ padding:0 0 20px; font-size:14.5px; color:var(--ink-2); line-height:1.95; }
.zl-faq-list details p a{ color:var(--orange-deep); font-weight:700; }

/* ---------- 底部咨询行动带 ---------- */
.zl-cta{ background:linear-gradient(120deg,var(--green) 0%,var(--green-deep) 100%); padding:54px 0; }
.zl-cta-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.zl-cta-copy h2{ color:#fff; font-size:27px; font-weight:800; }
.zl-cta-copy p{ margin-top:8px; color:#D9F5E7; font-size:15px; }
.zl-cta-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.zl-cta-mail{ color:#fff; font-size:13.5px; opacity:.85; }
.zl-cta-mail:hover{ opacity:1; text-decoration:underline; }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .zl-band-inner{ grid-template-columns:1fr; }
  .zl-title{ font-size:30px; }
  .zl-stat-grid{ grid-template-columns:repeat(2,1fr); }
  .zl-zig, .zl-zig-r{ grid-template-columns:1fr; gap:18px; }
  .zl-zig-r .zl-zig-media{ order:0; }
  .zl-next-grid{ grid-template-columns:1fr; }
}