/* ============================================================
   responsive.css — layres(115/LaySNS) 模板自适应补丁
   问题：原模板 body{min-width:1300px} + .container{width:1200px}
        导致 <1300px 屏幕（笔记本/平板/小窗）出现横向滚动条。
   方案：解除最小宽与固定宽，按断点自适应；图片/表格/iframe 防溢出。
   引入位置：template/layres/html/index_base.html（public.css 之后）
   ============================================================ */

/* ---------- 1. 解除固定宽度 ---------- */
html, body { min-width: 0 !important; }
body { overflow-x: hidden; }
.container { width: auto !important; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.scoend .left .showtop { width: 100% !important; max-width: 1520px; }
.top-list .list-top { width: 100% !important; max-width: 1160px; float: none; }

/* ---------- 2. 全局防溢出 ---------- */
img, table, iframe, embed, video { max-width: 100% !important; height: auto; }
table { display: block; overflow-x: auto; }
input, textarea, select { max-width: 100%; }

/* ---------- 3. 断点自适应 ---------- */
@media screen and (max-width: 1240px) {
    .container { max-width: 1000px; }
}

@media screen and (max-width: 1024px) {
    .container { max-width: 100%; padding: 0 12px; }
    /* 双栏（float 布局）改单列：侧栏落到下方而不是被裁掉 */
    .left, .right, .main, .side, .sidebar {
        float: none !important; width: 100% !important; max-width: 100%;
    }
    .left { margin-bottom: 16px; }
    /* 卡片/列表网格降列 */
    .list-box, .item-list, .card-list, .post-list, .art-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        display: grid; gap: 12px;
    }
    /* 顶部导航横向滚动，避免挤压换行 */
    .nav, .top-nav, .header-nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

@media screen and (max-width: 768px) {
    body { font-size: 13px; }
    .container { padding: 0 10px; }
    /* 卡片单/双列 */
    .list-box, .item-list, .card-list, .post-list, .art-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px;
    }
    /* 搜索框与按钮自适应 */
    .search input, .search-box input { width: 100% !important; }
    .search, .search-box { width: 100% !important; max-width: 100%; }
    /* 页脚与挂件内边距 */
    .footer, .widget { padding-left: 12px; padding-right: 12px; }
    /* 标题字号收敛 */
    h1 { font-size: 20px !important; }
    h2 { font-size: 17px !important; }
    h3 { font-size: 15px !important; }
}

@media screen and (max-width: 480px) {
    .list-box, .item-list, .card-list, .post-list, .art-list {
        grid-template-columns: 1fr !important;
    }
}