/* =====================================================================
   /template/qxsports/css/type.css   【联赛 + 问答 + 搜索】
   ===================================================================== */

/* ---------- 联赛列表卡片 ---------- */
.qx-leaguegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.qx-leaguecard{display:flex;flex-direction:column;gap:14px;position:relative;
  background:var(--qx-card);border:1px solid var(--qx-line);border-radius:var(--qx-radius);
  padding:22px 20px 18px;transition:all .3s var(--qx-ease);overflow:hidden}
.qx-leaguecard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--qx-primary),transparent);opacity:0;transition:opacity .3s}
.qx-leaguecard:hover{transform:translateY(-5px);border-color:var(--qx-line-2);
  box-shadow:var(--qx-shadow);background:var(--qx-card-hover)}
.qx-leaguecard:hover::before{opacity:1}
.qx-lcard-hot{position:absolute;right:14px;top:14px;font-family:var(--qx-font-mono);
  font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--qx-live);
  border:1px solid rgba(255,77,79,.4);padding:2px 8px;border-radius:4px}
.qx-lcard-ph{width:72px;height:72px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.05), transparent 70%);
  border-radius:16px;border:1px solid var(--qx-line)}
.qx-lcard-ph img{width:80%;height:80%;object-fit:contain;transition:transform .35s var(--qx-ease)}
.qx-leaguecard:hover .qx-lcard-ph img{transform:scale(1.1)}
.qx-lcard-bd{display:flex;flex-direction:column;gap:6px;min-width:0}
.qx-lcard-bd b{font-size:16.5px;font-weight:800;transition:color .2s}
.qx-leaguecard:hover .qx-lcard-bd b{color:var(--qx-primary)}
.qx-lcard-bd em{font-style:normal;font-size:10px;letter-spacing:2px;color:var(--qx-text-3)}
.qx-lcard-bd p{font-size:12.5px;line-height:1.7;color:var(--qx-text-3)}
.qx-lcard-go{margin-top:auto;font-size:12px;font-weight:600;color:var(--qx-text-3);
  transition:color .2s}
.qx-leaguecard:hover .qx-lcard-go{color:var(--qx-primary)}

/* ---------- 联赛详情 Hero ---------- */
.qx-lgh{position:relative;border:1px solid var(--qx-line-2);border-radius:22px;
  overflow:hidden;margin:8px 0 0;box-shadow:var(--qx-shadow)}
.qx-lgh-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(900px 400px at 20% -10%, rgba(0,229,160,.14), transparent 60%),
             linear-gradient(180deg,var(--qx-card),var(--qx-bg-2))}
.qx-lgh-bg[data-sport="bk"]{
  background:radial-gradient(900px 400px at 20% -10%, rgba(255,176,32,.13), transparent 60%),
             linear-gradient(180deg,var(--qx-card),var(--qx-bg-2))}
.qx-lgh-in{position:relative;z-index:2;display:flex;align-items:center;gap:28px;
  padding:32px 34px 26px;flex-wrap:wrap}
.qx-lgh-logo{flex:0 0 auto;width:110px;height:110px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.06), transparent 70%);
  border-radius:24px;border:1px solid var(--qx-line)}
.qx-lgh-logo img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.qx-lgh-info{flex:1;min-width:240px}
.qx-lgh-tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.qx-lgh-py{font-size:10.5px;color:var(--qx-text-3);letter-spacing:2.5px}
.qx-lgh-name{font-size:clamp(26px,4.4vw,40px);font-weight:800;line-height:1.2;margin-bottom:10px}
.qx-lgh-desc{font-size:13.5px;color:var(--qx-text-2);line-height:1.8;margin-bottom:14px}
.qx-lgh-dates{display:flex;gap:7px;flex-wrap:wrap}
.qx-lgh-date{font-family:var(--qx-font-mono);font-size:11.5px;color:var(--qx-text-2);
  border:1px solid var(--qx-line-2);padding:5px 13px;border-radius:14px;transition:all .22s}
