/* ==========================================================================
   主题库页 /Category.aspx 专属样式
   --------------------------------------------------------------------------
   依赖：/css/tokens.css（色阶/字号/间距/圆角/阴影/动效）
        /css/master.css（--shell-max、--shell-pad、--crumb-h 等外壳 token）
   规则：
   1. 全部选择器挂在 .tq-shell 之下，与 master.css / searchlist.css 同层特异度。
   2. Base.master 的 .container 是无内边距的全宽块（见 master.css 文件头铁律），
      所以版心由本页自己居中，不做任何负 margin 穿透。
   3. 只服务本页，不承载导航、页脚、搜索列表的样式。
   ========================================================================== */

.tq-shell .tq-cat {
    padding-bottom: var(--sp-12);
}

/* ---------- 1. 顶部大搜索 ---------- */
.tq-shell .cat-hero {
    width: calc(100% - 2 * var(--shell-pad));
    max-width: var(--shell-max);
    margin: var(--sp-6) auto 0;
    padding: var(--sp-12) var(--sp-8);
    overflow: hidden;
    border-radius: var(--r-lg);
    background:
        radial-gradient(560px 280px at 16% 0%, hsl(var(--accent-400) / .28), transparent 68%),
        radial-gradient(660px 340px at 88% 18%, hsl(var(--brand-400) / .32), transparent 70%),
        linear-gradient(135deg, hsl(var(--brand-900)) 0%, hsl(var(--brand-700)) 55%, hsl(var(--brand-500)) 100%);
}

.tq-shell .cat-hero-in {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.tq-shell .cat-hero-title {
    margin: 0;
    font-size: var(--fs-34);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 2px;
    color: hsl(var(--surface));
}

.tq-shell .cat-hero-sub {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-14);
    letter-spacing: 1px;
    color: hsl(0 0% 100% / .78);
}

.tq-shell .cat-search {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-8) auto 0;
    padding: 6px 6px 6px var(--sp-5);
    background: hsl(var(--surface));
    border-radius: var(--r-full);
    box-shadow: 0 24px 48px -20px hsl(var(--brand-950) / .55);
    transition: box-shadow var(--dur) var(--ease-out);
}

    .tq-shell .cat-search:focus-within {
        box-shadow: 0 24px 48px -18px hsl(var(--brand-950) / .55), var(--shadow-focus);
    }

.tq-shell .cat-search-ico {
    display: inline-flex;
    flex: none;
    align-items: center;
    color: hsl(var(--ink-400));
}

    .tq-shell .cat-search-ico svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.tq-shell .cat-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: none;
    font-size: var(--fs-16);
    color: hsl(var(--ink-900));
}

    .tq-shell .cat-search input::placeholder {
        color: hsl(var(--ink-400));
    }

.tq-shell .cat-search-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--sp-1);
    height: 48px;
    padding: 0 var(--sp-6);
    border: 0;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, hsl(var(--brand-500)), hsl(var(--brand-700)));
    font-size: var(--fs-15);
    font-weight: 600;
    letter-spacing: 1px;
    color: hsl(var(--surface));
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

    .tq-shell .cat-search-btn svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
    }

    .tq-shell .cat-search-btn:hover {
        box-shadow: var(--shadow-btn-hover);
        transform: translateY(-1px);
    }

/* jQuery .show() 会写内联 display，压过本表规则，故 .cat-hot 自身不用 flex */
.tq-shell .cat-hot {
    margin-top: var(--sp-5);
    font-size: 0;
    text-align: center;
}

.tq-shell .cat-hot-label {
    margin-right: var(--sp-2);
    font-size: var(--fs-13);
    color: hsl(0 0% 100% / .7);
}

.tq-shell .cat-hot-word {
    display: inline-block;
    margin: var(--sp-1);
    padding: 3px var(--sp-3);
    border: 1px solid hsl(0 0% 100% / .35);
    border-radius: var(--r-full);
    font-size: var(--fs-13);
    color: hsl(0 0% 100% / .9);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

    .tq-shell .cat-hot-word:hover {
        background: hsl(0 0% 100% / .16);
        border-color: hsl(0 0% 100% / .6);
        color: hsl(var(--surface));
    }

/* ---------- 2. 页面主体版心 ---------- */
.tq-shell .cat-wrap {
    width: calc(100% - 2 * var(--shell-pad));
    max-width: var(--shell-max);
    margin: 0 auto;
}

/* ---------- 3. 快捷入口卡片 ---------- */
.tq-shell .cat-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-8);
}

.tq-shell .cat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-5);
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-md);
    background: hsl(var(--surface));
    box-shadow: 0 2px 6px -2px hsl(var(--brand-950) / .06);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
        transform var(--dur) var(--ease-out);
}

    .tq-shell .cat-card:hover {
        border-color: hsl(var(--brand-300));
        box-shadow: var(--shadow-pop);
        transform: translateY(-3px);
    }

