/* Styles for the /search page (ported from cga-search design) */

:root {
  --color-cg-bg: #0a0a0a;
  --color-cg-surface: #111113;
  --color-cg-surface2: #16161a;
  --color-cg-card: #141417;
  --color-cg-card-hover: #1a1a1f;
  --color-cg-muted: #1f1f23;
  --color-cg-hover: #26262c;
  --color-cg-border: #26262c;
  --color-cg-border-soft: #1e1e22;
  --color-cg-gray700: #404040;
  --color-cg-gray500: #737373;
  --color-cg-gray400: #a3a3a3;
  --color-cg-gray300: #d1d1d1;
  --color-cg-accent: #f26522;
  --color-cg-accent-dark: #d44f12;
  --color-cg-accent-light: #f6884e;
  --color-cg-success: #22c55e;
}

.cg-filterbar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.no-sb::-webkit-scrollbar {
  display: none;
}
.no-sb {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* skeleton shimmer */
.cg-sk {
  background: linear-gradient(100deg, #161619 30%, #1f1f24 50%, #161619 70%);
  background-size: 200% 100%;
  animation: cgShimmer 1.4s infinite linear;
}
@keyframes cgShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@keyframes cgPop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.cg-pop {
  animation: cgPop 160ms ease;
}

/* artwork grid */
.cg-artwork-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1400px) {
  .cg-artwork-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1100px) {
  .cg-artwork-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .cg-artwork-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.cg-artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}
.cg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
@media (max-width: 520px) {
  .cg-card-grid {
    grid-template-columns: 1fr;
  }
}