/* ===========================================================================
   项目列表页（/CodeList、/Qualitys、/Promotions）的窄屏样式
   ---------------------------------------------------------------------------
   这一页的桌面版式在 **https://img.51aspx.com/style/codelist.css** 里 ——
   写死的绝对地址，不走 Constant.Resolve，所以**仓库里没有那份文件**，
   跟详情页的 codedetail.css 是同一种情况（见 codedetail-v6.css 开头那段）。

   量的时候是把 CDN 那份镜像下来喂给本地页面的（12861 字节，94 条规则），
   下面每一条覆盖都点名了它压的是哪一条、那条写死的是多少。
   **但不要因此就假设那份文件不会变**：真正要紧的几块（筛选面板、结果网格、
   行式列表）这里是整块重排的，不依赖它原来的排法。

   两档，跟站里其余地方同一个刻度：
     <= 1219.98   容器开始跟着窗口走 —— 只解写死的宽度，排法不动
     <=  760      手机 —— 横排改竖排、四列改一列

   每一条都挂 body.rwd：这份样式表跟着视图引，而 body.rwd 只有声明过
   ViewBag.Responsive 的页面才有。裸选择器会漏到没做过窄屏的页面上去。
   =========================================================================== */


/* ===========================================================================
   一、容器开始跟着窗口走的那一档
   =========================================================================== */
@media (max-width: 1219.98px) {

    /* 筛选面板每一行的选项区写死 `width: 998px`（按 1200 的容器定的）。
       容器内容宽 = min(窗口,1224) − 24，再减掉 .sift_list_con 自己的 50 内边距：
       窗口 1100 上只剩约 1026，998 勉强够；窗口 1000 上只剩 926，直接顶出去，
       再被 body 的 overflow-x:hidden 无声切掉。 */
    body.rwd .sift_list_con ul {
        width: auto;
        overflow: hidden;
    }

    /* ---- 结果网格 -------------------------------------------------------
       两个页面两套：
         · /CodeList     容器 .code_list_con，格子之间靠 border-right 分隔，没有外边距
         · /Qualitys、/Promotions  容器 .code_list_grid（视图里新加的类），
                        卡片墙，靠 `margin-right: 20px` 拉开

       两边都写死了列数：前者 `width: 287px` 在 1200 里正好四列、
       `:nth-child(4n)` 去右边框；后者 `width: 285px` + 20 的右外边距。
       容器一跟着窗口走，四列就排不下 —— 而去边框那条还按四列在算，
       每行最右边多一条竖线、第四格反而没有。

       改成按列数分档：
         761 ~ 1219.98  三列
         521 ~ 760      两列
         <= 520         一列
       每一档都要把「去右边框」那条跟着改，否则线会画在行中间。

       **百分比宽不能跟外边距混用**：卡片墙那边把 20 的外边距换成容器上的
       gap，不然 `width:33.33% + margin-right:20px` 一定溢出。 */
    body.rwd .code_list_con,
    body.rwd .code_list_grid {
        display: flex;
        flex-wrap: wrap;
    }

    /* 两个容器身上都挂着 `clearfix`（视图里是
       `class="code_list_con clearfix"` / `class="clearfix code_list_grid"`），
       而 clearfix 那两个 `content:" "; display:table` 的伪元素
       **在 flex 容器里是两个真正的 flex item**：各占一格、各带一份 gap。
       实测 1219 上第一行被顶右 20px、12 格排成 5 行（本该 4 行）。
       flex 本来就不需要清浮动，关掉。 */
    body.rwd .code_list_con:before,
    body.rwd .code_list_con:after,
    body.rwd .code_list_grid:before,
    body.rwd .code_list_grid:after {
        display: none;
    }

    /* -- 列表页：三列 -- */
    body.rwd .code_list_con > .code_list_item {
        float: none;
        width: 33.3333%;
        margin-right: 0;
        border-right: 1px solid #f0f0f0;
    }

    body.rwd .code_list_con > div:nth-child(4n) {
        border-right: 1px solid #f0f0f0;
    }

    body.rwd .code_list_con > .code_list_item:nth-child(3n) {
        border-right: none;
    }

    /* -- 精品页：三列 -- */
    body.rwd .code_list_grid {
        gap: 20px;
    }

    body.rwd .code_list_grid > .code_list_item {
        float: none;
        width: calc((100% - 40px) / 3);
        margin-right: 0;
        margin-bottom: 0;
    }

    /* 封面和简介都写死宽度（227 / 226），格子一窄它们就顶出格子。 */
    body.rwd .code_list_item .code_logo {
        width: auto;
        max-width: 227px;
        height: auto;
    }

    body.rwd .code_list_item .code_logo img {
        width: 100%;
        height: auto;
        aspect-ratio: 225 / 143;
        object-fit: cover;
    }

    body.rwd .code_list_item .ellipsis-vertical_2 {
        width: auto;
    }

    /* 格子底下那条分隔线是 `:after` 画的，`width: 260px; left: 15px`
       —— 按 287 的格子宽定的。格子一窄，线就比格子长，戳到隔壁去。 */
    body.rwd .code_list_item:after {
        width: auto;
        left: 15px;
        right: 15px;
    }

    /* 行式列表（「浏览方式」切到列表时）：信息列写死 650、标题写死 580，
       都是按 1200 减掉封面和价格之后剩下的宽度算的。 */
    body.rwd .code_list_line_info {
        width: auto;
        overflow: hidden;
    }

    body.rwd .code_list_line_info h4 a {
        max-width: 100%;
    }
}


