/* ==========================================================================
   about-zhaopin.html · 招贤纳士 — F12 角标层叠
   设计：职位卡四角挂角标（急招/全职/实习）→ 福利六格 → 投递方式 → CTA
   命名空间：zp-
   ========================================================================== */

/* ===== ① Banner ===== */
.zp-hero{position:relative;height:min(54vh,440px);min-height:340px;display:flex;align-items:flex-end;overflow:hidden}
.zp-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zp-hero .mask-ink{background:linear-gradient(180deg,rgba(29,52,38,.2),rgba(29,52,38,.6) 80%)}
.zp-hero-inner{position:relative;z-index:2;color:#F7F5EE;padding-block:42px 52px}
.zp-hero-inner h1{color:#FCFBF7;font-size:clamp(26px,3.8vw,44px);letter-spacing:.06em;margin-top:14px}
.zp-hero-inner .sub{max-width:600px;margin-top:14px;color:rgba(247,245,238,.88);line-height:1.9}

/* ===== ② 用人脾气 ===== */
.zp-intro-box{max-width:760px}
.zp-intro-desc{margin-inline:auto}
.zp-intro{background:var(--moon-50);text-align:center}

/* ===== ③ 福利清单 ===== */
.zp-benefits{background:var(--moon-100);padding-block:clamp(30px,4vw,48px)}
.zp-benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.zp-benefit-grid div{
  background:#fff;border-radius:var(--radius);padding:24px 22px;
  box-shadow:var(--shadow-soft);position:relative;padding-left:52px;
}
.zp-benefit-grid div::before{
  content:"";position:absolute;left:22px;top:30px;width:12px;height:12px;
  background:var(--cinnabar-500);border-radius:2px;transform:rotate(45deg);
}
.zp-benefit-grid b{font-family:var(--serif);font-size:17.5px;color:var(--ink-900);letter-spacing:.04em}
.zp-benefit-grid p{margin-top:8px;font-size:13.5px;color:var(--ink-500);line-height:1.85}

/* ===== ④ 职位列表（角标层叠） ===== */
.zp-jobs{background:var(--moon-50)}
.zp-job-list{display:grid;gap:34px;margin-top:48px;max-width:960px;margin-inline:auto}
.zp-job{
  position:relative;background:#FFFCF4;border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow-soft);
  transition:transform .3s ease,box-shadow .3s ease;
}
.zp-job:nth-child(odd){transform:rotate(-.4deg)}
.zp-job:nth-child(even){transform:rotate(.4deg)}
.zp-job:hover{transform:rotate(0) translateY(-4px);box-shadow:var(--shadow-lift)}
/* 角标：挂在卡片角上 */
.zp-badge{
  position:absolute;font-size:12.5px;letter-spacing:.14em;font-weight:600;
  padding:6px 14px;border-radius:6px;color:#fff;
}
.zp-badge-hot{top:-13px;right:28px;background:var(--cinnabar-500);box-shadow:0 6px 16px rgba(192,47,43,.35)}
.zp-badge-full{top:-13px;right:28px;background:var(--bamboo-600);box-shadow:0 6px 16px rgba(78,124,91,.3)}
.zp-badge-now{top:-13px;right:28px;background:var(--ink-900);box-shadow:0 6px 16px rgba(38,37,31,.3)}
.zp-job-head{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:16px}
.zp-job-head h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:.04em}
.zp-salary{font-size:14px;color:var(--cinnabar-600);font-weight:600;letter-spacing:.04em}
.zp-job-body{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:20px}
.zp-col h4{font-size:14px;color:var(--bamboo-700);letter-spacing:.14em;margin-bottom:10px}
.zp-col ul{display:grid;gap:8px}
.zp-col li{font-size:14px;color:var(--ink-700);line-height:1.85;padding-left:18px;position:relative}
.zp-col li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:2px;background:var(--bamboo-400)}

/* ===== ⑤ 投递方式 ===== */
.zp-apply{background:linear-gradient(120deg,var(--bamboo-900),var(--bamboo-700));color:var(--moon-100)}
.zp-apply-inner{text-align:center;max-width:720px;margin-inline:auto}
.zp-apply .kicker{color:var(--cinnabar-400)}
.zp-apply .kicker::before{background:var(--cinnabar-400)}
.zp-apply-inner h2{color:#FCFBF7;margin-top:12px}
.zp-mail{
  display:inline-block;margin-top:26px;font-family:var(--serif);
  font-size:clamp(22px,3.4vw,34px);color:#F3D9A4;letter-spacing:.04em;
  border-bottom:2px solid var(--cinnabar-400);padding-bottom:6px;
}
.zp-mail:hover{color:#fff}
.zp-apply-steps{margin-top:26px;display:grid;gap:10px;text-align:left;max-width:520px;margin-inline:auto}
.zp-apply-steps li{
  color:rgba(247,245,238,.85);font-size:14.5px;line-height:1.9;
  padding-left:34px;position:relative;counter-increment:step;
}
.zp-apply-steps{counter-reset:step}
.zp-apply-steps li::before{
  content:counter(step);position:absolute;left:0;top:2px;
  width:22px;height:22px;border:1px solid var(--cinnabar-400);border-radius:50%;
  color:var(--cinnabar-400);font-size:12px;display:flex;align-items:center;justify-content:center;
}
.zp-note{margin-top:22px;font-size:13.5px;color:rgba(247,245,238,.65)}

/* ===== ⑥ CTA ===== */
.zp-cta{text-align:center;background:var(--moon-100)}
.zp-cta-inner{padding-block:clamp(46px,6vw,72px)}
.zp-cta-inner h2{font-size:clamp(22px,3vw,34px)}
.zp-cta-inner p{max-width:520px;margin:14px auto 26px;color:var(--ink-500);line-height:2}

/* ===== 响应式 ===== */
@media (max-width:920px){
  .zp-benefit-grid{grid-template-columns:1fr 1fr}
  .zp-job-body{grid-template-columns:1fr;gap:18px}
  .zp-job:nth-child(odd),.zp-job:nth-child(even){transform:none}
}
@media (max-width:640px){
  .zp-benefit-grid{grid-template-columns:1fr}
  .zp-job-head{flex-direction:column;gap:6px}
}