/* cs-team-carousel — horizontally scrolling therapist cards using CSS scroll-snap.
   All rem values follow BB Theme's html { font-size: 10px } base — 1.8rem = 18px. */

.cs-team-carousel {
  position: relative;
  padding-block: var(--cs-space-2xl);
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
  /* No overflow: hidden — it would trim the decoration glows, which
     intentionally bleed past the section (the track clips itself). */
}

/* Background image (subtle) — a real element rather than ::before, so the
   pseudo-elements stay free for the cs-decor-* glows and lines. */
.cs-team-carousel__bg {
  position: absolute;
  inset: 0;
  background-image: var(--cs-team-carousel-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

.cs-team-carousel__inner {
  position: relative;
  max-width: var(--cs-container);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
  z-index: 1;
}

/* ---------- Header ---------- */
.cs-team-carousel__header {
  text-align: center;
  margin-bottom: var(--cs-space-xl);
}

.cs-team-carousel__eyebrow {
  margin: 0 0 var(--cs-space-sm);
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.212;
  color: var(--cs-blue);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Doubled-up class specificity so the heading survives BB Global Styles'
   `.fl-builder-content h2 / h2 span` color & font rules. */
.cs-team-carousel .cs-team-carousel__heading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 4vw + 1rem, 6.4rem); /* 32px → 64px */
  font-style: normal;
  color: var(--cs-ink); /* don't inherit the Customizer's #683326 global h2 color */
  line-height: 1.212;
  letter-spacing: var(--cs-tracking-tight);
  text-wrap: balance;
}

.cs-team-carousel .cs-team-carousel__heading-main {
  color: var(--cs-ink);
}

.cs-team-carousel__subtitle {
  margin: var(--cs-space-md) auto 0;
  max-width: 83rem;
  font-size: 1.8rem;
  line-height: 1.45;
  color: var(--cs-ink-soft, var(--cs-ink));
}

/* Smaller heading for long titles (48px cap per couples-therapy Figma) */
.cs-team-carousel--heading-md .cs-team-carousel__heading {
  font-size: clamp(3rem, 3vw + 1rem, 4.8rem);
}

/* Accent color variants */
.cs-team-carousel--accent-blue   .cs-team-carousel__heading-accent { color: var(--cs-blue); }
.cs-team-carousel--accent-orange .cs-team-carousel__heading-accent { color: var(--cs-orange); }
.cs-team-carousel--accent-dark   .cs-team-carousel__heading-accent { color: var(--cs-ink); }

/* ---------- Track (scroll-snap container) ---------- */
.cs-team-carousel__track-wrap {
  position: relative;
}

.cs-team-carousel__track {
  display: flex;
  gap: var(--cs-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--cs-space-lg); /* room for dots below */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cs-team-carousel__track::-webkit-scrollbar {
  display: none;
}

/* ---------- Card ----------
   Photo on top, name/role/CTA in a solid panel BELOW it — the old frosted
   glass overlay covered the portraits unevenly (client, change request
   2026-09-13 T5.1). The photo box carries a fixed aspect so every portrait
   crops identically; flex stretch in the track keeps cards equal height,
   with the panel absorbing any slack. */
.cs-team-carousel__card {
  position: relative;
  flex: 0 0 calc((100% - (var(--cs-space-md) * 2)) / 3); /* 3-up desktop */
  scroll-snap-align: start;
  border-radius: 4.9rem; /* 49px */
  overflow: hidden;
  isolation: isolate;
  background: var(--cs-blue-pale);
  display: flex;
  flex-direction: column;
}

.cs-team-carousel__card-photo {
  width: 100%;
  aspect-ratio: 4 / 5; /* uniform crop across mixed portrait/landscape originals */
  /* The img is taken out of flow: some instances serve old 305×436 hard
     crops whose intrinsic ratio would inflate the flex item's min-height
     past the 4/5 box (photos then crop unevenly again). min-height: 0
     backs that up at the flex level. */
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.cs-team-carousel__card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text panel below the photo — pale card fill, no glass/backdrop-filter. */
.cs-team-carousel__card-panel {
  flex: 1;
  padding: 2rem 2rem 2.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1.2rem;
}

/* Doubled-up class specificity (+ :link/:visited) so the white name link
   survives BB Global Styles' `.fl-builder-content a` color rules. */
.cs-team-carousel .cs-team-carousel__card-name,
.cs-team-carousel a.cs-team-carousel__card-name:link,
.cs-team-carousel a.cs-team-carousel__card-name:visited {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700; /* was 400 white-on-glass; on the pale panel the name leads */
  font-size: 1.8rem; /* 18px — body-copy floor */
  line-height: 1.212;
  color: var(--cs-ink);
  text-decoration: none;
  text-wrap: balance;
  transition: opacity 200ms ease;
}

.cs-team-carousel a.cs-team-carousel__card-name:hover,
.cs-team-carousel a.cs-team-carousel__card-name:focus-visible {
  color: var(--cs-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Position/credentials line under the name. Doubled class so BB Global
   paragraph rules lose; deep blue (5.78:1 on the pale panel — the softer
   --cs-ink-soft only reaches 4.25 there), body font to step down from the
   display-font name. Negative margin swallows most of the panel's flex gap
   so name + role read as one unit. */
.cs-team-carousel .cs-team-carousel__card-role {
  margin: -0.9rem 0 0;
  font-family: var(--cs-font-body);
  font-weight: 400;
  font-size: 1.8rem; /* 18px — type floor */
  line-height: 1.3;
  color: var(--cs-blue-dark);
  text-wrap: balance;
}

/* Card CTA — orange pill */
.cs-team-carousel__card .cs-team-carousel__card-cta,
.cs-team-carousel__card .cs-team-carousel__card-cta:link,
.cs-team-carousel__card .cs-team-carousel__card-cta:visited {
  display: inline-block;
  background: var(--cs-orange);
  border: 0; /* glass hairline dropped with the overlay design */
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.212;
  text-decoration: none;
  text-align: center;
  padding: 1.3rem 2rem; /* 46px tall per Figma */
  border-radius: 2.8rem;
  transition: background 250ms ease-in-out, color 250ms ease-in-out, box-shadow 250ms ease-in-out, filter 250ms ease-in-out, transform 250ms ease-in-out;
}

.cs-team-carousel__card .cs-team-carousel__card-cta.cs-team-carousel__card-cta:hover,
.cs-team-carousel__card .cs-team-carousel__card-cta.cs-team-carousel__card-cta:focus-visible {
  background: var(--cs-orange);
  color: var(--cs-white);
  /* Smooth highlight: slight brightness lift, soft orange glow, gentle scale */
  filter: brightness(1.08);
  box-shadow: 0 0.8rem 2rem -0.8rem rgba(180, 79, 45, 0.6);
  transform: scale(1.02);
  text-decoration: none;
}

/* ---------- Controls (dots + arrows) ---------- */
.cs-team-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* md + 24px: the dot row wants clear air under the cards (client, change
     request 2026-09-13 T5.3). No token at 48 — keep the sum explicit. */
  margin-top: calc(var(--cs-space-md) + 2.4rem);
  gap: var(--cs-space-md);
}

/* All slides fit — nothing to scroll, controls are inert (class set by
   cs-carousel.js). */
.cs-team-carousel__track-wrap.cs-is-static .cs-team-carousel__controls {
  display: none;
}

/* Dots */
.cs-team-carousel__dots {
  display: flex;
  align-items: center;
  /* 1.6rem, not 0.8rem: the dots are 10px, so this puts 26px between their
     centres and lets the 24px hit areas below sit side by side without
     overlapping — an overlap would hand a dot's edge to its neighbour. */
  gap: 1.6rem;
}

.cs-team-carousel__dot {
  position: relative;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cs-blue-pale);
  cursor: pointer;
  transition: width 200ms ease, background 200ms ease;
}

/* A 10px dot is far below the 24px WCAG 2.5.8 minimum and is genuinely hard to
   hit on a phone. This grows the touch target to 24px without touching the
   dot's appearance. */
.cs-team-carousel__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
}

.cs-team-carousel__dot.is-active {
  width: 3rem;
  background: var(--cs-blue-soft);
}

.cs-team-carousel__dot:hover,
.cs-team-carousel__dot:focus-visible {
  background: var(--cs-blue);
  outline: none;
}

/* Arrows */
.cs-team-carousel__arrows {
  display: flex;
  gap: 0.8rem;
}

.cs-team-carousel__arrow {
  /* 44px touch target — the icon inside keeps its size, only the hit area and
     the hover circle grow. */
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cs-blue-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease;
}

.cs-team-carousel__arrow:hover,
.cs-team-carousel__arrow:focus-visible {
  background: var(--cs-blue-pale);
  color: var(--cs-blue-dark);
  outline: none;
}

.cs-team-carousel__arrow[aria-disabled="true"],
.cs-team-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.cs-team-carousel__arrow svg {
  width: 2.4rem;
  height: 2.4rem;
}

/* ---------- Footer CTA + caption ---------- */
.cs-team-carousel__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cs-space-md);
  margin-top: var(--cs-space-lg);
  text-align: center;
}

