/**
 * 火桥（huoqiao）· 多功能沉浸式 WordPress 主题
 * 联系方式：12492501@qq.com
 * 支持正版，从我做起，你的支持是我们前行的动力！
 *
 * @package   huoqiao
 * @author    三木
 * @copyright Copyright (c) 2026-09-01 huoqiao.cn
 * @license   GPL-2.0-or-later
 * @link      https://huoqiao.cn
 * @tags      category, filter, design-tokens, dark-mode, responsive
 *
 * 分类页图形化头部 + 高级筛选（与 AI 摘要卡 / 作者卡同一设计语言）
 * 全部颜色走 --cx-* 局部令牌，夜间由 [data-theme="dark"] 整体换肤，零 !important
 */

.hq-catx {
    /* ── 皮肤令牌（日间） ───────────────────────────── */
    --cx-surface: var(--color-bg-primary);
    --cx-border: var(--color-border-primary);
    --cx-text-1: var(--color-text-primary);
    --cx-text-2: var(--color-text-secondary);
    --cx-text-3: var(--color-text-tertiary);
    --cx-primary: var(--color-primary, var(--huoqiao-primary-color));
    --cx-primary-rgb: var(--color-primary-rgb, var(--huoqiao-primary-color-rgb, 201, 169, 110));
    --cx-primary-soft: rgba(var(--cx-primary-rgb), 0.08);
    --cx-primary-line: rgba(var(--cx-primary-rgb), 0.22);
    /* 品牌色「墨」：专用于文字/图标。日间浅底上原品牌金只有 2.1:1，
       改用同色系深琥珀棕（5.2:1）以达 WCAG AA；夜间沿用原色。 */
    --cx-primary-ink: #8f5f1f;
    --cx-seg-bg: var(--color-bg-secondary, rgba(var(--cx-primary-rgb), 0.05));
    --cx-seg-text: var(--cx-text-3);
    --cx-panel-bg: var(--color-bg-secondary, rgba(var(--cx-primary-rgb), 0.04));
    --cx-shadow: var(--shadow-sm);
    --cx-radius: var(--radius-2xl, 18px);

    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto 14px;
    padding: 0 var(--spacing-xl);
    box-sizing: border-box;
}

/* ── 图形 Hero ─────────────────────────────────── */
.hq-catx__hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: 22px 26px;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(var(--cx-primary-rgb), 0.10), transparent 55%),
        linear-gradient(145deg, var(--cx-surface), var(--cx-surface));
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius) var(--cx-radius) 0 0;
    overflow: hidden;
}

.hq-catx__hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--cx-primary-rgb), 0.45), transparent);
}

.hq-catx__badge {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, var(--cx-primary), rgba(var(--cx-primary-rgb), 0.72));
    box-shadow:
        0 6px 18px rgba(var(--cx-primary-rgb), 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hq-catx__badge::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 22px;
    border: 1px solid rgba(var(--cx-primary-rgb), 0.25);
}

.hq-catx__badge svg {
    width: 26px;
    height: 26px;
}

.hq-catx__head {
    flex: 1;
    min-width: 0;
}

.hq-catx__title {
    margin: 0;
    font-size: var(--font-size-xl, 22px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--cx-text-1);
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.hq-catx__desc {
    margin: 5px 0 0;
    font-size: var(--font-size-sm, 13px);
    color: var(--cx-text-3);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 统计块 */
.hq-catx__stats {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
    padding-left: 24px;
    border-left: 1px dashed var(--cx-border);
}

.hq-catx__stat {
    text-align: center;
    min-width: 58px;
}

.hq-catx__stat svg {
    width: 16px;
    height: 16px;
    color: var(--cx-primary-ink);
    margin-bottom: 4px;
}

.hq-catx__stat-num {
    font-size: var(--font-size-xl, 22px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--cx-text-1);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hq-catx__stat-label {
    margin-top: 3px;
    font-size: var(--font-size-xs, 12px);
    color: var(--cx-text-3);
}

.hq-catx__stat-divider {
    width: 1px;
    height: 34px;
    background: var(--cx-border);
}

/* ── 筛选工具栏 ────────────────────────────────── */
.hq-catx__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 10px 14px;
    /* 关注/订阅按钮已移除：右侧仅剩「筛选」+ 视图切换，
       此处用固定间距而非 space-between 撑开，避免中间出现不确定空洞 */
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-top: none;
}

.hq-catx__seg {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: var(--cx-seg-bg);
    border-radius: var(--radius-full, 999px);
}

.hq-catx__seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-full, 999px);
    background: transparent;
    color: var(--cx-seg-text);
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast, 0.15s), background var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}

.hq-catx__seg-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.hq-catx__seg-btn:hover {
    color: var(--cx-primary-ink);
}

.hq-catx__seg-btn.is-active {
    color: #fff;
    background: linear-gradient(145deg, var(--cx-primary), rgba(var(--cx-primary-rgb), 0.78));
    box-shadow: 0 3px 10px rgba(var(--cx-primary-rgb), 0.30);
}

.hq-catx__seg-btn--icon {
    padding: 6px 9px;
}

.hq-catx__bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* 与左侧排序条之间的分隔（关注按钮移除后，右侧重量变轻，需靠分隔线体现分组） */
    padding-left: 8px;
    border-left: 1px solid var(--cx-border);
}

/* 无视图切换时（如图片分类页）右侧只剩「筛选」，不加分隔线 */
.hq-catx__bar-right--solo {
    padding-left: 0;
    border-left: none;
}

