/* ------------------------------------------------
   HERO SECTION
------------------------------------------------ */
.hero {
  padding: 48px 18px 8px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(22px,3.4vw,42px);
  margin: 0 0 8px;
}
.hero .highlight {
  color: var(--brand);
}
.hero .sub {
  color: var(--muted);
  margin: 0 0 18px;
}

/* ------------------------------------------------
   SEARCH BAR
------------------------------------------------ */
.search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  width: min(760px, 92vw);
}

#searchInput {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 16px;
  padding: 10px 12px;
}

#clearSearch {
  border: 0;
  background: #182028;
  color: var(--muted);
  padding: 10px;
  border-radius: 999px;
  cursor: pointer;
}

#clearSearch:hover {
  color: var(--text);
  background: #1b2430;
}

/* ------------------------------------------------
   FILTERS
------------------------------------------------ */
.filters {
  margin: 14px auto 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.filters select {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}

/* Result count */
.result-count {
  margin-top: 10px;
  color: var(--muted);
}