/* =========================================================
   xd-site.css —— 站点级移动端响应式增强（全站加载）
   仅前端样式，不改任何底层逻辑。
   重点修复：手机端 头部搜索框/导航重叠、内容过大、间距混乱
   ========================================================= */

/* ---------- 通用：盒模型 & 图片自适应 ---------- */
img{max-width:100%;height:auto}

@media (max-width:1024px){

  /* ===================== 头部重排 =====================
     原主题在小屏把搜索框 position:absolute 顶到最上层，
     与 logo / 导航重叠。这里整体改为弹性两行布局：
       第一行：logo + 搜索 + 用户图标
       第二行：横向可滚动的分类导航
  */
  .stui-header__top{height:auto!important;padding:0!important;border-top:0!important}
  .stui-header_bd{display:flex!important;flex-wrap:wrap;align-items:center;padding:7px 10px 0!important}

  .stui-header__logo{float:none!important;margin:0!important;flex:0 0 auto}
  .stui-header__logo h1{margin:0;font-size:18px;line-height:36px}
  .stui-header__logo .logo{width:118px;height:30px;margin:0}

  /* 搜索 + 用户 容器 */
  .stui-header__side{position:static!important;float:none!important;top:auto!important;left:auto!important;right:auto!important;width:auto!important;flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:12px}

  .stui-header__search{position:static!important;float:none!important;margin:0!important;width:auto!important;flex:1 1 auto;max-width:340px}
  .stui-header__search form{position:relative;margin:0}
  .stui-header__search .form-control{display:block;width:100%;height:34px;line-height:34px;padding:0 36px 0 14px;border-radius:18px;border:0;background:#fff;color:#333;font-size:13px;box-sizing:border-box}
  .stui-header__search .submit{position:absolute;top:0;right:0;width:34px;height:34px;line-height:34px;text-align:center;background:none;border:0}
  .stui-header__search .submit .icon{font-size:15px;color:#999}

  /* 源码里用户图标在搜索框前面，用 order 调成 搜索框在左、用户图标在最右 */
  .stui-header__search{order:0}
  .stui-header__user{float:none!important;margin:0;order:1}
  .stui-header__user>li{float:none;display:inline-block;padding:0!important;margin:0!important}
  .stui-header__user>li>a .icon{font-size:22px;line-height:34px;color:#fff}

  /* 第二行：分类导航，占满整行、横向滚动、绝不重叠 */
  .stui-header__menu{float:none!important;position:static!important;margin:6px 0 0!important;padding:0!important;flex:0 0 100%;width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap;border-top:1px solid rgba(255,255,255,.12)}
  .stui-header__menu::-webkit-scrollbar{display:none}
  .stui-header__menu:before{display:none!important}
  .stui-header__menu li{float:none!important;display:inline-block;margin:0!important}
  .stui-header__menu li a{display:inline-block;height:42px;line-height:42px;padding:0 14px!important;font-size:14px;color:#fff}
  .stui-header__menu li.active a{color:#FF9900!important;background:none!important}

  /* 固定头部高度 ≈ 上行46 + 导航43 + 缝隙，给内容留出正确顶距 */
  body{padding-top:96px!important}

  /* ===================== 通用内容 ===================== */
  .container{padding-left:10px!important;padding-right:10px!important}
  .row{margin-left:0!important;margin-right:0!important}

  /* 面板间距收紧，避免空版块占用巨大高度 */
  .stui-pannel,.stui-vodlist__bd,.stui-pannel-box{margin-bottom:10px}
  .stui-pannel__head .title,.stui-pannel-title .title{font-size:16px}

  /* 标题/正文字号自适应，避免“内容巨大” */
  .stui-content__detail .title,.stui-player__detail .title{font-size:17px;line-height:1.4}
  .stui-pannel__head h3,.stui-pannel__head h2{font-size:16px}
}

/* ---------- 更小屏（手机竖屏） ---------- */
@media (max-width:480px){
  .stui-header__logo h1{font-size:16px}
  .stui-header__search{max-width:none}
  .stui-header__menu li a{padding:0 12px!important;font-size:13px}

  /* 列表海报两列更紧凑 */
  .stui-vodlist__box .v-thumb,.stui-vodlist .v-thumb{height:auto}
}