/* =========================================================
   responsive.css — 摄影云南 静态站响应式适配
   设计原则：桌面端与原站视觉完全一致（容器仍以 1000px 居中），
   仅在平板 / 手机等窄屏下自动变为流式布局、两栏堆叠、导航换行。
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* 图片默认自适应，窄屏自动缩放，桌面端保持原尺寸 */
img { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* 主容器：桌面端 max-width:1000px 与原 width:1000px 等价，
   窄屏下自动收缩为流式 */
#top .main,
#nav .main,
#main {
    width: 100%;
    max-width: 1000px;
}

/* 左侧菜单与右侧内容栏同样以 max-width 约束，桌面端不变 */
#foldmenu {
    width: 100%;
    max-width: 250px;
}
#counten {
    width: 100%;
    max-width: 740px;
}

/* ---------------- 平板（<=1024px） ---------------- */
@media (max-width: 1024px) {
    #top .main,
    #nav .main,
    #main {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ---------------- 手机（<=768px） ---------------- */
@media (max-width: 768px) {
    #top .main,
    #nav .main,
    #main {
        width: 100%;
        max-width: none;
        height: auto !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* 顶部 logo / 文字块由左右浮动改为纵向堆叠并居中 */
    #top .main .logo,
    #top .main .right1,
    #top .main .right2 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        text-align: center;
    }

    /* 导航菜单换行显示 */
    #nav .main {
        line-height: normal;
        text-align: center;
    }
    #nav .main .menu {
        float: none !important;
        display: inline-block;
        width: auto !important;
        height: auto !important;
        line-height: 29px;
    }

    /* 两栏堆叠：左菜单与右内容均占满宽度 */
    #foldmenu,
    #counten {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* 内容区内部固定宽度块改为流式，避免横向溢出 */
    #counten .guid,
    #counten h1,
    #counten .readme,
    #counten .mpart,
    #counten .note1,
    #counten .class,
    #counten .note {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 安全网：限制所有内部元素不超过容器宽度，杜绝横向滚动 */
    #main *,
    #top .main *,
    #nav .main *,
    #foldmenu *,
    #counten * {
        max-width: 100% !important;
    }
}