/* cs-promo-banner — rounded promo card, image left, content stack right.
   All rem values follow BB Theme's html { font-size: 10px } base — 1.6rem = 16px. */

.cs-promo-banner {
  /* No bottom padding — the next section's decoration (crossing lines)
     starts exactly where the banner card ends, per the composite design. */
  padding: var(--cs-space-lg) var(--cs-gutter) 0;
  font-family: var(--cs-font-body);
}

/* Strip BB's default row bottom spacing after the banner so the following
   section (steps) butts up against the card edge. */
.fl-row-content-wrap:has(.cs-promo-banner) {
  padding-bottom: 0;
}
.fl-module-content:has(.cs-promo-banner) {
  margin-bottom: 0;
}

.cs-promo-banner__card {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding: 4rem; /* 40px */
  border-radius: 3.5rem; /* 35px per Figma */
  display: grid;
  grid-template-columns: minmax(0, 504fr) minmax(0, 640fr);
  column-gap: 4rem;
  row-gap: var(--cs-space-md);
  align-items: center;
  color: var(--cs-white);
}

/* Image */
.cs-promo-banner__media {
  align-self: stretch;
  border-radius: 2.8rem;
  overflow: hidden;
}

.cs-promo-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 32rem; /* 320px */
  max-height: 48rem; /* 480px */
  object-fit: cover;
}

/* Video media — 49px radius per Figma, self-centered instead of stretched */
.cs-promo-banner__media--video {
  align-self: center;
  border-radius: 4.9rem;
}

.cs-promo-banner__media--video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Content */
.cs-promo-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-md);
}

/* Eyebrow (with leading line) */
.cs-promo-banner__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 1.6rem; /* 16px */
  line-height: 1.212;
  color: #EFF3FD;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cs-promo-banner__eyebrow-line {
  display: inline-block;
  width: 5.6rem;
  height: 2px;
  background: currentColor;
}

/* Heading — doubled-up class specificity so it survives BB Global Styles'
   `.fl-builder-content h2` color & font rules. */
.cs-promo-banner .cs-promo-banner__heading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: clamp(3rem, 3vw + 1rem, 4.8rem); /* 30px → 48px */
  font-style: normal;
  line-height: 1.212;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-white);
  text-transform: capitalize;
  text-wrap: balance;
}

/* Subheading */
.cs-promo-banner__subheading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 1vw + 1rem, 2.4rem); /* 18px → 24px */
  line-height: 1.212;
  color: #EFF3FD;
  text-transform: capitalize;
}

/* Body — regular paragraph, title-case per Figma */
.cs-promo-banner__body {
  font-family: var(--cs-font-display);
  font-weight: 400;
  font-size: 1.6rem; /* 16px */
  line-height: 1.212;
  color: var(--cs-white);
  text-transform: capitalize;
  max-width: 53.2rem; /* match the design's measure */
}

/* Dark body scheme — for light banner backgrounds (e.g. #93B4DD) */
.cs-promo-banner--text-dark .cs-promo-banner__body {
  color: #1a1a1a;
}

/* Quote body scheme — 20px, sentence case (retreat "THE RETREAT" band) */
.cs-promo-banner--body-quote .cs-promo-banner__body {
  font-size: 2rem; /* 20px */
  font-weight: 500;
  line-height: 1.5;
  text-transform: none;
  max-width: 87rem;
}

.cs-promo-banner__body p {
  margin: 0 0 var(--cs-space-sm);
}

.cs-promo-banner__body p:last-child {
  margin-bottom: 0;
}

/* Body lists — airy bullets for banner list content */
.cs-promo-banner__body ul {
  margin: 0;
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Body links — white and underlined, surviving BB Global Styles */
.cs-promo-banner .cs-promo-banner__body a,
.cs-promo-banner .cs-promo-banner__body a:link,
.cs-promo-banner .cs-promo-banner__body a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cs-promo-banner .cs-promo-banner__body a:hover,
.cs-promo-banner .cs-promo-banner__body a:focus-visible {
  color: inherit;
  opacity: 0.85;
}

/* Footer row — spans both columns beneath image + content: decorative
   line + starburst on the left, CTA button on the right (per Figma). */
.cs-promo-banner__footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--cs-space-md);
}

