/* ============================================================
   9.8 PC 人才 · 职位悬浮面板
   严格按 Figma「人才职位3 / 要写div部分」(2237:7771)还原
   尺寸基准:卡片 891×368 · 白底 #fff · 描边 #17c37b · 圆角 8 · 内边距 16
   面板默认隐藏,鼠标移入左侧一级职位分类行时由 JS 追加 .on 显示
   ============================================================ */

.job-panel {
  --c-primary: #17c37b;      /* 主色:描边 / 选中 tab */
  --c-tab:     #4f5862;      /* 未选中 tab 文字 */
  --c-title:   #202933;      /* 职位名 */
  --c-tag:     #7e8790;      /* 经验/城市标签文字 */
  --c-tag-bg:  #f5f8ff;      /* 标签底色 */
  --c-salary:  #ff3b30;      /* 参考报价(红) */
  --c-card:    #f5f7fc;      /* 职位卡底色 */
  --c-icon:    #ff6332;      /* 职位图标(橙) */
  --font:      "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  display: none;             /* 默认隐藏,JS .on 显示 */
  position: absolute;        /* 悬浮于分类列右侧,由 JS 定位 */
  z-index: 999;
  box-sizing: border-box;
  width: 891px;              /* Figma 891 */
  height: 368px;             /* 高度固定:任何 tab 下总高不变(border-box 含描边/内边距) */
  padding: 16px;             /* Figma padding 16 → 内容区 857 宽 */
  background: #ffffff;
  border: 1px solid var(--c-primary);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(23, 195, 123, 0.10);
}

.job-panel.on { display: block; }

/* —— 顶部分类 tab 行(高 34) —— */
.panel-tabs {
  display: flex;
  align-items: center;
  gap: 8px;                  /* tab 间距 */
  height: 34px;
}

.panel-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 24px;
  color: var(--c-tab);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

/* 选中态:绿底白字 */
.panel-tab.active,
.panel-tab:hover {
  background: var(--c-primary);
  color: #ffffff;
}

/* —— 3×3 职位卡网格(857 宽 = (891-2描边-32内边距),卡 277.67,列距 12) —— */
.job-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;          /* tab 行与网格间距 14 */
}

/* —— 单个职位卡 —— */
.job-card {
  box-sizing: border-box;
  height: 87.33px;           /* Figma 87.33 */
  padding: 0.7px 14px;       /* 水平 14,垂直居中 ≈ 0.7 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;                 /* 两行之间距 10 */
  background: var(--c-card);
  border-radius: 8px;
  overflow: hidden;
}

.job-card:hover { background: #eef3fb; }  /* 鼠标悬停反馈 */

/* 第一行:图标 + 职位名(单行省略号) */
.job-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.job-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.job-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.job-title {
  flex: 1;
  min-width: 0;              /* 允许收缩以触发省略号 */
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--c-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* 职位名过长 → … */
}

/* 第二行:经验/城市标签(左) + 参考报价(右) */
.job-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
}

.job-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.job-tag {
  box-sizing: border-box;
  height: 24px;
  padding: 2px 0;            /* 垂直 2 → 文本 20 + 2×2 = 24 */
  border-radius: 4px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: var(--c-tag);
  background: var(--c-tag-bg);
  white-space: nowrap;
}

.job-salary {
  flex: none;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;          /* Semibold */
  line-height: 24px;
  color: var(--c-salary);
  white-space: nowrap;
}

/* —— 空分类占位 —— */
.job-empty {
  display: none;
  margin-top: 14px;          /* 与网格相同的位置占位 */
  height: 286px;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 14px;
  color: #a8b0b8;
}

.job-empty.show { display: flex; }