/* ===========================================
   专题首页 — 卡片布局（自包含，不依赖主题 zt/css/index.css）
   ============================================ */

/* ---- 容器 ---- */
.topic { margin-top: 20px; background: #fff; padding: 30px 20px; }
.topic .common_title1 { width: 100%; overflow: hidden; border-bottom: 1px solid #E5E5E5; height: 40px; margin-bottom: 20px; }
.topic .common_title1 h2 { font-size: 20px; font-weight: bold; color: #333; padding-left: 18px; position: relative; float: left; }
.topic .common_title1 h2 span { color: #E13B54; }
.topic .common_title1 h2::before { content: ''; position: absolute; top: 3px; left: 0; width: 6px; height: 20px; background: #E13B3B; border-radius: 0 2px 2px 0; }

/* ---- 卡片 ---- */
.topic .list .item { margin-top: 20px; width: 100%; height: auto; background-color: #F4F4F4; overflow: hidden; }
.topic .list .item .info { width: 100%; box-sizing: border-box; height: auto; padding: 25px 30px; }
.topic .list .item .info .title { overflow: hidden; }
.topic .list .item .info .title a { font-size: 26px; font-weight: bold; color: #333; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.topic .list .item .info .title a:hover { color: #ea6161; }
.topic .list .item .info .title span { font-size: 14px; color: #777; margin-left: 10px; float: left; margin-top: 14px; }
.topic .list .item .info .title .topic-more-link { float: right; font-size: 14px; color: #E13B3B; text-decoration: none; margin-top: 14px; }
.topic .list .item .info .title .topic-more-link:hover { color: #ea6161; text-decoration: underline; }
.topic .list .item .info .desc { font-size: 14px; color: #666; line-height: 24px; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.topic .list .item .info .games { margin-top: 20px; overflow: hidden; }
.topic .list .item .info .games .game { width: 174px; float: left; position: relative; }
.topic .list .item .info .games .game + .game { margin-left: 33px; }
.topic .list .item .info .games .game img { width: 174px; height: 220px; border-radius: 0; display: block; }
.topic .list .item .info .games .game .black_bg { transition: all 0.5s; width: 100%; height: 60px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)); position: absolute; bottom: 0; }
.topic .list .item .info .games .game:hover .black_bg { height: 120px; }
.topic .list .item .info .games .game span { width: 100%; position: absolute; bottom: 10px; left: 0; padding: 0 5px; box-sizing: border-box; font-size: 16px; color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

/* 空状态 */
.topic-null { text-align: center; color: #999; padding: 80px 0; font-size: 16px; }

/* ---- 分页 ---- */
.m-paging { width: 100%; margin: auto; text-align: center; padding: 50px 0 0 0; }
.m-paging .page-numbers { list-style: none; padding: 0; margin: 0; display: inline-block; overflow: auto; }
.m-paging .page-numbers li { display: inline-block; float: left; }
.m-paging .page-numbers li .page-numbers { display: inline-block; height: 42px; min-width: 42px; border: 1px solid #ddd; background: #fff; color: #555; margin-right: 8px; border-radius: 3px; padding: 0 16px; line-height: 40px; font-size: 17px; text-decoration: none; }
.m-paging .page-numbers li a.page-numbers:hover { color: #ea6161; background: #fef8f8; border-color: #ea6161; }
.m-paging .page-numbers li span.page-numbers.current { background: #ea6161; color: #fff; border-color: #ea6161; font-weight: bold; font-size: 18px; }
.m-paging .page-numbers li .prev, .m-paging .page-numbers li .next { font-size: 16px; font-weight: bold; color: #333; }


/* ============================================
   专题文章页 — Hero + 概述 + 推荐网格
   ============================================ */

.topic-page { max-width: 100% !important; width: 100%; margin: 0; padding: 0; font-family: Microsoft YaHei, "Microsoft YaHei", sans-serif; }

/* Hero 横幅 */
.topic-hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); padding: 60px 0 50px; text-align: center; color: #fff; }
.topic-hero-inner { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.topic-hero-badge { display: inline-block; background: rgba(255,255,255,0.15); color: #fff; font-size: 13px; letter-spacing: 6px; padding: 6px 20px; border-radius: 20px; margin-bottom: 18px; border: 1px solid rgba(255,255,255,0.2); }
.topic-hero h1 { font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 14px; line-height: 1.3; }
.topic-hero-meta { font-size: 13px; color: rgba(255,255,255,0.6); }
.topic-hero-meta span { margin: 0 12px; display: inline-block; }
.topic-hero-meta a { color: rgba(255,255,255,0.7); text-decoration: none; }
.topic-hero-meta a:hover { color: #fff; }

/* 正文区域 */
.topic-body { max-width: 860px; margin: 0 auto; padding: 0 20px 60px; }

/* 概述卡片 */
.topic-intro-card { background: #fff; border-radius: 10px; padding: 28px 32px; margin-top: -30px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); font-size: 15px; color: #555; line-height: 28px; }

/* 推荐区块 */
.topic-recommend-section { margin-top: 40px; }
.topic-recommend-header { display: flex; align-items: center; margin-bottom: 24px; }
.topic-icon-bar { display: inline-block; width: 4px; height: 22px; background: #ea6161; border-radius: 2px; margin-right: 10px; }
.topic-recommend-header h2 { font-size: 20px; font-weight: 700; color: #222; margin: 0; flex: 1; }
.topic-count-badge { font-size: 13px; color: #999; background: #f5f5f5; padding: 3px 14px; border-radius: 12px; }

/* 推荐网格 3列 */
.topic-recommend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .topic-recommend-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .topic-recommend-grid { grid-template-columns: 1fr; } }

/* 单张推荐卡片 */
.topic-rec-card { display: block; background: #fff; border-radius: 8px; overflow: hidden; text-decoration: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform .2s, box-shadow .2s; }
.topic-rec-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.topic-rec-thumb { width: 100%; height: 180px; object-fit: cover; display: block; }
.topic-rec-body { padding: 14px 16px; }
.topic-rec-title { font-size: 14px; font-weight: 600; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; margin-bottom: 8px; }
.topic-rec-meta { font-size: 12px; color: #aaa; }
.topic-rec-meta span { margin-right: 10px; }

/* 专题内分页（在 CSS Grid 内跨越全宽） */
.topic-recommend-grid .topic-pagination { grid-column: 1 / -1; margin-top: 10px; }
.topic-pagination { margin-top: 40px; padding-top: 25px; border-top: 1px solid #eee; text-align: center; clear: both; }
.topic-page-info { font-size: 14px; color: #999; margin-bottom: 14px; }
.topic-pagination a.page-numbers,
.topic-pagination span.page-numbers { display: inline-block; height: 36px; min-width: 36px; border: 1px solid #ddd; background: #fff; color: #555; margin: 0 4px; border-radius: 3px; padding: 0 12px; line-height: 34px; font-size: 14px; text-decoration: none; }
.topic-pagination a.page-numbers:hover { color: #ea6161; border-color: #ea6161; }
.topic-pagination span.page-numbers.current { background: #ea6161; color: #fff; border-color: #ea6161; font-weight: bold; }
.topic-pagination a.prev, .topic-pagination a.next { font-weight: bold; color: #333; }