/**
 * 文章分类页样式
 * 独立的文章分类页CSS
 *
 * @package GoodBase
 * @since 1.0.0
 */

/* ============================================
   主内容区域布局设计
   ============================================ */

/* 主内容容器 - 去除不必要的框，只保留布局 */
.waterfall-category.category-type-article .category-main-content {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* 瀑布流容器 - 保留卡片间距 */
/* 默认（无侧边栏）：3列 */
.waterfall-category.category-type-article .waterfall-container {
    display: grid !important;
    gap: 6px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: start !important;
    padding: 0 !important;
}

/* 有侧边栏时：2列 */
.waterfall-category.category-type-article .category-content-wrapper.has-sidebar .waterfall-container {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ============================================
   文章卡片样式 - 全新设计
   ============================================ */

/* ============================================
   文章分类页卡片样式 - 重构版本
   保持现有大小与布局不变，便于后期修改
   ============================================ */

/* ============================================
   1. 卡片容器
   ============================================ */
.waterfall-category.category-type-article .waterfall-item.article-card-item,
.home-category-posts.category-type-article .waterfall-item.article-card-item,
.category-posts-section .category-post-item {
    /* 基础样式 */
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    
    /* 布局 - 左右分布：左边封面图，右边内容 */
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    align-self: start !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 80px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.waterfall-category.category-type-article .waterfall-item.article-card-item:hover,
.home-category-posts.category-type-article .waterfall-item.article-card-item:hover,
.category-posts-section .category-post-item:hover {
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

/* ============================================
   2. 缩略图区域（左侧封面图）
   ============================================ */
.waterfall-category.category-type-article .article-thumbnail,
.home-category-posts.category-type-article .article-thumbnail,
.category-posts-section .category-post-item .article-thumbnail {
    /* 布局 */
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    position: relative !important;
    
    /* 尺寸 */
    width: 76px !important;
    min-width: 76px !important;
    min-height: 80px !important;
    max-height: none !important;
    border-radius: 10px 0 0 10px !important;
    overflow: hidden !important;
    margin: 0 !important;
    
    /* 样式 */
    background: #f3f4f6 !important;
    box-shadow: none !important;
}

.waterfall-category.category-type-article .article-thumbnail a,
.home-category-posts.category-type-article .article-thumbnail a,
.category-posts-section .category-post-item .article-thumbnail a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

.waterfall-category.category-type-article .article-thumbnail-img,
.home-category-posts.category-type-article .article-thumbnail-img,
.category-posts-section .category-post-item .article-thumbnail-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.4s ease !important;
    min-width: 100% !important;
    min-height: 100% !important;
}

.waterfall-category.category-type-article .waterfall-item:hover .article-thumbnail-img,
.home-category-posts.category-type-article .waterfall-item:hover .article-thumbnail-img,
.category-posts-section .category-post-item:hover .article-thumbnail-img {
    transform: scale(1.05) !important;
}

/* ============================================
   标签徽章 - 显示在文章分类卡片缩略图左上角
   ============================================ */
.waterfall-category.category-type-article .article-thumbnail .post-tag-badge,
.home-category-posts.category-type-article .article-thumbnail .post-tag-badge,
.category-posts-section .category-post-item .article-thumbnail .post-tag-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 10 !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* 热门标签样式 */
.waterfall-category.category-type-article .article-thumbnail .post-tag-badge.post-tag-hot,
.home-category-posts.category-type-article .article-thumbnail .post-tag-badge.post-tag-hot,
.category-posts-section .category-post-item .article-thumbnail .post-tag-badge.post-tag-hot {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !important;
}

/* 独家标签样式 */
.waterfall-category.category-type-article .article-thumbnail .post-tag-badge.post-tag-exclusive,
.home-category-posts.category-type-article .article-thumbnail .post-tag-badge.post-tag-exclusive,
.category-posts-section .category-post-item .article-thumbnail .post-tag-badge.post-tag-exclusive {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%) !important;
}

/* 推荐标签样式 */
.waterfall-category.category-type-article .article-thumbnail .post-tag-badge.post-tag-recommended,
.home-category-posts.category-type-article .article-thumbnail .post-tag-badge.post-tag-recommended,
.category-posts-section .category-post-item .article-thumbnail .post-tag-badge.post-tag-recommended {
    background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%) !important;
}

/* 精品标签样式 */
.waterfall-category.category-type-article .article-thumbnail .post-tag-badge.post-tag-premium,
.home-category-posts.category-type-article .article-thumbnail .post-tag-badge.post-tag-premium,
.category-posts-section .category-post-item .article-thumbnail .post-tag-badge.post-tag-premium {
    background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%) !important;
}

