/* HB Grid NextGen (NS v2.2.0) — mobile-first, colorful categories, linked badges */
:root {
  --hb-blue:#003366;
  --hb-red:#e10600;
  --hb-surface:#0b1220;
  --hb-card:#111827;
  --hb-text:#e6eefc;
  --hb-sub:#a6b0c3;
}
.hb-tv-grid-wrap { --hb-gap: 12px; --hb-cols: 2; margin: 8px 0 24px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.hb-tv-grid-header { position:sticky; top:0; z-index:2; padding:8px 0; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(11,18,32,.85), rgba(11,18,32,.65) 60%, transparent); }
.hb-title { margin:0 0 6px; font-weight:900; letter-spacing:.5px; font-size:1.4rem;
  background: linear-gradient(90deg,var(--hb-blue),var(--hb-red));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase;
}
.hb-controls { display:flex; flex-wrap:wrap; align-items:center; gap: 10px; }
.hb-search { flex:1 1 220px; padding:10px 12px; border:1px solid #1e293b; background:#0d1526; color:#fff; border-radius:12px; outline:none; }
.hb-search:focus { border-color:var(--hb-blue); box-shadow:0 0 0 3px rgba(0,51,102,.18); }
.hb-chips { display:flex; gap:8px; flex-wrap:nowrap; overflow:auto; padding-bottom:6px; scrollbar-width:thin; }
.hb-chip { white-space:nowrap; padding:9px 12px; border-radius:999px; background:#162036; color:#fff; border:1px solid #213151; text-decoration:none; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.hb-chip.is-active { outline:2px solid rgba(255,255,255,.22); }
.hb-chip:hover { filter:brightness(1.1); }
.hb-chip:nth-child(6n+1){ background:#1f2a44; }
.hb-chip:nth-child(6n+2){ background:#2a1f44; }
.hb-chip:nth-child(6n+3){ background:#1f4434; }
.hb-chip:nth-child(6n+4){ background:#44331f; }
.hb-chip:nth-child(6n+5){ background:#3d1f44; }
.hb-chip:nth-child(6n+6){ background:#1f3a44; }

.hb-grid { display:grid; grid-template-columns: repeat(var(--hb-cols), 1fr); gap: var(--hb-gap); }
.hb-card { background:var(--hb-card); border-radius:18px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.25); transition: transform .25s ease, box-shadow .25s ease; }
.hb-card:hover { transform: translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.35); }
.hb-card .hb-thumb { position:relative; display:block; width:100%; height:0; overflow:hidden; }
.hb-thumb .hb-thumb-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition: transform .35s ease; }
.hb-card:hover .hb-thumb-bg { transform: scale(1.06); }
.hb-card.hb-ratio-16x9 .hb-thumb { padding-top:56.25%; }
.hb-card.hb-ratio-4x3 .hb-thumb { padding-top:75%; }
.hb-card.hb-ratio-1x1 .hb-thumb { padding-top:100%; }

.hb-live-dot { position:absolute; top:10px; left:10px; width:10px; height:10px; border-radius:999px; background:var(--hb-red); box-shadow:0 0 0 6px rgba(225,6,0,.25); }

.hb-info { padding:12px; background:var(--hb-surface); color:var(--hb-text); }
.hb-card-title { margin:0 0 8px; font-size:15px; line-height:1.25; }
.hb-card-title a { color:#ffffff; text-decoration:none; }
.hb-card-title a:hover { text-decoration:underline; }
.hb-badges { display:flex; gap:6px; flex-wrap:wrap; }
.hb-badge { font-size:12px; padding:4px 8px; border-radius:999px; background:#1e293b; color:#fff; text-decoration:none; border:1px solid #334155; }
.hb-badge:hover { filter:brightness(1.1); }
.hb-meta { margin-top:6px; font-size:12px; color:var(--hb-sub); }

.hb-empty { padding:12px; color:#fff; }

/* Responsive columns */
@media (min-width: 480px) { .hb-tv-grid-wrap { --hb-cols: 2; } }
@media (min-width: 768px) { .hb-tv-grid-wrap { --hb-cols: 3; } }
@media (min-width: 1024px){ .hb-tv-grid-wrap { --hb-cols: 4; } }
@media (min-width: 1280px){ .hb-tv-grid-wrap { --hb-cols: 5; } }