/* cs-process-blocks — staggered big blue headings + copy with floating chair
   illustrations (resources "About Our Therapy Process" section).
   All rem values follow BB Theme's html { font-size: 10px } base. */

.cs-process-blocks {
  /* Full-bleed off-white band, same trick as cs-features-band */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--cs-off-white);
  padding-block: var(--cs-space-2xl);
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
}

/* ---------- Edge ornaments — starburst circles bleeding off-canvas ----------
   Anchored to their item (article is position: relative), vertically
   centered on it, and pushed to the viewport edge with 50%−50vw (the item
   is centered in the viewport, so that lands exactly at the screen edge). */
.cs-process-blocks .cs-process-blocks__ornament {
  display: block;
  position: absolute;
  z-index: 0;
  width: 23.8rem; /* 238px per Figma */
  height: 23.8rem;
  border-radius: 50%;
  /* background-image is inlined from PHP — BB's CSS bundler rewrites
     relative url()s to its cache dir, breaking module-relative paths. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}

.cs-process-blocks .cs-process-blocks__ornament--left {
  left: calc(50% - 50vw - 12rem); /* half off the viewport's left edge */
}

.cs-process-blocks .cs-process-blocks__ornament--right {
  right: calc(50% - 50vw - 12rem); /* half off the viewport's right edge */
}

/* Desktop-only ornaments */
@media (max-width: 1100px) {
  .cs-process-blocks .cs-process-blocks__ornament {
    display: none;
  }
}

.cs-process-blocks__inner {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2xl);
}

/* ---------- Item ---------- */
.cs-process-blocks__item {
  position: relative; /* anchor for the edge ornaments */
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-lg);
}

.cs-process-blocks__item--right {
  justify-content: flex-end;
  text-align: right;
}

.cs-process-blocks__text {
  max-width: 102.5rem; /* 1025px per Figma */
}

/* Title — doubled-up so BB Global Styles' h2 rules can't repaint it */
.cs-process-blocks .cs-process-blocks__title {
  margin: 0 0 var(--cs-space-sm);
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 3vw + 1.2rem, 4.8rem); /* 32px → 48px */
  font-style: normal;
  line-height: 1.212;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-blue);
  text-transform: capitalize;
  text-wrap: balance;
}

/* Per-item title colors (Figma: "Mapping the Change Process" is navy) */
.cs-process-blocks .cs-process-blocks__title--navy {
  color: #1b5386;
}

.cs-process-blocks__body {
  font-size: 1.6rem; /* 16px */
  line-height: 1.7;
}

.cs-process-blocks__body p {
  margin: 0 0 var(--cs-space-xs);
}
.cs-process-blocks__body p:last-child {
  margin-bottom: 0;
}

.cs-process-blocks__body strong,
.cs-process-blocks__body b {
  font-weight: 700;
}

/* Links survive BB Global Styles */
.cs-process-blocks .cs-process-blocks__body a,
.cs-process-blocks .cs-process-blocks__body a:link,
.cs-process-blocks .cs-process-blocks__body a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}
.cs-process-blocks .cs-process-blocks__body a:hover,
.cs-process-blocks .cs-process-blocks__body a:focus-visible {
  color: var(--cs-blue);
}

/* ---------- Chair illustrations ---------- */
.cs-process-blocks__chair {
  flex-shrink: 0;
  width: 13.3rem; /* 133px per Figma */
  height: auto;
}

.cs-process-blocks__item--chair-above {
  flex-direction: column;
  gap: var(--cs-space-lg);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cs-process-blocks {
    padding-block: var(--cs-space-xl);
  }
  .cs-process-blocks__inner {
    gap: var(--cs-space-xl);
  }
  .cs-process-blocks__item {
    flex-direction: column;
    gap: var(--cs-space-md);
  }
  .cs-process-blocks__item--right {
    align-items: flex-end;
  }
  .cs-process-blocks__chair {
    width: 9rem;
  }
}