/* cs-therapist-intro — "find the right therapist" section: portrait left + eyebrow/heading/body/features right.
   All rem values follow BB Theme's html { font-size: 10px } base — 1.6rem = 16px. */

.cs-therapist-intro {
  padding-block: var(--cs-space-2xl);
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
}

.cs-therapist-intro__inner {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--cs-space-2xl);
  align-items: center;
}

/* ---------- Left column ---------- */
.cs-therapist-intro__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cs-space-lg);
}

.cs-therapist-intro__portrait {
  overflow: hidden;
  width: 100%;
  max-width: 44rem; /* 440px */
  aspect-ratio: 1;
}

.cs-therapist-intro__portrait--circle {
  border-radius: 50%;
}

.cs-therapist-intro__portrait--rounded {
  border-radius: 5rem; /* 50px */
}

.cs-therapist-intro__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CTA (Orange or Blue pill) — doubled-up class specificity so the white
   label survives BB Global Styles' `.fl-builder-content a` color rules. */
.cs-therapist-intro .cs-therapist-intro__cta,
.cs-therapist-intro .cs-therapist-intro__cta:link,
.cs-therapist-intro .cs-therapist-intro__cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(33rem, 100%); /* 330px */
  padding: 1rem 3.2rem;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cs-white);
  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-therapist-intro .cs-therapist-intro__cta--orange { background: var(--cs-orange); }
.cs-therapist-intro .cs-therapist-intro__cta--orange.cs-therapist-intro__cta:hover,
.cs-therapist-intro .cs-therapist-intro__cta--orange.cs-therapist-intro__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;
}

.cs-therapist-intro .cs-therapist-intro__cta--blue { background: var(--cs-blue); }
.cs-therapist-intro .cs-therapist-intro__cta--blue.cs-therapist-intro__cta:hover,
.cs-therapist-intro .cs-therapist-intro__cta--blue.cs-therapist-intro__cta:focus-visible {
  background: var(--cs-blue-dark);
  color: var(--cs-white);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Rating */
.cs-therapist-intro__rating,
.cs-therapist-intro__rating:link,
.cs-therapist-intro__rating:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 2rem; /* 20px */
  line-height: 1.212;
  color: var(--cs-ink);
  text-decoration: none;
  transition: color 200ms ease;
}

.cs-therapist-intro__rating:hover,
.cs-therapist-intro__rating:focus-visible {
  color: var(--cs-blue-dark);
}

.cs-therapist-intro__rating-stars {
  color: inherit;
  letter-spacing: 0.05em;
}

/* ---------- Right column ---------- */
.cs-therapist-intro__right {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-md);
}

.cs-therapist-intro__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.212;
  color: var(--cs-blue);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.cs-therapist-intro__eyebrow-line {
  display: inline-block;
  width: 4.9rem;
  height: 2px;
  background: currentColor;
}

/* Doubled-up class specificity so the heading survives BB Global Styles'
   `.fl-builder-content h2` color & font rules. */
.cs-therapist-intro .cs-therapist-intro__heading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 3vw + 1rem, 4.8rem); /* 32px → 48px */
  font-style: normal;
  line-height: 1.212;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-ink);
  text-wrap: balance;
  text-transform: capitalize;
  max-width: 66rem; /* match the design's measure */
}

/* Decorative mark after the heading text — 37px tall next to 48px type in
   the design (~0.77em), so it scales with the fluid heading size. */
.cs-therapist-intro__heading-icon {
  display: inline-block;
  height: 0.77em;
  width: auto;
  vertical-align: baseline;
  margin-left: 0.25em;
}

.cs-therapist-intro__body {
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 1.5rem; /* 15px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #5274B1; /* mid blue matching Figma */
}

.cs-therapist-intro__body p {
  margin: 0 0 var(--cs-space-sm);
}
.cs-therapist-intro__body p:last-child {
  margin-bottom: 0;
}

/* Features list */
.cs-therapist-intro__features {
  list-style: none;
  margin: var(--cs-space-md) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-lg);
}

.cs-therapist-intro__feature {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--cs-space-md);
  align-items: start;
}

