/* ── Page header ──────────────────────────────── */
.browse-header { padding-bottom: 0; }

.browse-header__title {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-text);
  margin: 0.75rem 0 0.5rem;
}

.browse-header__lead { margin-bottom: 1.75rem; }
.browse-header__lead .link-accent { color: var(--color-accent); font-weight: 600; }

/* ── Search form ───────────────────────────────── */
.browse-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  max-width: 640px;
}
.browse-form__wrap {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
}
.browse-form__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
}

/* ── Filter pill rows ──────────────────────────── */
.browse-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.browse-filter--types {
  margin-top: 0.625rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ── Card media (photo background + stretched link) */
.listing-card { position: relative; }
.listing-card__media { position: relative; overflow: hidden; }
.listing-card__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.listing-card__media-top,
.listing-card__media-type { position: relative; z-index: 1; }
.listing-card__cta.stretched-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.card-heart,
.listing-card__body .btn { position: relative; z-index: 2; }

/* ── Provider card extras ──────────────────────── */
.listing-card__rating { color: var(--color-accent); font-weight: 600; }
.listing-card__rating-count {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.75rem;
}
.listing-card__bio {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0 0 1.125rem;
}

/* ── Cards section ─────────────────────────────── */
.browse-cards { padding-top: 2rem; }

/* ── "Showing X of Y" note ─────────────────────── */
.browse-more {
  text-align: center;
  margin-top: 2.5rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.browse-more a { color: var(--color-accent); font-weight: 600; margin-left: 0.25rem; }

/* ── Empty state ───────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 0; }
.empty-state__icon {
  width: 3rem; height: 3rem;
  border-radius: 0.875rem;
  border: 1px solid var(--color-border-accent);
  background: var(--color-accent-soft);
  display: inline-grid;
  place-items: center;
  margin-bottom: 1.25rem;
}
.empty-state__title {
  color: var(--color-text);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.375rem;
}
.empty-state__sub {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin: 0 0 1.5rem;
}

/* ── CTA section ───────────────────────────────── */
.browse-cta {
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}
.browse-cta__lead {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.browse-cta__actions {
  justify-content: center;
  margin-top: 1.5rem;
}