/* ========================================
   Mobile app-style Therapists page (search + filter chips above the
   existing therapist list). Loaded only by templates/website/therapists.html
   — scoped to that page so it cannot affect any other page. Visible only
   below 768px; on tablet/desktop the normal page (hero search, the big
   filter panel) shows instead.
   ======================================== */

.th-home {
  display: none;
}

@media (max-width: 767px) {
  /* Replaced by .th-home on mobile: the hero (which has its own search box)
     and the desktop filter chip bar + panel. The therapist list itself
     (.therapists-grid) stays - .th-home filters it in place. The FAQ
     section further down stays too. */
  .page-hero,
  .filter-section,
  .active-filters,
  .empty-state {
    display: none;
  }

  /* .results-info has its own unconditional `display: flex` in this page's
     own inline <style> block, which - despite living in extra_css, loaded
     after this file - would otherwise win on source order at equal
     specificity. The extra body.has-app-tabbar ancestor beats it outright,
     regardless of load order. */
  body.has-app-tabbar .results-info {
    display: none;
  }

  .th-home {
    display: block;
    padding: var(--space-2) 0 var(--space-4);
    background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-white) 220px);
  }

  .therapists.section--sm {
    padding-top: 0;
  }
}

.th-home__greeting {
  margin-bottom: var(--space-4);
}

.th-home__eyebrow {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-600);
  margin-bottom: var(--space-1);
}

.th-home__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
  line-height: var(--line-height-tight);
}

.th-home__search {
  position: relative;
  display: block;
  margin-bottom: var(--space-4);
}

.th-home__search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--color-neutral-500);
  pointer-events: none;
}

.th-home__search-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-3) 0 calc(var(--space-3) * 2 + 17px);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-neutral-900);
  box-shadow: var(--shadow-sm);
}

.th-home__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.th-home__search-input::placeholder {
  color: var(--color-neutral-500);
}

.th-home__filters {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.th-home__filters::-webkit-scrollbar {
  display: none;
}

.th-home__filter-chip {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-neutral-700);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.th-home__filter-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.th-home__no-results {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  margin-top: var(--space-4);
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
  background: var(--color-white);
  border: 1px dashed var(--color-neutral-200);
  border-radius: var(--radius-xl);
}