/* ===========================================================================
   搜索结果页 /Search 的窄屏样式
   ---------------------------------------------------------------------------
   桌面版式在 **https://img.51aspx.com/style/search.css** 里 —— 写死的绝对地址，
   不走 Constant.Resolve，仓库里没有那份文件。跟列表页、详情页是同一种情况。
   量的时候把 CDN 那份镜像下来喂给本地页面（5179 字节），
   下面每条覆盖都点名它压的是哪一条、写死的是多少。

   这一页的骨架是「180 的侧栏 + 1004 的结果区」，一共 1184，
   刚好塞进 1200 的容器。容器一跟着窗口走就排不下了。

   两档：
     <= 1219.98   结果区不再写死 1004，让它吃掉侧栏之后剩下的宽度
     <=  760      侧栏挪到结果上面，结果行改两行排，绝对定位的价格回到正常流

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

@media (max-width: 1219.98px) {

    /* `.search_result_con { width: 1004px; float: right }`。
       180 + 1004 = 1184，容器内容宽 = min(窗口,1224) − 24 —— 窗口窄于 1208
       就排不下，结果区被挤到侧栏下面去，右边空掉 180 那一条。
       改成不写宽度、自己形成 BFC（overflow:hidden），
       它就会老老实实占满侧栏右边剩下的地方。 */
    body.rwd .search_result_con {
        width: auto;
        float: none;
        overflow: hidden;
        min-height: 0;
    }

    /* 页签条 `padding: 26px 252px 0` —— 252 是按 1004 的结果区居中算出来的。
       容器一窄，252 × 2 就吃掉大半，页签直接换行。 */
    body.rwd .top_menu {
        padding: 20px 12px 0;
    }

    /* 结果行：信息列写死 650、标题写死 450、标签栏写死 300，
       都是按 1004 减掉封面和右边那块绝对定位的价格算的。 */
    body.rwd .code_list_line_info {
        width: auto;
        overflow: hidden;
    }

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

    body.rwd .summarize_info_parameter .code_list_tags {
        width: auto;
        max-width: 300px;
    }
}


@media (max-width: 760px) {

    /* ---- 侧栏挪到结果上面 -------------------------------------------------
       侧栏是筛选（按 Form 类型 / 按项目分类 / 搜索历史），不是装饰，
       所以是挪不是关。DOM 里它本来就排在结果前面，去掉浮动就到位了。
       每组标题上都有一个展开/收起的图标，收起来之后不占地方。 */
    body.rwd .search_slide_bar {
        float: none;
        width: auto;
        margin-bottom: 12px;
    }

    body.rwd .slide_bar_con h3 {
        padding: 10px 12px;
    }

    body.rwd .slide_bar_con ul li a {
        padding: 8px 12px;
    }

    /* 搜索历史那一列的链接写死 178（按 180 的侧栏定的） */
    body.rwd .search_history ul li a {
        width: auto;
    }

    /* ---- 页签条横滑 -------------------------------------------------------
       「全部 / 项目 / 文章 / 用户」每个写死 120 宽 + 6 的间距，
       四个就是 504，390 上放不下会换行，而它下面那条 3px 的绿线是
       `.top_menu` 的下边框 —— 换行之后线在第二排底下，第一排看着没着落。 */
    body.rwd .top_menu {
        padding: 12px 12px 0;
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.rwd .top_menu::-webkit-scrollbar {
        display: none;
    }

    body.rwd .top_menu li {
        float: none;
        flex: 0 0 auto;
    }

    body.rwd .top_menu li a {
        width: auto;
        min-width: 76px;
        padding: 0 14px;
    }

    /* ---- 结果行 -----------------------------------------------------------
       桌面版是「94 的封面 + 650 的信息」，右边**绝对定位**着价格
       （`top: 52px; right: 28px; width: 140px`）和「立即下载」
       （`top: 70px; right: 40px`）。这两个坐标是按 134 高的行定的 ——
       行一变矮（封面收成 68、信息折行少了），它们就落到行外面，
       压在下一条上。绝对定位的东西一律回到正常流。 */
    body.rwd .code_list_line_item {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 12px;
    }

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

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

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

    /* 价格独占第二行。左边距 78 = 68 的封面 + 10 的间距 ——
       跟标题、简介、那几项参数对齐在同一条竖线上。
       不缩进的话它会顶到封面正下方，看着像不属于这一条。 */
    body.rwd .code_list_price {
        position: static;
        flex: 1 1 100%;
        width: auto;
        margin: 6px 0 0 78px;
        text-align: left;
    }

    /* 「立即下载」桌面版是 hover 才显示的（`display: none`），触屏上没有 hover，
       所以这里不去打开它 —— 打开了也只是多一个跟标题重复的入口。
       只把定位收回来，免得哪天有人改成默认显示时它还飘在外面。 */
    body.rwd .search_download {
        position: static;
    }

    /* 「更新时间 / 浏览次数 / 标签」那一排是 float:left，
       390 上三项挤成两行还各带一段右边距。改成折行的一组。 */
    body.rwd .summarize_info_parameter {
        display: flex;
        flex-wrap: wrap;
        gap: 0 12px;
    }

    body.rwd .summarize_info_parameter li {
        float: none;
    }

    body.rwd .summarize_info_parameter .code_list_tags {
        max-width: 100%;
    }

    /* ---- 搜到的卖家那张卡 -------------------------------------------------
       视图里内联写着 `margin: 20px 25px; padding: 30px 40px`，
       390 上左右一共吃掉 130，正文只剩 236。 */
    body.rwd .user-info {
        margin: 12px;
        padding: 12px;
    }

    body.rwd .user-info .avatar > img {
        width: 56px;
        height: 56px;
    }

    /* ---- 分页 -------------------------------------------------------------
       跟列表页同一个问题：每个 `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;
    }
}