/* ==========================================================================
   百素New —— 书签大卡 + 子分类横向 tab（2026-09-23 第三轮）
   1) 书签卡：20px 小窄条 → WebStack 风格大卡（40px 图标 + 标题/描述）
   2) 书签容器：flex space-between → grid，末行不满时靠左依序排列
   3) 子分类：横向 pill tab，点按切换（配合 js/wz-tabs.js）
   本文件在 style.css / article-big.css 之后加载，靠后置顺序 + 特异性覆盖。
   ========================================================================== */

/* ---------- 1. 书签容器：网格化（修复末行 space-between 左中右拉开的问题） ---------- */
/* grid 的隐式行流天然"靠左依序"，最后一行不管剩几个都从第 1 列排起；
   :not(.article-grid) 排除文章大图网格，它有自己的布局 */
.site-main-li .site-list.sortable:not(.article-grid) {
    display: grid !important;
    /* 列数由 theme-config.css 按图标尺寸决定（--wz-cols）；
       变量缺失时退回第三轮的 auto-fill 行为，保证单独用本文件也不错 */
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    grid-template-columns: repeat(var(--wz-cols, auto-fill), minmax(0, 1fr));
    gap: 14px;
    justify-content: initial !important;
}

/* ---------- 2. 书签大卡 ---------- */
/* 只作用在书签卡(.list.link)上，文章卡(.list.wz)由 article-big.css 管 */
.site-main-li .site-list .list.link {
    width: auto !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 12px 14px;
    background-color: #f6f8fa;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    cursor: pointer;
    transition: .25s all;
    overflow: hidden;
    position: relative;
}

/* 图标 20px → 40px，白底圆角衬底，透明底小图不再糊成一团 */
.site-main-li .site-list .list.link .icon {
    display: block;
    /* 尺寸由主题配置决定（默认 64px），40px 作为兜底 */
    width: var(--wz-icon-size, 40px) !important;
    height: var(--wz-icon-size, 40px);
    flex: 0 0 auto;
    object-fit: contain;
    box-sizing: border-box;
    padding: 3px;
    background-color: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 9px;
}

/* 标题 + 描述两行文字块（原布局只有单行标题） */
.site-main-li .site-list .list.link .txt {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-main-li .site-list .list.link .title {
    display: block;
    width: auto !important;
    max-width: 100%;
    margin: 0;
    padding-right: 0 !important;
    font-size: clamp(14px, calc(var(--wz-icon-size, 64px) / 4.2), 20px);
    font-weight: 600;
    line-height: 1.35;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .25s all;
}

.site-main-li .site-list .list.link .desc {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    width: auto;
    max-width: 100%;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #98a2b3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .25s all;
}

/* 右侧箭头（layui 字体图标），呼应 WebStack 卡片的 chevron */
.site-main-li .site-list .list.link .go {
    flex: 0 0 auto;
    margin-left: -2px;
    color: #c3cad6;
    font-size: 14px;
    transition: .25s all;
}

/* hover 沿用百素的"变蓝"语言 */
.site-main-li .site-list .list.link:hover {
    background-color: #1E9FFF;
    border-color: #1E9FFF;
    box-shadow: 0 8px 18px rgba(30, 159, 255, .25);
}

.site-main-li .site-list .list.link:hover .title { color: #FFFFFF; }

.site-main-li .site-list .list.link:hover .desc { color: rgba(255, 255, 255, .85); }

.site-main-li .site-list .list.link:hover .go { color: #FFFFFF; }

/* ---------- 3. 子分类横向 tab ---------- */
.site-main-li .sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.site-main-li .sub-tabs .sub-tab {
    padding: 6px 16px;
    border-radius: 999px;
    background-color: #f2f4f8;
    color: #5a6b85;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: .2s all;
}

.site-main-li .sub-tabs .sub-tab:hover {
    background-color: #e6ebf5;
    color: #1E9FFF;
}

.site-main-li .sub-tabs .sub-tab.active {
    background-color: #1E9FFF;
    color: #FFFFFF;
}

/* 私有角标在 tab 里改为内联小标签（原绝对定位是给卡片右上角用的） */
.site-main-li .sub-tabs .sub-tab .property {
    position: static;
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin: 0 0 0 6px;
    font-size: 11px;
    vertical-align: 1px;
}

/* 面板：同一时间只显示激活的一个；容器里的 site-list 自己管布局 */
.sub-panel { display: none; }

.sub-panel.active { display: block; }

/* 搜索时展开全部面板：隐藏 tab 里的匹配书签也能被看到（配合 wz-tabs.js 给 body 打标） */
body.wz-searching .sub-panel { display: block !important; }

/* ---------- 4. 窄屏 ---------- */
@media (max-width: 900px) {
    .site-main-li .site-list.sortable:not(.article-grid) {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    .site-main-li .site-list .list.link {
        padding: 10px 12px;
    }

    .site-main-li .site-list .list.link .icon {
        width: min(var(--wz-icon-size, 40px), 34px) !important;
        height: min(var(--wz-icon-size, 40px), 34px);
    }

    .site-main-li .site-list .list.link .title {
        font-size: 14px;
    }

    .site-main-li .sub-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}