/* ===========================================================================
   窄屏适配 · 全站公共部分（头部 / 页脚 / 外层容器）
   ---------------------------------------------------------------------------
   这份文件里的每一条都挂在 body.rwd 下面。body 上那个 rwd 是页面自己声明的
   （视图里写 ViewBag.Responsive = true，见 _LayoutV5.cshtml 里的说明），
   **没声明的页面一条都吃不到**。

   为什么要这么费事，而不是直接把 common5.css 里那两条硬宽度删掉：

     common5.css:44   body { min-width: 1200px }
     common5.css:132  .max_width_1170, .container { width: 1200px }

   全站每一页的内部都是照着 1200px 排的固定像素浮动布局。这两条一松，
   没做过窄屏的页面不会变好——里面写死宽度的浮动块会横着溢出，
   再被 _LayoutV5 里 body 上的 overflow-x:hidden 一刀切掉。
   结果是从「整页缩小但内容完整」退化成「内容被切掉一半」。

   所以是一页一页解锁，解锁的同时把这一页里所有窄屏会散架的地方一起补掉。
   现在解锁的只有项目详情页。

   断点用两档：
     <= 1100px  平板 / 窄窗口，双栏拆成单栏（详情页那份在 codedetail-v6.css 里）
     <=  760px  手机，头部改版、一切横向内容收进可滚容器
   =========================================================================== */

/* ---- 解锁外层的两条硬宽度 ---------------------------------------------- */
/* 优先级要压过 common5.css 里的 body{} 和 .container{}，
   靠的是多一个类（body.rwd / body.rwd .container），不用 !important。 */
body.rwd {
    min-width: 0;
}

/* max-width 为什么是 1224 而不是 1200：box-sizing 是 border-box，
   1224 = 1200 的内容宽 + 左右各 12 的留白。这样宽屏上**内容宽还是 1200**，
   跟改动前一模一样；窄屏上 width:100% 接管，内容宽变成「窗口宽 − 24」，
   不会贴死在屏幕边缘。

   内边距是**无条件**加的，不放在媒体查询里。放进去试过一版：
   宽屏上不加内边距 + max-width:1224，内容宽变成 1224，
   整个桌面端悄悄宽了 24px —— 而详情页两栏是写死的 884+12+300=1196，
   这种「悄悄变宽/变窄」正是把右栏挤出去的那种改动。 */
