/* ==========================================================================
   portal-r38a.css —— bug261022（2）官网「资讯」相关 4 个缺陷（第 38 轮 a）
   · 只作追加，不改 portal.css / portal-extra.css / 既有 portal-r29*~r38f*.css
   · 引入位置：partials/head.html 最后一行（排在 portal-r38f.css 之后）
   · 本文件选择器清单：
       问题3  资讯中心：置顶大卡片上/下空白不对称          .pg-news .section.news-top
       问题13 资讯详情：主标题与元信息行间距过小            .pg-news-detail .pagehead.nd-pagehead
       问题21 H5 资讯中心：热门文章单行轮播条（仅移动端）   .pg-news .m-hot / .aside-nav
       问题22 H5 资讯详情：标题缩小 / 面包屑隐藏 / 分享条合并  .pg-news-detail …
   · 除问题3、问题13 这两处「排版数值」按客户要求全端生效外，
     问题21、问题22 的所有规则都关在 @media (max-width:900px) 内，桌面端零变化。
   ========================================================================== */

/* --------------------------------------------------------------------------
   问题3「置顶大卡片与顶部 Banner 区之间的空白过高，且卡片上方空白明显远大于下方」
   根因：portal-r37a.css:34-37 `.pg-news .section.news-top{padding-top:56px;
         padding-bottom:0}` 配合同文件 40-42 的 `.top-slide{margin-top:0}`：
         白底这一块里，页头（奶油色 Banner）下沿 → 卡片 = 56px，
         而卡片下沿正好压在 .news-list-section 灰色底的上边界上 —— 卡片下方白色 = 0px。
         实测 1440px：上 56px / 下 0px，与客户描述完全一致（截图里卡片下沿就是白色与灰色的分界）。
   改法：白底这段改成上下各 32px；灰色列表区的上内边距 56px → 24px。
         白底里「页头 → 卡片」= 32px、「卡片 → 灰底分界」= 32px，两段相等；
         卡片 → 列表内容仍是 32 + 24 = 56px（与改前一致），
         只是把「白→灰」的分界线下移，不会重新出现第 34 轮修掉的那种 168px「白色断层」。
         无置顶文章时 .news-top 整块不渲染，第二条规则不命中，列表区仍是 56px 上内边距。
   -------------------------------------------------------------------------- */
.pg-news .section.news-top {
  padding-top: 32px;
  padding-bottom: 32px;
}
.pg-news .section.news-top + .section.news-list-section {
  padding-top: 24px;
}

/* --------------------------------------------------------------------------
   问题13「文章主标题与下方元数据行几乎贴在一起」
   根因：portal-r37a.css:65-67 把 `.pg-news-detail .pagehead.nd-pagehead` 的下内边距
         收到 24px，同文件 69-71 又把 `.nd-metabar` 的上外边距归零，
         于是 h1 行盒底 → 元信息行顶只剩 24px；而 h1 是 42px / 行高 1.75 的大字，
         元信息行的分类徽标又正好骑在「奶油色页头 / 白色正文」的分界线上，
         视觉上两者粘连（客户截图 image8 标「紧贴着」）。
   改法：页头下内边距 24px → 40px（设计系统里的 mt-l 间距档）。只动这一个数值，
         元信息行随之整体下移 16px，与正文之间的 24px 不变；
         桌面端量到的「标题底（h1 行盒底）→ 元信息行顶」= 40px。
   -------------------------------------------------------------------------- */
.pg-news-detail .pagehead.nd-pagehead {
  padding-bottom: 40px;
}
/* 元信息行（分类/日期/阅读/分享）所在区块原本 padding-top:0，紧贴上方金色页头底边缘；
   这里补 24px 顶部留白，让该行与金块之间留出白底呼吸空间（PC/全端生效） */
.pg-news-detail .section.nd-headbar {
  padding-top: 24px;
}

