/* ============================================================
   CATEGORY LANDING PAGE — shared by any group category
   (e.g. /design/, /games/). Lists subcategories as cards.
   ============================================================ */

.category-hero{
  position:relative; padding:40px 0 20px;
}
.category-hero-inner{
  display:flex; align-items:center; gap:20px;
}
.category-hero-icon{
  width:64px; height:64px; border-radius:18px; flex-shrink:0;
  background:var(--card); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:30px;
}
.category-hero-text h1{font-size:28px; font-weight:900; margin-bottom:6px;}
.category-hero-text p{color:var(--gray); font-size:14px;}

.subcat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.subcat-card{
  background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 24px; display:flex; flex-direction:column; gap:16px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
  position:relative;
}
.subcat-card.clickable{cursor:pointer;}
.subcat-card.clickable:hover{border-color:rgba(0,229,255,0.35); transform:translateY(-4px);}
.subcat-card.soon{opacity:0.6;}
.subcat-ic{width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px;}
.subcat-name{font-weight:800; font-size:16px;}
.subcat-status{font-size:12px; color:var(--cyan); font-weight:800; display:flex; align-items:center; gap:6px;}
.soon-badge{
  position:absolute; top:16px; left:16px;
  background:rgba(255,255,255,0.08); color:var(--gray); font-weight:800; font-size:11px;
  padding:4px 10px; border-radius:999px;
}

@media(max-width:900px){
  .subcat-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .subcat-grid{grid-template-columns:1fr;}
  .category-hero-inner{flex-direction:column; text-align:center;}
}