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

/* With the cool corner-glow decor, the band's opaque fill would paint OVER
   the decoration's z-index -1 glow layer — the glow then only shows where it
   overhangs the band, with a hard clip line at the band edge (client-spotted
   on 8171). Move the fill to a -2 pseudo so the order is fill → glow →
   content and the glow blends smoothly across the section boundary.
   Selectors kept on ONE line — BB's CSS rewrite welds newlines after `)`. */
.cs-process-blocks.cs-decor-cool-tr-bl { background: transparent; }
.cs-process-blocks.cs-decor-cool-tr-bl::after { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--cs-off-white); pointer-events: none; }

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

.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-wrap: balance;
}

/* Medium title variant — 40px cap (EFT Supervision numbered focus areas) */
.cs-process-blocks--title-md .cs-process-blocks__title {
  font-size: clamp(3rem, 2.5vw + 1rem, 4rem); /* 30px → 40px */
}

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

/* ---------- Card grid layout (EFT Supervision pillars, change request
   2026-09-13 T4.5) ---------- 2×2 on desktop, single column on mobile.
   White cards on the off-white band with a subtle pale-blue border, same
   radius family as the other card modules; grid stretch keeps rows equal. */
.cs-process-blocks--cards .cs-process-blocks__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cs-space-lg);
}

.cs-process-blocks--cards .cs-process-blocks__item {
  background: var(--cs-white);
  border: 1px solid var(--cs-blue-pale);
  border-radius: 3.7rem; /* matches cs-steps-cards */
  padding: 4rem;
}

/* Cards carry their own frame — the floating chairs/ornaments of the
   stagger layout don't fit inside one. */
.cs-process-blocks--cards .cs-process-blocks__chair,
.cs-process-blocks--cards .cs-process-blocks__ornament {
  display: none;
}

.cs-process-blocks--cards .cs-process-blocks__text {
  max-width: none;
}

/* Card-scale titles — the 40px band headings overwhelm a half-width card.
   Same 24px/700 step as the other card modules' titles. */
.cs-process-blocks--cards .cs-process-blocks__title {
  font-size: 2.4rem;
  margin-bottom: var(--cs-space-sm);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cs-process-blocks {
    padding-block: var(--cs-space-section-sm);
  }
  .cs-process-blocks__inner {
    gap: var(--cs-space-xl);
  }
  .cs-process-blocks--cards .cs-process-blocks__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-space-md);
  }
  .cs-process-blocks--cards .cs-process-blocks__item {
    padding: 2.8rem;
    border-radius: 2.8rem;
  }
  .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;
  }

  /* Chair-bearing items (client request 2026-09-15): stacked, the chairs
     were orphaned between text blocks. Pair each chair with its own title
     on one row instead — side-chair item: chair left, title beside it;
     above-chair item: title pushed right with the chair on its right. The
     body drops below at full width. display: contents dissolves the __text
     wrapper so title and body can sit in different grid rows. */
  .cs-process-blocks__item--chair-side,
  .cs-process-blocks__item--chair-above {
    display: grid;
    align-items: center;
    column-gap: 1.6rem;
    row-gap: var(--cs-space-sm);
  }
  .cs-process-blocks__item--chair-side .cs-process-blocks__text,
  .cs-process-blocks__item--chair-above .cs-process-blocks__text {
    display: contents;
  }
  .cs-process-blocks__item--chair-side {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title chair"
      "body  body";
  }
  .cs-process-blocks__item--chair-above {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "chair title"
      "body  body";
  }
  .cs-process-blocks__item--chair-above .cs-process-blocks__title {
    text-align: right;
  }
  .cs-process-blocks__item--chair-side .cs-process-blocks__title,
  .cs-process-blocks__item--chair-above .cs-process-blocks__title {
    grid-area: title;
    margin-bottom: 0;
  }
  .cs-process-blocks__item--chair-side .cs-process-blocks__body,
  .cs-process-blocks__item--chair-above .cs-process-blocks__body {
    grid-area: body;
  }
  .cs-process-blocks__item--chair-side .cs-process-blocks__chair,
  .cs-process-blocks__item--chair-above .cs-process-blocks__chair {
    grid-area: chair;
    width: 7.2rem;
  }
}