/* complexity.css — EM · 04 — The process in reality.
   Sits between WhySection and ProcessSection.
   Inherits tokens from site.css (--font-serif Newsreader, --color-primary,
   --bg-1, spacing scale, etc).                                              */

.complexity {
  background: var(--bg-1);
  color: var(--fg-1);
  padding-top: var(--s-10);
  padding-bottom: var(--s-10);
}

/* ---------- Top header row ---------- */
.complexity__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: end;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(29, 33, 41, 0.12);
  margin-bottom: var(--s-8);
}

.complexity__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: var(--s-5) 0 0;
}

.complexity__lede {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 36ch;
  margin: 0;
  justify-self: end;
}

/* ---------- Diagram row: rail | lines | release ----------
   All three columns stretch to equal height so the rail items, the SVG line
   starts, and the release circle can be vertically aligned to each other. */
.complexity__diagram {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr) minmax(260px, 0.9fr);
  gap: var(--s-7);
  align-items: stretch;
}

.complexity__rail {
  display: flex;
  flex-direction: column;
}

/* Eyebrows above each column */
.complexity__rail-eyebrow,
.complexity__middle-eyebrow,
.complexity__release-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--s-5);
  line-height: 1.5;
}

.complexity__middle-eyebrow {
  text-align: center;
  /* Overlay the eyebrow at the top of the middle column so the SVG can fill
     the full column height. This keeps the SVG's vertical midpoint (where the
     arrowhead sits, at viewBox y=270/540) aligned with the column midpoint,
     which is also where the right column centers the Emsley circle. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-bottom: 0;
}

.complexity__release-eyebrow {
  text-align: center;
}

/* Left rail: workstreams.
   Distributed as a 7-row grid so each item occupies exactly 1/7 of the column
   height. This makes the row centers align with the SVG line-start dots, which
   are placed at evenly-distributed y values in the viewBox. */
.complexity__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 0;
  flex: 1;
  min-height: 480px;
}

.complexity__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-3);
  align-items: center;
}

.complexity__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(29, 33, 41, 0.06);
  color: var(--fg-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.complexity__item-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-1);
  line-height: 1.4;
}

.complexity__item-sub {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--fg-2);
  line-height: 1.45;
  margin-top: 2px;
}

/* Middle: converging lines diagram */
.complexity__middle {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.cx-lines--desktop {
  width: 100%;
  height: auto;
  flex: 1;
  color: var(--fg-1);
  display: block;
}

/* Right: Emsley circle.
   Vertically centered so the circle center aligns with the SVG convergence
   point at y=270 (midpoint of the 540-unit viewBox). */
.complexity__release {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.complexity__circle {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(29, 33, 41, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-1);
  margin-bottom: var(--s-5);
}

.complexity__circle-inner {
  text-align: center;
  padding: 0 var(--s-5);
}

.cx-mark {
  display: block;
  margin: 0 auto;
  color: var(--fg-1);
}

.complexity__circle-rule {
  width: 36px;
  height: 1px;
  background: rgba(29, 33, 41, 0.3);
  margin: var(--s-3) auto var(--s-4);
}

.complexity__circle-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--fg-1);
  margin-bottom: var(--s-3);
}

.complexity__circle-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.6;
}

.complexity__release-caption {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--fg-2);
  line-height: 1.5;
  text-align: center;
  max-width: 30ch;
  margin: var(--s-3) auto 0;
}

/* Mobile-only converging diagram (hidden on desktop) */
.complexity__mobile-lines { display: none; }

/* ---------- Stats strip ---------- */
.complexity__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(29, 33, 41, 0.12);
}

.complexity__stat {
  padding: 0 var(--s-5);
  border-left: 1px solid rgba(29, 33, 41, 0.08);
}

.complexity__stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.complexity__stat-num {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--fg-1);
  margin-bottom: var(--s-3);
}

.complexity__stat-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: 1.45;
}

.complexity__stat-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.5;
  margin-top: var(--s-2);
}

.complexity__stat.is-accent .complexity__stat-num,
.complexity__stat.is-accent .complexity__stat-label {
  color: #a0815b; /* warm copper accent — adjust to your --color-accent if defined */
}

/* ---------- CTA below stats ---------- */
.complexity__cta {
  margin-top: var(--s-6);
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet: tighten the diagram column gap */
@media (max-width: 1100px) {
  .complexity__diagram {
    grid-template-columns: minmax(240px, 1fr) minmax(0, 1.2fr) minmax(220px, 0.9fr);
    gap: var(--s-5);
  }
  .complexity__circle {
    width: 220px;
    height: 220px;
  }
}

/* Mobile: stack the diagram vertically, swap to mobile converge SVG */
@media (max-width: 800px) {
  .complexity {
    padding-top: var(--s-8);
    padding-bottom: var(--s-8);
  }

  .complexity__top {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .complexity__lede {
    justify-self: start;
    max-width: none;
  }

  .complexity__diagram {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }

  .complexity__middle { display: none; }       /* hide horizontal SVG */
  .complexity__mobile-lines {
    display: block;
    color: var(--fg-1);
    margin: 0 auto;
    max-width: 330px;
  }
  .cx-lines--mobile {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Reset the desktop padding-top that aligns the circle with the rail —
     not needed when the columns stack vertically. */
  .complexity__release {
    align-items: center;
    padding-top: 0;
  }

  /* Stats: stack into a single column on mobile.
     The trimmed array has 3 stats; 2 cols would orphan the third,
     and 3 cols is too cramped at narrow viewports. */
  .complexity__stats {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .complexity__stat {
    border-left: 0;
    padding: var(--s-4) 0 0;
    border-top: 1px solid rgba(29, 33, 41, 0.08);
  }
  .complexity__stat:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .complexity__stat-num { font-size: 1.8rem; }

  /* Mobile-lines SVG: respect very narrow viewports. */
  .complexity__mobile-lines {
    max-width: 100%;
    width: min(330px, 90vw);
  }

  .complexity__cta { justify-content: flex-start; }
}