/* =========================================================
   加入我们（/join/）：内页主视觉（inner.css 的 .pb）→ 在宝锐工作（.jw）→ 招聘岗位（.jb）→ 员工风采（.jt，卡片样式在 news.css）
   由区块 block.json 引用，只在这个页面加载。板块标题用「关于宝锐」的 .ih（inner.css）；
   缓动、进场、悬停上浮、箭头位移和「联系我们」、产品中心一致；岗位展开和资源中心常见问题同一节奏。
   ========================================================= */

/* 文字链接 + 圆形箭头（了解宝锐、更多员工风采） */
.jw-more{display:inline-flex;align-items:center;gap:calc(.1 * var(--r));font-size:max(14px,calc(.15 * var(--r)));font-weight:600;color:var(--blue)}
.jw-more i{display:grid;place-items:center;width:max(22px,calc(.3 * var(--r)));height:max(22px,calc(.3 * var(--r)));border-radius:50%;background:#eef4fc;transition:background .4s,color .4s,transform .5s var(--ease)}
.jw-more svg{width:calc(.13 * var(--r))}
.jw-more:hover i{color:#fff;background:var(--blue);transform:translateX(4px)}

/* ---------- 在宝锐工作 ---------- */
.jw{position:relative;padding:calc(1 * var(--r)) 0 calc(.9 * var(--r));background:radial-gradient(40% 60% at 100% 0,rgba(214,232,255,.45),transparent 70%),#fff}
.jw-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(.8 * var(--r));align-items:start}
.jw-lead{margin-top:calc(.32 * var(--r));font-size:max(15px,calc(.17 * var(--r)));line-height:1.9;color:var(--body)}
.jw-left .jw-more{margin-top:calc(.34 * var(--r))}
.jw-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(.24 * var(--r))}
.jw-card{position:relative;overflow:hidden;padding:calc(.36 * var(--r)) calc(.32 * var(--r)) calc(.32 * var(--r));border:1px solid #e8edf4;border-radius:calc(.2 * var(--r));background:#fff;box-shadow:0 10px 30px rgba(15,37,87,.05);transition:transform .6s var(--ease),box-shadow .6s,border-color .6s}
.jw-no{position:absolute;right:calc(.26 * var(--r));top:calc(.18 * var(--r));font-family:var(--f-num);font-size:max(28px,calc(.44 * var(--r)));font-weight:700;line-height:1;color:#eef3fa;transition:color .6s}
.jw-ic{position:relative;display:grid;place-items:center;width:max(40px,calc(.54 * var(--r)));height:max(40px,calc(.54 * var(--r)));border-radius:16px;color:var(--blue);background:#eef4fc;transition:background .5s,color .5s,transform .6s var(--ease-back)}
.jw-ic svg{width:max(21px,calc(.28 * var(--r)));height:max(21px,calc(.28 * var(--r)))}
.jw-card h3{position:relative;margin-top:calc(.26 * var(--r));font-size:max(17px,calc(.2 * var(--r)));font-weight:700;line-height:1.4;color:var(--ink)}
.jw-card p{position:relative;margin-top:calc(.08 * var(--r));font-size:max(14px,calc(.15 * var(--r)));line-height:1.8;color:var(--body)}
.jw-card:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 28px 60px rgba(15,37,87,.13)}
.jw-card:hover .jw-ic{color:#fff;background:linear-gradient(135deg,var(--blue-2),var(--blue-deep));transform:rotate(-6deg) scale(1.05)}
.jw-card:hover .jw-no{color:#e1ebf8}

/* ---------- 招聘岗位 ---------- */
.jb{position:relative;padding:calc(.9 * var(--r)) 0 calc(.9 * var(--r));background:radial-gradient(45% 50% at 0 30%,rgba(214,232,255,.5),transparent 70%),linear-gradient(#f5f8fd,#f8fbff)}
.jb-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:max(15px,calc(.2 * var(--r)))}
.jb-filter{display:flex;flex-wrap:wrap;gap:calc(.08 * var(--r))}
.jb-filter button{height:max(27px,calc(.36 * var(--r)));padding:0 calc(.16 * var(--r));border-radius:99px;font-size:max(13px,calc(.14 * var(--r)));color:#4a4f57;background:#fff;box-shadow:inset 0 0 0 1px #e1e7f0;transition:color .3s,background .3s,box-shadow .3s}
.jb-filter button:hover{color:var(--blue)}
.jb-filter button.on{color:#fff;background:linear-gradient(135deg,var(--blue-2),var(--blue-deep));box-shadow:0 8px 18px rgba(23,100,189,.25)}
.jb-list{display:flex;flex-direction:column;gap:calc(.14 * var(--r));margin-top:calc(.44 * var(--r))}
.jb-item{border-radius:calc(.18 * var(--r));background:#fff;box-shadow:0 10px 30px rgba(15,37,87,.06),0 0 0 1px rgba(15,37,87,.03);transition:box-shadow .5s,transform .5s var(--ease)}
.jb-item:hover{box-shadow:0 20px 46px rgba(15,37,87,.1),0 0 0 1px rgba(31,122,216,.15)}
.jb-item[open]{box-shadow:0 24px 54px rgba(15,37,87,.12),0 0 0 1px rgba(31,122,216,.2)}
.jb-item summary{display:flex;align-items:center;gap:max(15px,calc(.2 * var(--r)));padding:calc(.26 * var(--r)) calc(.34 * var(--r));list-style:none;cursor:pointer}
.jb-item summary::-webkit-details-marker{display:none}
.jb-title{flex:1;min-width:0}
.jb-title b{display:block;font-size:max(17px,calc(.21 * var(--r)));font-weight:700;line-height:1.45;color:var(--ink);transition:color .3s}
.jb-item summary:hover .jb-title b{color:var(--blue-2)}
.jb-meta{display:flex;flex-wrap:wrap;gap:calc(.06 * var(--r));margin-top:calc(.08 * var(--r))}
.jb-meta span{display:inline-flex;align-items:center;height:max(18px,calc(.24 * var(--r)));padding:0 calc(.1 * var(--r));border-radius:6px;font-size:max(12px,calc(.12 * var(--r)));color:#5f6670;background:#f2f5fa}
.jb-meta span:first-child{color:var(--blue);background:#e8f1fc}
.jb-count{flex:none;font-size:max(13px,calc(.14 * var(--r)));color:var(--muted)}
.jb-toggle{position:relative;flex:none;width:max(24px,calc(.32 * var(--r)));height:max(24px,calc(.32 * var(--r)));border-radius:50%;background:#eef4fc;transition:background .35s,transform .5s var(--ease)}
.jb-toggle::before,.jb-toggle::after{content:"";position:absolute;left:50%;top:50%;width:calc(.12 * var(--r));height:1.6px;margin:-.calc(.08 * var(--r)) 0 0 calc(-.06 * var(--r));border-radius:1px;background:var(--blue);transition:transform .45s var(--ease),background .35s}
.jb-toggle::after{transform:rotate(90deg)}
.jb-item[open] .jb-toggle{background:var(--blue);transform:rotate(180deg)}
.jb-item[open] .jb-toggle::before,.jb-item[open] .jb-toggle::after{background:#fff}
.jb-item[open] .jb-toggle::after{transform:none}
.jb-body{padding:0 calc(.34 * var(--r)) calc(.3 * var(--r));animation:jbIn .5s var(--ease)}
@keyframes jbIn{from{opacity:0;transform:translateY(-8px)}}
.jb-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(.4 * var(--r));padding-top:calc(.24 * var(--r));border-top:1px solid #edf0f5}
.jb-cols h4{font-size:max(14px,calc(.15 * var(--r)));font-weight:700;color:var(--ink)}
.jb-cols ul{margin-top:calc(.1 * var(--r))}
.jb-cols li{position:relative;padding-left:calc(.16 * var(--r));font-size:max(13px,calc(.14 * var(--r)));line-height:1.85;color:var(--body)}
.jb-cols li+li{margin-top:calc(.04 * var(--r))}
.jb-cols li::before{content:"";position:absolute;left:2px;top:.78em;width:calc(.05 * var(--r));height:calc(.05 * var(--r));border-radius:50%;background:var(--blue-2)}
.jb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(.12 * var(--r));margin-top:calc(.26 * var(--r))}
.jb-foot .pd-btn{display:inline-flex;align-items:center;gap:calc(.08 * var(--r))}
.jb-foot .pd-btn svg{width:calc(.17 * var(--r))}
.jb-foot span{font-size:max(12px,calc(.13 * var(--r)));color:var(--muted);font-family:var(--f-num)}
.jb-note{display:flex;flex-wrap:wrap;align-items:center;gap:calc(.08 * var(--r)) calc(.14 * var(--r));margin-top:calc(.34 * var(--r));font-size:max(13px,calc(.14 * var(--r)));color:var(--body)}
.jb-apply{display:inline-flex;align-items:center;gap:calc(.06 * var(--r));font-family:var(--f-num),var(--f-cn);font-weight:600;color:var(--blue)}
.jb-apply svg{width:calc(.16 * var(--r))}
.jb-apply:hover{text-decoration:underline;text-underline-offset:3px}
.jb-empty{display:flex;flex-direction:column;align-items:center;gap:calc(.1 * var(--r));margin-top:calc(.44 * var(--r));padding:calc(.6 * var(--r)) 20px;border-radius:calc(.2 * var(--r));text-align:center;background:#fff;box-shadow:0 10px 30px rgba(15,37,87,.06)}
.jb-empty-ic{display:grid;place-items:center;width:max(45px,calc(.6 * var(--r)));height:max(45px,calc(.6 * var(--r)));border-radius:50%;color:var(--blue);background:#eef4fc}
.jb-empty-ic svg{width:max(21px,calc(.28 * var(--r)))}
.jb-empty b{margin-top:calc(.06 * var(--r));font-size:max(16px,calc(.18 * var(--r)));color:var(--ink)}
.jb-empty p{font-size:max(13px,calc(.14 * var(--r)));color:var(--body)}
.jb-empty .jb-apply{margin-top:calc(.04 * var(--r));font-size:max(14px,calc(.16 * var(--r)))}

/* ---------- 员工风采 ---------- */
.jt{padding:calc(.9 * var(--r)) 0 calc(1 * var(--r));background:#fff}
.jt-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:max(15px,calc(.2 * var(--r)));margin-bottom:calc(.44 * var(--r))}

/* =========================================================
   手机
   ========================================================= */
@media (max-width:899px){
  .jw{padding:44px 0 36px}
  .jw-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .jw-cards{gap:12px}
  .jw-card{padding:18px 16px;border-radius:16px}
  .jw-ic{width:44px;height:44px;border-radius:13px}
  .jw-ic svg{width:24px;height:24px}
  .jw-card h3{margin-top:14px;font-size:16px}
  .jw-card p{font-size:13px;line-height:1.7}
  .jb{padding:40px 0}
  .jb-list{margin-top:22px;gap:10px}
  .jb-item{border-radius:14px}
  .jb-item summary{gap:12px;padding:16px}
  .jb-count{display:none}
  .jb-body{padding:0 16px 18px}
  .jb-cols{grid-template-columns:minmax(0,1fr);gap:18px}
  .jb-foot .pd-btn{flex:1 1 100%;justify-content:center}
  .jt{padding:40px 0 48px}
  .jt-head{margin-bottom:20px}
}
@media (max-width:560px){
  .jw-cards{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .jw-card,.jb-item,.jb-body{transition:none;animation:none}
}