/* Services grid overrides for the full 34-service list.
   The donor Webflow grid was authored for 8 cards: it defines a single explicit
   row and turns into a horizontal scroller below 768px. Both break down at this
   length, so the rows are made uniform and the mobile layout is switched to a
   two-up vertical grid. Values reuse the grid's own tokens (1rem gap, 19rem row,
   --padding--mobile gutter). */

[data-services-grid].grid-4col {
  grid-auto-rows: minmax(19rem, 1fr);
}

@media screen and (max-width: 767px) {
  [data-services-grid].grid-4col {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    display: grid;
    overflow: visible;
  }

  [data-services-grid].grid-4col .service-item {
    width: auto;
    flex: initial;
    display: block;
  }

  /* 0.88rem is under the 16px floor where iOS Safari zooms on tap. */
  [data-services-grid].grid-4col .button-transparent-2 {
    min-height: 44px;
    font-size: 1rem;
  }
}

/* ---- Technology grid ("How we serve you better") -----------------------
   Same story as the services grid: the donor markup carried 3 cards and turns
   into a horizontal scroller below 768px. With 18 cards that becomes an
   18-card side-swipe, so mobile stacks instead. */

.overflow-scroll.grid .services-slide-item {
  height: 100%;
}

.tech-read-more {
  margin-top: auto;
  align-self: flex-start;
  padding: .6rem 1.5rem;
  min-height: 44px;
  font-size: 1rem;
}

@media screen and (max-width: 767px) {
  .overflow-scroll.grid {
    grid-template-columns: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 2rem;
    display: grid;
    overflow: visible;
  }

  .overflow-scroll.grid .services-slide-item {
    width: auto;
    flex: initial;
  }

  .overflow-scroll.grid .margin-bottom.margin-small {
    height: 16rem;
  }
}

/* ---- About our Team: stacked, no slider --------------------------------
   The Webflow slider (arrows + dots) was removed at the admin's request; the
   four team members now read straight down the page. Spacing reproduces the
   slider wrapper's own margin-top/padding-bottom so the section keeps its
   rhythm with its neighbours. */

.doctors-stack .doctor-image-wrapper {
  min-height: 24rem;
}

.doctors-stack {
  flex-direction: column;
  row-gap: 3rem;
  margin-top: 4rem;
  padding-bottom: 6rem;
  display: flex;
}

@media screen and (max-width: 991px) {
  .doctors-stack {
    row-gap: 2rem;
    margin-top: 3rem;
    padding-bottom: 5rem;
  }

  /* below 992px the donor CSS already sets an explicit portrait height */
  .doctors-stack .doctor-image-wrapper {
    min-height: 0;
  }
}

/* ---- Persistent bottom CTA: show the number, not just an icon ----------
   The bar is the shared Leap chat widget; it styles its call control as a
   fixed 44px circle from a <style> block it injects at runtime, so overriding
   the width needs !important. leap-cta-phone.js inserts the span. The number
   is hidden under 420px, where the bar has no room for it and the icon still
   dials. */

#leap-chat-tel {
  width: auto !important;
  gap: .5rem;
  border-radius: 999px !important;
  padding: 0 .875rem;
}

#leap-chat-tel .leap-cta-phone__num {
  margin-left: .5rem;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

@media screen and (max-width: 419px) {
  #leap-chat-tel {
    width: 44px !important;
    padding: 0;
  }

  #leap-chat-tel .leap-cta-phone__num {
    display: none;
  }
}