.qx-lgh-date:hover{border-color:var(--qx-primary);color:var(--qx-primary)}
.qx-lgh-date.on{background:var(--qx-primary);border-color:var(--qx-primary);color:#04120C;font-weight:700}

/* ---------- 联赛球队列表 ---------- */
.qx-lg-teams{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.qx-lgt-item{display:flex;align-items:center;gap:13px;padding:12px 14px;
  background:var(--qx-bg-2);border:1px solid var(--qx-line);border-radius:12px;transition:all .25s var(--qx-ease)}
.qx-lgt-item:hover{border-color:var(--qx-primary);transform:translateX(4px)}
.qx-lgt-item img{width:42px;height:42px;object-fit:contain;flex:0 0 auto}
.qx-lgt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.qx-lgt-tx b{font-size:14px;font-weight:700}
.qx-lgt-item:hover b{color:var(--qx-primary)}
.qx-lgt-tx s{text-decoration:none;font-size:11px;color:var(--qx-text-3)}

/* ---------- 快速导航 ---------- */
.qx-quicknav{display:flex;flex-direction:column;gap:2px}
.qx-quicknav a{padding:10px 12px;font-size:13.5px;color:var(--qx-text-2);border-radius:9px;transition:all .2s;
  display:flex;align-items:center;gap:8px}
.qx-quicknav a::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--qx-text-3);transition:background .2s}
.qx-quicknav a:hover{background:var(--qx-line);color:var(--qx-primary)}
.qx-quicknav a:hover::before{background:var(--qx-primary)}

/* ---------- 问答页 ---------- */
.qx-ask-badge-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.qx-qbadge{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--qx-primary);color:#04120C;font-weight:900;font-size:17px;border-radius:9px;flex:0 0 auto}
.qx-abadge{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;background:var(--qx-blue);color:#fff;font-weight:900;font-size:14px;
  border-radius:7px;margin-right:10px;vertical-align:-6px}
.qx-answer-flag{font-size:14px;font-weight:800;color:var(--qx-blue);margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px dashed var(--qx-line)}
.qx-ask-noans{text-align:center;padding:44px 24px;border:1px dashed var(--qx-line-2);
  border-radius:14px;background:var(--qx-bg-2)}
.qx-ask-noans b{display:block;font-family:var(--qx-font-num);font-size:30px;color:var(--qx-text-3);
  letter-spacing:.06em;margin-bottom:10px}
.qx-ask-noans p{font-size:13.5px;color:var(--qx-text-3);line-height:1.8;margin-bottom:18px}
.qx-ask-main .qx-art-title{font-size:clamp(20px,3vw,28px)}

/* ---------- 搜索页表单 ---------- */
.qx-srh-form{display:flex;gap:10px;max-width:560px}
.qx-srh-form input{flex:1;min-width:0;background:var(--qx-card);border:1px solid var(--qx-line-2);
  color:var(--qx-text);padding:12px 18px;border-radius:12px;outline:none;font-size:14px;transition:border-color .2s}
.qx-srh-form input:focus{border-color:var(--qx-primary)}
.qx-srh-form .qx-btn{flex:0 0 auto}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .qx-leaguegrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .qx-leaguegrid{grid-template-columns:1fr}
  .qx-leaguecard{flex-direction:row;align-items:center;padding:16px}
  .qx-lcard-ph{width:56px;height:56px;flex:0 0 auto;border-radius:12px}
  .qx-lcard-bd{flex:1}
  .qx-lcard-go{display:none}
  .qx-lgh{border-radius:16px}
  .qx-lgh-in{padding:22px 18px 18px;gap:16px}
  .qx-lgh-logo{width:76px;height:76px;border-radius:16px}
  .qx-lgh-info{flex:1 1 100%;order:3;min-width:0}
  .qx-th-nums{width:100%;order:4}
  .qx-lg-teams{grid-template-columns:1fr}
  .qx-lgh-name{font-size:24px}
  .qx-srh-form{flex-direction:column}
  .qx-srh-form .qx-btn{width:100%}
  .qx-qbadge{width:28px;height:28px;font-size:15px;border-radius:7px}
}
/* =====================================================================
   追加：视频时长角标 + 问答列表卡 + 搜索中心
   ===================================================================== */

