/* =========================================================
   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;
    }
}