/* 「筛选」展开按钮 */
.hq-catx__adv-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border: 1px solid var(--cx-primary-line);
    border-radius: var(--radius-full, 999px);
    background: var(--cx-primary-soft);
    color: var(--cx-primary-ink);
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s);
}

.hq-catx__adv-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-normal, 0.25s);
}

.hq-catx__adv-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.hq-catx__adv-toggle:hover {
    background: rgba(var(--cx-primary-rgb), 0.14);
}

.hq-catx__adv-count {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--cx-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* ── 高级筛选面板 ──────────────────────────────── */
.hq-catx__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-normal, 0.28s ease);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-top: none;
    border-radius: 0 0 var(--cx-radius) var(--cx-radius);
    overflow: hidden;
}

.hq-catx__panel.is-open {
    grid-template-rows: 1fr;
}

.hq-catx__panel-inner {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px 28px;
    padding: 0 20px;
    visibility: hidden;
    transition: padding var(--transition-normal, 0.28s ease), visibility var(--transition-normal, 0.28s);
}

.hq-catx__panel.is-open .hq-catx__panel-inner {
    padding: 16px 20px 18px;
    visibility: visible;
}

.hq-catx__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hq-catx__group--grow {
    flex: 1;
    min-width: 240px;
}

.hq-catx__group-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs, 12px);
    color: var(--cx-text-3);
}

.hq-catx__group-label svg {
    width: 13px;
    height: 13px;
    color: var(--cx-primary-ink);
}

.hq-catx__seg--sm .hq-catx__seg-btn {
    padding: 4px 12px;
    font-size: var(--font-size-xs, 12px);
}

/* 关键词搜索 + 重置 */
.hq-catx__search-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hq-catx__search {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--cx-border);
    border-radius: var(--radius-full, 999px);
    background: var(--cx-seg-bg);
    color: var(--cx-text-1);
    font-size: var(--font-size-sm, 13px);
    outline: none;
    transition: border-color var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}

.hq-catx__search::placeholder {
    color: var(--cx-text-3);
}

.hq-catx__search:focus {
    border-color: rgba(var(--cx-primary-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--cx-primary-rgb), 0.12);
}

.hq-catx__reset {
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--cx-border);
    border-radius: var(--radius-full, 999px);
    background: transparent;
    color: var(--cx-text-3);
    font-size: var(--font-size-xs, 12px);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s);
    flex-shrink: 0;
}

.hq-catx__reset:hover {
    color: var(--cx-primary-ink);
    border-color: var(--cx-primary-line);
    background: var(--cx-primary-soft);
}

/* 加载态 */
.hq-catx__bar.is-loading .hq-catx__adv-toggle {
    pointer-events: none;
    opacity: 0.6;
}

/* ═══ 夜间模式：只换皮肤变量 ═══════════════════ */
html[data-theme="dark"] .hq-catx {
    --cx-surface: rgba(255, 255, 255, 0.04);
    --cx-border: rgba(255, 255, 255, 0.09);
    --cx-seg-bg: rgba(255, 255, 255, 0.06);
    --cx-panel-bg: rgba(255, 255, 255, 0.05);
    --cx-primary-soft: rgba(var(--cx-primary-rgb), 0.12);
    --cx-primary-ink: var(--cx-primary);
    --cx-shadow: none;
}

html[data-theme="dark"] .hq-catx__hero {
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(var(--cx-primary-rgb), 0.14), transparent 55%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

/* ═══ 响应式 ═══════════════════════════════════ */
@media (max-width: 992px) {
    .hq-catx__stats {
        display: none;
    }
}

@media (max-width: 768px) {
    .hq-catx {
        padding: 0 var(--page-padding-mobile, 12px);
        margin-bottom: 10px;
    }

    .hq-catx__hero {
        gap: var(--spacing-md, 12px);
        padding: 16px;
    }

    .hq-catx__badge {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .hq-catx__badge::after {
        inset: -4px;
        border-radius: 17px;
    }

    .hq-catx__badge svg {
        width: 21px;
        height: 21px;
    }

    .hq-catx__title {
        font-size: var(--font-size-lg, 18px);
    }

    .hq-catx__bar {
        flex-wrap: nowrap;
        padding: 8px 10px;
        gap: 8px;
    }

    .hq-catx__seg--sort {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hq-catx__seg--sort::-webkit-scrollbar {
        display: none;
    }

    .hq-catx__seg-btn span {
        display: none; /* 移动端只留图标，节省横向空间 */
    }

    .hq-catx__seg--sort .hq-catx__seg-btn {
        flex: 1;
        justify-content: center;
        padding: 6px 0;
    }

    /* 只隐藏文字标签，保留 .hq-catx__adv-count 徽标
       （否则手机上完全看不到「已筛 N 项」的反馈） */
    .hq-catx__adv-toggle > span:not(.hq-catx__adv-count) {
        display: none;
    }

    .hq-catx__adv-toggle {
        padding: 7px 11px;
    }

    .hq-catx__bar-right {
        gap: 6px;
    }

    .hq-catx__panel-inner {
        gap: 14px 18px;
    }

    .hq-catx__group--grow {
        min-width: 100%;
    }

    /* 图片分类页移动端贴边（沿用原规则的选择器语义） */
    body.tax-image_category .hq-catx,
    body.archive.tax-image_category .hq-catx {
        padding-left: 0;
        padding-right: 0;
    }
}