/* ===========================================================
   全站公告卡片 v2（2026-10-24）
   结构：左时间栏（68px）+ 右内容三行（标题 / 条件行 / 条件细项）
   目的：一个事实只出现一次；决定「点不点」的字段进主视觉；底部不再有分隔线
   作用域：只覆盖 .ui-job--v2 及其子元素，详情页的 .ui-job__tags 等复用类不受影响
   加载顺序：在 base.html 的 {% block head %} 之后引入，确保压过 city.css 里的旧规则
   =========================================================== */

/* ---------- 卡片骨架：两栏 ---------- */
.ui-job--v2 {
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  min-height: 86px; /* 只有两行的卡片不至于比邻居矮一截 */
}

.ui-job--v2 .ui-job__time {
  flex: 0 0 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 0;
  border-right: 1px solid var(--c-line-soft);
  background: #fbfcfe;
}

.ui-job--v2 .ui-job__date {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--c-ink);
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}

.ui-job--v2 .ui-job__left {
  font-size: 12px;
  line-height: 16px;
  color: var(--c-faint);
  white-space: nowrap;
}

/* 状态色必须写在 .ui-job--v2 作用域里，否则被上面的 color 覆盖 */
.ui-job--v2 .ui-job__left.is-red {
  color: var(--c-red);
  font-weight: 600;
}

.ui-job--v2 .ui-job__left.is-orange {
  color: var(--c-orange);
  font-weight: 600;
}

.ui-job--v2 .ui-job__left.is-faint {
  color: var(--c-faint);
  font-weight: 400;
}

/* ---------- 内容区 ---------- */
.ui-job--v2 .ui-job__main {
  /* 故意不做定位上下文：让标题的 ::after 铺满整张卡（含左侧时间栏），
     点时间栏也能进详情 */
  position: static;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 34px 13px 16px;
}

.ui-job--v2 .ui-job__h {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.ui-job--v2 .ui-job__title {
  display: inline;
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}

/* 整卡可点：标题链接的伪元素铺满卡片，不额外加「查看详情」 */
.ui-job--v2 .ui-job__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ui-job--v2 .ui-job__top {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: 11px;
  line-height: 18px;
  font-weight: 500;
  vertical-align: 2px;
}

/* 搜索结果里的单位名：只在 q 有值时才渲染，用来交代「为什么这条命中」 */
.ui-job--v2 .ui-job__match {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--c-muted);
}

/* ---------- 条件行：地区 · 性质 · 人数 · 学历 ---------- */
.ui-job--v2 .ui-job__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--c-body);
}

/* 分隔符交给 CSS：字段缺失时不会留下孤儿「·」 */
.ui-job--v2 .ui-job__facts > * + *::before {
  content: "·";
  display: inline-block;
  margin: 0 6px;
  color: #c7d1de;
  font-weight: 400;
}

.ui-job--v2 .ui-job__f {
  position: relative;
  z-index: 2;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}

/* 首页跨城市展示，地区是必要信息，比其它事实项重一档 */
.ui-job--v2 .ui-job__f.is-area {
  color: var(--c-ink);
}

.ui-job--v2 button.ui-job__f:hover {
  color: var(--c-primary);
  border-bottom-color: currentColor;
}

.ui-job--v2 .ui-job__f.is-static {
  cursor: inherit;
}

/* ---------- 条件细项：用工性质 / 专业 / 年龄 / 户籍 ---------- */
.ui-job--v2 .ui-job__sum {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 发布日期：只在「按最新发布」排序时出现 */
.ui-job--v2 .ui-job__pub {
  display: none;
  margin-left: 10px;
  font-size: 11px;
  color: var(--c-faint);
}

body.zk-sort-pub .ui-job--v2 .ui-job__pub {
  display: inline;
}

/* ---------- 右侧箭头：整卡可点的视觉暗示，不参与点击 ---------- */
.ui-job--v2 .ui-job__go {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: #c7d1de;
  pointer-events: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.ui-job--v2:hover .ui-job__go {
  color: var(--c-primary);
  transform: translateY(-50%) translateX(2px);
}

/* ---------- 双列（≥1200px 生效，由 body.zk-2col 开关） ---------- */
@media (min-width: 1200px) {
  body.zk-2col .ui-jobs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body.zk-2col .ui-job--v2 .ui-job__sum {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ---------- 移动端：时间栏收窄，字号整体降一档 ---------- */
@media (max-width: 720px) {
  .ui-job--v2 .ui-job__time {
    flex: 0 0 58px;
  }
  .ui-job--v2 .ui-job__date {
    font-size: 14px;
    line-height: 18px;
  }
  .ui-job--v2 .ui-job__left {
    font-size: 11px;
    line-height: 15px;
  }
  .ui-job--v2 .ui-job__main {
    padding: 11px 24px 11px 12px;
  }
  .ui-job--v2 .ui-job__h,
  .ui-job--v2 .ui-job__title {
    font-size: 15.5px;
    line-height: 22px;
  }
  .ui-job--v2 .ui-job__facts,
  .ui-job--v2 .ui-job__f {
    font-size: 12px;
    line-height: 19px;
  }
  .ui-job--v2 .ui-job__sum {
    font-size: 12px;
    line-height: 19px;
  }
  .ui-job--v2 .ui-job__go {
    display: none;
  }
}