/* ============================================================
   jixieyuan.css · 机械员岗位详解（重构版）
   题头形态⑧：居中窄版题头 + 标签墙（保留）
   中间区块：双线 / 五步步骤流 / 图带 / 磁贴 / 清单 / 备考方向 / FAQ
   类名前缀 jm-
   ============================================================ */

/* ---------- 题头：居中窄版 + 标签墙 ---------- */
.jm-hero{ background:linear-gradient(180deg,var(--bg-soft) 0%,#fff 100%); padding:120px 0 60px; }
.jm-hero-box{ max-width:760px; margin:0 auto; text-align:center; }
.jm-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:3px; color:var(--orange-deep); margin-bottom:14px; }
.jm-kicker::before{ content:""; width:26px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--orange),var(--green)); }
.jm-kicker.k-green{ color:var(--green-deep); }
.jm-title{ font-size:44px; font-weight:800; color:var(--ink); letter-spacing:1px; }
.jm-sub{ margin-top:16px; color:var(--ink-2); font-size:15.5px; line-height:1.9; }
.jm-hero-media{ margin-top:28px; }
.jm-hero-media img{ width:100%; height:300px; object-fit:cover; border-radius:20px; box-shadow:var(--shadow-md); }
.jm-tags{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.jm-tags li{ padding:7px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--green-deep); box-shadow:var(--shadow-sm); }

/* ---------- 区块标题通用 ---------- */
.jm-head{ margin-bottom:36px; }
.jm-head .jm-kicker{ margin-bottom:10px; }
.jm-h2{ font-size:32px; font-weight:800; letter-spacing:.5px; }
.jm-sub{ margin-top:10px; color:var(--ink-2); font-size:15px; max-width:720px; }
.jm-head.ta-c{ text-align:center; }
.jm-head.ta-c .jm-sub{ margin-left:auto; margin-right:auto; }

/* ---------- 区块1：双线 ---------- */
.jm-dual{ background:var(--bg-orange); }
.jm-duogrid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.jm-duocol{ background:#fff; border-radius:var(--radius-lg); padding:30px 28px; box-shadow:var(--shadow-sm); }
.jm-duocol h3{ font-size:19px; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.jmd-tag{ font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; color:#fff; }
.t-use{ background:var(--orange); }
.t-keep{ background:var(--green); }
.jm-duocol ol{ display:flex; flex-direction:column; gap:12px; }
.jm-duocol li{ font-size:14.5px; color:var(--ink-2); line-height:1.7; }
.jm-duocol b{ color:var(--ink); font-weight:700; margin-right:6px; }

/* ---------- 区块2：五步步骤流 ---------- */
.jm-stepflow{ background:#fff; }
.jm-flow5{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.jm-s5{ background:var(--bg-soft); border-radius:var(--radius); padding:24px 18px; border:1px solid var(--line); }
.jms-num{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff; font-weight:800; margin-bottom:12px; }
.jm-s5 h3{ font-size:16px; margin-bottom:8px; }
.jm-s5 p{ font-size:13px; color:var(--ink-2); line-height:1.75; }

/* ---------- 区块3：场景图带 ---------- */
.jm-scene{ background:var(--bg-green); padding-bottom:72px; }
.jm-sceneband{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.jm-sceneband img{ width:100%; height:360px; object-fit:cover; }
.jm-sceneband figcaption{ position:absolute; left:0; right:0; bottom:0; padding:60px 36px 30px; background:linear-gradient(transparent,rgba(15,31,23,.88)); color:#fff; }
.jm-sceneband figcaption h3{ font-size:22px; margin-bottom:8px; }
.jm-sceneband figcaption p{ font-size:14.5px; color:rgba(255,255,255,.9); line-height:1.8; max-width:640px; }

/* ---------- 区块4：适合人群磁贴 ---------- */
.jm-fit{ background:#fff; }
.jm-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
.jm-tile{ background:var(--bg-soft); border-radius:var(--radius); padding:26px 22px; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.jm-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--orange); }
.jm-tile b{ display:block; font-size:17px; margin-bottom:8px; color:var(--orange-deep); }
.jm-tile p{ font-size:13.5px; color:var(--ink-2); line-height:1.8; }

/* ---------- 区块5：报考清单 ---------- */
.jm-apply-wrap{ max-width:900px; margin:0 auto; }
.jm-checklist{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.jm-checklist li{ background:#fff; padding:18px 26px; font-size:14.5px; color:var(--ink-2); line-height:1.85; border-bottom:1px solid var(--line); }
.jm-checklist li:nth-child(odd){ background:var(--bg-soft); }
.jm-checklist li:last-child{ border-bottom:none; }
.jm-checklist b{ color:var(--green-deep); font-weight:800; margin-right:8px; }
.jm-apply-links{ margin-top:24px; display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- 区块6：备考方向 ---------- */
.jm-prep{ background:#fff; }
.jm-prep-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; background:var(--bg-orange); border-radius:var(--radius-lg); padding:44px; }
.jm-prep-copy p{ margin-top:14px; color:var(--ink-2); line-height:1.9; }
.jm-prep-copy .btn{ margin-top:22px; }
.jm-prep-media img{ width:100%; height:260px; object-fit:cover; border-radius:var(--radius); }

/* ---------- 区块7：FAQ ---------- */
.jm-faq-wrap{ max-width:860px; margin:0 auto; }
.jm-acc{ margin-top:30px; }
.jm-acc-item{ background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden; }
.jm-acc-head{ width:100%; text-align:left; padding:18px 22px; font-size:16px; font-weight:700; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.jm-acc-arrow{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--bg-orange); position:relative; transition:transform .3s ease; }
.jm-acc-arrow::before{ content:""; position:absolute; left:50%; top:50%; width:10px; height:2px; background:var(--orange-deep); transform:translate(-50%,-50%); }
.jm-acc-arrow::after{ content:""; position:absolute; left:50%; top:50%; width:2px; height:10px; background:var(--orange-deep); transform:translate(-50%,-50%); transition:opacity .3s ease; }
.jm-acc-item.open .jm-acc-arrow{ transform:rotate(180deg); }
.jm-acc-item.open .jm-acc-arrow::after{ opacity:0; }
.jm-acc-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.jm-acc-item.open .jm-acc-body{ max-height:320px; }
.jm-acc-body p{ padding:0 22px 20px; color:var(--ink-2); font-size:14.5px; line-height:1.9; }
.jm-acc-body a{ color:var(--orange-deep); font-weight:600; }

/* ---------- 底部 CTA ---------- */
.jm-cta{ background:linear-gradient(120deg,var(--orange),var(--orange-deep)); padding:56px 0; color:#fff; }
.jm-cta .cta-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.jm-cta .cta-copy h2{ font-size:28px; font-weight:800; }
.jm-cta .cta-copy p{ margin-top:10px; color:rgba(255,255,255,.92); max-width:520px; line-height:1.8; }
.jm-cta .cta-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .jm-title{ font-size:36px; }
  .jm-duogrid{ grid-template-columns:1fr; }
  .jm-flow5{ grid-template-columns:1fr 1fr; }
  .jm-tiles{ grid-template-columns:1fr 1fr; }
  .jm-prep-inner{ grid-template-columns:1fr; padding:28px; }
}
@media (max-width:640px){
  .jm-title{ font-size:30px; }
  .jm-flow5{ grid-template-columns:1fr; }
  .jm-tiles{ grid-template-columns:1fr; }
  .jm-cta .cta-inner{ flex-direction:column; align-items:flex-start; }
}