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

.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.6rem;
  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;
  line-height: 1.212;
  letter-spacing: var(--cs-tracking-tight);
  text-transform: capitalize;
  text-wrap: balance;
}

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

/* Standalone accent (separate field) gets breathing room; accents parsed
   from *asterisks* inside the main text flow inline with natural spaces. */
.cs-team-carousel__heading > .cs-team-carousel__heading-accent {
  margin-left: 0.5ch;
}

.cs-team-carousel__subtitle {
  margin: var(--cs-space-md) auto 0;
  max-width: 83rem;
  font-size: 1.6rem;
  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 ---------- */
.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;
  aspect-ratio: 305 / 436;
  isolation: isolate;
  background: var(--cs-blue-pale);
}

.cs-team-carousel__card-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

/* Glass panel at bottom */
.cs-team-carousel__card-panel {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 2;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.21);
  border-radius: 2.8rem;
  backdrop-filter: blur(12.3px);
  -webkit-backdrop-filter: blur(12.3px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  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: 400;
  font-size: 1.5rem; /* 15px */
  line-height: 1.212;
  color: var(--cs-white);
  text-decoration: none;
  text-transform: capitalize;
  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-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 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: 1px solid rgba(255, 255, 255, 0.21);
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.212;
  text-decoration: none;
  text-transform: capitalize;
  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(252, 127, 86, 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;
  margin-top: var(--cs-space-md);
  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.6rem; /* 16px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  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(252, 127, 86, 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);
  opacity: 0.6;
  text-transform: capitalize;
}

/* ---------- 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-xl);
  }
  /* 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;
    /* Taller than the desktop 305/436. The glass panel's height is set by its
       text, so on a short card it ate half the frame; a taller card gives that
       fixed panel a smaller share and shows more of the portrait. */
    aspect-ratio: 305 / 500;
  }
  .cs-team-carousel__controls {
    flex-direction: column-reverse;
    gap: var(--cs-space-md);
  }
}