/* ============================================================================
 * media-tags.css —— 第四轮：内容封面图（信息/职位）+ 信息标签徽标
 * 独立文件，不修改 site.css；由 layout.php 在 site.css / skins.css 之后引入。
 *
 * 覆盖组件：
 *   .detail-media  信息/职位详情页封面图（桌面右上方浮动，正文环绕；≤640px 通栏）
 *   .ir-thumb      信息列表左侧封面缩略图（56×42）
 *   .job-thumb     招聘列表职位卡片封面图（卡片顶部，16:7 左右横幅）
 *   .info-tag      信息标签徽标（供应/求购·需求/合作·转包/出租/其他），三皮肤适配
 * 依赖站点语义令牌（--surface / --line / --ink-2 / --shadow-xs 等），换肤自动跟随；
 * 颜色用 color-mix 与 --surface 混合，并在前一行给出纯色兜底（不支持 color-mix 的老浏览器）。
 * ========================================================================== */

/* ---------- 1. 详情页封面图 ---------- */
.detail-media {
  float: right;
  width: min(42%, 340px);
  max-width: 100%;
  margin: 0 0 18px 26px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-mute);
  box-shadow: var(--shadow-sm);
}
.detail-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: 0;
}
/* 浮动封面后的整宽卡片清浮动，避免短正文时卡片背景与图片重叠
 * （信息详情在 .page-body，职位详情在 .layout，两处都覆盖） */
.page-body .contact-bar,
.page-body .warn-box,
.page-body .entry-actions,
.layout .entry-actions {
  clear: both;
}

@media (max-width: 640px) {
  .detail-media {
    float: none;
    width: 100%;
    margin: 0 0 16px;
  }
  .detail-media img { max-height: none; }
}

/* ---------- 2. 信息列表：左侧封面缩略图 ---------- */
.ir-thumb {
  flex: none;
  display: block;
  width: 56px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-mute);
  object-fit: cover;
}

/* ---------- 3. 招聘列表：职位卡片封面 ---------- */
.job-thumb {
  display: block;
  width: 100%;
  height: 140px;
  margin: 0 0 14px;
  border-radius: 10px;
  background: var(--bg-mute);
  object-fit: cover;
}

/* ---------- 4. 信息标签徽标（基于 .tag 基础样式覆写） ----------
 * 变体：supply 绿 / demand 橙 / partner 紫 / rent 青 / other 灰
 * 采用 --tag-* 变量，便于皮肤整体覆写且不重复声明布局属性。
 */
.tag.info-tag {
  --tag-fg: #475569;
  --tag-bg: #f1f5f9;
  --tag-bd: #d8e1ea;
  --tag-fg: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 11px;
  line-height: 18px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tag-bd);
  color: var(--tag-fg);
  background: var(--tag-bg);
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: 1px;
  white-space: nowrap;
}

.tag.info-tag-supply {
  --tag-fg: #0f7a4a;
  --tag-bg: #e8f8ef;
  --tag-bd: #bfe8d2;
  --tag-bg: color-mix(in srgb, #22c55e 13%, var(--surface));
  --tag-bd: color-mix(in srgb, #22c55e 30%, var(--line));
}
.tag.info-tag-demand {
  --tag-fg: #b45309;
  --tag-bg: #fdf3e3;
  --tag-bd: #f0d8b0;
  --tag-bg: color-mix(in srgb, #f59e0b 15%, var(--surface));
  --tag-bd: color-mix(in srgb, #f59e0b 32%, var(--line));
}
.tag.info-tag-partner {
  --tag-fg: #6d28d9;
  --tag-bg: #f3edff;
  --tag-bd: #ddd0f7;
  --tag-bg: color-mix(in srgb, #8b5cf6 13%, var(--surface));
  --tag-bd: color-mix(in srgb, #8b5cf6 30%, var(--line));
}
.tag.info-tag-rent {
  --tag-fg: #0e7490;
  --tag-bg: #e6f7fb;
  --tag-bd: #b9e4ee;
  --tag-bg: color-mix(in srgb, #06b6d4 13%, var(--surface));
  --tag-bd: color-mix(in srgb, #06b6d4 30%, var(--line));
}
.tag.info-tag-other {
  --tag-fg: #475569;
  --tag-bg: #f1f5f9;
  --tag-bd: #d8e1ea;
  --tag-fg: var(--ink-2);
  --tag-bg: color-mix(in srgb, #64748b 11%, var(--surface));
  --tag-bd: color-mix(in srgb, #64748b 26%, var(--line));
}

/* 首页信息区块：紧凑版标签，保持单行不破坏 .list 布局 */
.list .tag.info-tag {
  font-size: 10px;
  line-height: 16px;
  padding: 0 6px;
  margin-right: 6px;
  flex: none;
}

/* 列表行标题：标签与标题同一基线，过长时仍可截断 */
.info-row .ir-title .tag.info-tag { flex: none; }

/* 详情页 page-head 的标签 chip 与其它 chip 对齐 */
.page-head-extra .tag.info-tag { align-self: center; }

/* ---------- 5. 深色皮肤：提高浅底徽标在暗背景上的可读性 ---------- */
[data-skin="dark"] .tag.info-tag {
  color: #cbd8e4;
  background: color-mix(in srgb, #94a3b8 18%, var(--surface));
  border-color: color-mix(in srgb, #94a3b8 32%, var(--line));
}
[data-skin="dark"] .tag.info-tag-supply {
  color: #7ee2a8;
  background: color-mix(in srgb, #22c55e 20%, var(--surface));
  border-color: color-mix(in srgb, #22c55e 42%, var(--line));
}
[data-skin="dark"] .tag.info-tag-demand {
  color: #fbbf24;
  background: color-mix(in srgb, #f59e0b 20%, var(--surface));
  border-color: color-mix(in srgb, #f59e0b 42%, var(--line));
}
[data-skin="dark"] .tag.info-tag-partner {
  color: #c4b5fd;
  background: color-mix(in srgb, #8b5cf6 22%, var(--surface));
  border-color: color-mix(in srgb, #8b5cf6 44%, var(--line));
}
[data-skin="dark"] .tag.info-tag-rent {
  color: #67e8f9;
  background: color-mix(in srgb, #06b6d4 20%, var(--surface));
  border-color: color-mix(in srgb, #06b6d4 42%, var(--line));
}
[data-skin="dark"] .tag.info-tag-other {
  color: #cbd5e1;
  background: color-mix(in srgb, #64748b 24%, var(--surface));
  border-color: color-mix(in srgb, #64748b 38%, var(--line));
}
/* 深色皮肤下封面图描边略提亮，避免与深底融为一体 */
[data-skin="dark"] .detail-media,
[data-skin="dark"] .ir-thumb,
[data-skin="dark"] .job-thumb {
  border-color: var(--line-strong);
}

/* ---------- 6. 移动端微调（≤640px） ---------- */
@media (max-width: 640px) {
  .ir-thumb { width: 52px; height: 40px; }
  .job-thumb { height: 132px; margin-bottom: 12px; }
  .tag.info-tag { font-size: 10px; line-height: 17px; padding: 0 6px; }
  .list .tag.info-tag { margin-right: 5px; }
}

/* 打印/减少动效环境：封面图不浮动，避免打印排版重叠 */
@media print {
  .detail-media { float: none; width: 100%; margin: 0 0 12px; }
}