.tq-shell .cat-card-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: hsl(var(--brand-50));
    color: hsl(var(--brand-600));
}

    .tq-shell .cat-card-ico svg {
        width: 21px;
        height: 21px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.tq-shell .cat-card-tit {
    font-size: var(--fs-15);
    font-weight: 600;
    color: hsl(var(--ink-900));
}

.tq-shell .cat-card-sub {
    font-size: var(--fs-12);
    line-height: 1.5;
    color: hsl(var(--ink-500));
}

    .tq-shell .cat-card:hover .cat-card-tit {
        color: hsl(var(--brand-600));
    }

/* ---------- 4. 领域分区 ---------- */
.tq-shell .cat-zone {
    margin-top: var(--sp-8);
}

.tq-shell .cat-zone-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-left: var(--sp-3);
    border-left: 4px solid hsl(var(--brand-500));
}

.tq-shell .cat-zone-tit {
    margin: 0;
    font-size: var(--fs-20);
    font-weight: 700;
    line-height: 1.3;
}

    .tq-shell .cat-zone-tit a {
        color: hsl(var(--ink-900));
        transition: color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .cat-zone-tit a:hover {
            color: hsl(var(--brand-600));
        }

.tq-shell .cat-zone-meta {
    font-size: var(--fs-13);
    color: hsl(var(--ink-500));
}

    .tq-shell .cat-zone-meta b {
        font-size: var(--fs-15);
        font-weight: 700;
        color: hsl(var(--brand-600));
    }

    .tq-shell .cat-zone-meta em {
        margin-left: var(--sp-3);
        font-style: normal;
        color: hsl(var(--ink-400));
    }

.tq-shell .cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-4) 0 0;
    padding: 0;
    list-style: none;
}

/* 主题卡片：左侧渐变圆点 + 名称，悬停浮起并滑出箭头 */
.tq-shell .cat-cell a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 13px var(--sp-4);
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-md);
    background: hsl(var(--surface));
    box-shadow: 0 1px 2px hsl(var(--ink-900) / .04);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

    .tq-shell .cat-cell a::before {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, hsl(var(--brand-400)), hsl(var(--brand-600)));
        transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }

    /* 右侧箭头：默认收起在边缘外，悬停滑入 */
    .tq-shell .cat-cell a::after {
        content: "";
        flex: none;
        margin-left: auto;
        width: 7px;
        height: 7px;
        border-top: 1.5px solid hsl(var(--brand-600));
        border-right: 1.5px solid hsl(var(--brand-600));
        transform: rotate(45deg) translateX(-4px);
        opacity: 0;
        transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    }

    .tq-shell .cat-cell a:hover {
        border-color: hsl(var(--brand-300));
        box-shadow: 0 10px 22px -14px hsl(var(--brand-700) / .55);
        transform: translateY(-2px);
    }

        .tq-shell .cat-cell a:hover::before {
            transform: scale(1.25);
            box-shadow: 0 0 0 4px hsl(var(--brand-50));
        }

        .tq-shell .cat-cell a:hover::after {
            transform: rotate(45deg) translateX(0);
            opacity: 1;
        }

.tq-shell .cat-cell-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-14);
    color: hsl(var(--ink-800));
    transition: color var(--dur-fast) var(--ease-out);
}

    .tq-shell .cat-cell a:hover .cat-cell-name {
        color: hsl(var(--brand-700));
        font-weight: 600;
    }

/* ---------- 5. 底部说明 ---------- */
.tq-shell .cat-seo {
    margin-top: var(--sp-12);
    padding: var(--sp-6);
    border: 1px solid hsl(var(--line-soft));
    border-radius: var(--r-md);
    background: hsl(var(--surface-muted));
}

    .tq-shell .cat-seo h3 {
        margin: 0 0 var(--sp-3);
        font-size: var(--fs-15);
        font-weight: 700;
        color: hsl(var(--ink-800));
    }

    .tq-shell .cat-seo p {
        margin: 0;
        font-size: var(--fs-13);
        line-height: 2;
        color: hsl(var(--ink-600));
    }

    .tq-shell .cat-seo b {
        font-weight: 600;
        color: hsl(var(--ink-800));
    }

/* ---------- 6. 响应式 ---------- */
@media (max-width: 1024px) {
    .tq-shell .cat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .tq-shell .cat-hero {
        padding: var(--sp-8) var(--sp-4);
    }

    .tq-shell .cat-hero-title {
        font-size: var(--fs-26);
        letter-spacing: 0;
    }

    .tq-shell .cat-search {
        margin-top: var(--sp-6);
        padding-left: var(--sp-4);
    }

    .tq-shell .cat-search-btn {
        padding: 0 var(--sp-4);
        letter-spacing: 0;
    }

    .tq-shell .cat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-3);
    }

    .tq-shell .cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tq-shell .cat-zone-tit {
        font-size: var(--fs-16);
    }
}