@charset "utf-8";
/* ==========================================================================
   css/news-mobile.css — news 详情页 + 新闻列表/首页 移动端适配
   --------------------------------------------------------------------------
   2026-09-08 新建，与 css/mobile-hf.css 配合使用（由 news/publish.py 注入）。
   覆盖两类页面:
     A. 新闻详情页 (news/signing/2026/...html 等三级目录)
        —— 结构 .wrap > .ny_center(980) > [ .center_left(206) + .newszxss_right(720) ]
           正文 .newsdtext(710) / .newsbtitle(720) / .newsdaohang(720) / .newsptime(720内联)
           / .backtop(700) / .right_banner(720 class) / .zxss_title(204)
     B. 新闻列表/首页 (news/index.html, news/newsindex.html)
        —— 结构 .wrap > .content-01(960) > .news > .news_box > .news_item(450 两列) + .flexslider(380)

   覆盖技巧（与 blog-mobile.css 一致的血泪教训）:
     1) 内联 style 带 "width:720px" 与 "width: 720px"(带空格) 两种写法，属性选择器都写。
     2) 首页 .title_txt 里的「更多」链接内联 margin-left:850px / 350px / 353px，
        窄屏会横向溢出，必须清零（属性选择器命中内联值，类选择器压不住）。
     3) float 元素一律 float:none 单列化，不删 DOM。
   ========================================================================== */

