/* Ridgeline — Team. rem-only. */

.rl-team {
  position: relative;
  background: var(--rl-white, #ffffff);
  padding-top:    var(--team-pt, 4.5rem);
  padding-bottom: var(--team-pb, 4.5rem);
  margin-top:     var(--team-mt, 0rem);
  margin-bottom:  var(--team-mb, 0rem);
  /* Full-bleed */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.rl-team__inner {
  width: 100%;
  max-width: 85rem;
  margin-inline: auto;
  padding-inline: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
}

.rl-team__heading {
  font-family: var(--rl-font-heading);
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rl-navy);
  text-align: center;
  max-width: 55.875rem;
  margin: 0rem;
}

/* ── Slider ── */
.rl-team__slider {
  position: relative;
  width: 100%;
}

.rl-team__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.25rem;
}

.rl-team__track::-webkit-scrollbar {
  display: none;
}

.rl-team__card {
  flex: 0 0 18.875rem;
  max-width: 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
  background: #f4f4f4;
  border-radius: 1rem;
  padding: 0rem 0rem 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Flush to the card's own left/right/top edges (no side padding), but still
   rounded on all 4 corners per Figma — the bottom corners need their own
   radius since the card's overflow:hidden only clips the top edge here. */
.rl-team__photo-wrap {
  width: 100%;
  aspect-ratio: 302 / 279;
  border-radius: 1rem;
  border: 0.09375rem solid #e8e8e8;
  overflow: hidden;
  margin-bottom: 1.625rem;
}

.rl-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.rl-team__name {
  font-family: var(--rl-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rl-navy-deep);
  padding-inline: 0.875rem;
  margin: 0rem 0rem 0.5rem;
}

.rl-team__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #8f8f8f;
  padding-inline: 0.875rem;
  margin: 0rem 0rem 1rem;
}

.rl-team__specialties {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.625rem;
  color: var(--rl-navy);
  padding-inline: 0.875rem;
  margin: 0rem;
}

.rl-team__specialties strong {
  font-weight: 700;
  color: #e8b33b; /* reverted to match footer/closing-cta accent gold pattern */
}

/* Figma-exported button art (circle + shadow + chevron baked in) — the
   72x72 viewBox includes the drop-shadow margin around a 48px (3rem) circle. */
.rl-team__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4.5rem;
  height: 4.5rem;
  padding: 0rem;
  border: none;
  background: none;
  cursor: pointer;
}

.rl-team__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

.rl-team__arrow--prev { left: -1.75rem; }
.rl-team__arrow--next { right: -1.75rem; }

/* Figma's "next" button is the same chevron art mirrored, not a distinct asset. */
.rl-team__arrow--next img { transform: scaleX(-1); }

/* ── CTA pill ── */
.rl-team__cta:hover { background: #000000; color: var(--rl-white, #ffffff); }

.rl-team__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #182e96;
  color: var(--rl-white, #ffffff);
  font-size: 1.125rem;
  font-weight: 500;
  padding: 0.75rem 1.75rem;
  border-radius: 2.6875rem;
  text-decoration: none;
}

.rl-team__cta-arrow {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ── Tablet (≤900px) ── */
@media (max-width: 56.25rem) {
  .rl-team__heading { font-size: 2.75rem; }
  .rl-team__card { flex-basis: 15rem; }
  .rl-team__arrow { display: none; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 48rem) {
  /* Name -> role, site-wide mobile card title value (was 0.5rem). */
  .rl-team__name { margin-bottom: 0.75rem; }

  .rl-team__cta {
    /* Full width on mobile, matching every other button on the site.
       `display: flex` because the base rule is inline-flex, and an
       inline-level box ignores width. */
    text-align: center;
    justify-content: center;
    display: flex;
    width: 100%;
  }
  .rl-team__cta-arrow { display: none; }
  .rl-team {
    padding-top:    var(--team-pt-m, var(--team-pt, 1.40625rem));
    padding-bottom: var(--team-pb-m, var(--team-pb, 1.40625rem));
    margin-top:     var(--team-mt-m, var(--team-mt, 0rem));
    margin-bottom:  var(--team-mb-m, var(--team-mb, 0rem));
  }
  .rl-team__inner { padding-inline: 1.25rem; gap: 1.5rem; }
  .rl-team__heading { font-size: 2.25rem; }
  .rl-team__card { flex-basis: 13.75rem; }
}

/* ── Small mobile (≤500px): one card fills the view instead of sitting
   flush-left with the next card peeking in — flex-basis: 13.75rem left
   a lot of empty track width, so the single visible card read as
   off-center. Full 100% (not calc(100% - Xrem)) so there's no lopsided
   peek of the next card on one side only. ── */
@media (max-width: 31.25rem) {
  .rl-team__card { flex-basis: 100%; }
}

/* ── Cards link to the clinician's profile ── */
.rl-team__card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.rl-team__card-link:hover .rl-team__name,
.rl-team__card-link:focus-visible .rl-team__name { color: #182e96; }

.rl-team__card-link:focus-visible { outline: 0.125rem solid #182e96; outline-offset: 0.125rem; border-radius: 1rem; }

/* ── One card on its own (couples page): centred, no arrows, no track ── */
.rl-team--single .rl-team__track {
  justify-content: center;
  overflow: visible;
  scroll-snap-type: none;
}

.rl-team--single .rl-team__card { flex-basis: 22rem; }
.rl-team--single .rl-team__arrow { display: none; }

@media (max-width: 48rem) {
  .rl-team--single .rl-team__card { flex-basis: 100%; max-width: 22rem; }
}

/* ── Static row (three or fewer): centred, wraps on tablet, no track ── */
.rl-team--static .rl-team__track {
  justify-content: center;
  flex-wrap: wrap;
  overflow: visible;
  scroll-snap-type: none;
  gap: 1.5rem;
}

.rl-team--static .rl-team__card { flex: 0 1 22rem; }

@media (max-width: 48rem) {
  .rl-team--static .rl-team__card { flex: 1 1 100%; max-width: 22rem; }
}