/* --------------------------------------------------------------------------
   问题21 H5 资讯中心：移除「最新政策」「免费诊断」，热门文章改成单行轮播条
   根因：news.html 侧栏（.aside-nav）在 ≤1180px 就整块落到列表上方，
         H5 首屏里塞着「热门文章 / 最新政策 / 免费诊断」三块，
         客户要求 H5 只保留一条醒目的热门条。
   改法：模板里新增 .m-hot（见 news.html，默认 display:none，桌面端不占位）；
         ≤900px 时隐藏整个 .aside-nav，只显示 .m-hot：
           · 左侧固定红色「热门」标签；
           · 右侧 .m-hot__view 固定 22px 高、隐藏溢出，只露一行标题，
             .m-hot__track 由 portal-r38a.js 每 4s 上移一条（末条→首条无缝）；
           · 标题单行省略号，所以「后台配 1 条还是 N 条」，容器高度恒为 52px。
   -------------------------------------------------------------------------- */
.m-hot {
  display: none;
}

@media (max-width: 900px) {
  /* H5：整块侧栏（热门文章列表 / 最新政策 / 免费诊断）直接移除，由热门条取代 */
  .pg-news .aside-nav {
    display: none;
  }

  .pg-news .m-hot {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 固定高度：热门条数变化（1 条 / 5 条 / 更多）都不改变占位 */
    height: 52px;
    box-sizing: border-box;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--line, #EDE6D6);
    border-radius: 12px;
    overflow: hidden;
  }

  .pg-news .m-hot__tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, #FF4B3E, #E01F0F);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .5px;
    box-shadow: 0 2px 6px rgba(224, 31, 15, .28);
  }

  .pg-news .m-hot__view {
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    overflow: hidden;
  }

  .pg-news .m-hot__track {
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
  }

  .pg-news .m-hot__item {
    display: block;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    color: var(--navy-900, #1B2A41);
    /* 单行：标题再长也只占一行，容器高度不被文字行数影响 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pg-news .m-hot__item:hover,
  .pg-news .m-hot__item:focus-visible {
    color: var(--gold-600, #967000);
  }
}

/* --------------------------------------------------------------------------
   本轮 H5 资讯中心：置顶推荐大卡片压缩（≤900px）
   根因：≤720px 单列堆叠，封面 photo--16x9 全宽过高；分类标签/标题(内联23px)/简介
         字号偏大；标题与标签间距偏大；「阅读全文」按钮在整卡可点前提下冗余。
   改法：收紧封面比例、缩小标签/标题/简介字号；标题贴紧标签并限 2 行、简介限 1 行；
         隐藏「阅读全文」。
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* 封面图大幅缩短（16:9 → 约 2.4:1） */
  .pg-news .news-top .photo.photo--16x9 { aspect-ratio: 2.4 / 1; }
  .pg-news .news-top .photo.photo--16x9 img { width: 100%; height: 100%; object-fit: cover; }
  /* 图片下方的分类小标签：移动端直接移除（整卡可点，标签冗余） */
  .pg-news .news-top .badge { display: none; }
  /* 标题：贴紧图片、覆盖内联23px、限 2 行 */
  .pg-news .news-top h3 {
    margin-top: 0;
    font-size: 16.5px !important;
    line-height: 1.45 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 简介：缩小、限 1 行 */
  .pg-news .news-top p {
    margin-top: 4px;
    font-size: 12.5px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 整卡已可点，「阅读全文」按钮冗余，移动端隐藏 */
  .pg-news .news-top .btn { display: none; }

  /* 缩减置顶卡片四周外边距：上下（section 内边距 32→20）、左右（容器留白 24→14） */
  .pg-news .section.news-top { padding-top: 20px; padding-bottom: 20px; }
  .pg-news .section.news-top .container { padding-left: 14px; padding-right: 14px; }
  /* 缩减置顶卡片【内部】内边距：封面图 + 文字外圈从 30/26 收紧到 14/14 */
  .pg-news .news-top .card { padding: 14px 14px; }
}

/* --------------------------------------------------------------------------
   问题22 H5 资讯详情页：标题缩小 / 面包屑与分类标签、分享文字去掉 / 分享图标合并到阅读量同行
   根因：
     · 标题：portal.css:365 `.pagehead h1{font-size:42px;line-height:1.75}` 全文没有移动端覆盖，
       375～390px 宽的 H5 上标题占 3～4 行、压满首屏（image11 标「缩小」）；
     · 面包屑：news-detail.html 的 .crumb 一直渲染（portal.css:380），H5 上占一行且不可点（image11 标「去掉」）；
     · 分类徽标：r31a.css:19-25 把 .badge 塞进 .nd-inforow，H5 上与日期/阅读挤在一行（image11 标「去掉」分类）；
     · 分享条：r29b.css:272-281（≤768px）把 .nd-share 改成 width:100%;justify-content:flex-start，
       于是「分享 + 3 个 34px 圆钮」整行掉到第二行、贴左边（image11 标「去掉」分享文字、「缩小居右」）。
   改法（全部锁在 @media (max-width:900px)，桌面端零变化）：
     · h1 42px → 26px / 行高 1.5；
     · 面包屑、分类徽标、分享文字 display:none；
     · 元信息行保持一行不换行：阅读量+日期居左，分享图标组 margin-left:auto 居右；
     · 分享圆钮 34px → 24px、svg 18px → 12px、间距 8px → 6px。
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* 1) 顶部新闻标题字号适当缩小（26 → 22px），行高收紧 */
  .pg-news-detail .pagehead h1 {
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -.2px;
    margin-top: 0; /* 面包屑已隐藏，去掉默认 14px 上间距，保证整块真正居中 */
  }

  /* 2) 标题在背景块内垂直居中：.pagehead 默认 block + 大上内边距会让标题贴顶；
        改为 flex 列居中并给最小高度，让标题落在背景块正中，上下留呼吸感 */
  .pg-news-detail .pagehead.nd-pagehead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
    padding-top: 20px;
    padding-bottom: 36px; /* 3) 与下方「发布时间」行保持适当间距 */
  }

  .pg-news-detail .nd-pagehead .crumb {
    display: none;
  }

  .pg-news-detail .nd-inforow .badge {
    display: none;
  }

  /* 元信息行：一行不换行，左「日期 + 阅读」，右「3 个分享图标」 */
  .pg-news-detail .nd-metabar {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .pg-news-detail .nd-share {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  .pg-news-detail .nd-share__label {
    display: none;
  }

  .pg-news-detail .nd-share__acts {
    gap: 6px;
  }

  .pg-news-detail .nd-share__btn {
    width: 24px;
    height: 24px;
  }

  .pg-news-detail .nd-share__btn svg {
    width: 12px;
    height: 12px;
  }

  /* 分享组贴右边后，微信二维码浮层改从右侧展开，避免 150px 的二维码顶出屏外 */
  .pg-news-detail .nd-share__qr {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
  }
}

/* --------------------------------------------------------------------------
   bug261026（1）问题6（返工）：资讯详情页「主标题 ↔ 元数据行」间距仍偏紧，
   元数据行（分类标签/日期/阅读量/分享）看起来压在金色页头与白底的交界处。
   处理思路：把呼吸空间全部给到页头下方 + 元数据行上方，并把元数据行彻底推进白底区块。
     · 页头下内边距 40px → 56px：标题和金色块拉开距离；
     · 元数据行所在区块上内边距 24px → 32px：金块与元数据行之间出现明显白底留白；
     · 显式给该区块白底，避免它继承到上方金色页头的视觉（原来靠默认透明，交界线正好压在
       元数据行的中线上，客户因此觉得「压在交界处」）。
   这两条都在 .pg-news-detail 作用域内，只影响资讯详情页。
   -------------------------------------------------------------------------- */
.pg-news-detail .pagehead.nd-pagehead {
  padding-bottom: 56px;
}

.pg-news-detail .section.nd-headbar {
  padding-top: 32px;
  background: #fff;
}

@media (max-width: 900px) {
  .pg-news-detail .pagehead.nd-pagehead {
    padding-bottom: 40px;
  }

  .pg-news-detail .section.nd-headbar {
    padding-top: 22px;
  }
}