/* blog 版式 —— 结构抄自 dd3.cc 的 blog 列表页与详情页（2026-10-30）
 *
 * 结构对照：
 *   列表页 .blog-list-page > .blog-news-section
 *           > h1.blog-news-title
 *           > .blog-news-layout (grid 1fr / 220px)
 *             > section.blog-news-list > article.blog-news-card
 *                 > div.blog-news-media > img
 *                 > div.blog-news-copy > h2 + p + .blog-news-meta
 *             > aside.blog-category-panel > button.blog-category-button
 *   详情页 .blog-article-page > article.blog-article
 *           > a.text-link / p.eyebrow / h1 / .blog-article-meta
 *           > p.blog-summary / img.blog-article-image / div.blog-content
 *
 * 与 dd3 的差异：
 *   1) 字体族改用站内 Inter（--nf-sans），主色沿用站内橙色 #e58722；
 *   2) 字号/字重/行高不再用 rem 相对值，全部走站内 V4 阶梯
 *      （38 / 36 / 25 / 20 / 16 / 14 / 13），见文件末尾「V4 字号收口」。
 */

/* ---------- 列表页 ---------- */
.blog-list-page {
  background: #fff;
}
.blog-news-section {
  width: min(1180px, 100% - 3rem);
  margin: 0 auto;
  padding: 0 0 clamp(3rem, 7vw, 5rem);
}
.blog-news-title {
  color: #050505;
  margin: 0 0 2.2rem;
  padding-top: 1.2rem;
  font-family: var(--nf-sans, Inter);
}
.blog-news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: start;
  gap: 1.25rem;
}
.blog-news-list,
.blog-category-panel {
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 5px;
  overflow: hidden;
}
.blog-news-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.8rem;
  min-height: 144px;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid #e6ebf2;
}
.blog-news-card:last-child {
  border-bottom: 0;
}
.blog-news-card[data-blog-card] {
  cursor: pointer;
  transition: background-color .15s;
}
.blog-news-card[data-blog-card]:hover,
.blog-news-card[data-blog-card]:focus-visible {
  background: #f7faff;
  outline: none;
}
.blog-news-copy {
  grid-column: 1;
}
.blog-news-card > .blog-news-media {
  grid-area: 1 / 2;
  align-self: stretch;
}
.blog-news-card h2 {
  color: #151a24;
  margin-bottom: .55rem;
  font-family: var(--nf-sans, Inter);
}
.blog-news-card h2 a:hover {
  color: #e58722;
}
.blog-news-card p {
  color: #6f7a8d;
  margin-bottom: .8rem;
}
.blog-news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  color: #7b8799;
}
.blog-news-meta-right {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.blog-news-media {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 2rem;
}
.blog-news-media img {
  width: 260px;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
  background: #f3f5f8;
  border-radius: 4px;
}
.blog-news-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 47px;
  min-height: 22px;
  padding: .25rem .48rem;
  color: #7b8799;
  background: #eef2f7;
  border-radius: 4px;
}
.blog-category-panel {
  padding: .6rem;
}
.blog-category-button {
  color: #4b5567;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 3px;
  align-items: center;
  gap: .85rem;
  padding: .75rem .8rem;
  display: flex;
}
.blog-category-button:before {
  content: "";
  background: #aeb8c7;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  flex: none;
}
.blog-category-button:hover {
  color: #e58722;
}
.blog-category-button.is-active {
  color: #e58722;
  background: #fdf3ea;
}
.blog-category-button.is-active:before {
  background: #e58722;
}

/* ---------- 详情页 ---------- */
.blog-article-page {
  background: #fff;
}
.blog-article {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem 0 clamp(3rem, 7vw, 5rem);
}
.blog-article .text-link {
  display: inline-block;
  margin-bottom: 1.2rem;
  color: #e58722;
  text-decoration: none;
}
.blog-article .text-link:hover {
  text-decoration: underline;
}
.blog-back-link {
  margin-top: 2rem;
  display: inline-flex;
}
.blog-article .eyebrow {
  margin: 0 0 .3rem;
  color: #8a94a6;
}
.blog-article h1 {
  margin: .8rem 0 0;
  color: #151a24;
  font-family: var(--nf-sans, Inter);
}
.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: .9rem 0 .6rem;
  color: #7b8799;
}
.blog-article time {
  display: block;
}
.blog-summary {
  margin: 0;
  color: #55607a;
}
.blog-article-image {
  width: 100%;
  max-height: 34rem;
  margin: 1.8rem 0;
  object-fit: cover;
  border-radius: 6px;
}
.blog-content {
  display: grid;
  gap: 1.4rem;
}
.blog-content h2,
.blog-content h3,
.blog-content h4 {
  color: #151a24;
}
.blog-content section {
  display: grid;
  gap: .75rem;
}
.blog-content p {
  margin: 0;
  color: #55607a;
}
.blog-content ul,
.blog-content ol {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding-left: 1.3rem;
  color: #55607a;
}
.blog-content figure {
  margin: 0;
}
.blog-content figure img {
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
  border-radius: 6px;
}
.blog-content figcaption {
  margin-top: .55rem;
  color: #7b8799;
}
.blog-content blockquote,
.blog-callout {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid #e58722;
  background: #f5f8fc;
  color: #3c4658;
}
.blog-content blockquote cite {
  display: block;
  margin-top: .65rem;
  color: #7b8799;
  font-style: normal;
}
.blog-content a {
  color: #e58722;
}
.blog-content strong {
  color: #151a24;
}

