/* 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.8rem = 18px. */

/* Strip BB's horizontal row chrome. BB's row padding + module margin inset the
   module by 40px, while the full-bleed bands escape to 100vw and re-centre
   their own 1320px container — so without this the portrait and heading sit
   40px right of every band below them. Vertical padding is left alone; this
   module sets its own via padding-block. */
.fl-row-content-wrap:has(.cs-therapist-intro) {
  padding-inline: 0;
}
.fl-module-content:has(.cs-therapist-intro) {
  margin-inline: 0;
}

.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.8rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-decoration: none;
  /* When the label wraps (narrow phones), center the lines and balance the
     break — a left-aligned wrap leaves a lopsided gap on the right. */
  text-align: center;
  text-wrap: balance;
  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(180, 79, 45, 0.6);
  transform: scale(1.02);
  text-decoration: none;
}

/* --cs-blue-card, not --cs-blue: white label copy only reaches 3.90:1 on
   --cs-blue, under the 4.5:1 a 16px button label needs. */
.cs-therapist-intro .cs-therapist-intro__cta--blue { background: var(--cs-blue-card); }
.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);
}

/* Ghost (outline) secondary CTA — same pill geometry as the primary; the
   2px border is absorbed into the padding so both buttons match height.
   Brand-orange text on the off-white hero passes AA (4.54:1, see tokens). */
.cs-therapist-intro .cs-therapist-intro__cta--ghost,
.cs-therapist-intro .cs-therapist-intro__cta--ghost:link,
.cs-therapist-intro .cs-therapist-intro__cta--ghost:visited {
  background: transparent;
  border: 2px solid var(--cs-orange);
  padding: calc(1rem - 2px) calc(3.2rem - 2px);
  color: var(--cs-orange);
}
.cs-therapist-intro .cs-therapist-intro__cta--ghost.cs-therapist-intro__cta:hover,
.cs-therapist-intro .cs-therapist-intro__cta--ghost.cs-therapist-intro__cta:focus-visible {
  background: var(--cs-orange);
  color: var(--cs-white);
  text-decoration: none;
  transform: scale(1.02);
}

/* Primary + ghost pair (bio hero). The wrapper takes over the single CTA's
   top margin / left alignment; inside it the buttons themselves reset. */
.cs-therapist-intro--bio .cs-therapist-intro__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 0.8rem;
  align-self: flex-start;
}
.cs-therapist-intro--bio .cs-therapist-intro__ctas .cs-therapist-intro__cta {
  margin-top: 0;
  align-self: auto;
  /* The solo CTA's 330px floor would force the pair to wrap in the ~680px
     text column — let each button size to its label. */
  min-width: 0;
}

/* 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.8rem;
  line-height: 1.212;
  color: var(--cs-blue);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* The eyebrow label is uppercase, which needs positive tracking to stay
   readable — the parent's -0.02em is display-heading tracking and tightens it
   the wrong way. Set on the text span rather than the parent so the rule
   applies to every variant (compact, bio) without being restated, and so it
   can't affect the rule's other child, the leading __eyebrow-line. */
.cs-therapist-intro .cs-therapist-intro__eyebrow-text {
  letter-spacing: 0.2rem; /* 2px on BB Theme's 10px rem base */
}

.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;
  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.8rem; /* 18px — body-copy floor */
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--cs-blue-body); /* was #5274B1 (Figma) — 4.14:1, under AA */
}

.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.8rem; /* 18px */
  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.8rem;
  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;
  }

  /* Stacked order: portrait, text block, THEN the CTA (client call
     2026-09-15 — the button belongs below the whole block on mobile, not
     wedged between photo and text). display: contents dissolves the left
     column so its children join the single-column grid, where order can
     move the CTA (and rating, when set) past the text column. The bio
     variant keeps its own left-column handling below. */
  .cs-therapist-intro:not(.cs-therapist-intro--bio) .cs-therapist-intro__left {
    display: contents;
  }
  .cs-therapist-intro:not(.cs-therapist-intro--bio) .cs-therapist-intro__portrait {
    justify-self: center;
  }
  .cs-therapist-intro:not(.cs-therapist-intro--bio) .cs-therapist-intro__cta {
    order: 10;
    justify-self: center;
  }
  .cs-therapist-intro:not(.cs-therapist-intro--bio) .cs-therapist-intro__rating {
    order: 11;
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .cs-therapist-intro {
    padding-block: var(--cs-space-section-sm);
  }
  .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;
  }
}


/* ---------- Bio page hero variant (therapist single-page template) ----------
   Rounded-square portrait left, text right, credential bullets in place of the
   icon cards, and the CTA at the foot of the text column. The 1fr/1.4fr split
   gives the two-paragraph bio more measure than the `full` variant's 1.2fr. */
.cs-therapist-intro--bio {
  padding-block: var(--cs-space-lg) var(--cs-space-xl);
}

.cs-therapist-intro--bio .cs-therapist-intro__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--cs-space-2xl);
  align-items: center;
}

/* Portrait sits flush to the container edge, not centred in its column. */
.cs-therapist-intro--bio .cs-therapist-intro__left {
  align-items: flex-start;
}

/* The `full` variant's arcing offsets would pull the bullets out of alignment. */
.cs-therapist-intro--bio .cs-therapist-intro__feature {
  margin-left: 0;
}

.cs-therapist-intro--bio .cs-therapist-intro__heading {
  text-transform: none; /* names and credential suffixes ("LCSW") set their own case */
  max-width: 70rem;
}

.cs-therapist-intro--bio .cs-therapist-intro__body {
  max-width: 70rem;
}

/* Credential bullets — a wrapping row of orange-dot items. */
.cs-therapist-intro__features--credentials {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.2rem var(--cs-space-lg);
  margin-top: 0.8rem;
}

.cs-therapist-intro__credential {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.8rem; /* 18px — body-copy floor */
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--cs-blue-dark);
}

.cs-therapist-intro__credential-dot {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--cs-radius-pill);
  background: var(--cs-orange);
}

.cs-therapist-intro--bio .cs-therapist-intro__cta {
  margin-top: 0.8rem;
  align-self: flex-start;
}

@media (max-width: 900px) {
  /* Portrait first, then the text — matches the handoff's mobile order.
     The single-column rule has to be repeated at this specificity: the
     variant's own `--bio .. __inner` selector outranks the base module's
     stacking rule, so without it the hero stays two-up on tablet. */
  .cs-therapist-intro--bio .cs-therapist-intro__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-space-lg);
  }
  .cs-therapist-intro--bio .cs-therapist-intro__left {
    align-items: center;
  }
  .cs-therapist-intro--bio .cs-therapist-intro__heading,
  .cs-therapist-intro--bio .cs-therapist-intro__body {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .cs-therapist-intro--bio {
    padding-block: var(--cs-space-md) var(--cs-space-lg);
  }
  .cs-therapist-intro--bio .cs-therapist-intro__cta {
    align-self: stretch;
  }
  /* Primary + ghost stack full-width instead of squeezing side by side. */
  .cs-therapist-intro--bio .cs-therapist-intro__ctas {
    align-self: stretch;
    flex-direction: column;
  }
}

/* ---------- 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;
  }
}

/* The --compact rule above sits later in the file than the 640px block, so at
   equal specificity it re-won on phones and kept 64px edges — re-assert the
   52px mobile rhythm (client 2026-09-15). */
@media (max-width: 640px) {
  .cs-therapist-intro--compact {
    padding-block: var(--cs-space-section-sm);
  }
}