/* clx-capability-steps — staircase chart shown on /it-consulting-service/ sec[4].
   Companion to clx-cost-curves.css (DE page). Reuses cost-curves typography
   classes (.clx-cost-curves__phase-num, ..__phase-name, ..__axis-title,
   ..__readout, etc.) so the two graphs share a typographic system.

   Only the wrapper grid + section composition rules live here. */

/* === Outer section: H2 + intro row + animation block ===================== */
.clx-cap-sec4 { width: 100%; }
.clx-cap-sec4 .clx-cap-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin: 0 auto 56px;
  max-width: 1140px;
  padding: 0 20px;
  box-sizing: border-box;
}
.clx-cap-sec4 .clx-cap-row > div { min-width: 0; }
.clx-cap-sec4 .clx-cap-h2 {
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 52px;
  line-height: 60px;
  letter-spacing: -1.56px;
  color: #142533;
  margin: 0;
  text-align: left;
}
.clx-cap-sec4 .clx-cap-intro {
  font-family: 'Cabin', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #898D90;
  margin: 0;
  text-align: left;
}

/* === Inner chart wrapper — 2-column grid (chart + readout column) ======== */
.clx-capability-steps {
  position: relative;
  width: 100%;
  min-height: 520px;
  background: linear-gradient(180deg, #FFF6F1 0%, #FFFFFF 100%);
  border-radius: 20px;
  padding: 24px 24px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 32px;
  align-items: stretch;
  max-width: 1140px;
  margin: 0 auto;
  box-sizing: border-box;
}
.clx-capability-steps__chart {
  position: relative;
  min-width: 0;
}

/* SVG full-width within its column, height proportional */
.clx-capability-steps .clx-cost-curves__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* === Readout column (right side on desktop) ==============================
   Stretches the full height of the grid row, with all contents
   (eyebrow + stat rows + footnote) center-aligned vertically as a
   single block against the chart on the left. */
.clx-capability-steps .clx-cost-curves__meta--col {
  align-self: stretch;
  padding-top: 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.clx-capability-steps .clx-cost-curves__eyebrow {
  font-family: 'Cabin', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #142533;
  opacity: 0.65;
  margin-bottom: 14px;
}
.clx-capability-steps .clx-cost-curves__readout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid rgba(20, 37, 51, 0.18);
  padding-top: 12px;
}
.clx-capability-steps .clx-cost-curves__rd-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(20, 37, 51, 0.10);
  padding-bottom: 6px;
}
.clx-capability-steps .clx-cost-curves__rd-row:last-child { border-bottom: none; }
.clx-capability-steps .clx-cost-curves__rd-label {
  font-family: 'Cabin', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
}
.clx-capability-steps .clx-cost-curves__rd-val {
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  font-variant-numeric: tabular-nums;
}
.clx-capability-steps .clx-cost-curves__rd-row--accent .clx-cost-curves__rd-val,
.clx-capability-steps .clx-cost-curves__rd-row--accent .clx-cost-curves__rd-label { color: #FA4900; }

.clx-capability-steps .clx-cost-curves__caption {
  margin-top: 8px;
  padding-left: 8px;
  font-family: 'Cabin', sans-serif;
  font-size: 13px;
  color: #142533;
  opacity: 0.55;
  font-style: italic;
}
/* Method footnote inside the readout column — sits flush below the
   3 stat rows; the whole readout block (eyebrow + rows + footnote) is
   center-aligned vertically against the chart via the parent flex
   column's justify-content:center. Smaller + italic so it reads as a
   data-viz note, not a competing fact. */
.clx-capability-steps__footnote {
  margin: 24px 0 0;
  font-family: 'Cabin', sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #142533;
  opacity: 0.55;
  font-style: italic;
  text-align: left;
}

/* === Animation state — step groups ======================================= */
/* Each step group can be in: pending | revealing | done.
   The JS controller toggles data-cs-phase between these. CSS handles the
   transitions; stroke-dasharray + offset values are set per line at runtime
   because each tread/riser has a different length. */
.clx-capability-steps [data-cs-step] {
  transition: opacity 220ms ease;
}
.clx-capability-steps [data-cs-step] [data-cs-part="tread"],
.clx-capability-steps [data-cs-step] [data-cs-part="riser"] {
  transition: stroke-dashoffset 250ms ease-out;
}
.clx-capability-steps [data-cs-step] [data-cs-part="riser"] {
  transition-duration: 400ms;
  transition-delay: 250ms;
}
.clx-capability-steps [data-cs-step] [data-cs-part="node"] {
  transition: opacity 200ms ease 650ms;
}

/* Dim non-active steps on hover (JS adds .is-hovered to root). */
.clx-capability-steps.is-hovered [data-cs-step] { opacity: 0.3; }
.clx-capability-steps.is-hovered [data-cs-step].is-active { opacity: 1; }

/* Active step typography (orange num + bold name). */
.clx-capability-steps [data-cs-step].is-active [data-cs-num],
.clx-capability-steps [data-cs-step].is-active [data-cs-year] {
  fill: #FA4900;
  font-weight: 600;
}
.clx-capability-steps [data-cs-step].is-active [data-cs-name] {
  font-weight: 600;
}

/* Reduce motion — skip the staircase reveal entirely. */
@media (prefers-reduced-motion: reduce) {
  .clx-capability-steps [data-cs-step] [data-cs-part="tread"],
  .clx-capability-steps [data-cs-step] [data-cs-part="riser"],
  .clx-capability-steps [data-cs-step] [data-cs-part="node"] {
    transition: none !important;
  }
}

/* === Step label variants — desktop above-step vs mobile right-of-node ===
   Desktop label (above the step segment) is the default; mobile label
   (vertical stack right of node) is hidden by default. Mobile variant
   is shown at <768px via the media query below.

   Using visibility:hidden + visibility:visible (not display:none /
   display:block) because some browsers don't reliably toggle SVG <g>
   display via CSS — visibility is universally supported on SVG. */
.clx-capability-steps .cs-lbl--mobile { visibility: hidden; }
.clx-capability-steps .cs-lbl-num-mobile {
  font-size: 11px;
  font-weight: 600;
  fill: #FA4900;
}
.clx-capability-steps .cs-lbl-name-mobile {
  font-size: 12px;
}

/* === Responsive ========================================================== */
@media (max-width: 1023px) {
  .clx-capability-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .clx-capability-steps .clx-cost-curves__meta--col {
    padding-top: 0;
  }
  .clx-capability-steps .clx-cost-curves__readout {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .clx-capability-steps .clx-cost-curves__rd-row {
    flex: 1 1 30%;
    border-bottom: none;
    padding-bottom: 0;
  }
  /* Footnote at narrow widths sits flush below the stats. */
  .clx-capability-steps__footnote {
    margin-top: 16px;
  }
  /* At narrow widths the readout drops below the chart — no need to
     center vertically since they're stacked. */
  .clx-capability-steps .clx-cost-curves__meta--col {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .clx-cap-sec4 .clx-cap-row {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
    padding: 0 16px;
  }
  .clx-cap-sec4 .clx-cap-h2 {
    font-size: 38px;
    line-height: 44px;
    letter-spacing: -1px;
  }
  .clx-capability-steps {
    min-height: 380px;
    padding: 12px 8px;
  }
  /* Swap labels: hide above-step desktop labels, show right-of-node
     mobile labels (vertical num + name stack). Sub-labels under the
     X-axis also drop because they overlap at 5-step compression. */
  .clx-capability-steps .cs-lbl--desktop { visibility: hidden; }
  .clx-capability-steps .cs-lbl--mobile { visibility: visible; }
  .clx-capability-steps .clx-cost-curves__curve-lbl { visibility: hidden; }
  /* Tighten axis title font sizes at mobile so they don't crowd the plot. */
  .clx-capability-steps .clx-cost-curves__axis-title {
    font-size: 10px;
  }
}