/* ====== 新闻页面专用样式 ====== */

/* ====== 新闻切换动画 ====== */
.news-item {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.news-item.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ====== 逐一显示动画 ====== */
.news-item {
    animation-delay: calc(var(--animation-order) * 100ms);
}

/* ====== 加载状态动画 ====== */
.news-item.loading {
    opacity: 0.5;
    transform: scale(0.98);
}

/* ====== 新闻分页指示器样式（简洁安静风格） ====== */
/* 分页容器样式 */
#pagination nav {
    padding: 8px 16px;
}

/* 分页按钮悬停效果 */
#pagination .prev-page:hover,
#pagination .next-page:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* 页码圆点样式 */
#pagination .page-btn {
    position: relative;
}

/* 移动端分页样式 */
#pagination-mobile nav {
    padding: 10px 20px;
}

/* 确保分页在移动端居中显示 */
@media (max-width: 768px) {
    #pagination-mobile {
        margin-top: 2rem;
    }
}

/* ====== 新闻分类按钮样式 ====== */
.category-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

.category-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.2);
}

.category-btn.active {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.3);
}

/* ====== 新闻卡片悬停效果 - 与产品页面保持一致 ====== */
.news-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.news-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ====== 新闻图片缩放效果 ====== */
.news-item img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: scale(1) !important;
    will-change: transform;
}

.news-item:hover img {
    transform: scale(1.05) !important;
}

/* ====== 新闻分类标签样式 ====== */
.news-item .bg-primary {
    transition: all 0.3s ease;
}

/* ====== 新闻标题悬停效果 ====== */
.news-item h3 {
    transition: color 0.3s ease;
}

.news-item:hover h3 {
    color: #dc2626; /* 红色主题 */
}

/* ====== 阅读更多链接样式 ====== */
.news-item .inline-flex {
    transition: color 0.3s ease;
}

/* 移除手动设置的颜色，让按钮使用Tailwind的text-primary悬停效果 */

/* ====== 新闻卡片内容样式 ====== */
.news-item .p-6 {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 1));
}

/* ====== 响应式调整 ====== */
@media (max-width: 768px) {
    .news-item {
        margin-bottom: 1rem;
    }
    
    .category-btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

/* ====== 分类切换动画 ====== */
#news-grid {
    transition: opacity 0.3s ease;
}

#news-grid.loading {
    opacity: 0.5;
}

/* ====== 空状态样式 ====== */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state i {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state h3 {
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: #9ca3af;
}