.cs-promo-banner__flourish {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  /* Bleed the line out to the card's left edge, past the padding. */
  margin-left: -4rem;
}

.cs-promo-banner__flourish::before {
  content: '';
  flex: 1;
  height: 3px;
  background: #F2F1F0;
  /* The starburst SVG's own line stub sits slightly below its vertical
     center — nudge ours to meet it seamlessly. */
  transform: translateY(0.46rem);
}

.cs-promo-banner__flourish img {
  display: block;
  height: 8.7rem; /* 87px per Figma */
  width: auto;
  margin-left: -2px;
}

/* ---------- "Media right" variant (Figma video-section) ----------
   Content left, media right, footer mirrored: button on the left,
   flourish flipped with the starburst inward and the line bleeding
   out to the card's right edge. */
/* Confined to the range where there are actually two columns to flip. This is a
   modifier selector (0,2,0), so left unscoped it outranks the single-column
   collapse in the max-width: 768px block below (0,1,0) — media queries add no
   specificity. That pinned the banner to two columns on phones, squeezing the
   heading into a 120px column where `overflow-wrap: break-word` then snapped
   words mid-character ("Founde/d This", "Becaus/e I Saw"). */
@media (min-width: 769px) {
  .cs-promo-banner--media-right .cs-promo-banner__card {
    grid-template-columns: minmax(0, 640fr) minmax(0, 504fr);
  }
}

.cs-promo-banner--media-right .cs-promo-banner__media {
  order: 2;
}

.cs-promo-banner--media-right .cs-promo-banner__content {
  order: 1;
}

.cs-promo-banner--media-right .cs-promo-banner__footer {
  flex-direction: row-reverse;
  /* Content/media get order 1/2 — keep the footer last in grid
     auto-placement or it jumps to the first row. */
  order: 3;
}

.cs-promo-banner--media-right .cs-promo-banner__flourish {
  transform: scaleX(-1);
  margin-left: 0;
  margin-right: -4rem;
}

/* Heading accent — de-emphasized soft-blue runs via *asterisk* markup */
.cs-promo-banner .cs-promo-banner__heading-accent {
  color: var(--cs-blue-soft);
}

/* Blue accent variant — for light banners where soft-blue would vanish.
   Classes doubled to (0,4,0) so it also beats the --flat variant's
   pale-blue accent rule regardless of source order. */
.cs-promo-banner.cs-promo-banner--accent-blue .cs-promo-banner__heading-accent.cs-promo-banner__heading-accent {
  color: var(--cs-blue);
}

/* ---------- Text-only variant (Figma mission banner) ----------
   No media: single centered column, statement-style heading (36px,
   relaxed leading, no title-case), flourish stops at ~63% like the mock. */
.cs-promo-banner--text-only .cs-promo-banner__card {
  grid-template-columns: minmax(0, 1fr);
}

.cs-promo-banner--text-only .cs-promo-banner__content {
  max-width: 88.6rem; /* 886px per Figma */
  margin-inline: 0 auto; /* left-aligned block per Figma 636:605 */
  width: 100%;
  padding-block: var(--cs-space-lg) 0;
}

.cs-promo-banner--text-only .cs-promo-banner__heading {
  font-size: clamp(2.4rem, 2vw + 1.2rem, 3.6rem); /* 24px → 36px */
  font-weight: 700;
  line-height: 1.5;
  text-transform: none;
}

.cs-promo-banner--text-only .cs-promo-banner__flourish {
  flex: 0 0 63%;
}

/* Flipped flourish — line bleeds out to the card's RIGHT edge, starburst
   sits inward on the left (per the individual-therapy mission banner). */
.cs-promo-banner--flourish-flip .cs-promo-banner__flourish {
  margin-left: auto; /* push to the right edge of the footer row */
  margin-right: -4rem;
  position: relative;
}

.cs-promo-banner--flourish-flip .cs-promo-banner__flourish::before {
  order: 2;
}

