@charset "utf-8";
/* MK体育在线官网 - 资讯列表页样式 news.css */
/* 布局：P5分类标签前置 */

/* === 分类标签 P5 === */
.filter-bar { background: #fff; padding: 20px 0; border-bottom: 1px solid rgba(232, 213, 192, 0.4); position: sticky; top: 72px; z-index: 100; }
.filter-tags { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-tags span { font-size: 13px; color: #8B5E3C; margin-right: 8px; }
.filter-tag { padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(232, 213, 192, 0.6); font-size: 13px; color: #4A3728; cursor: pointer; transition: all 0.3s ease; background: #fff; }
.filter-tag:hover, .filter-tag.active { background: #8B5E3C; color: #FDF8F3; border-color: #8B5E3C; }

/* === 文章列表 === */
.article-list { padding: 40px 0 60px; background: #FDF8F3; }
.list-item { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 28px; background: #fff; border-radius: 12px; margin-bottom: 16px; border: 1px solid rgba(232, 213, 192, 0.3); transition: all 0.3s ease; }
.list-item:hover { box-shadow: 0 8px 30px rgba(44, 31, 21, 0.08); border-color: #E8D5C0; transform: translateY(-2px); }
.list-thumb { width: 200px; height: 140px; border-radius: 8px; background: linear-gradient(135deg, #E8D5C0 0%, #D4B896 100%); display: flex; align-items: center; justify-content: center; color: #8B5E3C; font-size: 12px; flex-shrink: 0; overflow: hidden; }
.list-body { display: flex; flex-direction: column; justify-content: center; }
.list-meta { display: flex; gap: 16px; margin-bottom: 10px; font-size: 12px; color: #8B5E3C; flex-wrap: wrap; }
.list-meta .category { padding: 2px 10px; background: #E8D5C0; border-radius: 4px; }
.list-body h3 { font-size: 17px; margin-bottom: 8px; color: #2C1F15; line-height: 1.5; }
.list-body p { font-size: 13px; color: #4A3728; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* === 响应式 === */
@media (max-width: 768px) {
  .filter-bar { top: 60px; }
  .list-item { grid-template-columns: 1fr; }
  .list-thumb { width: 100%; height: 180px; }
  .filter-tags span { display: none; }
}