/* ==========================================================================
   portal-r37a.css —— 第 37a 轮（bug261022（1）问题 5 / 6 / 10）

   · 只作追加，不改 portal.css / portal-extra.css / portal-r29* ~ r36a.css；
   · 全部规则用 body 的页面类（.pg-news / .pg-news-detail / .pg-contact）收窄，
     全站引入也不会影响其它页面；
   · 回滚：删掉 head.html 里指向本文件的一行 <link> 即可完全复原
     （本文件不依赖模板改动，问题 5/6/10 都是纯 CSS 覆盖）。

   对应问题：
     5. 资讯中心置顶大卡片：上方空白 72px、下方 56px，上下不对称；
     6. 资讯详情：标题→元信息 48px、元信息→正文 60px，不一致且偏宽；
    10. 联系我们办公位置地图：图片按原始比例铺满，容器没有宽高比约束，容易被拉得很长。
   ========================================================================== */

/* ==========================================================================
   问题 5：资讯中心置顶卡上下间距改成同一个值（各 56px）
   --------------------------------------------------------------------------
   根因（改前的实际叠加值，按客户截图从「页头背景下沿」量起）：
     · 上间距（页头背景下沿 → 卡片）= .section--tight 的上内边距 72px（portal.css:135）
              + .top-slide 的 .mt-l 40px（portal.css:150；r34a:70 已把 margin-top 归零，
                所以截图时实际是 72px；若 r34a 未生效则会叠加成 112px）；
     · 下间距（卡片 → 列表头）= .section.news-top 的下内边距 0（portal-r34a.css:64）
              + .section.news-list-section 的上内边距 56px（portal-r34a.css:80）
              = 56px。
     所以客户看到的上方空白是 72px，下方是 56px，上大下小。

   做法：只改轮播块的上内边距，让页头背景下沿到卡片也是 56px：
     · 页头下沿 → 卡片：.section.news-top 上内边距 56px（卡片自身 margin 归零）；
     · 卡片 → 列表头：轮播块下 0 + 列表上 56px = 56px。
   特异性 (0,3,0) 高于 portal.css 的 .section/.section--tight 与 r34a 的 (0,2,0)，
   因此与本文件的挂载顺序无关；不动 .pagehead，避免影响其它内页的页头比例。
   ========================================================================== */
.pg-news .section.news-top {
  padding-top: 56px;
  padding-bottom: 0;
}

/* 卡片自身的 .mt-l（40px）必须归零，否则上间距又变成 96px */
.pg-news .news-top .top-slide {
  margin-top: 0;
}

/* 列表 section 上内边距锁定 56px，与上方总间距对齐 */
.pg-news .section.news-list-section {
  padding-top: 56px;
}

/* ==========================================================================
   问题 6：资讯详情「标题 → 元信息 → 正文」间距一致且收紧（各 24px）
   --------------------------------------------------------------------------
   根因（改前的实际叠加值）：
     · 标题→元信息 = .pagehead.nd-pagehead 下内边距 34px（portal-r32a.css:69）
                    + .nd-head__in .nd-metabar 上外边距 14px（portal-r31a.css:55）
                    = 48px；
     · 元信息→正文 = .section.nd-headbar 下内边距 0（portal-r32a.css:72）
                    + .section.nd-body 上内边距 28px（portal-r32a.css:73）
                    + .prose.mt-l 上外边距 32px（portal-r32a.css:75）
                    = 60px。
     两者不一致，且 60px 让正文与元信息显得脱节。

   做法：页头下 24px、元信息条上外边距 0 → 24px；
         正文块上内边距 0、正文 .prose 上外边距 24px → 24px。
   ========================================================================== */
.pg-news-detail .pagehead.nd-pagehead {
  padding-bottom: 24px;
}

.pg-news-detail .nd-head__in .nd-metabar {
  margin-top: 0;
}

.pg-news-detail .section.nd-body {
  padding-top: 0;
}

.pg-news-detail .nd-article > .prose.mt-l {
  margin-top: 24px;
}

/* ==========================================================================
   问题 10：联系我们-办公位置地图的宽高比
   --------------------------------------------------------------------------
   根因：portal.css:530 的 .contact-map 只有边框/圆角，没有宽高比与高度上限；
         portal.css:531 的 .contact-map img{width:100%;height:auto} 让 <img> 完全跟随
         上传图片的原始比例。后台传一张接近 4:3 / 竖版的长图时，地图区就会按原图
         高度铺满，在 1200px 容器里能高到 800px 以上。
   做法：figure 容器用 aspect-ratio 固定画面比例（PC 16/7、≤900px 4/3），并加 max-height
         兜底；图片 width/height 100% + object-fit:cover + object-position:center，
         超出比例的部分居中裁切，不再让容器被原图拉长。
   结构：<figure class="contact-map"><img><figcaption class="contact-map__addr"></figure>
         用 grid 两行（1fr + auto）让图注始终完整保留，只有图片区域参与比例计算。
   ========================================================================== */
.pg-contact .contact-map {
  aspect-ratio: 16 / 7;
  max-height: 480px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.pg-contact .contact-map > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

/* 没有上传地图时的占位：同样给宽高比，避免空态只剩一条 220px 的窄条 */
.pg-contact .contact-map--empty {
  aspect-ratio: 16 / 7;
  max-height: 480px;
  min-height: 0;
}

@media (max-width: 900px) {
  .pg-contact .contact-map,
  .pg-contact .contact-map--empty {
    aspect-ratio: 4 / 3;
    max-height: 420px;
  }
}