/* ================================================================
   文章分类页专属（categories.html）
   源：pages.css（原第 5679-5799 行区间内容，按需拆分）
   ================================================================ */

.cg-card {
    --cg-c: 93, 151, 67;
    display: flex;
    flex-direction: column;
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
/* display:flex 会覆盖 [hidden] 的 UA 默认 display:none，导致分类页切换方向 tab 时
   卡片仍可见（与 music.css 中 .music-lyrics-lines[hidden] 同类问题）。需显式声明隐藏。 */
.cg-card[hidden] { display: none; }
.cg-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--cg-c), 0.42);
    box-shadow: 0 16px 34px rgba(var(--cg-c), 0.16);
    color: var(--text-primary);
}
.cg-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between; margin-bottom: var(--space-12);
}
.cg-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-12);
    font-size: var(--fs-24);
    background: linear-gradient(150deg, rgba(var(--cg-c), 0.16), rgba(var(--cg-c), 0.05));
    border: 1px solid rgba(var(--cg-c), 0.24);
    transition: transform var(--transition-normal);
}
.cg-card:hover .cg-card-icon {
    transform: scale(1.12) rotate(-8deg);
}
.cg-card-count {
    padding: var(--space-2) var(--space-12);
    border-radius: var(--radius-pill);
    background: rgba(var(--cg-c), 0.11);
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--text-secondary);
}
.cg-card-count b {
    font-size: var(--fs-14);
    font-weight: 800;
    color: rgb(var(--cg-c));
    font-variant-numeric: tabular-nums;
}
.cg-card-dir {
    display: inline-block;
    margin-bottom: var(--space-6);
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgb(var(--cg-c));
}
.cg-card-body h2 { margin-bottom: var(--space-6);
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--lh-tight);
}
.cg-card-body p { margin-bottom: var(--space-12);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.cg-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    margin-top: auto;
    font-size: var(--fs-13);
    font-weight: 700;
    color: rgb(var(--cg-c));
}
.cg-card-link span {
    transition: transform var(--transition-fast);
}
.cg-card:hover .cg-card-link span {
    transform: translateX(5px);
}
@media (max-width: 991px) {
    .cg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .cg-grid {
        grid-template-columns: 1fr;
    }
}