.cs-team-carousel .cs-team-carousel__footer-cta,
.cs-team-carousel .cs-team-carousel__footer-cta:link,
.cs-team-carousel .cs-team-carousel__footer-cta:visited {
  display: inline-block;
  background: var(--cs-orange);
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.8rem; /* 18px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-align: center;
  min-width: min(33rem, 100%); /* 330px per Figma */
  padding: 1rem 3.2rem;
  border-radius: var(--cs-radius-pill);
  transition: background 250ms ease-in-out, color 250ms ease-in-out, box-shadow 250ms ease-in-out, filter 250ms ease-in-out, transform 250ms ease-in-out;
}

.cs-team-carousel .cs-team-carousel__footer-cta.cs-team-carousel__footer-cta:hover,
.cs-team-carousel .cs-team-carousel__footer-cta.cs-team-carousel__footer-cta:focus-visible {
  background: var(--cs-orange);
  color: var(--cs-white);
  filter: brightness(1.08);
  box-shadow: 0 0.8rem 2rem -0.8rem rgba(180, 79, 45, 0.6);
  transform: scale(1.02);
  text-decoration: none;
}

.cs-team-carousel__footer-caption {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 2rem; /* 20px */
  line-height: 1.212;
  color: var(--cs-ink-soft); /* was --cs-ink at opacity .6 = 4.18:1 */
  text-transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* 2-up */
  .cs-team-carousel__card {
    flex: 0 0 calc((100% - var(--cs-space-md)) / 2);
  }
}

@media (max-width: 640px) {
  .cs-team-carousel {
    padding-block: var(--cs-space-section-sm);
  }
  /* 1-up. The track carried `padding-inline: calc((100% - min(30rem,85%))/2)`
     while the card asked for `min(30rem, 85%)` — but the card's percentage
     resolves against the track's *content* box, which that padding had already
     shrunk. The two fed each other and the card settled at 218px instead of the
     intended 300px. Dropping the padding makes the content box equal the wrap,
     so the card's percentage is measured against the width you actually see. */
  .cs-team-carousel__track {
    padding-inline: 0;
  }
  .cs-team-carousel__card {
    flex: 0 0 88%; /* leaves the next card peeking as a swipe affordance */
    scroll-snap-align: start;
    /* No aspect override needed since the panel moved below the photo —
       the 4/5 photo box + content-sized panel work at every width. */
  }
  .cs-team-carousel__controls {
    flex-direction: column-reverse;
    gap: var(--cs-space-md);
  }
}