/* desktop-max.css
   桌面端将 H5 限制为 500px 宽列并水平居中, 高度随内容按比例自然缩放。
   仅对宽度 >500px 的屏幕生效; 手机端(<500px)完全不受影响。

   注意: 不能给 body 设 max-width —— 应用的滚动锁定库会把它误判为
   滚动条宽度并向 body 注入 padding(calc(50vw-250px)), 压碎内容。
   因此约束放在 #root 上, body 保持全宽。
*/
@media (min-width: 501px) {
  /* 列外侧背景 */
  html {
    background: #0d0d0d !important;
  }
  body {
    padding: 0 !important;             /* 去掉移动端 16px 边距, 列边缘对齐 */
    background: transparent !important; /* 透出 html 深色, 列内外对比 */
  }
  /* 内容列: 最大 500px 宽, 居中, 带投影 */
  #root {
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }

  /* 全宽遮罩/覆盖层 → 收进 500px 列 */
  ._mask,
  .ios-guide-modal,
  .adm-mask,
  .notice-dialog,
  .ui-overlay {
    left: calc(50vw - 250px) !important;
    right: auto !important;
    width: 500px !important;
  }

  /* 底部固定栏/底部弹层 → 保持贴底, 只占列宽 */
  .page-fixed-footer,
  .adm-popup {
    left: calc(50vw - 250px) !important;
    right: auto !important;
    width: 500px !important;
  }

  /* 底部抽屉 */
  .ui-drawer-content[data-vaul-drawer-direction="bottom"] {
    left: calc(50vw - 250px) !important;
    right: auto !important;
    width: 500px !important;
  }

  /* 右侧抽屉 → 贴列右缘 */
  .ui-drawer-content[data-vaul-drawer-direction="right"] {
    right: calc(50vw - 250px) !important;
    left: auto !important;
    width: 75% !important;
  }

  /* 两侧悬浮面板 → 收进列内(距列边缘 12px) */
  .float-panel {
    left: auto !important;
    right: calc(50vw - 238px) !important;
  }
  .left-float-panel {
    right: auto !important;
    left: calc(50vw - 238px) !important;
  }
}

/* 视口仍是桌面宽度但内容列只有 500px:
   app 按视口(<768px)切换列数的网格, 会误用桌面列数(如 5列→10列)硬塞进 500px。
   这里在桌面端把它们的列数强制回手机值(等价 500px 真机布局)。 */
@media (min-width: 768px) {
  /* 图标/文字广告格: 手机 5列 → 桌面 10列(用户反馈的压扁问题) */
  .text-square {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  /* 图标格: 手机 6列 → 桌面 12列 */
  .icon-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  /* 首页卡片: 手机 1列 → 桌面 3列 */
  .home-card__grid,
  .home-card__grid--featured {
    grid-template-columns: 1fr !important;
  }
  /* 视频卡片: 手机 1列 → 桌面 2/3/4列 */
  .video-card__grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  /* 媒体/精选条: 桌面 2列 → 手机 1列 */
  .media-strip,
  .feature-strip {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  /* 视频详情推荐: 桌面 8列 → 手机 2列 */
  .video-detail-page__recommend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}