/* ============================================
   4. 内容信息区域（右侧）
   ============================================ */
.waterfall-category.category-type-article .article-info,
.home-category-posts.category-type-article .article-info,
.category-posts-section .category-post-item .article-info {
    /* 布局 */
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-self: stretch !important;
	margin-right: 3px !important;
    
    /* 尺寸 */
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    padding: 8px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    
    /* 样式 */
    overflow: visible !important;
}

/* ============================================
   5. 标题区域
   ============================================ */
.waterfall-category.category-type-article .article-header,
.home-category-posts.category-type-article .article-header,
.category-posts-section .category-post-item .article-header {
    flex-shrink: 0 !important;
}

.waterfall-category.category-type-article .article-title,
.home-category-posts.category-type-article .article-title,
.category-posts-section .category-post-item .article-title {
    /* 布局 - 单行省略模式 */
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.waterfall-category.category-type-article .article-title a,
.home-category-posts.category-type-article .article-title a,
.category-posts-section .category-post-item .article-title a {
    /* 字体 */
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    color: #4d4a4a !important;
    
    /* 样式 */
    text-decoration: none !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.waterfall-category.category-type-article .article-title a:hover,
.home-category-posts.category-type-article .article-title a:hover,
.category-posts-section .category-post-item .article-title a:hover {
    color: #111827 !important;
}

/* ============================================
   6. 元素区域（标题下方）
   ============================================ */
.waterfall-category.category-type-article .article-body,
.home-category-posts.category-type-article .article-body,
.category-posts-section .category-post-item .article-body {
    /* 布局 */
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    
    /* 尺寸 */
    width: 100% !important;
    min-height: 0 !important;
    
    /* 样式 */
    overflow: visible !important;
    font-size: 12px !important;
    color: #6b7280 !important;
}

/* 分割线：元素区域和元数据区域之间 */
.waterfall-category.category-type-article .article-body-divider,
.home-category-posts.category-type-article .article-body-divider,
.category-posts-section .category-post-item .article-body-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 0.01px 0;
    flex: 0 0 auto;
    width: 100%;
}

/* 元素区域 - 左侧（标签/分类） */
.waterfall-category.category-type-article .article-body-left,
.home-category-posts.category-type-article .article-body-left,
.category-posts-section .category-post-item .article-body-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 元素区域 - 右侧（价格） */
.waterfall-category.category-type-article .article-body-right,
.home-category-posts.category-type-article .article-body-right,
.category-posts-section .category-post-item .article-body-right {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* 标签和分类样式 */
.waterfall-category.category-type-article .article-tags,
.waterfall-category.category-type-article .article-categories,
.home-category-posts.category-type-article .article-tags,
.home-category-posts.category-type-article .article-categories,
.category-posts-section .category-post-item .article-tags,
.category-posts-section .category-post-item .article-categories {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
}

.waterfall-category.category-type-article .article-tags i,
.waterfall-category.category-type-article .article-categories i,
.home-category-posts.category-type-article .article-tags i,
.home-category-posts.category-type-article .article-categories i,
.category-posts-section .category-post-item .article-tags i,
.category-posts-section .category-post-item .article-categories i {
    font-size: 11px !important;
    color: #ff6b35 !important;
    flex-shrink: 0 !important;
}

.waterfall-category.category-type-article .article-tags a,
.waterfall-category.category-type-article .article-categories a,
.home-category-posts.category-type-article .article-tags a,
.home-category-posts.category-type-article .article-categories a,
.category-posts-section .category-post-item .article-tags a,
.category-posts-section .category-post-item .article-categories a {
    color: #6b7280 !important;
    text-decoration: none !important;
}

.waterfall-category.category-type-article .article-tags a:hover,
.waterfall-category.category-type-article .article-categories a:hover,
.home-category-posts.category-type-article .article-tags a:hover,
.home-category-posts.category-type-article .article-categories a:hover,
.category-posts-section .category-post-item .article-tags a:hover,
.category-posts-section .category-post-item .article-categories a:hover {
    color: #3b82f6 !important;
}

/* 价格样式 */
.waterfall-category.category-type-article .article-price,
.home-category-posts.category-type-article .article-price,
.category-posts-section .category-post-item .article-price {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ff6b6b !important;
    white-space: nowrap !important;
}

.waterfall-category.category-type-article .article-price i,
.home-category-posts.category-type-article .article-price i,
.category-posts-section .category-post-item .article-price i {
    font-size: 11px !important;
    color: #f59e0b !important;
    flex-shrink: 0 !important;
}

/* 日期样式 */
.waterfall-category.category-type-article .article-date,
.home-category-posts.category-type-article .article-date,
.category-posts-section .category-post-item .article-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
}

.waterfall-category.category-type-article .article-date i,
.home-category-posts.category-type-article .article-date i,
.category-posts-section .category-post-item .article-date i {
    font-size: 11px !important;
    color: #9ca3af !important;
    flex-shrink: 0 !important;
}

/* ============================================
   7. 元数据区域（底部）
   ============================================ */
.waterfall-category.category-type-article .article-footer,
.home-category-posts.category-type-article .article-footer {
    flex-shrink: 0 !important;
}

.waterfall-category.category-type-article .article-meta,
.home-category-posts.category-type-article .article-meta {
    /* 布局 - 三列平均分布：左侧作者，中间权限，右边浏览量 */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    
    /* 字体 */
    font-size: 12px !important;
    color: #6b7280 !important;
}

.waterfall-category.category-type-article .article-meta .meta-item,
.home-category-posts.category-type-article .article-meta .meta-item {
    /* 布局 */
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    
    /* 字体 */
    color: #6b7280 !important;
}

/* 左侧：作者 */
.waterfall-category.category-type-article .article-meta .meta-author,
.home-category-posts.category-type-article .article-meta .meta-author {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
}

.waterfall-category.category-type-article .article-meta .meta-author a,
.home-category-posts.category-type-article .article-meta .meta-author a {
    text-decoration: none !important;
    color: inherit !important;
}

/* 作者样式 - 参考视频分类页 */
.waterfall-category.category-type-article .article-meta .meta-author .post-author,
.home-category-posts.category-type-article .article-meta .meta-author .post-author {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    color: #6b7280 !important;
    font-size: 11px !important;
    position: relative !important;
    cursor: pointer !important;
}

.waterfall-category.category-type-article .article-meta .meta-author .post-author img,
.waterfall-category.category-type-article .article-meta .meta-author .post-author .avatar,
.home-category-posts.category-type-article .article-meta .meta-author .post-author img,
.home-category-posts.category-type-article .article-meta .meta-author .post-author .avatar {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
}

.waterfall-category.category-type-article .article-meta .meta-author .post-author .author-name,
.home-category-posts.category-type-article .article-meta .meta-author .post-author .author-name {
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

/* 作者悬浮提示框 */
.waterfall-category.category-type-article .article-meta .meta-author .post-author .author-tooltip,
.home-category-posts.category-type-article .article-meta .meta-author .post-author .author-tooltip {
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    transform: translateY(-8px) !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important;
    transition-delay: 0s !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(8px) !important;
}

.waterfall-category.category-type-article .article-meta .meta-author .post-author .author-tooltip::after,
.home-category-posts.category-type-article .article-meta .meta-author .post-author .author-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 12px !important;
    transform: translateX(0) !important;
    border: 5px solid transparent !important;
    border-top-color: rgba(0, 0, 0, 0.85) !important;
}

.waterfall-category.category-type-article .article-meta .meta-author .post-author:hover .author-tooltip,
.home-category-posts.category-type-article .article-meta .meta-author .post-author:hover .author-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-12px) !important;
    transition-delay: 0.3s !important;
}

