/* ============================================================
   人才招聘页（careers.html）
   配合 css/style.css 使用（导航 / 页脚 / i18n 由 style.css 负责）
   配色与全站 VI 统一：深海蓝 #0047A3 + 活力橙 #F58220
   ============================================================ */

:root {
  --c-blue: #0047A3;
  --c-blue-2: #2E6EB5;
  --c-orange: #F58220;
  --c-text: #333333;
  --c-muted: #7F8C8D;
  --c-line: #E3E8EE;
}

/* —— 页头 —— */
.careers-hero {
  position: relative;
  padding: 96px 0 76px;
  background: linear-gradient(135deg, #F6F9FC 0%, #E9EFF6 100%);
  overflow: hidden;
}
/* 右侧斜向网格纹理（抽象幕墙） */
.careers-hero::before {
  content: '';
  position: absolute;
  right: -8%; top: -45%;
  width: 58%; height: 190%;
  background-image:
    linear-gradient(90deg, rgba(0, 71, 163, .07) 1px, transparent 1px),
    linear-gradient(rgba(0, 71, 163, .07) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: skewX(-20deg);
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 90%);
  mask-image: linear-gradient(to left, #000 30%, transparent 90%);
  pointer-events: none;
}
.careers-hero h1 {
  position: relative; z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 46px; font-weight: 800;
  color: #1F2A37;
  letter-spacing: 6px;
}
.careers-hero h1::after {
  content: '';
  display: block;
  width: 44px; height: 3px;
  background: var(--c-orange);
  margin: 20px auto 0;
}
.careers-hero-sub {
  position: relative; z-index: 1;
  margin: 20px 0 0;
  text-align: center;
  font-size: 15px; color: #6B7A8D;
  letter-spacing: 2px;
}

/* —— 主体 —— */
.careers-main {
  background: #F5F7FA;
  padding: 64px 0 96px;
}
.careers-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* 左侧岗位列表 */
.careers-list {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(8, 48, 107, .06);
}
.careers-item {
  display: block; width: 100%;
  padding: 15px 20px;
  border: 0;
  border-bottom: 1px solid #F0F3F7;
  background: #fff;
  text-align: left;
  font-family: inherit;
  font-size: 15px; color: #3A4756;
  cursor: pointer;
  transition: background .2s, color .2s, padding-left .2s;
}
.careers-item:last-child { border-bottom: 0; }
.careers-item:hover { background: #F2F7FC; color: var(--c-blue); padding-left: 24px; }
.careers-item.is-active {
  background: var(--c-blue-2);
  color: #fff;
  font-weight: 700;
  padding-left: 20px;
}

/* 右侧岗位详情 */
.careers-detail { position: relative; }
.careers-panel {
  display: none;
  background: #fff;
  border-radius: 4px;
  padding: 44px 48px 48px;
  box-shadow: 0 6px 26px rgba(8, 48, 107, .06);
}
.careers-panel.is-active { display: block; }
.careers-panel-title {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 16px;
  font-size: 22px; font-weight: 800;
  color: var(--c-blue);
  letter-spacing: 1px;
  border-bottom: 1px solid var(--c-line);
}
.careers-panel-title::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  width: 44px; height: 3px;
  background: var(--c-orange);
}
.careers-panel h4 {
  margin: 0 0 14px;
  font-size: 15px; font-weight: 700;
  color: #2C3A49;
}
.careers-panel h4 ~ h4 { margin-top: 30px; }
.careers-panel ol {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: li;
}
.careers-panel li {
  counter-increment: li;
  position: relative;
  padding-left: 26px;
  font-size: 14px; line-height: 2;
  color: #55606E;
}
.careers-panel li::before {
  content: counter(li) "、";
  position: absolute; left: 0;
  color: #8A96A3;
}

/* —— 响应式 —— */
@media (max-width: 1080px) {
  .careers-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
  .careers-panel { padding: 36px 32px 40px; }
}
@media (max-width: 720px) {
  .careers-hero { padding: 64px 0 52px; }
  .careers-hero h1 { font-size: 32px; letter-spacing: 4px; }
  .careers-main { padding: 40px 0 64px; }
  .careers-layout { grid-template-columns: 1fr; gap: 24px; }
  .careers-panel { padding: 28px 22px 32px; }
  .careers-panel-title { font-size: 19px; }
}

/* —— 岗位元信息（城市 · 薪资 · 人数） —— */
.careers-meta {
  margin: -10px 0 24px;
  font-size: 13px;
  color: #7F8C8D;
  letter-spacing: .5px;
}
.careers-meta__dot { margin: 0 10px; color: #C6CFD8; }