/* ============================================================
   shigongyuan.html · 施工员岗位详解（重构版）
   题头②左右分栏；错落四卡 / 大图图文条 / 三阶段时间轴 / 对照表 / 备考双栏 / 手风琴
   ============================================================ */

/* ---------- 题头：左右分栏（保留形态） ---------- */
.sgy-hero{ background:linear-gradient(160deg,var(--bg-orange) 0%,#fff 70%); padding:130px 0 80px; }
.sgy-hero-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; }
.sgy-crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--ink-3); margin-bottom:14px; }
.sgy-crumbs a{ color:var(--ink-2); }
.sgy-crumbs a:hover{ color:var(--orange-deep); }
.sgy-crumbs .sep{ color:var(--line); }
.sgy-hero-title{ font-size:38px; font-weight:800; letter-spacing:.5px; }
.sgy-hero-sub{ margin-top:16px; color:var(--ink-2); font-size:15.5px; line-height:1.95; }
.sgy-hero-actions{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.sgy-hero-media{ position:relative; }
.sgy-hero-media img{ width:100%; height:380px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.sgy-media-tag{ position:absolute; left:18px; bottom:18px; background:rgba(15,31,23,.82); color:#fff; font-size:13px; padding:8px 18px; border-radius:999px; }

/* ---------- 职责错落四卡（2x2 错位） ---------- */
.sgy-duty{ background:#fff; }
.sgy-offset-wrap{ margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.sgy-o-card{ background:var(--bg-soft); border-radius:var(--radius-lg); padding:30px 28px; border-left:5px solid var(--orange); box-shadow:var(--shadow-sm); }
.sgy-o-b{ border-left-color:var(--green); }
.sgy-o-c{ border-left-color:var(--green); }
.sgy-o-d{ border-left-color:var(--orange); }
.sgy-o-b{ transform:translateY(28px); }
.sgy-o-d{ transform:translateY(28px); }
.sgy-o-no{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:2px; color:var(--orange-deep); background:var(--orange-soft); padding:4px 14px; border-radius:999px; margin-bottom:14px; }
.sgy-o-card:nth-child(even) .sgy-o-no{ color:var(--green-deep); background:var(--green-soft); }
.sgy-o-card h3{ font-size:20px; margin-bottom:10px; }
.sgy-o-card p{ font-size:14.5px; color:var(--ink-2); line-height:1.9; }

/* ---------- 现场实录：大图图文条 ---------- */
.sgy-strip{ position:relative; padding:110px 0; overflow:hidden; }
.sgy-strip-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sgy-strip-mask{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,31,23,.88) 0%, rgba(15,31,23,.55) 60%, rgba(15,31,23,.35) 100%); }
.sgy-strip-inner{ position:relative; max-width:640px; }
.sgy-strip-kicker{ display:inline-block; font-size:13px; font-weight:800; letter-spacing:3px; color:var(--orange-2); margin-bottom:12px; }
.sgy-strip h2{ font-size:30px; color:#fff; line-height:1.45; }
.sgy-strip p{ margin-top:16px; color:#DCE9E1; font-size:15px; line-height:2; }

/* ---------- 晋升三阶段竖向时间轴 ---------- */
.sgy-career{ background:var(--bg-orange); }
.sgy-timeline{ margin:44px auto 0; max-width:760px; position:relative; padding-left:34px; }
.sgy-timeline::before{ content:""; position:absolute; left:10px; top:8px; bottom:8px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--orange),var(--green)); }
.sgy-timeline li{ position:relative; padding:0 0 34px 28px; }
.sgy-timeline li:last-child{ padding-bottom:0; }
.sgy-timeline li::before{ content:""; position:absolute; left:-31px; top:6px; width:17px; height:17px; border-radius:50%; background:#fff; border:5px solid var(--orange-deep); }
.sgy-timeline li:nth-child(even)::before{ border-color:var(--green-deep); }
.sgy-tl-stage{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:2px; color:var(--green-deep); background:var(--green-soft); padding:3px 12px; border-radius:999px; margin-bottom:10px; }
.sgy-timeline b{ font-size:18px; }
.sgy-timeline p{ margin-top:6px; font-size:14.5px; color:var(--ink-2); line-height:1.9; }

/* ---------- 报考要点对照表 ---------- */
.sgy-apply{ background:#fff; }
.sgy-apply-table{ margin-top:32px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.sgy-apply-table table{ width:100%; border-collapse:collapse; }
.sgy-apply-table th, .sgy-apply-table td{ padding:18px 24px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); font-size:14.5px; }
.sgy-apply-table tr:last-child th, .sgy-apply-table tr:last-child td{ border-bottom:none; }
.sgy-apply-table th{ width:130px; background:var(--green-soft); color:var(--green-deep); font-weight:800; }
.sgy-apply-table td{ color:var(--ink-2); line-height:1.9; }
.sgy-apply-table a{ color:var(--orange-deep); font-weight:700; }

/* ---------- 备考路径双栏 ---------- */
.sgy-study{ background:var(--bg-soft); }
.sgy-study-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
.sgy-study-body p{ margin-top:14px; font-size:15px; color:var(--ink-2); line-height:1.95; }
.sgy-study-points{ margin:20px 0 4px; display:flex; flex-direction:column; gap:10px; }
.sgy-study-points li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--ink); }
.sgy-study-points li::before{ content:""; position:absolute; left:0; top:9px; width:12px; height:12px; border-radius:3px; background:linear-gradient(135deg,var(--orange),var(--green)); }
.sgy-study-actions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; }
.sgy-study-media img{ width:100%; height:320px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }

/* ---------- 手风琴问答 ---------- */
.sgy-faq{ background:#fff; }
.sgy-faq-list{ margin:32px auto 0; max-width:860px; display:flex; flex-direction:column; gap:14px; }
.sgy-faq-list details{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:0 22px; }
.sgy-faq-list details[open]{ background:#fff; border-color:var(--green); box-shadow:var(--shadow-sm); }
.sgy-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; }
.sgy-faq-list summary::-webkit-details-marker{ display:none; }
.sgy-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; }
.sgy-faq-list details[open] summary::after{ transform:rotate(45deg); background:var(--green); color:#fff; }
.sgy-faq-list details p{ padding:0 0 20px; font-size:14.5px; color:var(--ink-2); line-height:1.95; }
.sgy-faq-list details p a{ color:var(--orange-deep); font-weight:700; }

/* ---------- 底部咨询行动带 ---------- */
.sgy-cta{ background:linear-gradient(120deg,var(--orange) 0%,var(--orange-deep) 100%); padding:60px 0; }
.sgy-cta-inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; }
.sgy-cta-copy h2{ color:#fff; font-size:28px; font-weight:800; }
.sgy-cta-copy p{ margin-top:10px; color:#FFE9D6; font-size:15px; line-height:1.9; }
.sgy-cta-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
.sgy-cta-img{ width:100%; height:220px; object-fit:cover; border-radius:var(--radius-lg); border:4px solid rgba(255,255,255,.4); }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .sgy-hero-grid{ grid-template-columns:1fr; }
  .sgy-hero-media img{ height:280px; }
  .sgy-offset-wrap{ grid-template-columns:1fr; }
  .sgy-o-b, .sgy-o-d{ transform:none; }
  .sgy-study-grid, .sgy-cta-inner{ grid-template-columns:1fr; }
}