/* ===========================================================================
   二、手机
   =========================================================================== */
@media (max-width: 760px) {

    /* ---- 筛选面板 -------------------------------------------------------
       桌面版一行是「右对齐的 100px 标题 + 50px 的 margin + 选项区」，
       两块都是 float:left。390 上光标题那一栏就占掉四分之一屏，
       而标题最长四个字（「项目类别」）。改成标题独占一行、选项在下面折行 —— */
    body.rwd .sift_list_con {
        padding: 12px;
    }

    body.rwd .sift_list_con h4,
    body.rwd .sift_list_con .multil_line h4 {
        float: none;
        width: auto;
        height: auto;
        margin-right: 0;
        line-height: 1.6;
        text-align: left;
    }

    body.rwd .sift_list_con ul {
        float: none;
        width: auto;
        overflow: visible;
    }

    /* 行高 60 配 50 的盒子是桌面版的写法（字压在盒子下沿）。
       竖排之后要按正常行距走，否则每一格都空出一截。
       内边距给到 6/10：加上 1.9 的行距，可点区域约 33px 高，
       够手指点（每一格都是一个筛选项，点错就是一次白跑）。 */
    body.rwd .sift_list_con ul li,
    body.rwd .sift_list_con .multil_line ul li {
        height: auto;
        line-height: 1.9;
        margin-bottom: 4px;
    }

    /* `a` 默认是 inline，**纵向内边距只画出来、不占布局**——实测那一格
       只有 27px 高，手指点不准（每一格都是一个筛选项，点错就是一次白跑）。
       改成 inline-block，padding 才算进高度，实测 33px。 */
    body.rwd .sift_list_con li a {
        display: inline-block;
        padding: 6px 10px;
    }

    /* 每一行底下那条分隔线是**背景图**画的，
       `background: url(...) repeat-x 0 48px`，`.two_line` 挪到 72、
       `.three_line` 挪到 102 —— 三个数都是按固定行高算出来的。
       竖排之后行高完全变了，那条线会横穿在选项中间。
       换成真的 border-bottom，跟着盒子走。 */
    body.rwd .sift_item_list {
        background: none;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    body.rwd .sift_list_con .multil_line {
        padding-top: 8px;
    }

    body.rwd .sift_result h4 {
        font-size: 16px;
    }

    /* 「展开更多」原来是 `margin-top: 35px` 的一个小按钮，
       在手机上是这一整块的主要操作（默认收起，要点开才看得到全部筛选项）。
       给到整宽、够高。 */
    body.rwd #sift_list_opa {
        display: block;
        width: 100%;
        margin-top: 12px;
        padding: 10px 0;
        border: 1px solid #f0f0f0;
        border-radius: 4px;
    }

    /* ---- 排序条 ---------------------------------------------------------
       「更新时间 / 用户好评 / 下载次数 / 价格」四个 + 右边的「浏览方式」，
       桌面版一行排完（每个 `padding: 7px 20px`）。390 上一共要 380 多，
       挤成两行而右边那个「浏览方式」是 float:right，会叠上去。
       四个排序项改成横滑一行，浏览方式跟在后面自成一行。 */
    body.rwd .code_list_nav {
        padding: 8px 12px;
    }

    body.rwd .code_list_nav > ul {
        float: none;
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.rwd .code_list_nav > ul::-webkit-scrollbar {
        display: none;
    }

    body.rwd .code_list_nav > ul li {
        float: none;
        flex: 0 0 auto;
    }

    body.rwd .code_list_nav ul li a {
        padding: 7px 12px;
        white-space: nowrap;
    }

    body.rwd .code_list_nav .scan_type {
        float: none;
        margin-top: 8px;
        padding: 6px 10px;
        text-align: right;
    }

    /* ---- 结果网格：两列 -------------------------------------------------
       上面那一档是三列。760 上三列每格只有 240 出头，封面缩到 178×113，
       标题两行都放不下 —— 这一档改两列。一列留给 <=520（见文件末尾）。 */
    body.rwd .code_list_con {
        padding: 12px;
    }

    body.rwd .code_list_con > .code_list_item {
        width: 50%;
        padding: 12px;
        margin-bottom: 0;
    }

    body.rwd .code_list_con > .code_list_item:nth-child(3n) {
        border-right: 1px solid #f0f0f0;
    }

    body.rwd .code_list_con > .code_list_item:nth-child(2n) {
        border-right: none;
    }

    body.rwd .code_list_grid > .code_list_item {
        width: calc((100% - 20px) / 2);
    }

    /* 格与格之间那条 `:after` 的分隔线在这一档收掉：
       它是绝对定位在 `bottom: -15px` 的，而这一档 margin-bottom 是 0。 */
    body.rwd .code_list_item:after {
        display: none;
    }

    /* ---- 行式列表 -------------------------------------------------------
       桌面版是「94 的封面 + 650 的信息 + 右浮的价格」，一共 44 的左右内边距。
       390 上改成两行：封面和信息一行，价格另起一行靠左
       （右对齐 + min-width:150 在 366 宽的行里会把价格顶到标题下面去）。 */
    body.rwd .code_list_line_item {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 12px;
    }

    body.rwd .code_list_line_con .code_logo {
        float: none;
        flex: 0 0 68px;
        width: 68px;
        height: 68px;
    }

    body.rwd .code_list_line_con .code_logo img {
        width: 66px;
        height: 66px;
    }

    body.rwd .code_list_line_info {
        float: none;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        margin-left: 10px;
    }

    /* 行里第三块是 `<div class="fr clearfix">`，里面装着
       「评分／更新时间／浏览次数」和右浮的价格。它在桌面版占约 300 宽，
       390 上跟标题挤在一行 —— 实测标题只剩 120 出头，
       「MVC校医室管理系统」被截成「MVC校医室管理…」。
       整块挪到第二行：左边那组信息横着折行，价格靠右。 */
    body.rwd .code_list_line_item > .fr {
        float: none;
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 8px;
    }

    body.rwd .code_list_line_item > .fr > .fl {
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0 12px;
        margin: 0;
        min-width: 0;
    }

    /* 那三行各自带着工具类 margin_b_10（common5.css 里的），
       横排之后每一项底下都空出 10px。选择器够具体，不用 !important。 */
    body.rwd .code_list_line_item > .fr > .fl > p.margin_b_10 {
        margin-bottom: 0;
    }

    body.rwd .code_list_price {
        float: none;
        min-width: 0;
        margin-top: 0;
        text-align: right;
        white-space: nowrap;
    }

    /* 标签行 `padding-left: 25px` 是给那个绝对定位的标签图标让位的，
       图标本身 `top: -6px` 是按 20px 的行高摆的，这一档不动它。 */
    body.rwd .code_list_tags {
        height: auto;
        max-height: 44px;
    }

    /* ---- 分页 -----------------------------------------------------------
       一页十几个页码，每个 `padding: 10px 18px`，390 上放不下就换行，
       而每个 `a` 只有左边框（靠 `:last-child` 补右边框拼成一条），
       换行之后每一行的最后一个都缺右边框。改成能折行的一组小方块。 */
    body.rwd .page {
        padding: 16px 12px 24px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    body.rwd .page a {
        padding: 8px 12px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
    }

    body.rwd .empty_info {
        padding: 30px 12px;
    }

    body.rwd .empty_info .btn {
        width: 100%;
        max-width: 240px;
    }
}


/* ===========================================================================
   三、小屏：网格收成一列
   ---------------------------------------------------------------------------
   520 是按格子算出来的，不是随手取的整数：两列时每格 = (容器内容宽 − 24) / 2，
   520 的窗口上是 (496 − 24) / 2 = 236，再减掉格子自己的 24 内边距，
   封面只剩 212 宽、135 高 —— 标题（14px，最多两行）和两行简介刚好还塞得下。
   再窄一格就开始逐字截断，所以到这儿改一列。
   =========================================================================== */
@media (max-width: 520px) {

    body.rwd .code_list_con > .code_list_item,
    body.rwd .code_list_grid > .code_list_item {
        width: 100%;
        border-right: none;
    }

    /* 上面两档按列数去右边框的几条，在这一档一起收掉 */
    body.rwd .code_list_con > div:nth-child(4n),
    body.rwd .code_list_con > .code_list_item:nth-child(3n),
    body.rwd .code_list_con > .code_list_item:nth-child(2n) {
        border-right: none;
    }

    body.rwd .code_list_con > .code_list_item {
        padding: 12px 0;
    }

    /* 一列时封面整宽 —— 上面那条 `max-width: 227px` 是给多列留的 */
    body.rwd .code_list_item .code_logo,
    body.rwd .code_list_item .code_logo img {
        width: 100%;
        max-width: none;
    }

    /* 一列之后格与格之间没有竖线了，补一条横线 */
    body.rwd .code_list_con > .code_list_item + .code_list_item {
        border-top: 1px solid #f0f0f0;
    }
}