.cs-promo-banner--flourish-flip .cs-promo-banner__flourish img {
  order: 1;
  margin-left: 0;
  margin-right: -2px;
  transform: scaleX(-1);
}

/* Wordmark above the flourish line, near the card edge */
.cs-promo-banner__flourish-logo {
  position: absolute;
  right: 6rem;
  bottom: calc(50% + 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  white-space: nowrap;
}

.cs-promo-banner__flourish-logo-name {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.2;
}

.cs-promo-banner__flourish-logo-sub {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.9;
}

.cs-promo-banner .cs-promo-banner__cta,
.cs-promo-banner .cs-promo-banner__cta:link,
.cs-promo-banner .cs-promo-banner__cta:visited {
  display: inline-block;
  background: var(--cs-white);
  color: var(--cs-ink);
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.6rem; /* 16px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-decoration: none;
  padding: 1rem 2.4rem;
  border-radius: var(--cs-radius-pill);
  transition: background 200ms ease, transform 200ms ease, color 200ms ease;
}

.cs-promo-banner .cs-promo-banner__cta.cs-promo-banner__cta:hover,
.cs-promo-banner .cs-promo-banner__cta.cs-promo-banner__cta:focus-visible {
  background: var(--cs-off-white);
  color: var(--cs-blue-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Outline variant (second CTA on flat bands) */
.cs-promo-banner .cs-promo-banner__cta--outline,
.cs-promo-banner .cs-promo-banner__cta--outline:link,
.cs-promo-banner .cs-promo-banner__cta--outline:visited {
  background: transparent;
  color: var(--cs-white);
  border: 1px solid var(--cs-white);
}
.cs-promo-banner .cs-promo-banner__cta--outline.cs-promo-banner__cta--outline:hover,
.cs-promo-banner .cs-promo-banner__cta--outline.cs-promo-banner__cta--outline:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: var(--cs-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cs-promo-banner__card {
    padding: 3.2rem;
    gap: 3.2rem;
  }
}

@media (max-width: 768px) {
  .cs-promo-banner__card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-space-lg);
    padding: 2.4rem;
    border-radius: 2rem;
  }
  .cs-promo-banner__media img {
    min-height: 24rem;
    max-height: 32rem;
  }
  .cs-promo-banner__flourish {
    display: none;
  }
  .cs-promo-banner .cs-promo-banner__cta {
    width: 100%;
    text-align: center;
  }
}


/* ---------- Flat full-width band (getting-started "Confidence" band) ---------- */
.cs-promo-banner.cs-promo-banner--flat {
  padding: 0;
}

.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__card {
  /* Full-bleed: break out of the row container, same trick as cs-features-band.
     Interior stays on the container grid via side padding, so the media
     variant (photo left / content right) works inside the flat band too. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  border-radius: 0;
  padding: 5.6rem max(var(--cs-gutter), calc((100vw - var(--cs-container)) / 2));
}

.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__content {
  max-width: none;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  text-align: left;
}

/* Flat + heading + body (no media): two columns — heading left, body right
   (Figma "Addressing Individual and Relationship Needs" band). */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
  .cs-promo-banner__content:has(.cs-promo-banner__heading):has(.cs-promo-banner__body) {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: var(--cs-space-lg);
  align-items: center;
}

.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
  .cs-promo-banner__content:has(.cs-promo-banner__heading) .cs-promo-banner__body {
  text-align: right;
  align-self: end;
}

/* Text-only flat band card: top-aligned content with fixed headroom */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only .cs-promo-banner__card {
  align-items: start;
  padding-top: 9rem;
}

/* Desktop: the Figma staggers the two blocks — the body box overlaps the
   heading box horizontally (it starts under the heading's "and", mid line 2),
   so the grid can't express it. Heading anchors the block; the body is
   absolutely positioned to the right. */
@media (min-width: 1101px) {
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only .cs-promo-banner__card {
    height: 55rem; /* 550px */
  }

  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__heading):has(.cs-promo-banner__body) {
    display: block;
    position: relative;
    /* Room for the absolutely-positioned body (top offset + ~3 lines) */
    min-height: 26rem;
  }

  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__body) .cs-promo-banner__heading {
    position: relative;
    max-width: 89.7rem; /* 897px per Figma */
  }

  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__heading) .cs-promo-banner__body {
    position: absolute;
    top: 21.4rem;
    right: 3.5rem; /* 35px */
    width: min(71.2rem, 54%); /* 712px per Figma */
  }
}

