/* Explore page (WBS 4.10) — page-scoped stylesheet, same reasoning as
   auth.css: additions here only, no edits to the shared/frozen
   base.css / components.css contract. Tokens only, no raw hex/oklch. */

.explore-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 16px;
  align-items: end;
  margin-top: var(--space-5);
  padding: 20px;
  background: var(--bg-band);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.explore-filters__field { display: flex; flex-direction: column; gap: 6px; }
.explore-filters__field label { font-size: var(--text-small); font-weight: 600; color: var(--ink-2); }
.explore-filters__field input,
.explore-filters__field select {
  font-family: var(--font-sans); font-size: var(--text-body);
  padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.explore-filters__submit { height: 42px; }

.explore-count {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  margin-top: var(--space-4);
}

.explore-grid { margin-top: 14px; }
.explore-card { display: flex; flex-direction: column; gap: 6px; }
.explore-card .badge { align-self: flex-start; margin-bottom: 6px; }
.explore-card .card__title { margin-top: 2px; }
.explore-card .explore-budget--within { color: var(--good); font-size: var(--text-small); margin: 0; }
.explore-card .explore-budget--over { color: var(--bad); font-size: var(--text-small); margin: 0; }

.explore-pagination {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: var(--space-6);
}
.explore-pagination__status { font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-soft); }

@media (max-width: 900px) {
  .explore-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore-filters__submit { grid-column: span 2; }
}
@media (max-width: 560px) {
  .explore-filters { grid-template-columns: 1fr; }
  .explore-filters__submit { grid-column: auto; }
}