/* ========================================
   Mobile app-style home page
   Loaded only by templates/website/index.html — scoped to that page so it
   cannot affect any other page. Visible only below 768px; on tablet/desktop
   the normal marketing homepage (hero, trust strip, service icon grid) shows
   instead, hidden here via .app-home { display: none }.
   The bottom tab bar itself (.app-tabbar) is shared - see mobile-app-shell.css.
   ======================================== */

.app-home {
  display: none;
}

@media (max-width: 767px) {
  /* The sections this screen replaces on mobile: the big hero banner, the
     four-badge trust strip, the plain services icon grid, and the
     "Therapists" section further down the page (id="therapists") - its
     cards are the same .therapist-card design reused above, so showing it
     again here would just repeat the same list. "How it works", "Why us",
     testimonials, blog and FAQ stay, further down. */
  .hero2,
  .trust-strip,
  .services,
  #therapists {
    display: none;
  }

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

/* ----------------------------------------
   Banner (image set in admin Settings > Mobile Banner)
   ---------------------------------------- */

.app-home__banner {
  display: block;
  margin-bottom: var(--space-5);
  border-radius: 16px;
}

.app-home__banner-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----------------------------------------
   Greeting + search
   ---------------------------------------- */

.app-home__greeting {
  margin-bottom: var(--space-5);
}

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

.app-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);
}

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

.app-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;
}

.app-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);
}

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

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

/* ----------------------------------------
   Service filter tiles (icon circle + label, horizontal scroll)
   Click filters the featured therapist list below in place - see
   static/js/mobile-home.js. Same colours/icons as the desktop
   .service-card grid, just a smaller "category strip" shape.
   ---------------------------------------- */

.app-home__filters {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding: var(--space-3) 0 var(--space-2);
  margin-bottom: var(--space-5);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.app-home__filter-chip {
  flex-shrink: 0;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--color-neutral-700);
}

.app-home__filter-chip-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

.app-home__filter-chip-icon img {
  width: 20px;
  height: 20px;
}

.app-home__filter-chip-icon svg {
  width: 18px;
  height: 18px;
}

.app-home__filter-chip-icon--all { background: var(--color-white); color: var(--color-neutral-600); }
.app-home__filter-chip-icon--pink { background-color: #D37DA8; }
.app-home__filter-chip-icon--yellow { background-color: #F2C94C; }
.app-home__filter-chip-icon--orange { background-color: #DB9965; }
.app-home__filter-chip-icon--green { background-color: #BDDACB; }
.app-home__filter-chip-icon--purple { background-color: #C0AEDB; }

.app-home__filter-chip-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.app-home__filter-chip.is-active .app-home__filter-chip-icon {
  border-color: var(--color-primary);
  transform: scale(1.06);
}

.app-home__filter-chip.is-active .app-home__filter-chip-label {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* ----------------------------------------
   Section labels
   ---------------------------------------- */

.app-home__section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.app-home__section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
}

.app-home__see-all-btn {
  display: block;
  width: fit-content;
  text-align: center;
  margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-xl);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: var(--color-neutral-900);
}

/* ----------------------------------------
   Featured therapist list
   Cards reuse the site's existing .therapist-card design verbatim (see
   components.css) - same big photo, overlay and Book Now button as the
   desktop "Therapists" section - just stacked in a single column here with
   data-services/data-search added for the filter tiles above to read.
   ---------------------------------------- */

.app-home__therapists {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.app-home__empty,
.app-home__no-results {
  text-align: center;
  padding: var(--space-6) 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);
}

.app-home__no-results a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ----------------------------------------
   "How It Works" - a list of cards on mobile only (icon + number on the
   left, title/description on the right, one step per card). Desktop
   (>= 768px, the 4-column layout with the connecting line) is untouched;
   these overrides only apply below 768px.
   ---------------------------------------- */

@media (max-width: 767px) {
  .how-it-works {
    text-align: left;
  }

  .how-it-works__eyebrow,
  .how-it-works__title {
    text-align: left;
  }

  .how-it-works__title {
    font-size: var(--font-size-2xl);
  }

  .how-it-works__steps {
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .how-it-works__step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
  }

  .how-it-works__icon-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .how-it-works__icon-wrap svg {
    width: 20px;
    height: 20px;
  }

  .how-it-works__step-body {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
  }

  .how-it-works__number {
    display: none;
  }

  .how-it-works__step-text {
    text-align: left;
  }

  .how-it-works__step-desc {
    max-width: none;
  }
}

/* ----------------------------------------
   "Why Us" - left-aligned, smaller headline/body text, pills left-aligned.
   Desktop untouched.
   ---------------------------------------- */

@media (max-width: 767px) {
  .why-us__grid {
    gap: var(--space-6);
  }

  .why-us__images {
    display: none;
  }

  .why-us__content {
    text-align: left;
  }

  .why-us__title {
    font-size: var(--font-size-2xl);
  }

  .why-us__subtitle {
    font-size: var(--font-size-xl);
  }

  .why-us__description {
    font-size: var(--font-size-base);
  }

  .why-us__features {
    justify-content: flex-start;
    margin-top: var(--space-6);
  }

  /* Positioned with fixed pixel offsets, so they drift into the text once
     it reflows at a smaller size - not worth fixing precisely at this size. */
  .why-us__vector {
    display: none;
  }
}

/* ----------------------------------------
   "What Our Clients Say" - left-aligned, smaller heading. Desktop untouched.
   ---------------------------------------- */

@media (max-width: 767px) {
  .reviews__title {
    text-align: left;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-6);
  }
}

/* ----------------------------------------
   FAQ - smaller heading (it was wrapping to two lines). Desktop untouched.
   ---------------------------------------- */

@media (max-width: 767px) {
  .faq__title {
    font-size: var(--font-size-2xl);
  }

  .faq__header {
    margin-bottom: var(--space-6);
  }
}