@media (max-width: 768px) {

  /* 通用：图片自适应（覆盖 .newsdtext img{max-width:680px} 等内联限制） */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ========================================================================
     一、新闻详情页 (A 类)
     ======================================================================== */
  /* 1.1 全部固定宽度容器 → 100% */
  .ny_center,
  .center_left,
  .center_right,
  .newszxss_right,
  .newsdtext,
  .newsbtitle,
  .newsdaohang,
  .backtop,
  .zxss_title,
  .center_left ul {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 1.2 外层容器左右留白 */
  .ny_center {
    padding: 0 12px !important;
    background-color: #ffffff !important;
  }
  /* 1.2a 移动端去掉 .ny_center 的 980×350 浅蓝云朵装饰背景图
     —— 桌面端保留（980×980 区域有云朵+浅蓝视觉中心）
     —— 移动端（<=768）裁剪后只看到一块浅蓝云朵，与文章无关，反而杂乱 */
  .ny_center {
    background-image: none !important;
  }

  /* 1.3 侧栏导航与正文 单列化（去 float） */
  .center_left,
  .newszxss_right,
  .fl {
    float: none !important;
  }
  /* 1.3a 移动端隐藏左侧栏「新闻活动 + ▶ 新闻」
     —— 与顶部 header_sub.js 全局导航重复，红框区域直接隐藏 */
  .center_left {
    display: none !important;
  }
  /* 侧栏竖线背景图在窄屏拉伸难看，去掉 */
  .center_left {
    background: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
  }
  .center_left ul {
    border-left: 1px solid #cbccce !important;
    border-right: 1px solid #cbccce !important;
  }
  .cleft_bottom {
    display: none !important;
  }
  /* 1.3b 老详情页硬编码 .footer（980/1008px，非 footer_sub.js 注入）→ 全宽，
        否则整页横向溢出（所有老页通病） */
  .footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .footer p {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 正文区留白 */
  .newszxss_right {
    padding: 0 12px !important;
  }
  .newsdtext {
    padding: 0 12px !important;
  }

  /* 1.4 详情页内联固定宽度（老页常见 720/710/700/690/680/670/660/650/640/630/620/610/600
         以及整页 980/1008 等）统一压成 100%，避免横向溢出 */
  [style*="width:1008px"], [style*="width: 1008px"],
  [style*="width:980px"], [style*="width: 980px"],
  [style*="width:720px"], [style*="width: 720px"],
  [style*="width:710px"], [style*="width: 710px"],
  [style*="width:700px"], [style*="width: 700px"],
  [style*="width:690px"], [style*="width: 690px"],
  [style*="width:680px"], [style*="width: 680px"],
  [style*="width:670px"], [style*="width: 670px"],
  [style*="width:660px"], [style*="width: 660px"],
  [style*="width:650px"], [style*="width: 650px"],
  [style*="width:640px"], [style*="width: 640px"],
  [style*="width:630px"], [style*="width: 630px"],
  [style*="width:620px"], [style*="width: 620px"],
  [style*="width:610px"], [style*="width: 610px"],
  [style*="width:600px"], [style*="width: 600px"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 1.5 右侧 banner 图（class right_banner = 720px） */
  .right_banner {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* 1.6 标题 / 面包屑 / 时间行 全宽 + 左对齐 */
  .newsbtitle,
  .newsdaohang,
  .newsptime {
    width: 100% !important;
    text-align: left !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  .newsptime {
    float: none !important;
  }
  /* 1.6a 大标题移动端字号减小 + 高度自适应（原 height:38px 写死导致
     2 行标题溢出 16px 挤压下方发布时间），高度增加避免文字溢出 */
  .newsbtitle {
    height: auto !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  .newsbtitle p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* 1.7 正文排版微调 */
  .newsdtext p {
    line-height: 1.8 !important;
  }
  .newsdtext table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ========================================================================
     二、新闻列表 / 首页 (B 类)
     ======================================================================== */
  /* 2.1 外层 960 容器 → 全宽 */
  .content-01 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* 2.2 新闻盒两列 → 单列 */
  .news_item {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    /* 上下间距加大 (2026-09-10 调整, 让卡片内条目更舒展)
       2026-09-10 二次: 去掉 border-bottom 分隔横线 (用户反馈「这个横线去掉」),
       只保留 padding/margin 的呼吸感 */
    padding: 16px 4px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
  }
  .news_item:last-child {
    margin-bottom: 0 !important;
  }
  .news_box .content {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 2.3 轮播图 380px → 全宽 */
  .flexslider,
  [style*="width:380px"], [style*="width: 380px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  .flexslider .slides li,
  [style*="height:200px"], [style*="height: 200px"] {
    height: auto !important;
    min-height: 0 !important;
  }
  .flexslider img {
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  /* 2.3b 修复：.news li a:before{content:'•  '} 误命中轮播 slide 的 <a>，
     导致标题栏与轮播图之间出现孤立 •  */
  .flexslider .slides a:before,
  .flexslider a:before {
    content: none !important;
  }

  /* 2.3c 修复：.flexslider 容器 margin-bottom:60px + .flex-control-nav
     position:absolute; bottom:-40px + 容器内 border/box-shadow 占位，
     使 dots 离图片 136px 远。改为 dots 直接跟在图片下、收紧容器外边距 */
  .flexslider {
    margin: 0 0 10px !important;
    overflow: hidden;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  /* 2.3d 移动端隐藏轮播图下方的 dots 导航圆点 + 左右箭头
     —— 用户截图红框要求：图片保留，但圆点和下方空白去掉 */
  .flex-control-nav,
  .flex-direction-nav {
    display: none !important;
  }
  /* 2.3e (2026-09-10) 用户反馈：轮播图与下方新闻列表之间的空白太大 (实测 77px)
     来源 = ① 5 张轮播图原始比例 1.776~2.142 不统一, 容器被最高的那张撑到 180px,
              当前图越低, 图下死区越大 (实测 0~31px)
            ② 装轮播的那条 .news_item padding-bottom:16px + margin-bottom:14px
            ③ 下一条 .news_item padding-top:16px
     处理 = 桌面端本来就是固定 380×200 (比例 1.9) 盒子裁切, 移动端沿用同一比例
            统一裁切 → 容器高度恒定, 既没有死区也不再随轮播跳高;
            含轮播的 .news_item 不要底部留白, 下一条只留 12px 顶部呼吸位。 */
  .flexslider {
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  .flexslider .slides {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  .flexslider .slides > li,
  .flexslider .slides > li > a {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }
  .flexslider img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    /* 与桌面端 380×200 盒子同比例, 5 张图统一裁切, 高度恒定 */
    aspect-ratio: 1.9 / 1 !important;
    object-fit: cover !important;
  }
  .news_item:has(.flexslider) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .news_item:has(.flexslider) + .news_item {
    padding-top: 12px !important;
  }

  /* 2.4 标题栏「活动 / 签约新闻 / 媒体新闻」+ 右侧「更多」链接
        —— 首页 .title_txt 里的「更多」<a> 内联 margin-left:850px/350px/353px，
           以及媒体 .title_txt 自身内联 margin-left:30px，都会横向溢出，必须清零 */
  [style*="margin-left:850px"], [style*="margin-left: 850px"],
  [style*="margin-left:350px"], [style*="margin-left: 350px"],
  [style*="margin-left:353px"], [style*="margin-left: 353px"],
  [style*="margin-left:30px"],  [style*="margin-left: 30px"] {
    margin-left: 0 !important;
  }
  /* 修复移动端堆叠 bug：原 .news_title height:40px 固定 + 单条蓝底，
       第二个 .news_title 内嵌「签约+媒体」两个 .title_txt 堆叠时，
       第二个标题落在蓝底之外。改为每条标题独立蓝条 */
  .news_title {
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .title_txt {
    float: none !important;
    display: block !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    line-height: 40px !important;
    font-size: 16px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    /* 2026-09-10 用户反馈：title_txt 用 AI 背景效果
       原为浅蓝底 #EDF2F8 + 1px 灰蓝底线；改成品牌蓝→靛→青渐变胶囊条，
       文字反白。渐变硬编码(不用 var)，避免被其他 CSS 覆盖。 */
    background: linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(5,100,245,0.22) !important;
    font-weight: 700 !important;
  }
  /* 2.4c 签约/媒体两个 title_txt 堆叠时加白底间隙，避免两蓝条视觉粘连 */
  .title_txt + .title_txt {
    margin-top: 8px !important;
  }
  /* 2.4d 移动端把「签约+媒体」section 重排成上下两个独立卡片：
     签约标题 → 签约列表(6条) → 媒体标题 → 媒体列表(6条)
     桌面端 .news_title 含两个 title_txt 横排共用蓝底、两个 .news_item 横排保持不变。 */
  .news_box.clearfix:nth-of-type(2) > .news_box.clearfix {
    display: flex !important;
    flex-direction: column !important;
  }
  .news_box.clearfix:nth-of-type(2) > .news_box.clearfix > .news_title {
    display: contents !important;
  }
  .news_box.clearfix:nth-of-type(2) > .news_box.clearfix .title_txt:nth-child(1) {
    order: 0 !important;
    margin-top: 0 !important;
  }
  .news_box.clearfix:nth-of-type(2) > .news_box.clearfix .news_item:nth-child(2) {
    order: 1 !important;
  }
  .news_box.clearfix:nth-of-type(2) > .news_box.clearfix .title_txt:nth-child(2) {
    order: 2 !important;
    margin-top: 16px !important;
  }
  .news_box.clearfix:nth-of-type(2) > .news_box.clearfix .news_item:nth-child(3) {
    order: 3 !important;
  }
  .title_txt a {
    float: right !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    /* title_txt 已改成蓝→青渐变底，右侧「更多」链接必须反白才看得清 */
    color: #ffffff !important;
    opacity: .92 !important;
    text-decoration: none !important;
  }
  /* 小灰方块装饰隐藏，避免挤占空间 */
  .graph {
    display: none !important;
  }

  /* 2.6 (2026-09-10) 用户反馈：后两个卡片(签约/媒体)外面多套了一层玻璃壳, 太啰嗦。
     DOM 实际是 .news > .news_box(外层壳) > .news_box(内层卡片)，两层都命中了
     mobile-hf.css 的玻璃卡片样式 → 看上去「外面多了一层」。
     这里把外层壳的玻璃/内边距全部去掉，只保留内层那一张卡。 */
  .news > .news_box:has(> .news_box) {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  /* 2.5 年份归档页 (news/newsindex.html) 标题 */
  .news_title .title_txt {
    font-size: 16px !important;
  }
}