/* ==========================================================================
   portal-r31a.css —— 资讯详情页（/news/{id}）客户反馈第 31 轮修复
   · 只作追加，不覆盖 portal.css / portal-extra.css / portal-r29*.css / portal-r30a.css
   · 引入顺序：与 r29*/r30a 同批，排在 portal.css / portal-extra.css 之后
   · 全部规则带 .nd-* 前缀（news-detail），全站引入也不会影响资讯列表页的 .news-card

   对应问题：
     4. 相关推荐卡片重做：去掉左侧巨大日期色块，改「上图文 / 下文字」；
        标题最多两行、摘要固定两行，底部一行浅灰小字「日期 + 阅读量」。
     5. 详情页顶部「分类标签 / 发布日期 / 阅读量」合并到同一水平行，
        分类与日期之间留足间距（≥10px）。
   ========================================================================== */

/* ---------- 5. 详情页顶部元信息行：分类徽标 + 发布日期 + 阅读量 同一行 ---------- */
/* 为什么：原先分类徽标是 .nd-head__in 的直接子元素、元信息在下面的 .nd-metabar 里，
   两者天然分两行；客户要求「同一水平行、分类与日期之间留适当间距」。
   做法：把徽标搬进 .nd-metabar 的左侧信息组 .nd-inforow，用 flex + gap 保证间距，
   窄屏只允许整体换行（flex-wrap），不允许文字互相粘连。 */
.nd-inforow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* 12px 行间距 / 14px 列间距：分类徽标与日期之间恒 ≥10px；换行后也不会贴在一起 */
  gap: 10px 14px;
  min-width: 0;
  margin: 0;
}

.nd-inforow .badge {
  /* 徽标自带内边距，基线对齐会偏低，这里统一垂直居中 */
  flex: 0 0 auto;
}

.nd-inforow__item {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-400, #999999);
  white-space: nowrap;
}

/* 日期单独成一项，客户要求用 YYYY-MM-DD，不再拼「日 / 年月」两行 */
.nd-inforow__date {
  font-variant-numeric: tabular-nums;
}

.nd-inforow__read {
  font-variant-numeric: tabular-nums;
}

/* 徽标从 .nd-head__in 直接子元素挪进 .nd-metabar 后，
   portal-r29b.css 里 .nd-head__in > .badge 的 14px 上间距就不再命中；
   这里把同样的留白补回到元信息行上，保持与页头之间的距离不变。 */
.nd-head__in .nd-metabar {
  margin-top: 14px;
}

/* ---------- 4. 相关推荐卡片：上图文 / 下文字 ---------- */
/* 为什么不复用 .news-card：那个类是全站资讯列表页共用的（portal.css:283），
   在那里日期块是左栏布局的一部分；本页要的是完全不同的结构，另起 .nd-rel-card，
   既不影响列表页，也不用去改 portal.css。 */
.nd-rel-grid {
  /* 三张卡必须等高：网格项默认拉伸，卡片本身 height:100% 填满行高，
     内部再用 flex + margin-top:auto 把底部元信息压到同一条水平线上 */
  align-items: stretch;
}

.nd-rel-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line, #ECECEC);
  border-radius: var(--radius, 14px);
  overflow: hidden; /* 让封面图四角跟随圆角裁切 */
  color: inherit;
  transition: box-shadow .2s var(--ease, ease), transform .2s var(--ease, ease), border-color .2s var(--ease, ease);
}

.nd-rel-card:hover {
  transform: translateY(-3px);
  border-color: #E8DCC4;
  box-shadow: var(--shadow, 0 12px 32px rgba(0, 0, 0, .06));
}

/* 封面图容器：固定 16:9，图片 object-fit:cover 只裁不拉伸；
   无图时不铺斜纹（r30a 已把 .photo 的斜纹关掉，这里干脆不复用 .photo），
   只用一层很浅的暖灰渐变占位，保证三张卡视觉重量一致 */
.nd-rel-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #FBF3E1 0%, #F0EADC 50%, #E2DBCC 100%);
  overflow: hidden;
}

.nd-rel-card__thumb::after {
  /* 一枚极淡的同心圆，纯粹让纯色占位不那么「空」，不引入任何图片/图标依赖 */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 120px at 72% 30%, rgba(255, 255, 255, .55), transparent 70%);
  pointer-events: none;
}

.nd-rel-card__thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 正文区：flex 纵向排列，padding 三张卡统一，标题/摘要的行数占位也统一 */
.nd-rel-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 18px 18px 16px;
}

.nd-rel-card__title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--navy-900, #262626);
  /* 最多两行：超过就省略号截断 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* 单行标题也占满两行的高度，否则三张卡的摘要起始位置会参差不齐 */
  min-height: 3.1em;
  overflow-wrap: anywhere;
}

.nd-rel-card__sum {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-500, #666666);
  /* 固定两行：客户要求省略号截断且三张卡排版绝对统一 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 3.4em;
}

/* 底部「日期 + 阅读量」：margin-top:auto 把它顶到卡片底部，
   高度不一的卡片因此底部信息仍然对齐 */
.nd-rel-card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-400, #999999);
}

.nd-rel-card__foot time {
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

/* 窄屏两列/一列时，卡片高度不再需要跟同排一致，但保留结构不变 */
@media (max-width: 640px) {
  .nd-rel-card__body {
    padding: 16px 16px 14px;
  }
}