/* 项目列表（/ProjectList）、精品页（/Qualitys）、优惠页（/Promotions）和多语言页（/MultiLanguages）的网格：小图卡片（2026-10-27，用户从效果图里挑的方案 A）。标记在 Views/Code/_ProjectListCard.cshtml。
   原来是 16:10 的大封面，而封面 title.jpg 只有 250×250 —— 放大裁成横图多半是糊的，一屏只放得下两排。
   现在：左边 96 的方形缩略图（往下缩是清楚的）、右边标题两行 + 简介两行、底下一行评分 / 浏览 / 价格。

   特指度要压过 catalog-theme.css 里那几条（body.rwd .catalog-page .code_list_con>.code_list_item:nth-child(n) 是 0,5,1、
   .code_list_item h4 是 0,3,2）—— 这里每条都多一个类，不靠加载顺序，也不用 !important。
   列数三档：≥1220 三列、761~1219 两列、≤760 一列；三档都写在这里（主题那几条 0,3,1 压不过这里的 0,4,1，
   哪一档漏写就会退回主题的列数）。 */

body.rwd .catalog-list-page .code_list_con.project-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

/* 精品页、优惠页的网格不在白色面板里（直接铺在页面底色上）：左右不留内边距，卡片边缘跟上面排序条那块面板对齐 */
body.rwd .catalog-list-page.recommend_code .code_list_con.project-card-grid {
    padding: 20px 0 0;
}

body.rwd .catalog-list-page .project-card-grid > .code_list_item.project-card:nth-child(n) {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 14px 14px 12px;
}

body.rwd .catalog-list-page .project-card .project-card-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    margin-bottom: 12px;   /* 跟底下那一行至少隔开这么多（那一行自己是 margin-top:auto，只管压到底） */
    padding: 0;            /* 精品页外面套着 .recommend_code，codeList.css 给卡片里的链接加了 20px 30px 的内边距 */
    color: inherit;
    text-decoration: none;
}

body.rwd .catalog-list-page .project-card .project-card-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border: 1px solid #e6ece7;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f6f3;
}

body.rwd .catalog-list-page .project-card .project-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.rwd .catalog-list-page .project-card .project-card-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* 标题两行，超出省略；右上角给「精品」那枚角标留出位子 */
body.rwd .catalog-list-page .project-card .project-card-title {
    min-height: 0;
    margin: 1px 0 6px;
    padding-right: 30px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ct-ink);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 精品页、优惠页那层 .recommend_code 让卡片悬停时往上跳 5px，几页要一个样子 */
body.rwd .catalog-list-page .project-card-grid > .code_list_item.project-card:hover {
    transform: none;
}

body.rwd .catalog-list-page .project-card:hover .project-card-title {
    color: var(--ct-green);
}

body.rwd .catalog-list-page .project-card .project-card-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ct-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.rwd .catalog-list-page .project-card .project-card-quality {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: auto;
    z-index: 2;
}

/* 底下一行：评分、浏览靠左，价格靠右；margin-top:auto 把它压到卡片底，同一排卡片的分隔线对齐 */
body.rwd .catalog-list-page .project-card .project-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #edf1ed;
    container-type: inline-size;   /* 下面那两条 @container 按这一行自己的宽度判，见文件末尾 */
}

body.rwd .catalog-list-page .project-card .project-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    color: #7b8a80;
    white-space: nowrap;
}

body.rwd .catalog-list-page .project-card .project-card-meta .star {
    flex: 0 0 auto;
}

/* 多语言页在这一行最前面摆开发语言（_ProjectListCard 的 ProjectCardTag），别的页不给就没有 */
body.rwd .catalog-list-page .project-card .project-card-tag {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--ct-mint);
    color: var(--ct-green);
    font-size: 11px;
    line-height: 18px;
}

body.rwd .catalog-list-page .project-card .project-card-price {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 浏览数是最后一道退路：前面都让完了还装不下，它打省略号，不许整段被剪掉 */
body.rwd .catalog-list-page .project-card .project-card-views {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.rwd .catalog-list-page .project-card .project-card-price .f20 {
    font-size: 17px;
}

@media (max-width: 1219.98px) {
    body.rwd .catalog-list-page .code_list_con.project-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.rwd .catalog-list-page .code_list_con.project-card-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    body.rwd .catalog-list-page .project-card-grid > .code_list_item.project-card:nth-child(n) {
        padding: 12px;
    }

    body.rwd .catalog-list-page.recommend_code .code_list_con.project-card-grid {
        padding: 12px 0 0;
    }

    body.rwd .catalog-list-page .project-card .project-card-main {
        gap: 12px;
    }

    body.rwd .catalog-list-page .project-card .project-card-thumb {
        flex-basis: 80px;
        width: 80px;
        height: 80px;
    }

    body.rwd .catalog-list-page .project-card .project-card-title {
        font-size: 14.5px;
    }
}

/* 底下那一行装不下时先让评分让位（价格、浏览数、开发语言都比那排星星要紧），不许把浏览数剪掉一截。
   按这一行自己的宽度判（容器查询），不按窗口：同一个窗口宽度下卡片宽度随列数变 —— 761 两列的卡片比 760 一列的窄。
   两个数是量出来的（2026-10-27，五位数浏览量、登录后看到的完整价格多出两三位）：
   不带标签那一行要 ~285，带开发语言标签那一行要 ~355；各留一点余量。 */
@container (max-width: 300px) {
    body.rwd .catalog-list-page .project-card .project-card-meta .star {
        display: none;
    }
}

@container (max-width: 360px) {
    body.rwd .catalog-list-page .project-card .project-card-tag ~ .star {
        display: none;
    }
}