/* ---------- 视频卡时长角标 ---------- */
.qx-vcard-dur{position:absolute;right:9px;bottom:9px;background:rgba(5,8,15,.8);
  color:#fff;font-size:11px;padding:2px 8px;border-radius:5px;letter-spacing:.5px}

/* ---------- 问答列表 ---------- */
.qx-askgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.qx-askcard{display:flex;flex-direction:column;gap:12px;background:var(--qx-card);
  border:1px solid var(--qx-line);border-radius:var(--qx-radius);padding:18px 20px 15px;
  transition:all .3s var(--qx-ease);min-width:0}
.qx-askcard:hover{transform:translateY(-4px);border-color:var(--qx-line-2);
  box-shadow:var(--qx-shadow);background:var(--qx-card-hover)}
.qx-askc-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.qx-askc-lg{font-style:normal;font-size:11px;color:var(--qx-text-3);
  border:1px solid var(--qx-line-2);padding:2px 9px;border-radius:10px;max-width:130px}
.qx-askc-bd{display:flex;flex-direction:column;gap:7px;min-width:0}
.qx-askc-bd b{font-size:15.5px;font-weight:700;line-height:1.5;transition:color .2s}
.qx-askcard:hover .qx-askc-bd b{color:var(--qx-primary)}
.qx-askc-bd p{font-size:12.5px;line-height:1.7;color:var(--qx-text-3)}
.qx-askc-ft{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:12px;
  border-top:1px dashed var(--qx-line);font-size:11px;color:var(--qx-text-3)}
.qx-askc-ft s{text-decoration:none}
.qx-askc-ft time{margin-left:auto}
.qx-askc-go{font-style:normal;font-size:12px;font-weight:600;color:var(--qx-text-3);transition:color .2s}
.qx-askcard:hover .qx-askc-go{color:var(--qx-primary)}

/* ---------- 搜索中心 ---------- */
.qx-so-head{text-align:center}
.qx-so-bigform{display:flex;align-items:center;gap:12px;max-width:640px;margin:26px auto 0;
  background:var(--qx-card);border:1px solid var(--qx-line-2);border-radius:16px;padding:8px 8px 8px 20px;
  transition:border-color .25s,box-shadow .25s}
.qx-so-bigform:focus-within{border-color:var(--qx-primary);box-shadow:0 0 0 4px rgba(0,229,160,.1)}
.qx-so-bigform svg{color:var(--qx-text-3);flex:0 0 auto}
.qx-so-bigform input[type=text]{flex:1;min-width:0;background:transparent;border:none;outline:none;
  font-size:16px;color:var(--qx-text);padding:10px 0}
.qx-so-bigform input::placeholder{color:var(--qx-text-3)}
.qx-so-bigform .qx-btn{flex:0 0 auto;padding:12px 30px}
.qx-so-scope{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.qx-so-scope-i{font-size:12.5px;color:var(--qx-text-2);padding:6px 15px;border-radius:16px;
  border:1px solid var(--qx-line-2);background:var(--qx-card);transition:all .22s}
.qx-so-scope-i:hover{border-color:var(--qx-primary);color:var(--qx-primary)}
.qx-so-scope-i.on{background:var(--qx-primary);border-color:var(--qx-primary);color:#04120C;font-weight:700}

/* ---------- 搜索词卡片 ---------- */
.qx-sogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.qx-socard{display:flex;align-items:center;gap:13px;background:var(--qx-card);
  border:1px solid var(--qx-line);border-radius:12px;padding:14px 16px;
  transition:all .28s var(--qx-ease);min-width:0}
.qx-socard:hover{border-color:var(--qx-primary);transform:translateY(-3px);box-shadow:var(--qx-shadow)}
.qx-soc-no{flex:0 0 auto;font-size:15px;font-weight:700;color:var(--qx-text-3);width:26px;text-align:center}
.qx-socard.top-1 .qx-soc-no{color:var(--qx-live)}
.qx-socard.top-2 .qx-soc-no{color:var(--qx-gold)}
.qx-socard.top-3 .qx-soc-no{color:var(--qx-primary)}
.qx-soc-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.qx-soc-bd b{font-size:14px;font-weight:600;transition:color .2s}
.qx-socard:hover .qx-soc-bd b{color:var(--qx-primary)}
.qx-soc-heat{height:4px;background:var(--qx-line);border-radius:4px;overflow:hidden}
.qx-soc-heat i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--qx-primary),var(--qx-blue));transition:width .8s var(--qx-ease)}
.qx-soc-bd s{text-decoration:none;font-size:10.5px;color:var(--qx-text-3)}
.qx-soc-go{flex:0 0 auto;color:var(--qx-text-3);opacity:0;transform:translateX(-4px);transition:all .25s}
.qx-socard:hover .qx-soc-go{opacity:1;transform:none;color:var(--qx-primary)}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .qx-sogrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .qx-askgrid{grid-template-columns:1fr}
  .qx-sogrid{grid-template-columns:1fr}
  .qx-so-bigform{padding:6px 6px 6px 14px;border-radius:13px}
  .qx-so-bigform input[type=text]{font-size:15px}
  .qx-so-bigform .qx-btn{padding:11px 20px}
  .qx-so-scope{gap:6px}
  .qx-so-scope-i{font-size:11.5px;padding:5px 12px}
  .qx-askcard{padding:15px 16px 13px}
  .qx-videopage .qx-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .qx-videopage .qx-grid-3{grid-template-columns:1fr}
  .qx-so-bigform{flex-wrap:wrap}
  .qx-so-bigform .qx-btn{width:100%}
}