body.rwd .container,
body.rwd .max_width_1170 {
    width: 100%;
    max-width: 1224px;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ===========================================================================
   容器一开始跟着窗口走就要处理的（<= 1219.98px）
   ---------------------------------------------------------------------------
   断点跟详情页拆单栏那一档对齐：容器宽度是从这里开始不再是 1200 的。
   =========================================================================== */
@media (max-width: 1219.98px) {

    /* 页脚的荣誉图是一张 **1200 宽**的长图 + <map> 热区，热区坐标写死在 HTML 里
       （_PartialFooter.cshtml 的 coords="0,0,290,78" 那四条）。

       两条路都不通：不缩，它就横着顶出容器，再被 body 的 overflow-x:hidden
       切掉（本地 768/900 实测文档宽 973，第四个热区「北京才兔智能科技」
       整个在屏外）；缩了，四个热区按原坐标全错位——点「微软中国」会跳到
       「关于我们」，而且不报错。

       坐标没法自适应，除非改 HTML 改成四个 <a>。而这四个链接页脚下面本来就都有，
       所以窗口窄于 1220 就不放这张图。

       这条原来写在 <=760 里，也就是 761~1219 这一整段是漏的 ——
       平板、分屏、没最大化的窗口都在这一段里。 */
    body.rwd footer .honour {
        display: none;
    }
}

/* ===========================================================================
   手机（<= 760px）
   =========================================================================== */
@media (max-width: 760px) {

    /* ---- 顶部灰条 ------------------------------------------------------ */
    /* 「我的订单」「我的浏览记录」在手机上都是 hover 才展开的，点不出来；
       留下的是用户入口和帮助——这两个是链接，点得动。 */
    body.rwd .nav_top .nav_top_item > li:not(#top_user_info):not(:last-child) {
        display: none;
    }

    body.rwd .nav_top li a {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* ---- 主导航条 ------------------------------------------------------ */
    /* 桌面版是「Logo | 导航 | 搜索 | 上传」挤在一行 1200px 里。
       手机上拆成三行：Logo、搜索、一级导航（横向可滑）。 */
    body.rwd .nav_bar:not(.small_nav_bar) {
        min-height: 0;
    }

    body.rwd .nav_bar > .container {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    body.rwd .nav_bar h1,
    body.rwd .nav_bar h2 {
        float: none;
        margin: 0;
    }

    body.rwd .nav_bar .logo {
        float: none;
        width: 120px;
        height: 40px;
        line-height: 40px;
        margin-bottom: 8px;
    }

    /* 按**高度**收，不是按宽度：logo 是一张宽高比固定的图，
       写 width:100%+height:auto 的话，将来换一张更方的图就会把这一行顶高。
       max-height 封住高度、width:auto 让它自己按比例收，换图也不会散。 */
    body.rwd .nav_bar .logo img {
        max-height: 40px;
        width: auto;
        max-width: 100%;
        display: block;
    }

    body.rwd .nav_bar > .container > .fr {
        float: none;
    }

    /* 搜索框占整行。input 上有行内 style="width:270px"（_PartialHeader.cshtml），
       行内样式压得过样式表，所以这里**必须** !important，否则手机上它还是 270。 */
    body.rwd .nav_bar .nav_bar_search {
        float: none;
        margin: 0 0 8px;
        padding-top: 0;
    }

    body.rwd .nav_bar_search input {
        width: calc(100% - 45px) !important;
        box-sizing: border-box;
    }

    /* 「项目/全站」那个切换器是绝对定位的，桌面版按 padding-top:33px 定的 top，
       上面把 padding 去掉了，它得跟着上来，否则会掉到输入框下面去。 */
    body.rwd .nav_bar_search .key_word {
        top: 9px;
    }

    /* 热搜词绝对定位在搜索框下方 -20px，手机上会压在导航行上 */
    body.rwd .nav_bar_search .hot_search {
        display: none;
    }

    /* 上传项目：手机上不是主路径（要选文件、填一长串表单），收起来 */
    body.rwd .nav_bar .nav_bar_opa {
        display: none;
    }

    /* 一级导航横着滑。二级面板整块关掉——它是纯 :hover 展开的，
       触屏上第一次点会「假悬停」把面板弹出来盖住半屏，第二次点才跳转。
       这条要比 common5.css 里那条 :hover{display:block!important} 更具体
       （多了 body.rwd），所以能压住它。 */
    body.rwd .nav_bar .nav-header-selected.main-nav {
        float: none;
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
        scrollbar-width: none;
    }

    body.rwd .nav_bar .nav-header-selected.main-nav::-webkit-scrollbar {
        display: none;
    }

    body.rwd .nav_bar .nav-header-selected.main-nav > li {
        float: none;
        flex: 0 0 auto;
    }

    body.rwd .nav_bar .nav-header-selected.main-nav > li > a,
    body.rwd .nav_bar .nav-header-selected.main-nav > li.has-sub > a {
        padding: 6px 12px;
        font-size: 14px;
        white-space: nowrap;
    }

    body.rwd .main-nav li.has-sub:hover .main-nav-panel {
        display: none !important;
    }

    body.rwd .main-nav li.has-sub > a::before {
        display: none;
    }

    /* 吸顶那条整块关掉：它跟主导航条内容重复，而且自带 min-width:1170px
       （common5.css:1103），留着就是在手机上按住一个 1170 的下限。 */
    body.rwd .small_nav_bar {
        display: none !important;
    }

    /* ---- 页脚 ---------------------------------------------------------- */
    body.rwd footer .address,
    body.rwd footer .help,
    body.rwd footer > .container > .clearfix > .fl,
    body.rwd footer > .container > .clearfix > .fr {
        float: none;
        width: auto;
    }

    body.rwd footer .address .f24 {
        font-size: 20px;
    }

    body.rwd .nav_bottom .fr,
    body.rwd .nav_bottom .logo {
        float: none;
    }

    body.rwd .nav_bottom ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
    }

    body.rwd .nav_bottom ul li {
        float: none;
    }

    /* ---- 弹框 ---------------------------------------------------------- */
    /* 三个弹框都写死了比手机屏还宽的宽度，而登录框正好长在详情页的主路径上
       ——未登录点「登录后查看价格」弹出来的就是它：

         common5.css:1485  #dialog_login_modal .modal-dialog { width: 600px }
         common5.css:472   .modal_520 { width: 540px }   （温馨提示）
         _ViewBaseV5.cshtml 里扫码登录框的 .modal-content 带行内 width:400px

       第一条是 id 选择器，得用 id 才压得住；第三条是行内样式，得用 !important。 */
    body.rwd .modal-dialog {
        margin: 10px;
    }

    body.rwd #dialog_login_modal .modal-dialog {
        width: auto;
        margin: 10px;
    }

    body.rwd .modal-content,
    body.rwd .modal-content.modal_520 {
        width: auto !important;
        max-width: 100%;
    }

    /* 扫码登录那张图行内写死 286×286，加上 .modal-content 的边框在 390 上会顶出去 */
    body.rwd #qr-login-dialog .QR_Code {
        max-width: 100%;
        height: auto !important;
    }
}