/* 中间：权限 */
.waterfall-category.category-type-article .article-meta .meta-permission,
.home-category-posts.category-type-article .article-meta .meta-permission {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    color: #f59e0b !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission i,
.home-category-posts.category-type-article .article-meta .meta-permission i {
    color: #f59e0b !important;
}

/* VIP级别颜色 - 与plans-grid卡片颜色一致 */
.waterfall-category.category-type-article .article-meta .meta-permission.vip-trial,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-trial {
    color: #10b981 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission.vip-trial i,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-trial i {
    color: #10b981 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission.vip-month,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-month {
    color: #f97316 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission.vip-month i,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-month i {
    color: #f97316 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission.vip-quarter,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-quarter {
    color: #8b5cf6 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission.vip-quarter i,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-quarter i {
    color: #8b5cf6 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission.vip-year,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-year {
    color: #3b82f6 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission.vip-year i,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-year i {
    color: #3b82f6 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission.vip-lifetime,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-lifetime {
    color: #ef4444 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission.vip-lifetime i,
.home-category-posts.category-type-article .article-meta .meta-permission.vip-lifetime i {
    color: #ef4444 !important;
}

/* 右边：浏览量 - 参照图片分类页样式 */
.waterfall-category.category-type-article .article-meta .meta-views,
.home-category-posts.category-type-article .article-meta .meta-views {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    margin-right: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: #64748b !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.waterfall-category.category-type-article .article-meta .meta-views i,
.home-category-posts.category-type-article .article-meta .meta-views i {
    font-size: 11px !important;
    color: #94a3b8 !important;
}

.waterfall-category.category-type-article .article-meta .meta-item i,
.home-category-posts.category-type-article .article-meta .meta-item i {
    font-size: 11px !important;
    color: #9ca3af !important;
    width: 13px !important;
    flex-shrink: 0 !important;
}

.waterfall-category.category-type-article .article-meta .meta-permission i,
.home-category-posts.category-type-article .article-meta .meta-permission i {
    color: #f59e0b !important;
}

/* ============================================
   响应式设计
   ============================================ */

@media (max-width: 1200px) {
    /* 中等屏幕：无侧边栏2列，有侧边栏2列 */
    .waterfall-category.category-type-article .waterfall-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
    
    .waterfall-category.category-type-article .category-content-wrapper.has-sidebar .waterfall-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .waterfall-category.category-type-article .category-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 768px) {
    .waterfall-category.category-type-article .category-main-content {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .waterfall-category.category-type-article .waterfall-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .waterfall-category.category-type-article .category-content-wrapper.has-sidebar .waterfall-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .waterfall-category.category-type-article .waterfall-item.article-card-item {
        height: 88px !important;
        max-height: 88px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 12px !important;
    }
    
    .waterfall-category.category-type-article .article-thumbnail {
        width: 68px !important;
        height: 68px !important;
    }
    
    .waterfall-category.category-type-article .article-title a {
        font-size: 14px !important;
    }
    
    .waterfall-category.category-type-article .article-meta {
        font-size: 11px !important;
        gap: 12px !important;
    }
    
    .waterfall-category.category-type-article .article-meta .meta-item i {
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .waterfall-category.category-type-article .category-main-content {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .waterfall-category.category-type-article .waterfall-container {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
    .waterfall-category.category-type-article .waterfall-item.article-card-item {
        height: 88px !important;
        max-height: 88px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    
    .waterfall-category.category-type-article .article-thumbnail {
        width: 64px !important;
        height: 64px !important;
    }
    
    .waterfall-category.category-type-article .article-title a {
        font-size: 13px !important;
    }
    
    .waterfall-category.category-type-article .article-meta {
        font-size: 10px !important;
    }
    
    .waterfall-category.category-type-article .article-meta .meta-item i {
        font-size: 9px !important;
    }
}