/* ============================================================
   英雄联盟图鉴（lol）模块样式
   由 _sport_head.php 按模块名自动加载：skin/static/css/lol.css
   ============================================================ */

/* ---------- 筛选条 ---------- */
.lol-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;}
.lol-chip{display:inline-block;padding:5px 14px;border-radius:16px;background:#f4f6f9;color:#4a5568;
  font-size:13px;text-decoration:none;border:1px solid #e8ecf1;transition:all .15s;}
.lol-chip:hover{background:#eaf2ff;border-color:#c9dcf7;color:#2b6cb0;}
.lol-chip.is-on{background:#2b6cb0;border-color:#2b6cb0;color:#fff;}
.lol-chip i{font-style:normal;opacity:.75;font-size:11px;margin-left:4px;}
.lol-search{display:flex;gap:6px;margin-left:auto;}
.lol-search input{padding:6px 12px;border:1px solid #dcdfe6;border-radius:16px;font-size:13px;width:170px;}
.lol-search button{padding:6px 16px;border:0;border-radius:16px;background:#4a90d9;color:#fff;font-size:13px;cursor:pointer;}

/* ---------- 英雄网格 ---------- */
.lol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.lol-card{background:#fff;border:1px solid #eceff3;border-radius:10px;overflow:hidden;text-decoration:none;
  display:block;transition:transform .15s,box-shadow .15s;}
.lol-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(43,108,176,.14);border-color:#c9dcf7;}
.lol-card img{display:block;width:100%;height:150px;object-fit:cover;object-position:top center;background:#0f1720;}
.lol-card .lol-cn{padding:8px 10px 10px;}
.lol-card .lol-cn b{display:block;font-size:14px;color:#1f2937;line-height:1.3;}
.lol-card .lol-cn small{display:block;font-size:11px;color:#98a2b3;margin-top:2px;}
.lol-card .lol-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.lol-tag{font-size:10px;padding:1px 6px;border-radius:8px;background:#eef5ff;color:#2b6cb0;}
.lol-dif{font-size:10px;padding:1px 6px;border-radius:8px;background:#fff7e6;color:#b88230;}

/* ---------- 详情页 ---------- */
.lol-hero{display:flex;gap:18px;flex-wrap:wrap;background:#f8fafc;border:1px solid #eceff3;
  border-radius:12px;padding:16px;margin-bottom:16px;}
.lol-hero-pic{flex:0 0 210px;}
.lol-hero-pic img{width:100%;border-radius:10px;display:block;background:#0f1720;}
.lol-hero-info{flex:1 1 320px;min-width:260px;}
.lol-hero-info h1{margin:0;font-size:24px;line-height:1.3;color:#111827;}
.lol-hero-info .lol-sub{color:#6b7280;font-size:14px;margin:4px 0 10px;}
.lol-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.lol-meta span{font-size:12px;background:#fff;border:1px solid #e5e9ef;border-radius:12px;padding:2px 10px;color:#475569;}

/* 能力条 */
.lol-bars{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;max-width:520px;}
.lol-bar-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#475569;}
.lol-bar-row span{width:38px;flex:none;}
.lol-bar{flex:1;height:8px;border-radius:4px;background:#e8eef6;overflow:hidden;}
.lol-bar i{display:block;height:100%;background:linear-gradient(90deg,#7db3ea,#2b6cb0);}

/* 技能 */
.lol-spell{display:flex;gap:12px;padding:12px;border:1px solid #eef1f5;border-radius:10px;
  margin-bottom:10px;background:#fff;}
.lol-spell img{width:48px;height:48px;border-radius:8px;flex:none;background:#0f1720;}
.lol-spell .lol-sp-body{flex:1;min-width:0;}
.lol-spell .lol-sp-name{font-size:15px;font-weight:600;color:#1f2937;}
.lol-spell .lol-sp-name em{font-style:normal;font-size:11px;font-weight:400;color:#98a2b3;margin-left:6px;}
/* ---------- 皮肤页（hero-sk-{英雄id}-{数字}）---------- */
.sk-hero{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;
  align-items:start;background:#fff;border:1px solid #ebeef5;border-radius:12px;
  padding:16px;margin:4px 0 16px}
.sk-photo{margin:0;background:#f4f6fa;border-radius:10px;overflow:hidden;text-align:center}
.sk-photo img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;object-position:top}
.sk-info{min-width:0}
.sk-name{margin:0;font-size:24px;font-weight:800;color:#1f2937;line-height:1.35}
.sk-sub{margin:8px 0 0;font-size:13px;color:#6b7280;line-height:1.8}
.sk-sub a{color:#2b6cb0;text-decoration:none}
.sk-sub a:hover{text-decoration:underline}
.sk-links{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.sk-btn{display:inline-block;padding:8px 16px;border-radius:20px;background:#f0f5fb;
  border:1px solid #cfe0f5;color:#2b6cb0;font-size:13px;font-weight:600;text-decoration:none}
.sk-btn:hover{background:#e4eefb}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;margin:0 0 16px}
.sk-card{display:block;background:#fff;border:1px solid #ebeef5;border-radius:10px;
  overflow:hidden;text-decoration:none;transition:box-shadow .15s,transform .15s}
.sk-card:hover{box-shadow:0 4px 16px rgba(60,120,200,.16);transform:translateY(-1px)}
.sk-card.is-cur{border-color:#7aa9dd;box-shadow:0 0 0 2px rgba(122,169,221,.28)}
.sk-card-img{display:block;width:100%;aspect-ratio:308/360;background:#f4f6fa;overflow:hidden}
.sk-card-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.sk-card b{display:block;padding:8px 10px 0;font-size:13px;color:#303133;line-height:1.5}
.sk-card small{display:block;padding:2px 10px 9px;font-size:11px;color:#9aa3b2}
.sk-small{font-size:11px;line-height:1.7;color:#8a8f99;margin:6px 0 0}
@media(max-width:640px){
  .sk-hero{grid-template-columns:1fr;gap:14px;padding:12px}
  .sk-name{font-size:19px}
  .sk-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}

.lol-spell .lol-sp-desc{font-size:13px;color:#4b5563;line-height:1.8;margin-top:4px;}
.lol-spell .lol-sp-kv{font-size:12px;color:#8a94a6;margin-top:6px;display:flex;flex-wrap:wrap;gap:10px;}

/* 属性表 */
.lol-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.lol-stats div{background:#f8fafc;border:1px solid #eef1f5;border-radius:8px;padding:7px 10px;font-size:12px;color:#64748b;}
.lol-stats b{color:#1f2937;font-size:14px;margin-left:4px;}

/* 皮肤 */
.lol-skins{display:flex;flex-wrap:wrap;gap:8px;}
.lol-skin{font-size:12px;background:#fff;border:1px solid #e9edf2;border-radius:14px;padding:4px 12px;color:#475569;}

/* 提示列表 */
.lol-tip{font-size:13px;color:#4b5563;line-height:1.9;padding-left:16px;position:relative;margin:0 0 6px;}
.lol-tip:before{content:"•";position:absolute;left:2px;color:#7db3ea;}

/* 板块标题（沿用体育站风格） */
.lol-h2{margin:22px 0 10px;font-size:16px;font-weight:600;color:#1f2937;
  border-left:3px solid #4a90d9;padding-left:8px;}

@media (max-width:720px){
  .lol-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;}
  .lol-card img{height:120px;}
  .lol-hero-pic{flex:0 0 150px;}
  .lol-bars{grid-template-columns:1fr;}
  .lol-search{margin-left:0;width:100%;}
  .lol-search input{flex:1;width:auto;}
}