/* ==========================================================================
   新闻详情页 — 移动端适配样式
   适用范围：news_detail/*.html、news_detail_1/*.html、news-detail/*.html
   注入方式：maintenance/scripts/cms/inject_news_mobile_css.py（幂等）
   说明：CMS 导出的正文图片带固定像素 width/height，且 .image_resized 写死了
        width:50%（基于桌面宽度），手机视口下会横向溢出。本文件用高特异性
        选择器 + !important 兜底。
   ========================================================================== */

/* 1. 通用兜底：正文区所有图片、figure、image_resized 容器最大不超容器宽，
      宽高自适应，避免横向溢出 */
.e_richText-38 img,
.e_richText-38 figure,
.e_richText-38 .image,
.e_richText-38 .image_resized {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.e_richText-38 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 2. 移除 CMS 导出的固定像素 width 属性的强制效果 */
.e_richText-38 img[width],
.e_richText-38 img[height] {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}

/* 3. 移动端（≤ 768px）：image_resized 写死的 width:50% 在小屏太挤，
      统一拉伸到 100% 容器宽 */
@media (max-width: 768px) {
  .e_richText-38 .image_resized,
  .e_richText-38 figure,
  .e_richText-38 .image {
    width: 100% !important;
  }

  /* 表格也容易溢出，给一个滚动兜底 */
  .e_richText-38 table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 正文段落里嵌套的横向滚动容器 */
  .e_richText-38 pre,
  .e_richText-38 code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* 4. 超小屏（≤ 480px）：让标题与正文边距更紧凑 */
@media (max-width: 480px) {
  .e_h1-20 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    padding: 0 12px !important;
  }
  .e_richText-38 {
    padding: 0 12px !important;
  }
}

/* 5. 移动端（≤ 768px）：隐藏面包屑 + 5 个栏目快捷卡，让正文 H1 直达首屏。
      这两块在桌面端保留，原因是桌面端浏览空间充足、起到导航辅助作用；
      移动端用户已可通过顶部汉堡菜单访问相同栏目，无需重复占位。
      共同父容器 id 前缀 `c_static_001_P_1220-` 在 56 篇新闻中通用。 */
@media (max-width: 768px) {
  div[id^="c_static_001_P_1220-"] {
    display: none !important;
  }
}