/* ============================================================
   gangwei-jineng.html · 岗位技能提升
   题头②变体 左右分栏（左文右图）
   区块：3 卡提升方向 / 图文交错培训 / 斑马纹技能 / zigzag 结合 / FAQ / 行动带
   ============================================================ */

/* ---------- 题头：左右分栏 ---------- */
.jn-hero{
  background:linear-gradient(135deg, var(--bg-green) 0%, #fff 70%);
  padding:130px 0 70px;
}
.jn-hero-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:50px; align-items:center;
}
.jn-crumbs{ color:var(--ink-3); padding:0 0 20px; }
.jn-crumbs a{ color:var(--ink-2); }
.jn-kicker{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:3px;
  color:var(--green-deep); margin-bottom:14px;
}
.jn-title{ font-size:40px; font-weight:800; line-height:1.3; }
.jn-sub{ margin-top:16px; color:var(--ink-2); font-size:16px; line-height:1.9; max-width:540px; }
.jn-hero-actions{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.jn-hero-img{ position:relative; }
.jn-hero-img img{
  border-radius:22px; width:100%; height:380px; object-fit:cover; box-shadow:var(--shadow-md);
}
.jn-hero-chip{
  position:absolute; right:-14px; top:-18px;
  background:#fff; border-radius:999px; padding:12px 20px; font-size:13.5px; font-weight:700;
  color:var(--green-deep); box-shadow:var(--shadow-md); border:2px solid var(--green-soft);
}

/* ---------- 通用 ---------- */
.jn-sec{ padding:78px 0; }
.jn-head{ margin-bottom:40px; max-width:760px; }
.jn-head .sec-title{ margin-top:6px; }

/* ---------- 区块1 3 列提升方向 ---------- */
.jn-dir{ background:#fff; }
.jn-dir-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.jn-dcard{
  position:relative; background:var(--bg-soft); border-radius:20px; padding:32px 28px;
  border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease;
}
.jn-dcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.jn-dico{
  display:inline-block; width:48px; height:48px; border-radius:14px; margin-bottom:18px;
}
.jn-di1{ background:linear-gradient(135deg,var(--orange),var(--orange-deep)); }
.jn-di2{ background:linear-gradient(135deg,var(--green),var(--green-deep)); }
.jn-di3{ background:linear-gradient(135deg,var(--orange-2),var(--green)); }
.jn-dcard h3{ font-size:19px; font-weight:800; margin-bottom:10px; }
.jn-dcard p{ font-size:14.5px; color:var(--ink-2); line-height:1.85; }
.jn-dcard p a{ color:var(--green-deep); font-weight:600; }

/* ---------- 区块2 图文交错 培训 ---------- */
.jn-train{ background:var(--bg-orange); }
.jn-train-wrap{
  display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center;
}
.jn-train-img img{
  border-radius:20px; width:100%; height:340px; object-fit:cover; box-shadow:var(--shadow-md);
}
.jn-train-text p{ color:var(--ink-2); line-height:1.95; margin-bottom:14px; font-size:15px; }
.jn-train-list{ margin:16px 0 22px; display:flex; flex-direction:column; gap:10px; }
.jn-train-list li{
  position:relative; padding-left:30px; font-size:14.5px; color:var(--ink); line-height:1.8;
}
.jn-train-list li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:14px;
  border-radius:4px; background:linear-gradient(135deg,var(--green),var(--green-deep));
}

/* ---------- 区块3 斑马纹技能列表 ---------- */
.jn-skill{ background:#fff; }
.jn-skill-list{
  border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.jn-skill-row{
  display:grid; grid-template-columns:160px 1fr; gap:24px; align-items:start;
  padding:22px 28px; background:#fff;
}
.jn-skill-row:nth-child(odd){ background:var(--bg-soft); }
.jn-skill-row b{
  font-size:16px; font-weight:800; color:var(--orange-deep);
  padding-top:2px; position:relative; padding-left:16px;
}
.jn-skill-row b::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px;
  border-radius:2px; background:linear-gradient(180deg,var(--orange),var(--green));
}
.jn-skill-row p{ font-size:14.5px; color:var(--ink-2); line-height:1.85; }

/* ---------- 区块4 zigzag 备考结合 ---------- */
.jn-combine{ background:var(--bg-green); }
.jn-combine-wrap{
  display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
}
.jn-combine-text p{ color:var(--ink-2); line-height:1.95; margin-bottom:14px; font-size:15px; }
.jn-combine-text p a{ color:var(--green-deep); font-weight:600; border-bottom:1px dashed var(--green-2); }
.jn-combine-img{ position:relative; }
.jn-combine-img img{
  border-radius:20px; width:100%; height:320px; object-fit:cover; box-shadow:var(--shadow-md);
}
.jn-combine-tag{
  position:absolute; left:-16px; bottom:-18px;
  background:var(--ink); color:#fff; border-radius:12px; padding:12px 20px;
  font-size:13.5px; font-weight:700; box-shadow:var(--shadow-md);
  border-left:4px solid var(--green);
}

/* ---------- 区块5 FAQ ---------- */
.jn-faq{ background:#fff; }
.jn-faq-list{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.jn-faq{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:0 24px;
}
.jn-faq[open]{ border-color:var(--green-2); background:#fff; box-shadow:var(--shadow-sm); }
.jn-faq summary{
  list-style:none; cursor:pointer; padding:20px 0; font-size:16px; font-weight:700;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.jn-faq summary::-webkit-details-marker{ display:none; }
.jn-faq summary::after{
  content:"+"; font-size:22px; color:var(--green-deep); font-weight:400; transition:transform .3s ease;
}
.jn-faq[open] summary::after{ transform:rotate(45deg); }
.jn-faq p{ padding:0 0 22px; color:var(--ink-2); line-height:1.95; font-size:15px; }
.jn-faq p a{ color:var(--green-deep); font-weight:600; }

/* ---------- 行动带 ---------- */
.jn-cta{
  background:linear-gradient(120deg, var(--green-deep) 0%, var(--green) 60%, #0E9F64 100%);
  color:#fff; padding:60px 0;
}
.jn-cta-inner{
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
}
.jn-cta-copy h2{ font-size:28px; font-weight:800; margin-bottom:10px; }
.jn-cta-copy p{ font-size:15px; opacity:.95; line-height:1.85; }
.jn-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .jn-hero{ padding:110px 0 50px; }
  .jn-hero-grid{ grid-template-columns:1fr; gap:30px; }
  .jn-title{ font-size:30px; }
  .jn-hero-img img{ height:260px; }
  .jn-hero-chip{ right:8px; top:-14px; }
  .jn-dir-grid{ grid-template-columns:1fr; }
  .jn-train-wrap{ grid-template-columns:1fr; gap:28px; }
  .jn-combine-wrap{ grid-template-columns:1fr; gap:28px; }
  .jn-skill-row{ grid-template-columns:1fr; gap:8px; }
  .jn-cta-inner{ grid-template-columns:1fr; }
  .jn-cta-actions{ justify-content:flex-start; }
}