/* ═══════════════════════════════════════════════════════════════════════════
   S3 Gfx — Horizontal Filter Scroll Bar
   ─────────────────────────────────────────────────────────────────────────
   Sidebar styles are managed in custom.css — no sidebar overrides here
═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   2. HORIZONTAL SCROLL FILTER BAR
══════════════════════════════════════════════════════ */

/* Container: scroll on small screens, wrap on large */
.filter-scroll-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 8px;
  /* fade edges on mobile */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 20px,
    black calc(100% - 20px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 20px,
    black calc(100% - 20px),
    transparent
  );
}
.filter-scroll-wrap::-webkit-scrollbar { display: none; }

/* On large screens: wrap and center */
@media (min-width: 1024px) {
  .filter-scroll-wrap {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 4px 0 6px;
    scroll-snap-type: none;
  }
}

/* ── Filter Button ──────────────────────────────────── */
.filter-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  scroll-snap-align: start;
  flex-shrink: 0;

  padding: 9px 18px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  text-transform: none;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    transform .18s ease,
    box-shadow .22s ease;
  position: relative;
  overflow: hidden;
  outline: none;
}

.filter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(6,182,212,.08));
  opacity: 0;
  transition: opacity .22s;
}
.filter-btn:hover::before { opacity: 1; }

.filter-btn:hover {
  border-color: rgba(139,92,246,.45);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(139,92,246,.18);
}

.filter-btn:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 3px;
}

/* Active state */
.filter-btn.active {
  background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(139,92,246,.45), 0 4px 16px rgba(0,0,0,.3) !important;
  transform: translateY(-1px);
}
.filter-btn.active::before { display: none; }

/* "All" button slightly larger pill */
.filter-btn[data-category="all"] {
  padding: 9px 22px;
}

/* Icon inside button */
.filter-btn i {
  font-size: .78rem;
  opacity: .85;
}
.filter-btn.active i { opacity: 1; }

/* Count badge on button */
.filter-btn .filter-count {
  font-size: .65rem;
  font-weight: 700;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.4;
}
.filter-btn.active .filter-count {
  background: rgba(255,255,255,.3);
}

/* Sticky filter bar backdrop */
.filter-bar-sticky {
  position: sticky;
  top: var(--navbar-height); /* below navbar */
  z-index: 30;
  background: rgba(10,10,15,.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 10px 0;
}