/* ==========================================================================
   V4 字号收口 —— 与「加 Blog 之前」的站内排版规范逐项对齐
   --------------------------------------------------------------------------
   站内 V4 阶梯（typography/v4.css 的 :root token）：
     --nf-h1  38px / 49.4px / w800 / ls -0.5px   页面主标题
     --nf-h2  36px / 36px    / w700 / ls -0.3px   区块主标题
     --nf-h3  25px / 36px    / w700 / ls -0.2px   区块 / 卡片子标题
     --nf-h4  20px / 1.45    / w700              小标题 / 副标题
     --nf-eyebrow 16px / 31px / w400 / 不加字距不大写
     --nf-body 16px / 31px                       正文
     --nf-body-s 14px                            辅助信息
     --nf-label 13px                             角标 / 标签

   blog 的语义映射：
     列表页 H1「Blogs」            → H1  38px
     卡片标题（文章名）             → H4  20px
     卡片摘要                       → 正文 16px / 31px
     卡片日期                       → 辅助 14px
     卡片分类角标                   → 标签 13px
     详情页文章标题                 → H1  38px
     详情页 eyebrow「Blog」         → 眉标 16px / 31px / w400 / 不大写
     详情页 meta（作者 + 日期）     → 辅助 14px
     详情页导语                     → H4  20px / 31px
     正文 h2                        → H3  25px（与详情页 .nrd3 h2 降级同源）
     正文 h3                        → H4  20px
     正文 h4                        → 正文 16px / w700
     正文 p / li                    → 正文 16px / 31px
     图注 / 返回链接                 → 辅助 14px

   ⚠ 全部带 !important：v4.css 的元素级规则也是 !important，
     只有同等 important 时才能靠特异性决胜（本文件类名数 > v4 的 :not(.nrd3)）。
   ========================================================================== */

/* ---------- 列表页字号 ---------- */
html.norb .blog-list-page h1.blog-news-title {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-h1) !important;
  font-weight: 800 !important;
  line-height: 49.4px !important;
  letter-spacing: -0.5px !important;
}
html.norb .blog-list-page .blog-news-card h2 {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-h4) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  margin-bottom: 8px !important;
}
html.norb .blog-list-page .blog-news-card p {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body) !important;
  font-weight: 400 !important;
  line-height: var(--nf-lh-body) !important;
  margin-bottom: 12.8px !important;
}
html.norb .blog-list-page .blog-news-meta {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body-s) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}
html.norb .blog-list-page .blog-news-tag {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-label) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
}
html.norb .blog-list-page .blog-category-button {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}

/* ---------- 详情页字号 ---------- */
html.norb .blog-article-page .blog-article h1 {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-h1) !important;
  font-weight: 800 !important;
  line-height: 49.4px !important;
  letter-spacing: -0.5px !important;
  margin: 12.8px 0 0 !important;
}
/* 眉标：与站内 .witr_section_title_inner h2 等同一套规范（16/31/w400，不加大写） */
html.norb .blog-article-page .blog-article .eyebrow {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-eyebrow) !important;
  font-weight: 400 !important;
  line-height: var(--nf-lh-body) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 0 4.8px !important;
}
html.norb .blog-article-page .blog-article-meta {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body-s) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}
html.norb .blog-article-page .blog-article-meta span {
  font-weight: 600 !important;
}
html.norb .blog-article-page .blog-article .blog-summary {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-h4) !important;
  font-weight: 400 !important;
  line-height: var(--nf-lh-body) !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}
html.norb .blog-article-page .blog-content h2 {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-h3) !important;
  font-weight: 700 !important;
  line-height: var(--nf-lh-snug) !important;
  letter-spacing: -0.2px !important;
}
html.norb .blog-article-page .blog-content h3 {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-h4) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
}
html.norb .blog-article-page .blog-content h4 {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
}
html.norb .blog-article-page .blog-content p {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body) !important;
  font-weight: 400 !important;
  line-height: var(--nf-lh-body) !important;
  margin: 0 !important;
}
html.norb .blog-article-page .blog-content ul,
html.norb .blog-article-page .blog-content ol {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body) !important;
  font-weight: 400 !important;
  line-height: var(--nf-lh-body) !important;
}
html.norb .blog-article-page .blog-content li {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body) !important;
  font-weight: 400 !important;
  line-height: var(--nf-lh-body) !important;
}
html.norb .blog-article-page .blog-content figcaption {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body-s) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}
html.norb .blog-article-page .blog-article .text-link {
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body-s) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}

