/* ===== 文章列表专用样式 - 完全按照Vue参考组件 ===== */
/* 适用于：首页、分类页、标签页 */

/* 内容区域 - 确保垂直布局，完全不可见的容器 */
.content-area {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 导航栏容器保持原有样式（分类导航栏/标签导航栏） */
.recent-posts {
    width: 100% !important;
}

/* 文章列表容器 - 大屏幕居中适配 */
.article-list-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

@media screen and (max-width: 1400px) {
    .article-list-container {
        max-width: 1000px !important;
        padding: 0 1.5rem !important;
    }
}

@media screen and (max-width: 768px) {
    .article-list-container {
        max-width: none !important;
        padding: 0 1rem !important;
    }
}

/* 文章卡片基础样式 */
.article-item {
    display: flex !important;
    height: 14rem !important;
    margin: 1.25rem auto 0 !important;
    max-width: 1000px !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.625rem 1.875rem -0.9375rem rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease-in-out 0s !important;
    background: var(--heo-card-bg) !important;
    border: none !important;
    visibility: visible !important;
    cursor: pointer !important;
}

.article-item:hover {
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.2) !important;
}

.article-item:hover .cover {
    transform: scale(1.05) rotate(1deg) !important;
}

/* 奇数卡片 - 默认布局：图片在左，内容在右 */
.article-item {
    flex-direction: row !important;
}

.article-item .article-cover {
    width: 50% !important;
    height: 100% !important;
    margin-right: 1.5rem !important;
    clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%) !important;
    border-radius: 0.625rem 0 0 0.625rem !important;
    overflow: hidden !important;
}

.article-item .article-info {
    position: relative !important;
    width: 50% !important;
    padding: 1rem 1.5rem 3rem 0 !important;
    perspective: 62.5rem !important;
}

.article-item .article-meta {
    display: flex !important;
    justify-content: flex-end !important;
    font-size: 0.8125rem !important;
    color: #999 !important;
    margin-bottom: 0.625rem !important;
}

/* 偶数卡片 - 图片在右，内容在左 */
.article-item:nth-child(even) {
    flex-direction: row-reverse !important;
}

.article-item:nth-child(even) .article-cover {
    width: 50% !important;
    height: 100% !important;
    margin-right: auto !important;
    margin-left: 1.5rem !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%) !important;
    border-radius: 0 0.625rem 0.625rem 0 !important;
    overflow: hidden !important;
}

.article-item:nth-child(even) .article-info {
    position: relative !important;
    width: 50% !important;
    padding: 1rem 0 3rem 1.5rem !important;
    perspective: 62.5rem !important;
}

.article-item:nth-child(even) .article-meta {
    justify-content: flex-start !important;
}

.article-item:nth-child(even) .article-category {
    right: 0.5rem !important;
    justify-content: flex-start !important;
}

/* 图片样式 */
.article-cover .cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: all 0.2s ease-in-out 0s !important;
}

/* 元信息样式 */
.article-meta .top {
    color: #ff8e53 !important;
    margin-right: 0.625rem !important;
}

.article-meta .meta-item {
    display: flex !important;
    align-items: center !important;
    margin-left: 0.625rem !important;
}

.article-meta .meta-item:first-child {
    margin-left: 0 !important;
}

.article-meta .meta-item i {
    margin-right: 0.15rem !important;
    font-size: 0.9rem !important;
}

.article-meta .ml-3-75 {
    margin-left: 0.9375rem !important;
}

.article-meta .ml-3-75:first-child {
    margin-left: 0 !important;
}

/* 文章标题 */
.article-title {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0.625rem 0 !important;
    color: var(--heo-fontcolor) !important;
    overflow: hidden !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
}

.article-title a {
    color: var(--heo-fontcolor) !important;
    text-decoration: none !important;
}

.article-item:hover .article-title a {
    color: var(--heo-main) !important;
}

/* 文章摘要内容 */
.article-content {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    max-height: 5rem !important;
    font-size: 0.875em !important;
    overflow: hidden !important;
    line-height: 1.6 !important;
    color: var(--heo-secondtext) !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
}

/* 文章分类 */
.article-category {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    bottom: 0.5rem !important;
    font-size: 0.8125em !important;
    color: #999 !important;
}

.article-category i {
    margin-right: 0.15rem !important;
    font-size: 0.85rem !important;
}

.article-category a {
    color: #999 !important;
    text-decoration: none !important;
}

.article-category a:hover {
    color: var(--heo-main) !important;
}

/* 移动端适配 */
@media (max-width: 767px) {
    .article-item {
        flex-direction: column !important;
        height: fit-content !important;
        margin: 1rem 0.5rem 0 !important;
        max-width: none !important;
    }
    
    .article-item .article-cover,
    .article-item:nth-child(even) .article-cover {
        width: 100% !important;
        height: 14rem !important;
        margin: auto !important;
        clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%) !important;
        border-radius: 0.625rem 0.625rem 0 0 !important;
    }
    
    .article-item .article-info,
    .article-item:nth-child(even) .article-info {
        width: 100% !important;
        height: 14rem !important;
        padding: 0 1rem 3rem !important;
    }
    
    .article-item:nth-child(even) {
        flex-direction: column !important;
    }
    
    .article-item:nth-child(even) .article-cover {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%) !important;
    }
    
    /* 移动端元信息左对齐 */
    .article-item .article-meta,
    .article-item:nth-child(even) .article-meta {
        justify-content: flex-start !important;
    }
}

/* 深色模式适配 */
[data-theme="dark"] .article-item {
    box-shadow: 0 0.625rem 1.875rem -0.9375rem rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .article-item:hover {
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .article-meta {
    color: #ccc !important;
}

[data-theme="dark"] .article-category {
    color: #ccc !important;
}

[data-theme="dark"] .article-category a {
    color: #ccc !important;
}

/* 兼容原有类名 */
#recent-posts > .recent-post-item {
    display: flex !important;
    height: 14rem !important;
    margin: 1.25rem 0.5rem 0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.625rem 1.875rem -0.9375rem rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease-in-out 0s !important;
    background: var(--heo-card-bg) !important;
    border: none !important;
    cursor: pointer !important;
}