/* rankings.css - 排行榜页专属样式 */

/* 卡片容器 */
.rk-card{background:#fff;border:1px solid #d1d5db;border-radius:16px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.rk-card .section-hd{margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #f1f5f9}
.rk-card .section-hd h2{font-size:18px;font-weight:700;color:#1a1a2e;display:flex;align-items:center;gap:10px;margin:0}
.rk-card .section-hd h2::before{content:'';width:4px;height:18px;background:linear-gradient(135deg,var(--primary,#8b5cf6),#a855f7);border-radius:2px}

/* 两栏布局 */
.rk-content{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* 只有一个卡片时，只占一栏 */
.rk-content:has(.rk-card:only-child){grid-template-columns:1fr}
@media(max-width:768px){.rk-content{grid-template-columns:1fr!important}}

/* 列表 */
.rk-list{display:flex;flex-direction:column;gap:10px}

/* 排行项 */
.rk-item{display:flex;align-items:center;gap:14px;background:#fafbfc;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;transition:all .2s ease;text-decoration:none;color:inherit;position:relative;overflow:hidden}
.rk-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .2s}
.rk-item:hover{border-color:var(--primary-light,#a5b4fc);background:#f8fafc;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.rk-item:hover::before{background:var(--primary,#8b5cf6)}

/* 排名数字 */
.rk-num{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;background:#e2e8f0;color:#1e293b;border:1px solid #cbd5e1}
.rk-num.top1{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,.3)}
.rk-num.top2{background:linear-gradient(135deg,#94a3b8,#64748b);color:#fff;box-shadow:0 2px 8px rgba(148,163,184,.3)}
.rk-num.top3{background:linear-gradient(135deg,#d97706,#b45309);color:#fff;box-shadow:0 2px 8px rgba(217,119,6,.3)}

/* 网站信息 */
.rk-info{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.rk-info img{width:28px;height:28px;border-radius:8px;flex-shrink:0;background:#f1f5f9;padding:2px}
.rk-info-text{flex:1;min-width:0}
.rk-info strong{font-size:14px;font-weight:600;color:#1a1a2e;display:block;margin-bottom:2px}
.rk-info span{font-size:11px;color:#94a3b8}

/* 点击量 */
.rk-clicks{text-align:right;flex-shrink:0;padding-left:12px}
.rk-clicks b{font-size:16px;font-weight:700;color:var(--primary,#8b5cf6);display:block;line-height:1.2}
.rk-clicks small{font-size:10px;color:#94a3b8;display:block;margin-top:2px}

/* 日期（文章排行） */
.rk-date{font-size:11px;color:#94a3b8;flex-shrink:0}

/* Hero */
.rk-hero{background:var(--gradient);border-radius:16px;padding:36px 24px 32px;color:#fff;text-align:center;position:relative;overflow:hidden;margin-bottom:20px}
.rk-hero::before{content:'';position:absolute;inset:0;opacity:.1;background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.9) 1.5px,transparent 0);background-size:20px 20px}
.rk-hero h1{font-size:28px;font-weight:800;margin:0 0 8px;position:relative;letter-spacing:-.5px}
.rk-hero p{font-size:14px;color:rgba(255,255,255,.85);margin:0;position:relative}

/* 移动端 */
@media(max-width:768px){
  .rk-hero{padding:28px 16px 24px;border-radius:12px}
  .rk-hero h1{font-size:22px}
  .rk-card{padding:16px;border-radius:12px}
  .rk-item{padding:12px;gap:10px}
  .rk-num{width:28px;height:28px;font-size:12px}
  .rk-info img{width:24px;height:24px}
  .rk-info strong{font-size:13px}
  .rk-clicks b{font-size:14px}
}