/* ================================================================
   IT段子 — 列表页
   对应模板：content/it-jokes.html
   布局与全站统一：.main-wrapper > .content + .sidebar（common.css 提供容器与 widget 样式）
   变量体系与 common.css 保持一致
   ================================================================ */

/* ===== Page Header =====
   .page-header / .page-title / .page-subtitle 已收敛至 common.css
   「Page Header 组件」区段，本文件不再重复定义（此前与 memes.css、
   page.css 三处同款复制，改一次要动三处）。 ===== */

/* ===== Joke Card List ===== */
.joke-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}
.joke-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-12);
    overflow: hidden; padding: var(--space-24) ;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.joke-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #60a5fa);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.joke-card:hover {
    transform: translateY(-3px);
    border-color: rgba(93, 151, 67, 0.35);
    box-shadow: var(--shadow-md);
}
.joke-card:hover::before {
    opacity: 0.75;
}
.joke-card-content {
    font-size: var(--fs-15);
    line-height: var(--lh-base);
    color: var(--text-primary);
    margin: 0;
    font-weight: 400;
    /* 保留后台输入内容的换行 */
    white-space: pre-line;
}

/* ===== Category Chips ===== */
/* 分类导航：玻璃卡片容器 + 全站统一的方向筛选胶囊配色（page.css .direction-tab 同款语言） */
.joke-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-8);
    padding: var(--space-12);
    margin-bottom: var(--space-24);
    box-shadow: var(--shadow-sm);
}
.joke-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(93, 151, 67, 0.22);
    color: var(--text-secondary);
    font-size: var(--fs-13);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.joke-cat-chip:hover {
    transform: translateY(-1px);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.joke-cat-chip.active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--text-light);
    box-shadow: 0 6px 16px rgba(93, 151, 67, 0.30);
}
.joke-cat-chip.active:hover {
    border-color: transparent;
    color: var(--text-light);
}
.joke-cat-chip.active .joke-cat-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.joke-cat-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.10);
    font-size: var(--fs-11);
    line-height: 16px;
    text-align: center;
    color: var(--primary-dark);
}

/* ===== Empty State ===== */
.joke-empty {
    text-align: center;
    padding: 60px 0;
}
.joke-empty-icon {
    font-size: 40px;
    margin-bottom: var(--space-16);
}
.joke-empty-title {
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-8);
}
.joke-empty-desc {
    font-size: var(--fs-13);
    color: var(--text-muted);
}

/* ===== Sidebar Widgets ===== */
.joke-stats {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-6);
    padding: 6px 0;
}
.joke-stats-num {
    font-size: var(--fs-28);
    font-weight: 800;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}
.joke-stats-label {
    font-size: var(--fs-12);
    color: var(--text-muted);
}
.joke-what {
    font-size: var(--fs-12);
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}
/* ===== Responsive ===== */
@media (max-width: 600px) {
    /* .page-header 的窄屏内边距由 common.css 的 ≤767px 规则统一提供 */
    .joke-cats {
        padding: var(--space-10) var(--space-12);
        gap: var(--space-6);
    }
    .joke-card { padding: var(--space-16) ;
    }
    .joke-card-content {
        font-size: var(--fs-14);
    }
}