/* Text-only band with explicit light scheme + subheading (contact "Getting
   Started" band): the absolute stagger above collides with a subheading, so
   this variant flows — heading + subheading left, body right-aligned below. */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light
  .cs-promo-banner__content:has(.cs-promo-banner__heading):has(.cs-promo-banner__body) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: static;
  min-height: 0;
  gap: 1.2rem;
}

.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__subheading {
  font-size: 1.6rem;
  line-height: 1.5;
  text-transform: none;
  max-width: 79rem;
}

.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light
  .cs-promo-banner__content .cs-promo-banner__body {
  position: static;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

@media (min-width: 901px) {
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light
    .cs-promo-banner__content .cs-promo-banner__body {
    width: min(71.2rem, 70%);
    margin-left: auto;
    margin-top: 1.6rem;
    text-align: right;
  }
}

@media (min-width: 1101px) {
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__card {
    height: auto;
    min-height: 49.7rem; /* 497px per Figma */
  }
}

/* Mobile: single column — heading on top, body below. */
@media (max-width: 900px) {
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__heading):has(.cs-promo-banner__body) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__heading) .cs-promo-banner__body {
    text-align: left;
    align-self: start;
  }
}

/* Band title lives in the eyebrow: white caps with the short line on the left */
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__eyebrow {
  color: var(--cs-white);
  font-weight: 700;
  font-size: 1.6rem; /* 16px per Figma */
  letter-spacing: -0.02em;
}
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__eyebrow-line {
  background: var(--cs-white);
}

.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body {
  max-width: 101rem; /* 1010px per Figma */
  font-size: 2rem;   /* 20px */
  line-height: 1.5;
  text-transform: none;
}

/* Text-only flat bands (Confidence / Addressing): 64px heading + 24px
   italic body per Figma. */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only .cs-promo-banner__heading {
  font-size: clamp(3.6rem, 4vw + 1rem, 6.4rem); /* → 64px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em; /* -1.28px @ 64px */
}

.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only .cs-promo-banner__body {
  font-style: italic;
  font-size: 2.4rem; /* 24px */
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* Photo bands (flat + media): dark-ink body per Figma (#1B1139 @ 45%) */
.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only) .cs-promo-banner__body {
  color: #1b1139;
  opacity: 0.45;
}

/* Dark photo bands with explicit light scheme (meet-the-team "How We Match"):
   soft-white text per Figma — heading 40px/1.5 sentence case, body 15px/1.5. */
.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only).cs-promo-banner--text-light .cs-promo-banner__heading {
  color: #F2F1F0;
  font-size: 4rem; /* 40px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: none;
}

.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only).cs-promo-banner--text-light .cs-promo-banner__body {
  color: #F2F1F0;
  opacity: 1;
  font-size: 1.5rem; /* 15px */
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* Photo bands: content top-aligned (starts level with the image top) */
.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only) .cs-promo-banner__content {
  align-self: start;
}

/* Photo bands: the footer (buttons) renders INSIDE the content column,
   56px below the body. The content's own flex gap (--cs-space-md) already
   contributes, so the margin makes up the difference to exactly 5.6rem. */
.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only) .cs-promo-banner__content .cs-promo-banner__footer {
  grid-column: auto;
  margin-top: calc(5.6rem - var(--cs-space-md)); /* 56px total gap */
  flex-direction: row;
  flex-wrap: wrap;
}

/* On the soft-blue photo bands the heading accent needs the PALE blue —
   the default soft-blue accent would vanish into the band color. */
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__heading-accent {
  color: var(--cs-blue-pale);
}

.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a,
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a:link,
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a:hover,
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a:focus-visible {
  opacity: 0.85;
  color: inherit;
}