/* ---------- 正文表格（markdown 表格还原） ----------
 *
 * ⚠ 背景：内容库原先把 dd3 的 markdown 表格按行塞进 <p>，页面上显示成
 *   「| Material property | Practical implications |」这种带竖线的原始文本。
 *   已由「修blog表格.py」还原成 <table>，本段负责版式。
 *
 * ⚠ 字号口径：表格沿用站内 V4 的 --nf-body-s (14px) —— 也就是 v5.css 里
 *   标注为「表格、说明、辅助信息」那一档。
 *   不用 --nf-body (16px)：表格单元格是密集信息，16px 在 880px 正文宽里
 *   放 4 列会挤到换行失控；14px 与站内既有的参数表（pd-v3 的 .nr-spec-table
 *   用 .9rem ≈ 14.4px）同一量级，观感统一。
 *
 * ⚠ 为什么全部带 !important：
 *   v5.css 的收口里有 `body :where(table, thead, tbody, tr, td, th)` 这条
 *   字体家族规则（同为 !important），以及 bootstrap.min.css 的
 *   `table { border-collapse: collapse }` / `th,td { padding: ... }`
 *   —— 后者没有 !important，靠本文件的类名数（0,4,x）足够压过；
 *   但字体家族那条必须同等 important 才能稳定胜出。
 * ========================================================================== */
html.norb .blog-article-page .blog-content .noray-blog-table-wrap {
  display: block;
  width: 100%;
  margin: 4px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  background: #fff;
}
html.norb .blog-article-page .blog-content .noray-blog-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border: 0;
  background: #fff;
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body-s) !important;
  line-height: 1.5 !important;
  color: #55607a;
}
/* 表头：品牌橙浅底 + 主墨色字，与站内列表页/规格表的表头观感一致 */
html.norb .blog-article-page .blog-content .noray-blog-table thead th {
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid #e58722;
  background: #fdf3ea;
  color: #151a24;
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body-s) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}
html.norb .blog-article-page .blog-content .noray-blog-table tbody td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid #e6ebf2;
  background: #fff;
  color: #55607a;
  font-family: var(--nf-sans) !important;
  font-size: var(--nf-body-s) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-align: left;
  vertical-align: top;
}
/* 第一列 = 属性名（Material property / Type / Format …）→ 加粗提亮，做视觉锚点 */
html.norb .blog-article-page .blog-content .noray-blog-table tbody td.nb-key {
  color: #151a24;
  font-weight: 600 !important;
}
/* 斑马纹：只给偶数行一层极浅的底，帮助横向扫读 */
html.norb .blog-article-page .blog-content .noray-blog-table tbody tr:nth-child(even) td {
  background: #f7f9fc;
}
html.norb .blog-article-page .blog-content .noray-blog-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- 响应式（对齐 dd3 的断点 + 站内窄屏字号降幅） ---------- */
@media screen and (max-width: 990px) {
  .blog-news-section {
    width: min(100%, 100% - 1.5rem);
  }
  .blog-news-title {
    margin-bottom: 1.5rem;
    padding-top: .8rem;
  }
  .blog-news-layout {
    display: flex;
    flex-direction: column;
  }
  .blog-news-list {
    width: 100%;
    min-width: 0;
  }
  .blog-category-panel {
    order: -1;
    display: flex;
    gap: .45rem;
    padding: .55rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .blog-category-panel::-webkit-scrollbar {
    display: none;
  }
  .blog-category-button {
    white-space: nowrap;
    flex: none;
    gap: .4rem;
    width: auto;
    padding: .55rem .7rem;
  }
  .blog-news-card {
    grid-template-columns: 1fr;
    gap: .8rem;
    min-width: 0;
  }
  .blog-news-copy,
  .blog-news-card > .blog-news-media {
    grid-area: auto;
    min-width: 0;
  }
  .blog-news-copy h2,
  .blog-news-copy p {
    overflow-wrap: anywhere;
  }
  .blog-news-media {
    display: block;
  }
  .blog-news-media img {
    width: 100%;
    height: clamp(10rem, 52vw, 15rem);
  }
  .blog-news-meta {
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .8rem;
  }
  .blog-news-meta-right {
    gap: .4rem;
    min-width: 0;
    margin-left: auto;
  }
  .blog-news-meta time {
    white-space: nowrap;
  }
  .blog-article {
    padding: 1.8rem 0 3rem;
  }

  /* 窄屏标题行高随字号收（对齐 v4.css 第 13 节的 1.3） */
  html.norb .blog-list-page h1.blog-news-title,
  html.norb .blog-article-page .blog-article h1 {
    line-height: 1.3 !important;
  }

  /* 窄屏表格：表头允许换行（nowrap 会把 4 列表格撑到 800px 宽，
     横向滚动条里出现大片空白），单元格内边距收窄。 */
  html.norb .blog-article-page .blog-content .noray-blog-table thead th {
    white-space: normal !important;
    padding: 10px 12px !important;
  }
  html.norb .blog-article-page .blog-content .noray-blog-table tbody td {
    padding: 10px 12px !important;
  }
}