/* ==========================================================================
   B9 GAME — playb9.pk
   pages/games.css — games.html only
   ========================================================================== */

/* Sticky filter bar so the categories stay reachable in a long catalogue */
.filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  margin-inline: calc(var(--gutter-wide) * -1);
  padding-inline: var(--gutter-wide);
  padding-top: var(--sp-4);
  background: linear-gradient(180deg, var(--color-bg-primary) 72%, rgba(251, 246, 238, 0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* On wide screens every tab fits — wrap instead of forcing a scroll row */
@media (min-width: 1200px) {
  .filter-bar {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: var(--sp-4);
  }
}

/* Catalogue cards sit a touch tighter than the featured grid on home */
.games-grid--wide { gap: var(--sp-3); }

@media (min-width: 768px) {
  .games-grid--wide { gap: var(--sp-4); }
}

/* Filter result count reads as an editorial numeral */
[data-filter-count] {
  font-family: var(--font-display);
  font-size: 1.15em;
  font-weight: var(--fw-bold);
  color: var(--color-gold-deep);
  letter-spacing: -0.02em;
}

/* Empty state */
.filter-empty.is-visible {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  font-size: var(--fs-md);
}

/* Category explainer cards get a slightly taller rhythm */
#categories .feature-card__text { font-size: var(--fs-sm); }

/* Give the long catalogue some breathing room before the next section */
#catalogue { padding-bottom: var(--section-y-lg); }

@media (max-width: 767px) {
  .filter-bar {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
}