/* ==========================================================================
人才招聘 /job —— 「科技感 + 重点区分」重做样式层
theme/qinxue/css/job.css 2026-09-30
PC 与移动端共用同一份，靠媒体查询收敛。
设计基调沿用全站 token：品牌蓝 #0062c0 / #0d8ff0、科技青 #29d3ff、品牌金 #f9d100
回滚：删掉 pc/m 模板 headAppend 里对本文件的 即可恢复纯文字版。
========================================================================== */
/* 2026-10-09 用户反馈 /job 页「宽窄没有统一」。
原值 1180px 比全站容器基准（nav.css 的 .ub-container / 内页条幅 .pb-in）
窄了 370px —— 实测在 1440px 视口下，本页正文宽 1148px、左边距 146px，
而其它页一律是 1340px、左边距 50px，肉眼就是「这一页比别页窄一圈」。
现统一到 1550px 基准。横向内边距交给外层 （inner_head_multi
已统一为 40px + 四级断点阶梯），这里只保留纵向间距，避免叠加出双倍内边距。 */
.job-page{max-width:1550px;margin:0 auto;padding:42px 0 8px}
.job-page *{box-sizing:border-box}
.job-page img{max-width:100%}
/* 防御：旧主题对 #n_xxx ul/li 的宽高/margin 规则不再波及本页（PC 已改用 #n_job），
这里再做一层兜底复位，防止其它全局规则渗入 */
.job-page ul,.job-page ol{margin:0;padding:0;list-style:none;background:none;height:auto;width:auto}
.job-page li{margin:0;padding:0;list-style:none;background:none;width:auto;height:auto}
/* ---------- 区块小标题（热招岗位 / 福利概览） ---------- */
.job-sec-title{display:flex;align-items:center;gap:12px;margin:0 0 22px}
.job-sec-title::before{content:'';width:5px;height:22px;border-radius:3px;
background:linear-gradient(180deg,#29d3ff,#0062c0);box-shadow:0 0 12px rgba(41,211,255,.55)}
.job-sec-title h2{margin:0;font-size:23px;font-weight:800;color:#0b2a4d;letter-spacing:.02em}
.job-sec-title .en{font-size:12px;letter-spacing:.22em;color:#9fb2c8;text-transform:uppercase;font-weight:600}
/* ========================== 福利概况带 ========================== */
.job-welfare{position:relative;margin:8px 0 46px;padding:30px 28px;border-radius:16px;overflow:hidden;
background:linear-gradient(120deg,#062a52 0%,#063a6e 100%);
border:1px solid rgba(120,190,255,.18)}
.job-welfare::before{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
background:radial-gradient(circle,rgba(41,211,255,.20),rgba(41,211,255,0) 70%);pointer-events:none}
.job-welfare::after{content:'';position:absolute;left:-40px;bottom:-70px;width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle,rgba(238,199,0,.12),rgba(238,199,0,0) 70%);pointer-events:none}
.job-welfare__head{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;position:relative;z-index:1}
.job-welfare__head h3{margin:0;font-size:19px;font-weight:800;color:#fff;letter-spacing:.02em}
.job-welfare__head span{font-size:12px;letter-spacing:.2em;color:rgba(173,214,255,.75);text-transform:uppercase}
.job-welfare__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1}
.job-welfare__item{display:flex;flex-direction:column;gap:8px;padding:18px 16px;border-radius:12px;
background:rgba(255,255,255,.06);border:1px solid rgba(150,205,255,.16);
backdrop-filter:blur(2px);transition:transform .25s ease,background .25s ease,border-color .25s ease}
.job-welfare__item:hover{transform:translateY(-4px);background:rgba(255,255,255,.10);border-color:rgba(120,200,255,.4)}
.job-welfare__ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
font-size:19px;color:#fff;background:linear-gradient(135deg,#0d8ff0,#0062c0);
box-shadow:0 6px 16px rgba(10,120,220,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.job-welfare__item:nth-child(2) .job-welfare__ico{background:linear-gradient(135deg,#1fc8ff,#0a86e6)}
.job-welfare__item:nth-child(3) .job-welfare__ico{background:linear-gradient(135deg,#ffcf4d,#f0a400)}
.job-welfare__item:nth-child(4) .job-welfare__ico{background:linear-gradient(135deg,#34d3a6,#0a9e8e)}
.job-welfare__t{font-size:15.5px;font-weight:700;color:#fff}
.job-welfare__d{font-size:12.5px;line-height:1.6;color:rgba(205,228,255,.82)}
/* ========================== 岗位卡片 ========================== */
.job-positions{display:flex;flex-direction:column;gap:22px}
.job-card{position:relative;background:#fff;border-radius:16px;overflow:hidden;
border:1px solid #e7eef7;box-shadow:0 6px 22px rgba(12,42,77,.07);
transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.job-card:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(12,42,77,.13);border-color:#cfe0f2}
.job-card__bar{height:4px;background:linear-gradient(90deg,#29d3ff,#0062c0)}
.job-card__head{display:flex;align-items:center;gap:16px;padding:22px 26px 16px}
.job-card__no{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
font-size:18px;font-weight:800;font-style:italic;color:#fff;letter-spacing:.02em;
background:linear-gradient(135deg,#0d8ff0,#0062c0);box-shadow:0 8px 18px rgba(10,120,220,.38),inset 0 1px 0 rgba(255,255,255,.28)}
.job-card__title{margin:0;font-size:21px;font-weight:800;color:#0b2a4d;letter-spacing:.01em}
.job-card__tag{margin-left:auto;font-size:12px;font-weight:600;color:#0062c0;background:rgba(0,98,192,.08);
padding:5px 12px;border-radius:999px;white-space:nowrap}
.job-card__body{padding:4px 26px 26px;display:flex;flex-direction:column;gap:18px}
.job-sub{position:relative}
.job-sub__label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:#0062c0;
background:linear-gradient(90deg,rgba(41,211,255,.16),rgba(0,98,192,.06));
border-left:3px solid #29d3ff;padding:5px 12px;border-radius:0 7px 7px 0;margin-bottom:11px;letter-spacing:.03em}
.job-sub__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.job-sub__item{display:flex;align-items:flex-start;gap:11px;line-height:1.65}
.job-sub__dot{flex:0 0 auto;width:8px;height:8px;margin-top:9px;border-radius:2px;
background:linear-gradient(135deg,#29d3ff,#0062c0);transform:rotate(45deg);
box-shadow:0 0 0 3px rgba(41,211,255,.14)}
.job-sub__main{flex:1;min-width:0}
.job-sub__text{font-size:14.5px;color:#42505f;line-height:1.7}
.job-sub__sublist{list-style:none;margin:7px 0 0 19px;padding:0;display:flex;flex-direction:column;gap:6px}
.job-sub__sublist li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:#5b6b7c;line-height:1.65}
.job-sub__subdot{flex:0 0 auto;width:6px;height:6px;margin-top:8px;border-radius:50%;background:#9bb6d4}
/* 解析失败兜底：原样富文本 */
.job-fallback{padding:8px 4px}
/* ========================== 行动召唤带 ========================== */
.job-cta{position:relative;margin:46px 0 10px;padding:40px 30px;border-radius:18px;overflow:hidden;text-align:center;
background:linear-gradient(120deg,#032c58 0%,#054a8c 60%,#0a78dc 100%);
border:1px solid rgba(120,190,255,.22)}
.job-cta::before{content:'';position:absolute;inset:0;
background:
linear-gradient(90deg,rgba(41,211,255,.10),rgba(41,211,255,0) 40%),
radial-gradient(120% 140% at 85% -10%,rgba(41,211,255,.22),rgba(41,211,255,0) 60%);pointer-events:none}
.job-cta__bar{width:46px;height:3px;border-radius:2px;background:linear-gradient(90deg,#29d3ff,#f9d100);
box-shadow:0 0 16px rgba(41,211,255,.7);margin:0 auto 16px}
.job-cta h3{position:relative;margin:0 0 10px;font-size:23px;font-weight:800;color:#fff;letter-spacing:.02em}
.job-cta p{position:relative;margin:0 auto 24px;max-width:640px;font-size:14px;line-height:1.8;color:rgba(214,234,255,.86)}
.job-cta__btns{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.job-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 30px;border-radius:999px;
font-size:15px;font-weight:700;letter-spacing:.04em;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.job-btn--primary{color:#fff;background:linear-gradient(135deg,#0d8ff0,#0062c0);
box-shadow:0 10px 26px rgba(10,120,220,.45),inset 0 1px 0 rgba(255,255,255,.25)}
/* 同上：primary 悬停也必须显式写 color，否则被 style.css 的全局 a:hover 抢成品牌蓝 */
.job-btn--primary:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 16px 36px rgba(10,120,220,.6);color:#fff}
a.job-btn--primary:hover,a.job-btn--primary:focus{color:#fff}
.job-btn--ghost{color:#dff0ff;background:rgba(255,255,255,.08);border:1px solid rgba(160,210,255,.45)}
/* ⚠️ 2026-10-09 修 hover 文字看不清
现象：鼠标移上「联系我们」按钮后，文字从 rgb(223,240,255) 变成品牌蓝 rgb(0,98,192)，
在半透明白（rgba(255,255,255,.16)）的浅色底上几乎看不见。
原因：style.css:23 有一条全局 `a:hover{color:var(--theme-color)}`（权重 0,1,1）。
job.css 虽然后加载，但那条规则用了 var() 且 job-btn--ghost:hover 只写了
transform/background/border-color，**没写 color**，于是 color 被全局规则接管。
修法：两个态都显式写 color，并补 `a.job-btn--ghost:hover` 提高权重（0,2,1），
彻底压过 style.css 的全局规则。 */
.job-btn--ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);border-color:rgba(190,230,255,.7);color:#fff}
a.job-btn--ghost:hover,a.job-btn--ghost:focus{color:#fff}
.job-btn--ghost i,.job-btn--primary i{color:inherit}
/* 键盘可达性：Tab 聚焦时也要看得见 */
.job-btn:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px}
/* ========================== 响应式 ========================== */
@media (max-width:992px){
.job-welfare__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
.job-page{padding:26px 15px 4px}
.job-sec-title{margin-bottom:16px}
.job-sec-title h2{font-size:19px}
.job-welfare{margin-bottom:32px;padding:22px 16px;border-radius:14px}
.job-welfare__head{margin-bottom:14px}
.job-welfare__head h3{font-size:16.5px}
.job-welfare__grid{grid-template-columns:repeat(2,1fr);gap:10px}
.job-welfare__item{padding:14px 12px;gap:6px}
.job-welfare__ico{width:36px;height:36px;font-size:16px;border-radius:10px}
.job-welfare__t{font-size:14px}
.job-welfare__d{font-size:11.5px}
.job-positions{gap:16px}
.job-card__head{padding:18px 16px 12px;gap:12px}
.job-card__no{width:40px;height:40px;font-size:16px;border-radius:11px}
.job-card__title{font-size:18px}
.job-card__tag{display:none}
.job-card__body{padding:2px 16px 20px;gap:14px}
.job-sub__text{font-size:13.5px}
.job-cta{margin-top:32px;padding:30px 18px;border-radius:14px}
.job-cta h3{font-size:19px}
.job-cta p{font-size:13px}
.job-btn{height:44px;padding:0 24px;font-size:14px}
.job-cta__btns{gap:10px}
}
@media (max-width:420px){
.job-welfare__grid{grid-template-columns:1fr}
}