/* ============================================================
   mobile.css — PC 自建页面的移动端适配（分类页/社区/1v1/博客）
   仅在 <=768px 生效，不影响 PC 布局
   引入方式：<link rel="stylesheet" href="/static/home/css/mobile.css?t=20261006a">
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 公共：解除 1200px 锁定 ---------- */
  html, body { min-width: 0 !important; overflow-x: hidden; }
  .wrapper { width: 100% !important; }
  .container {
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ---------- 公共：顶部导航 ---------- */
  #doc-hd .topbar { padding: 0 10px; }
  #doc-hd .topbar .container { display: flex; align-items: center; padding: 0 10px; }
  .hd-logo { float: none; flex: 0 0 auto; width: 110px !important; background-size: contain !important; background-position: left center !important; }
  #doc-hd.double .hd-nav {
    float: none;
    margin: 0 0 0 6px;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 48px;
    scrollbar-width: none;
  }
  #doc-hd.double .hd-nav::-webkit-scrollbar { display: none; }
  .hd-nav { height: 48px; }
  .hd-nav .item { float: none; flex: 0 0 auto; margin: 0; }
  .hd-nav .item a { width: auto; padding: 0 11px; font-size: 14px; height: 48px; line-height: 48px; white-space: nowrap; }
  .search-bar { display: none !important; }
  .hd-login { float: none; flex: 0 0 auto; margin-top: 0 !important; }
  .hd-login .already-login .start_live a,
  .start_live a { padding: 4px 10px; font-size: 13px; }
  .hd-login .nickname { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
  /* 用户下拉为绝对定位弹层，保持原逻辑，仅修正行高偏移 */
  .hd-login .userinfo { top: 40px !important; }

  /* ---------- 公共：页脚 ---------- */
  #doc-ft { padding: 14px 0 !important; }
  #doc-ft .footer { line-height: 1.8; }
  #doc-ft img { max-width: 90px; height: auto; }
  /* PC 页脚下载区：二维码(历史裂图)与地址隐藏，客服热线居中保留 */
  .area-ft { border-bottom-width: 1px; }
  .down-ft { width: 100% !important; height: auto !important; padding: 14px 10px !important; box-sizing: border-box; }
  .down-ft_two, .down-ft_four { display: none !important; }
  .down-ft_three { width: 100% !important; border-right: 0 !important; padding-top: 0 !important; display: flex; align-items: center; justify-content: center; }
  .down-ft_three .phone_icon img { width: 40px; height: 40px; margin-left: 0; }
  .down-ft_three .phone_msg { margin-left: 12px; text-align: left; }

  /* ---------- 公共：分页 ---------- */
  .pagination { text-align: center; margin: 16px 0; }
  .pagination a, .pagination span { margin: 2px 3px !important; }

  /* ---------- 分类页 classlive ---------- */
  .class_list {
    width: auto !important;      /* 覆盖定宽 1165px */
    margin: 12px 0 !important;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 4px 2px;
    scrollbar-width: none;
  }
  .class_list::-webkit-scrollbar { display: none; }
  .class_list a { flex: 0 0 auto; }
  .class_list li { white-space: nowrap; }
  .feed-list .feed {
    width: calc(50% - 6px) !important;
    height: auto !important;   /* 覆盖模板内联 height:310px */
    margin: 0 3px 14px;
  }
  .feed-list .feed .screenshot { height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
  .feed-list .feed .link:hover:before { height: 100%; top: 0; }
  .feed-list .feed .user .user_right { width: auto; }
  .feed-list .feed .type { max-width: 46%; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; white-space: nowrap; }

  /* ---------- 社区 post ---------- */
  .post-wrap { margin-top: 10px; }
  .post-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .post-imgs.single { grid-template-columns: 1fr; }
  .post-card { padding: 12px 12px; }

  /* ---------- 1v1 call（内容已自适应，补齐滚动与弹窗） ---------- */
  .call-wrap { padding: 10px 10px 20px; }
  .call-banner h1 { font-size: 17px; }
  .call-banner p { font-size: 12px; }

  /* ---------- 博客 blog ---------- */
  .blog-hero { padding: 22px 0 16px; margin-bottom: 10px; }
  .blog-hero h1 { font-size: 20px; }
  .blog-hero p { font-size: 12px; }
  .blog-tabs .tab-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .blog-tabs .tab-list::-webkit-scrollbar { display: none; }
  .blog-tabs .tab-list a { flex: 0 0 auto; }
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 12px; }
  .blog-card .cover { height: 120px; }
  .blog-card .info h3 { font-size: 14px; height: auto; max-height: 42px; }
}
@media (max-width: 420px) {
  .hd-logo { width: 92px !important; }
  .hd-nav .item a { padding: 0 9px; font-size: 13px; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-card .cover { height: 150px; }
}