/* pc_collections_detail.css —— PC 专题详情页（/collections/{key}.html）
   独立文件：PHPCMS 模板引擎会把内联 <style> 里的花括号当成模板标签，
   所以这页的样式不能写在模板里。 */
.col-hero{display:flex;gap:0;align-items:stretch;background:var(--white);border-radius:var(--radius-2xl,16px);box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.75rem}
.col-hero-cover{flex:0 0 360px;min-height:210px;background:#1f2a44;position:relative}
.col-hero-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.col-hero-body{padding:1.5rem 1.7rem;display:flex;flex-direction:column;justify-content:center;min-width:0}
.col-hero-title{font-size:1.5rem;font-weight:800;color:var(--gray-800);letter-spacing:-0.01em;line-height:1.3}
.col-hero-desc{font-size:0.85rem;color:var(--gray-500);line-height:1.75;margin-top:0.65rem}
.col-hero-meta{display:flex;align-items:center;gap:1.4rem;margin-top:1.1rem;font-size:0.78rem;color:var(--gray-500)}
.col-hero-meta b{color:var(--brand-600);font-weight:800;font-size:1rem;margin-right:0.15rem}
.col-sec{margin-bottom:1.75rem}
.col-sec-title{font-size:1.05rem;font-weight:800;color:var(--gray-800);line-height:1.2;padding-left:0.7rem;border-left:3px solid var(--brand-500);margin-bottom:0.95rem}
.col-games{display:grid;grid-template-columns:repeat(3,1fr);gap:0.85rem}
.col-game{display:flex;align-items:center;gap:0.75rem;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:0.7rem 0.9rem;transition:all .2s}
.col-game:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.col-game img{width:46px;height:46px;flex:0 0 46px;border-radius:var(--radius);object-fit:cover;background:var(--gray-100)}
.col-game-main{min-width:0;flex:1}
.col-game-name{font-size:0.86rem;font-weight:700;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-game-sub{font-size:0.72rem;color:var(--gray-400);margin-top:0.24rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-game-sub b{color:var(--yellow-500);font-weight:700}
.col-game-btn{flex:0 0 auto;font-size:0.72rem;font-weight:700;color:var(--white);background:var(--brand-500);border:0;border-radius:var(--radius-sm);padding:0.36rem 0.74rem;cursor:pointer;transition:background .2s}
.col-game-btn:hover{background:var(--brand-600)}
.col-game-btn.done{background:var(--gray-200);color:var(--gray-400)}
.col-more{text-align:center;margin-top:1.1rem}
.col-more button{font-size:0.78rem;color:var(--gray-600);background:var(--white);border:1px solid var(--gray-200);border-radius:999px;padding:0.44rem 1.5rem;cursor:pointer;transition:all .2s}
.col-more button:hover{border-color:var(--brand-500);color:var(--brand-600)}
.col-more .done{color:var(--gray-400);cursor:default}
.col-empty{text-align:center;color:var(--gray-400);font-size:0.8rem;padding:1.6rem 0}
@media (max-width:960px){
  .col-hero{flex-direction:column}
  .col-hero-cover{flex:0 0 190px;min-height:190px}
  .col-hero-body{padding:0 1.2rem 1.35rem}
  .col-games{grid-template-columns:repeat(2,1fr)}
}