/* ===========================================================================
   帮助中心（/Help、/Help/{条目}）的窄屏样式
   ---------------------------------------------------------------------------
   桌面版式在 **https://img.51aspx.com/style/help.css** 里 —— 视图里写死的
   绝对地址，不走 Constant.Resolve，仓库里看不到那份文件。
   跟列表页 / 搜索页 / 详情页是同一种情况，覆盖也按同一个约定放这儿（`-v6`）。
   量的时候把 CDN 那份镜像下来喂给本地页面（4056 字节）。

   这一块的版式账（help.css）：
     .slide_bar_nav  width: 200px  （在一个 .fl 里）
     .help_con       width: 980px  （.fr），h1 也写死 980
   两栏合计 1180，塞进 1200 的容器。
   帮助首页是另一套：`.help_list > li  width:216 + margin-right:112`，
   4×216 + 3×112 = 1200，正好四列。

   两档：
     <= 1219.98   两栏和四列都改成跟着容器走
     <=  760      侧栏挪到正文上面、卡片一行一张、正文内边距收窄

   每一条都挂 body.rwd。
   =========================================================================== */

@media (max-width: 1219.98px) {

    /* `.help_con { width: 980px }` + `.help_con h1 { width: 980px }`
       —— 200 + 980 = 1180，容器内容宽 = min(窗口,1224) − 24，
       窗口窄于 1204 就排不下，正文整块被挤到侧栏下面，右边空掉 200 那一条。
       改成不写宽度、自己形成 BFC，占满侧栏右边剩下的地方。 */
    body.rwd .help_con {
        width: auto;
        overflow: hidden;
        min-height: 0;
    }

    body.rwd .help_con h1 {
        width: auto;
    }

    /* 帮助首页那四张卡：`float:left; width:216px; margin:40px 112px 40px 0`。
       112 的间距是按 1200 算死的 —— 容器一窄，四张就掉成两行，
       而 `:last-child { margin-right: 0 }` 只管最后一张，
       第二行第一张左边还顶着上一行留下的空当。
       改成 flex + gap，间距交给容器，列数交给 flex 自己算。 */
    body.rwd .help_list {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
    }

    /* 这个 ul 上挂着 clearfix，两个伪元素在 flex 容器里是两个真的 flex item，
       各占一格各带一份 gap（行首被顶开、行尾多一格空）。flex 不需要清浮动。 */
    body.rwd .help_list:before,
    body.rwd .help_list:after {
        display: none;
    }

    body.rwd .help_list > li {
        float: none;
        flex: 1 1 216px;
        max-width: 100%;
        margin: 24px 0;
    }

    /* `:last-child { margin-right: 0 }` 在 gap 布局里是多余的，
       留着不影响；但 `min-height: 410px` 要放开 —— 卡片一变窄，
       里面那列链接会折行变高，410 装不下就漏到卡片外面。 */
    body.rwd .help_list > li {
        min-height: 0;
    }

    /* 侧栏那条「滚动时吸顶」是 `position: fixed; left: auto` ——
       left:auto 的 fixed 元素会退回它原来在文档里的横坐标，
       两栏一变宽窄它就对不上了。这一档起不吸顶，跟着页面滚。 */
    body.rwd .position_fixed {
        position: static;
    }
}


@media (max-width: 760px) {

    /* ---- 页头 -------------------------------------------------------------
       `header { height: 126px; line-height: 86px }` 配一张
       1200 宽的背景图（center bottom）。390 上那张图只露中间一小条，
       而 126 的高度里有 40 是给图留的。收一收。 */
    body.rwd header {
        height: auto;
        line-height: 1.6;
        padding: 12px 0;
        background-size: cover;
    }

    body.rwd header .navbar-brand {
        height: auto;
    }

    body.rwd header .navbar_title {
        padding: 0 10px;
        font-size: 16px;
    }

    /* ---- 侧栏挪到正文上面 -------------------------------------------------
       侧栏是四组带展开/收起的目录（网站协议 / 使用需知 / 商家需知 / 用户需知），
       DOM 里本来就排在正文前面，去掉浮动就到位。
       它不是装饰，是这一块唯一的导航 —— 关掉的话手机上就只能靠浏览器后退。 */
    body.rwd #slide_bar_nav {
        float: none;
        width: auto;
        margin-bottom: 12px;
    }

    body.rwd .slide_bar_nav {
        width: auto;
    }

    /* ---- 正文 -------------------------------------------------------------
       `.help_con_item { padding: 40px 30px }`，390 上左右吃掉 60。
       正文里那些 `<p>` 还带着 `text-indent: 2rem` 的首行缩进 ——
       一行只剩十来个字的时候，缩进两格就是一整屏都在参差不齐地起头。 */
    body.rwd .help_con h1 {
        padding: 12px;
        font-size: 15px;
    }

    body.rwd .help_con_item {
        padding: 16px 12px;
    }

    body.rwd .help_con_item p {
        text-indent: 0;
    }

    /* ---- 帮助首页的卡片：一行一张 -----------------------------------------
       216 的卡片在 366 的容器里两列就是 171，那列链接（最长「可二次开发程度和完整度」
       十一个字）每条都要折两行。一行一张。 */
    body.rwd .help_list {
        gap: 12px;
    }

    body.rwd .help_list > li {
        flex: 1 1 100%;
        margin: 12px 0;
    }

    /* 卡片头那个 80px 的图标是绝对定位在 left:20 top:18 的，
       而标题 `padding: 60px 30px; text-align: right` 是按 216 的卡片宽定的。
       卡片一整宽，标题跑到最右边、图标孤零零在最左边，中间空一大条。
       改成图标在左、标题跟着它，一行读完。 */
    body.rwd .help_list > li span {
        padding: 16px 12px 16px 76px;
        text-align: left;
    }

    /* 图标按盒子相对定位，不再写一个新的像素值 ——
       写死 top 的话它多高就往下探多少：实测第一版给了 48px，
       行高把它撑到 67，而标题栏这一档只有 53 高，
       图标下沿探进下面那列链接，正好压在每张卡的**第一条**上
       （「网站服务条例」「Asp.net基础知识」「上传步骤说明」「公司采购」四条）。
       line-height:1 让它的盒子等于字号，配 top:50% + translateY 居中，
       以后再调标题栏高度也不用回来改这里。 */
    body.rwd .help_list > li .iconfont,
    body.rwd .help_list > li:first-child .iconfont {
        font-size: 40px;
        line-height: 1;
        left: 14px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    body.rwd .help_item {
        padding: 16px 12px;
    }
}