/* Per Figma, the list isn't a straight column — each row drifts left,
   arcing around the circular portrait. Desktop only; offsets from the
   design: +24px / -6px / -72px relative to the heading's left edge. */
@media (min-width: 1025px) {
  .cs-therapist-intro__feature:nth-child(1) { margin-left: 2.4rem; }
  .cs-therapist-intro__feature:nth-child(2) { margin-left: -0.6rem; }
  .cs-therapist-intro__feature:nth-child(3) { margin-left: -7.2rem; }
}

.cs-therapist-intro__feature-icon {
  width: 8rem; /* 80px */
  height: 8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  background: radial-gradient(
    circle at 50% 50%,
    var(--cs-blue-soft) 0%,
    var(--cs-blue-pale) 46.5%,
    var(--cs-off-white) 93%
  );
}

.cs-therapist-intro__feature-icon svg,
.cs-therapist-intro__feature-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.cs-therapist-intro__feature-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cs-therapist-intro .cs-therapist-intro__feature-title {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.6rem; /* 16px */
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}

.cs-therapist-intro__feature-body {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cs-therapist-intro__inner {
    gap: var(--cs-space-xl);
  }
}

@media (max-width: 900px) {
  .cs-therapist-intro__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-space-xl);
  }
  .cs-therapist-intro__portrait {
    max-width: 32rem;
  }
}

@media (max-width: 640px) {
  .cs-therapist-intro {
    padding-block: var(--cs-space-xl);
  }
  .cs-therapist-intro__cta {
    width: 100%;
    min-width: 0;
  }
  .cs-therapist-intro__feature {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--cs-space-sm);
  }
  .cs-therapist-intro__feature-icon {
    width: 6rem;
    height: 6rem;
  }
}


/* ---------- Compact band variant (Figma "A Simple Way to Begin") ----------
   Small circular portrait | eyebrow + heading + body | CTA on the right.
   `display: contents` dissolves the left column so the portrait and CTA
   become grid items of the band. */
.cs-therapist-intro--compact {
  padding-block: var(--cs-space-xl);
}

.cs-therapist-intro--compact .cs-therapist-intro__inner {
  grid-template-columns: 25rem minmax(0, 1fr) auto;
  gap: var(--cs-space-lg) var(--cs-space-xl);
  align-items: center;
}

.cs-therapist-intro--compact .cs-therapist-intro__left {
  display: contents;
}

.cs-therapist-intro--compact .cs-therapist-intro__portrait {
  max-width: 25rem;
  grid-column: 1;
  grid-row: 1;
}

.cs-therapist-intro--compact .cs-therapist-intro__right {
  grid-column: 2;
  grid-row: 1;
  gap: var(--cs-space-sm);
}

.cs-therapist-intro--compact .cs-therapist-intro__cta {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

.cs-therapist-intro--compact .cs-therapist-intro__eyebrow {
  color: var(--cs-blue-dark);
}

.cs-therapist-intro--compact .cs-therapist-intro__body {
  color: var(--cs-blue-dark);
}

/* Stacked until there is genuinely room for three columns.
   The row is `25rem | 1fr | auto`, but the portrait (250px) and the CTA
   (313px) are effectively fixed, so the text column is whatever is left:
   measured, it comes out at `viewport - 819`. Collapsing at 900px meant the
   text got 82px at 901px and 131px at 950px — narrow enough that the heading
   broke mid-word ("A Simp/le Way To Begi/n."). It doesn't clear ~280px until
   about 1100px, which is where the three-column layout actually starts to
   work, and matches the 1100/1101 boundary used elsewhere in the theme. */
@media (max-width: 1100px) {
  .cs-therapist-intro--compact .cs-therapist-intro__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .cs-therapist-intro--compact .cs-therapist-intro__portrait,
  .cs-therapist-intro--compact .cs-therapist-intro__right,
  .cs-therapist-intro--compact .cs-therapist-intro__cta {
    grid-column: 1;
    grid-row: auto;
  }
  .cs-therapist-intro--compact .cs-therapist-intro__right {
    align-items: center;
  }
}