/* ============================================
   MK体育在线官网 - TAG聚合页样式
   tags.css - 2.0KB
   ============================================ */

/* ---- Tag Hero ---- */
.tag-hero{padding:50px 0;background:#f8f9ff;border-bottom:1px solid #e8eaf6}
.tag-hero h1{font-size:30px;font-weight:700;color:#1A1F3C;margin-bottom:8px}
.tag-hero p{color:#666;font-size:15px}
.tag-hero .tag-badge{display:inline-block;padding:6px 20px;background:#3F51B5;color:#fff;font-size:16px;font-weight:600;margin-bottom:12px}

/* ---- Tag Content ---- */
.tag-section{padding:50px 0;background:#fff}
.tag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tag-card{border:1px solid #e8eaf6;padding:24px;transition:all .25s;background:#fff}
.tag-card:hover{border-color:#3F51B5;box-shadow:0 6px 20px rgba(63,81,181,.1)}
.tag-card h3{font-size:17px;font-weight:600;margin-bottom:10px}
.tag-card h3 a{color:#1A1F3C}
.tag-card h3 a:hover{color:#3F51B5}
.tag-card p{font-size:14px;color:#666;line-height:1.7;margin-bottom:12px}
.tag-card .meta{font-size:13px;color:#aaa;display:flex;gap:16px}

/* ---- Category Cards Layout ---- */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cat-card{background:#fff;border:1px solid #e8eaf6;padding:30px;transition:all .25s}
.cat-card:hover{border-color:#3F51B5;transform:translateY(-3px);box-shadow:0 8px 30px rgba(63,81,181,.1)}
.cat-card-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.cat-icon{width:56px;height:56px;background:#f0f3ff;display:flex;align-items:center;justify-content:center;color:#3F51B5}
.cat-icon svg{width:28px;height:28px}
.cat-card-header h3{font-size:20px;font-weight:600;color:#1A1F3C}
.cat-card p{font-size:14px;color:#666;line-height:1.7;margin-bottom:16px}
.cat-card .count{font-size:13px;color:#3F51B5;font-weight:500}

/* ---- Tag Cloud ---- */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;padding:30px;background:#f8f9ff}
.tag-cloud a{display:block;padding:8px 18px;background:#fff;border:1px solid #e0e0e0;color:#555;font-size:14px;transition:all .2s}
.tag-cloud a:hover{background:#3F51B5;color:#fff;border-color:#3F51B5}
.tag-cloud a.hot{background:#3F51B5;color:#fff;border-color:#3F51B5}

/* ---- Responsive ---- */
@media(max-width:992px){
.tag-grid{grid-template-columns:repeat(2,1fr)}
.cat-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
.tag-grid{grid-template-columns:1fr}
.tag-hero h1{font-size:24px}
}