/* ============================================================
   质量员岗位页 gangwei-zhiliangyuan.html 专属样式
   ============================================================ */

/* 首屏：质量员测墙面平整度 */
.zl-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 150px 0 130px;
}
.zl-hero .ph-bg { position: absolute; inset: 0; z-index: 0; }
.zl-hero .ph-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zl-hero .ph-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(68,147,196,.55) 0%, rgba(21,50,56,.78) 55%, rgba(21,50,56,.9) 100%);
}
.zl-hero .container { position: relative; z-index: 2; }
.zl-hero .crumbs a { color: #D8EAF5; }
.zl-hero .crumbs { color: #8FC4E4; margin-bottom: 22px; }
.zl-hero h1 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.15; margin: 0 0 18px; font-weight: 800; }
.zl-hero h1 em { font-style: normal; color: #8ED6B3; }
.zl-hero .ph-desc { font-size: 18px; max-width: 620px; color: #EAF3FA; line-height: 1.9; margin: 0 0 30px; }
.zl-hero .ph-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* 折线分割 */
.split { display: block; width: 100%; overflow: hidden; line-height: 0; }
.split svg { display: block; width: 100%; height: 56px; }
.split-green polyline { stroke: var(--green-500, #41B383); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.split-blue polyline { stroke: var(--blue-500, #4493C4); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.split-yellow polyline { stroke: var(--yellow-400, #FFCE33); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.split.flip svg { transform: scaleY(-1); }

/* 岗位介绍：偏右文左图 */
.zl-intro .two-col { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.zl-intro .lead { font-size: 17px; line-height: 2; color: var(--ink-700, #2E4A50); margin: 0 0 16px; }
.zl-intro .intro-img { border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(21,50,56,.16); }
.zl-intro .intro-img img { width: 100%; height: auto; display: block; }

/* 质量职责时间线（竖版，与施工员四宫格区分） */
.zl-timeline { background: var(--paper-2, #EDF5F0); }
.zl-timeline .timeline { margin-top: 10px; }
.zl-timeline .tl-item { padding: 0 0 26px 30px; position: relative; border-left: 2px solid var(--blue-100, #D8EAF5); margin-left: 8px; }
.zl-timeline .tl-dot {
  position: absolute; left: -11px; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-500, #4493C4); border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--blue-100, #D8EAF5);
}
.zl-timeline .tl-item:nth-child(2) .tl-dot { background: var(--green-500, #41B383); box-shadow: 0 0 0 2px var(--green-100, #D7EEE2); }
.zl-timeline .tl-item:nth-child(3) .tl-dot { background: var(--yellow-400, #FFCE33); box-shadow: 0 0 0 2px var(--yellow-200, #FFE68F); }
.zl-timeline .tl-item:nth-child(4) .tl-dot { background: var(--ink-700, #2E4A50); }
.zl-timeline .tl-item h3 { font-size: 19px; margin: 0 0 8px; color: var(--ink-900, #153238); }
.zl-timeline .tl-item p { font-size: 15px; line-height: 1.9; color: var(--ink-500, #58727A); margin: 0; }
.zl-timeline .tl-item .tl-when { font-size: 13px; color: var(--ink-300, #8AA3AA); letter-spacing: 1px; }

/* 验收点卡片 */
.zl-check .check-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.zl-check .check-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(21,50,56,.1); }
.zl-check .check-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.zl-check .check-card .body { padding: 18px 20px 22px; }
.zl-check .check-card .tag { margin-bottom: 10px; display: inline-block; }
.zl-check .check-card h3 { font-size: 18px; margin: 0 0 8px; color: var(--ink-900, #153238); }
.zl-check .check-card p { font-size: 14px; line-height: 1.85; color: var(--ink-500, #58727A); margin: 0; }

/* 报考与备考：清单式 */
.zl-exam .panel { background:#fff; border-radius:14px; padding:30px 28px; box-shadow:0 12px 30px rgba(21,50,56,.08); }
.zl-exam .grid-2 { gap: 26px; }
.zl-exam .panel h3 { margin: 0 0 14px; font-size: 21px; color: var(--ink-900, #153238); }
.zl-exam .panel h3 .ico { display:inline-block; width:8px; height:22px; background:var(--blue-500,#4493C4); border-radius:4px; vertical-align:-3px; margin-right:10px; }
.zl-exam .panel.green h3 .ico { background: var(--green-500,#41B383); }
.zl-exam .panel ul { margin:0; padding-left:1.2em; }
.zl-exam .panel li { font-size:15px; line-height:2; color: var(--ink-700,#2E4A50); }

/* FAQ */
.zl-faq .acc { margin-bottom: 14px; }

/* CTA */
.zl-cta { position: relative; overflow: hidden; color:#fff; text-align:center; padding:90px 0; }
.zl-cta .cta-bg-img { position:absolute; inset:0; z-index:0; }
.zl-cta .cta-bg-img img { width:100%; height:100%; object-fit:cover; display:block; }
.zl-cta .cta-bg-img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(68,147,196,.8), rgba(21,50,56,.92)); }
.zl-cta .container { position: relative; z-index: 2; }
.zl-cta h2 { font-size: clamp(26px,3.4vw,40px); margin: 0 0 14px; }
.zl-cta p { max-width: 620px; margin: 0 auto 26px; color:#D8EAF5; line-height:1.9; }

/* 延伸服务 */
.zl-relate { padding: 34px 0 46px; }
.zl-relate .relate-links { display:flex; flex-wrap:wrap; gap:12px; }
.zl-relate .relate-links a { border:1px solid var(--green-100,#D7EEE2); background:var(--green-50,#EAF6EF); color:var(--green-500,#41B383); padding:8px 18px; border-radius:999px; font-size:14px; }

@media (max-width: 900px) {
  .zl-hero { padding: 120px 0 90px; }
  .zl-intro .two-col { grid-template-columns: 1fr; gap: 28px; }
  .zl-check .check-row { grid-template-columns: 1fr; }
  .zl-exam .grid-2 { grid-template-columns: 1fr; }
}