/* ============================================================
 * 影造AI · 独立玩法页 桌面端宽屏适配（desktop-play.css）
 * 这些页面（带货/探店/跳舞/换装/表情包…）原本是 max-width:480 手机壳，
 * 电脑宽屏下锁在中间一条、两侧大片留白。本样式在 ≥960px 时：
 *   ① 容器放到 1080px  ② 表单卡片双栏排布  ③ 样片区/模板区跨整行
 *   ④ 底部操作条同步加宽。手机端（<960px）一律不动，保持原手机布局。
 * 靠统一命名约定 [class$="-wrap"/"-head"/"-body"/"-card"/"-foot"] 命中，
 * 与各页具体前缀（gv/sv/pd/eg/os…）解耦。
 * 「该占整行」的卡片（模板/品类/分段选择/横滑样片/长说明等）在 HTML 上
 * 显式标 .dp-wide 类，不用 :has() —— 360极速(Chromium95)等旧内核也一致。
 * ============================================================ */
@media (min-width: 960px) {
  /* 主容器放开宽度，保留居中 */
  [class$='-wrap'] {
    max-width: 1080px !important;
  }

  /* 顶部条跟容器同宽（多数 -head 是普通流元素，天然撑满；兜底） */
  [class$='-wrap'] > [class$='-head'] {
    max-width: 1080px;
  }

  /* 内容区：双栏网格，同行卡片等高（上下边缘对齐），
     底部留出固定操作条的高度，最后一张卡不被遮挡 */
  [class$='-wrap'] > [class$='-body'] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    /* 等高对齐（2026-10-17 老板令：同行卡片上下边缘对齐） */
    align-items: stretch;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 120px;
  }

  /* 卡片：去掉手机端的下边距（交给 grid gap），自身成为网格项 */
  [class$='-wrap'] > [class$='-body'] > [class$='-card'] {
    margin-bottom: 0 !important;
  }

  /* 效果样片区：跨整行（自动注入的横滑视频带） */
  [class$='-wrap'] > [class$='-body'] > [data-feature-samples] {
    grid-column: 1 / -1;
  }

  /* body 的直接文本/提示节点也跨整行，避免被塞进半列 */
  [class$='-wrap'] > [class$='-body'] > :not([class$='-card']):not([data-feature-samples]) {
    grid-column: 1 / -1;
  }

  /* 「该占整行」的卡片：HTML 上显式标 .dp-wide（模板/品类/分段/横滑/长说明）。
     显式类不依赖 :has()，Chromium95 等旧内核同样生效，保证所有浏览器排版一致。
     body 直接子级限定，避免误伤嵌套元素 */
  [class$='-wrap'] > [class$='-body'] > .dp-wide {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  /* 底部固定操作条：跟容器同宽居中（手机端 inner 是 480） */
  [class$='-foot'] {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0;
    right: 0;
  }
  /* 电脑端左侧有悬浮导航（body.yz-desk 时正文整体右移一个侧栏宽）。
     吸底条是 fixed 定位，默认相对整个视口居中，会比导航右侧的卡片偏左约半个侧栏宽、
     压到导航旁边；这里让它从侧栏右缘起算，与上方卡片用同一个居中坐标系，左右缘严格对齐。 */
  body.yz-desk [class$='-foot'] {
    left: var(--sidebar-w, 240px);
  }
  /* 例外：AI音乐底部条桌面端是文档流内 sticky（只在 ≤720 手机端才 fixed），
     本来就跟随容器不会错位，left:auto 避免被上面规则推偏；
     再补与内容区一致的左右 20px，让浮层和卡片左右齐边（am-body 被本文件加了 20px 内边距） */
  body.yz-desk .am-foot {
    left: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  [class$='-foot'] .inner,
  [class$='-foot'] > div {
    max-width: 1080px !important;
  }

  /* 卡片内长输入框在半列里别撑爆，圆角阴影沿用原设计 */
  [class$='-card'] .input,
  [class$='-card'] .textarea,
  [class$='-card'] textarea,
  [class$='-card'] input[type='text'],
  [class$='-card'] select {
    max-width: 100%;
  }

  /* 超宽屏（≥1400）再放开到 1200，阅读和操作更从容 */
  @media (min-width: 1400px) {
    [class$='-wrap'],
    [class$='-wrap'] > [class$='-head'],
    [class$='-foot'],
    [class$='-foot'] .inner,
    [class$='-foot'] > div {
      max-width: 1200px !important;
    }
  }
}