/**
 * 2026APEC“中国年”经济周刊 - 移动端适配样式（通用版）
 * 使用 class 与 id 前缀/后缀选择器，不依赖具体数字 ID，页面结构变化时仍适用。
 * 使用方式：在页面 <head> 中增加 <link rel="stylesheet" href="2026APEC-mobile.css" />
 * 重要：必须同时添加 viewport meta，否则手机端不会按设备宽度渲染：
 *   <meta name="viewport" content="width=device-width, initial-scale=1" />
 * 样式必须写在 </body> 前或 <head> 内，不能放在 </html> 后面！
 *
 * 选择器约定：id 以 f- 为框架、a- 为区域、w- 为组件；-i 为 inner，-c 为 content
 *
 * 顶部留白：CSS 无法根据 <style> 里的 body { background: url(...) } 判断是否有背景图，
 * 只能根据 body 的 style 属性。若模板在「有背景图」时给 body 输出内联 style（如
 * style="background:url(...); padding-top:400px"），本文件会用 body[style*="background"]
 * 自动应用移动端留白；否则默认不撑开头部。也可用 class .has-body-bg 作为后备。
 */

/* 移动端断点：平板及以下 */
@media screen and (max-width: 768px) {
  /* 根元素：防止外部样式限制宽度导致不适配 */
  html {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    /* 默认不撑开头部；有背景图时由下面选择器覆盖 */
  }

  /* 有 body 背景图时：通过 body 的内联 style 判断（模板需在有背景时输出 style="background:..."）或 class 后备 */
  body[style*="background"],
  body.has-body-bg {
    padding-top: 120px !important;
    background-size: contain !important;
  }

  /* 根容器与主框架：宽度与左右边距统一，保留垂直方向间距避免重叠 */
  #main,
  .diy-frame,
  [id^="f-"],
  [id^="w-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    height: auto !important;
    /* 不强制 margin-top/padding-top 为 0，避免内容全部叠在一起 */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* 主内容区第一层框架：左右留白 */
  #main > .diy-frame:first-child,
  #main > [id^="f-"]:first-child {
    padding-left: 12px;
    padding-right: 12px;
  }

  /*
   * 说明：原「第 3 个 frame 高度为 0 + 子元素绝对定位」的写法会令主内容区塌陷并重叠，
   * 已移除。若某专题页确认为「大图背景 + 底部链接」结构，再单独用 class 或 id 覆盖。
   */

  /* 大图背景框内的链接区：缩小 padding（原 padding-top 很大的那一块） */
  .diy-content-picture a img,
  [id$="-c"].diy-content-picture img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
  }

  /* 标题图区：任意 w-*-i 的 margin */
  .diy-widget > .diy-inner,
  [id$="-i"].diy-inner {
    margin-bottom: 10px !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
  }

  /* 主内容区第一个 frame 内适当上间距，避免顶在标题下 */
  #main > .diy-frame:first-of-type .diy-inner,
  #main > [id^="f-"]:first-of-type .diy-inner {
    margin-top: 16px !important;
  }

  .diy-content-picture img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 左右栏区域：所有 a- 区域全宽、取消浮动 */
  .diy-area[id^="a-"],
  [id^="a-"] {
    width: 100% !important;
    float: none !important;
  }

  /* 左侧栏目内边距 */
  .diy-frame[id^="f-"] {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 标题列表：所有带 title 的 content 及 -c 内容区（手机端略大便于阅读） */
  .diy-content-title,
  .diy-content-title *,
  [id$="-c"].diy-content-title,
  [id$="-c"].diy-content-title * {
    font-size: 20px !important;
  }

  .title-list a {
    word-break: break-word;
  }

  /* 中间大区块（左图+右文）：上下堆叠，若结构变化请调整 nth-child 序号 */
  #main > .diy-frame:nth-child(6),
  #main > [id^="f-"]:nth-child(6) {
    margin-top: 60px !important;
  }

  /* 正文 HTML 内容区（手机端字号略大便于阅读） */
  .diy-content-html,
  .diy-content-html *,
  [id$="-c"].diy-content-html,
  [id$="-c"].diy-content-html * {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }

  [id$="-i"].diy-inner .diy-content-html,
  .diy-inner .diy-content-html {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  /* 页内所有图片通用：响应式 */
  #main img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 头部视频/图盒子 */
  .headerVideoBox,
  .headerVideo,
  #headerVideoPic {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 幻灯片：任意包含 .slider-content 的 frame，移动端宽度 100%、图片完整显示（不依赖具体 id） */
  .diy-frame:has(.slider-content) {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .diy-frame:has(.slider-content) .diy-area,
  .diy-frame:has(.slider-content) .diy-widget,
  .diy-frame:has(.slider-content) .diy-inner {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 幻灯片可视区域：给最小高度，避免高度塌陷导致几乎看不见 */

  #main .slider-content,
  #main ul.slider-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 52vw !important;
  }
  #main .slider-content li {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52vw !important;
    box-sizing: border-box !important;
  }
  #main .slider-content li a.pic,
  #main .slider-content li .pic {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52vw !important;
  }
  #main .slider-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* 底部深色版权区：最后一个 f- 或带深色背景的 frame */
  .diy-frame:last-of-type[id^="f-"],
  #main > .diy-frame:last-of-type {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 底部版权区内 widget 的 inner/c */
  #main .diy-frame:last-of-type .diy-inner,
  #main .diy-frame:last-of-type [id$="-i"] {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  /* #main .diy-frame:last-of-type .diy-content-html,
  #main .diy-frame:last-of-type .diy-content-html *,
  #main .diy-frame:last-of-type [id$="-c"],
  #main .diy-frame:last-of-type [id$="-c"] * {
    font-size: 14px !important;
  } */

  /* 返回顶部按钮 */
  .backToTop {
    right: 16px !important;
    bottom: 24px !important;
    width: 44px !important;
    height: 44px !important;
    background-size: contain !important;
  }

  #main .mod-gallery .gallery-photo {
    min-height: 200px !important;
  }
}

/* 小屏手机进一步收紧 */
@media screen and (max-width: 480px) {
  body[style*="background"],
  body.has-body-bg {
    padding-top: 80px !important;
  }
  #main > .diy-frame:first-child,
  #main > [id^="f-"]:first-child {
    padding-left: 10px;
    padding-right: 10px;
  }

  .diy-content-title,
  .diy-content-title *,
  [id$="-c"].diy-content-title,
  [id$="-c"].diy-content-title * {
    font-size: 18px !important;
  }

  .diy-content-html,
  .diy-content-html *,
  [id$="-c"].diy-content-html,
  [id$="-c"].diy-content-html * {
    font-size: 16px !important;
  }

  #main > .diy-frame:nth-child(6),
  #main > [id^="f-"]:nth-child(6) {
    margin-top: 40px !important;
  }

  /* #main .diy-frame:last-of-type .diy-content-html,
  #main .diy-frame:last-of-type .diy-content-html *,
  #main .diy-frame:last-of-type [id$="-c"],
  #main .diy-frame:last-of-type [id$="-c"] * {
    font-size: 14px !important;
  } */
}

/* 全局：防止横向溢出、清除可能的最小宽度 */
@media screen and (max-width: 768px) {
  .diy-frame,
  .diy-area,
  .diy-widget,
  .diy-inner,
  .diy-content {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin-top: 0 !important;
  }
}
