/* "My process" section on case-study pages.

   A full-height block with two states in one shell:
     1. Diagram — a gantt-style timeline: three phases, clickable step bars laid
        out on a 12-column time grid.
     2. Detail — a step view with a collapsible step menu, the step text, an
        image carousel and a per-image note.

   The markup is built by js/process.js from an inline JSON data island in each
   page, so the copy and image links stay editable in one readable place. This
   stylesheet only describes the look; the state (which step is open, which
   image, whether the menu is expanded) is class-driven from the script.

   Ported one-to-one from the design handoff. Tokens reuse the case-study
   variables (--cs-blue, --cs-orange, …) that already match the handoff. */

.cs-process {
  height: 100vh;
  /* 820 is the room the timeline wants, but a landscape tablet is shorter than
     that, and the section cannot shrink to the screen while the floor is a
     flat pixel value - so the panel ran past the bottom of the viewport and
     took the image and its arrows with it. Capped by the viewport, the section
     always fits the screen it is on; the image column shrinks to suit, which
     it is built to do. */
  min-height: min(820px, 100vh);
  display: flex;
  flex-direction: column;
  padding: clamp(40px, 4vw, 64px) var(--cs-pad-x);
  background: var(--cs-white);
}

.cs-process-inner {
  max-width: var(--cs-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* the script builds the diagram / detail into here */
.cs-process-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* right-edge scroll hint, one per scrolling step track (never over the fixed
   phase bands). The script places each one over its track and toggles the
   whole set with .can-scroll-right; shown on mobile only. */
.cs-process-scrollshade {
  position: absolute;
  right: 0;
  width: 30px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to left, rgba(39, 44, 205, 0.15), rgba(39, 44, 205, 0));
  opacity: 0;
  transition: opacity .15s;
  display: none;
}

/* ---- header (always visible, never swapped) ------------------------------ */

.cs-process-header {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 32px;
}

.cs-process-eyebrow {
  font-family: var(--cs-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--cs-orange-text);
  margin-bottom: 10px;
}

.cs-process-title {
  font-family: var(--cs-font-mono);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--cs-ink);
  margin: 0;
}

.cs-process-intro {
  font-family: var(--cs-font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--cs-ink);
  max-width: 420px;
  text-align: right;
  margin: 0;
}

/* the script swaps the two states with the hidden attribute; the class rules
   below set display, so hidden needs to win explicitly */
.cs-process-panel[hidden],
.cs-process-detail[hidden] {
  display: none;
}

/* ---- diagram state ------------------------------------------------------- */

.cs-process-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cs-border);
  border-radius: 4px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cs-process-hint {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  font-family: var(--cs-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: #8f8f9c;
  pointer-events: none;
}

.cs-process-row {
  /* grow value set per-row by the script as --cs-process-row-grow, so every
     step bar comes out the same height whatever the phase's step count */
  flex: var(--cs-process-row-grow, 1 1 auto);
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: stretch;
  min-height: 0;
}

.cs-process-phase-label {
  font-family: var(--cs-font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cs-blue);
  text-transform: uppercase;
  padding: 0 20px;
  background: var(--cs-surface);
  display: flex;
  align-items: center;
  border-right: 1px solid var(--cs-border);
  border-bottom: 1px solid var(--cs-border);
}

.cs-process-track {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--cs-border);
  /* grid lines share the bars' reference frame: the bars are positioned as a
     percentage of the content box (inside the padding), so the 12-column grid
     is measured from the content box too (background-origin). Otherwise a bar
     at column 2+ lands a padding-width to the right of its line. The padding
     stays as the leading margin before column 1. Clip is left at the default
     border-box so the lines run the full row height and meet the horizontal
     lines between phases, rather than stopping short at the vertical padding. */
  background-image: linear-gradient(90deg, rgba(39, 44, 205, 0.07) 1px, transparent 1px);
  background-size: 8.333% 100%;
  background-origin: content-box;
}

.cs-process-bar {
  /* margin-left / width are set inline per bar (its span on the 12-col grid) */
  flex: 1 1 0;
  min-height: 0;
  min-width: max-content;
  overflow: visible;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--cs-font-ui);
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}

/* phase fills, lightest to darkest across the four sections; the two lighter
   take dark text, the two darker take white for contrast */
.cs-process-bar[data-phase="0"] {
  background: #c9ccf2;
  color: #1e22a8;
  border: 1px solid rgba(39, 44, 205, 0.28);
}
.cs-process-bar[data-phase="1"] {
  background: #9ca4e5;
  color: #1e22a8;
  border: 1px solid rgba(39, 44, 205, 0.3);
}
.cs-process-bar[data-phase="2"] {
  background: #5b68d3;
  color: var(--cs-white);
  border: 1px solid #5b68d3;
}
.cs-process-bar[data-phase="3"] {
  background: #3a49cb;
  color: var(--cs-white);
  border: 1px solid #3a49cb;
}

@media (hover: hover) {
  /* dark blue from the design system on step hover; white text clears AA */
  .cs-process-bar:hover {
    background: var(--cs-blue-dark);
    border-color: var(--cs-blue-dark);
    color: var(--cs-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 34, 168, 0.3);
  }
}

/* ---- detail state -------------------------------------------------------- */

.cs-process-detail {
  display: grid;
  min-height: 0;
  flex: 1;
  border: 1px solid var(--cs-border);
  border-radius: 4px;
  overflow: hidden;
  grid-template-columns: 196px minmax(0, 1fr); /* fixed rail + detail pane */
}

.cs-process-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cs-surface);
  overflow: auto;
  /* no horizontal padding: the phase dividers and the selected-row tint run
     the full rail width; each row carries its own left inset instead */
  padding: 20px 0;
  border-right: 1px solid var(--cs-border);
}

/* "STEPS" header — on the same 22px left edge as the phase names and rows */
.cs-process-rail-steps {
  font-family: var(--cs-font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8f8f9c;
  padding-left: 22px;
  margin-bottom: 16px;
}

.cs-process-rail-list {
  display: flex;
  flex-direction: column;
  /* keep the list at its natural height and let the rail scroll, rather than
     compressing it to fit the frame */
  flex: none;
}

.cs-process-rail-phase {
  font-family: var(--cs-font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--cs-blue);
  padding: 18px 12px 14px 22px;
  margin-top: 10px;
  border-top: 1px solid #dcdce1;
  flex: none;
}
.cs-process-rail-phase.is-first {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* step row: the number is an inline prefix, and the selected state is a 2px
   orange left marker plus a faint blue tint. The transparent left border needs
   an explicit rgba colour so it does not resolve to black. */
.cs-process-rail-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  min-height: 28px;
  /* never shrink below the label's wrapped height, so rows don't overlap when
     the list is longer than the frame — the rail scrolls instead */
  flex: none;
  text-align: left;
  cursor: pointer;
  background: transparent;
  color: var(--cs-ink);
  padding: 5px 18px 5px 20px;
  border: 1px solid transparent;
  border-left-width: 2px;
  border-left-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  transition: background .15s, border-color .15s, color .15s;
}
@media (hover: hover) {
  .cs-process-rail-item:hover {
    background: rgba(39, 44, 205, 0.05);
    border-left-color: var(--cs-border);
    color: var(--cs-blue);
  }
}
.cs-process-rail-item.is-active {
  background: rgba(39, 44, 205, 0.05);
  border-left-color: var(--cs-orange);
  color: var(--cs-blue);
}
@media (hover: hover) {
  .cs-process-rail-item.is-active:hover {
    background: rgba(39, 44, 205, 0.08);
  }
}
.cs-process-rail-item:focus-visible {
  outline: 2px solid var(--cs-orange);
  outline-offset: -2px;
}

.cs-process-rail-num {
  flex: none;
  font-family: var(--cs-font-mono);
  font-weight: 400;
  font-size: 10.5px;
  line-height: 19px;
  letter-spacing: 0.5px;
  color: var(--cs-border);
}
.cs-process-rail-item.is-active .cs-process-rail-num {
  color: var(--cs-blue);
}

.cs-process-rail-label {
  font-family: var(--cs-font-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.3;
  color: inherit;
  text-align: left;
}
.cs-process-rail-item.is-active .cs-process-rail-label {
  font-weight: 600;
}

/* ---- detail: content area ------------------------------------------------ */

.cs-process-content {
  min-height: 0;
  display: grid;
  gap: 36px;
  padding: 28px clamp(24px, 2.4vw, 36px);
  grid-template-columns: 320px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "a b" "c b";
}

.cs-process-a {
  grid-area: a;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Now that the section is capped by the viewport, a short screen can leave
     this cell smaller than the step text needs. Without this the text simply
     ran on over the caption beneath it; scrolling keeps it inside its own
     cell, and on a screen tall enough for the text there is nothing to
     scroll. */
  overflow-y: auto;
}

.cs-process-back {
  align-self: flex-start;
  font-family: var(--cs-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--cs-blue);
  background: transparent;
  border: 1px solid rgba(39, 44, 205, 0.3);
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  margin-bottom: 22px;
  transition: border-color .15s, color .15s;
}

.cs-process-meta {
  font-family: var(--cs-font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cs-orange-text);
  margin-bottom: 10px;
}

.cs-process-step-title {
  font-family: var(--cs-font-mono);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--cs-ink);
  margin: 0 0 14px;
}

.cs-process-step-text {
  font-family: var(--cs-font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cs-ink);
  margin: 0;
}

.cs-process-c {
  grid-area: c;
  border-top: 1px solid var(--cs-border);
  padding-top: 22px;
  align-self: end;
}
/* counter row: just the counter on desktop; the image arrows join it on the
   right on mobile */
.cs-process-crow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cs-process-counter {
  font-family: var(--cs-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: #8f8f9c;
}
.cs-process-caption {
  font-family: var(--cs-font-ui);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--cs-blue);
  margin: 0 0 12px;
}
/* a "category — subject" caption is split by the script into two spans so the
   subject sits on its own line under the category, set lighter and smaller so
   the category still reads as the title */
.cs-process-caption-kind,
.cs-process-caption-name {
  display: block;
}
.cs-process-caption-name {
  font-size: 16px;
  font-weight: 400;
}
.cs-process-note {
  font-family: var(--cs-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cs-ink);
  margin: 0;
}

.cs-process-b {
  grid-area: b;
  position: relative;
  display: flex;
  flex-direction: column;
  /* The column is as tall as the step text beside it, and the image is only as
     tall as its own ratio allows, so the slack belongs somewhere. At the top it
     left the image and its arrows floating with a drop of empty space beneath;
     at the bottom they sit on the same line the caption ends on. */
  justify-content: flex-end;
  gap: 14px;
  min-height: 0;
}

.cs-process-image {
  /* the step images are all ~1.34:1, so the slot takes that ratio from its own
     width instead of filling the column height: object-fit then has almost no
     letterboxing left to add. It may still shrink if the row is short. */
  flex: 0 1 auto;
  aspect-ratio: 1.341;
  min-height: 0;
  /* A short screen leaves the column shorter than the slot's ratio wants, so
     the slot shrinks in height. Stretched, it kept the full column width while
     it did - the picture letterboxed inside it and the slot's own grey and
     border showed as margins down both sides. Off the stretch, the width
     follows the shrunken height through the ratio, so the box is only ever the
     size of the picture in it. */
  align-self: center;
  width: auto;
  max-width: 100%;
  background: var(--cs-placeholder);
  border: 1px solid var(--cs-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--cs-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--cs-placeholder-label);
}
/* a step whose image is not in yet: the grey box and its slug stand in for the
   picture, so that one keeps the full width of the column */
.cs-process-image.is-placeholder {
  align-self: stretch;
}

.cs-process-img {
  width: 100%;
  height: 100%;
  /* fit the whole image inside the slot without cropping, centred; a wide
     image fills the width and centres vertically, a tall one fits the height */
  object-fit: contain;
  object-position: center;
  display: block;
}

.cs-process-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex: none;
  /* the row lines up with the edges of the picture, not of the column: the
     slot above can be narrower than the column on a short screen, and
     js/process.js gives this row that same width.

     A step with more chips than that width holds is paged rather than shrunk
     or wrapped: js/process.js fits the count to the width and gives the rest
     over to ellipses, so the chips keep this size on every step. Wrapping
     would feed back - a taller row leaves the picture less height, which
     makes it narrower, which wraps more chips - so it stays off. */
  align-self: center;
  max-width: 100%;
  min-width: min-content;
}

/* a step with no image: hide the whole image column and the caption/note cell
   (all image-related), and let the step text take the full width */
.cs-process-detail.cs-no-image .cs-process-b,
.cs-process-detail.cs-no-image .cs-process-c {
  display: none;
}
.cs-process-detail.cs-no-image .cs-process-content {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "a";
}
/* keep the text to two-thirds of the container on desktop rather than the full
   width; on mobile it stays full width (a narrow column would read badly) */
@media (min-width: 1200px) {
  .cs-process-detail.cs-no-image .cs-process-a {
    max-width: 66.6667%;
  }
}

/* a single-image step: no arrows / chips / counter. */
.cs-process-detail.cs-single-image .cs-process-controls,
.cs-process-detail.cs-single-image .cs-process-crow {
  display: none;
}
/* Desktop: centre the image in the block instead of leaving it top-aligned.
   The controls that used to sit below it took 54px (a 40px row + the 14px
   gap); inset that space evenly above and below so the image keeps the size
   it had with the controls present but sits centred. */
@media (min-width: 1200px) {
  .cs-process-detail.cs-single-image .cs-process-b {
    padding-bottom: 54px;
  }
}
.cs-process-dots {
  display: flex;
  gap: 10px;
}
.cs-process-dot {
  font-family: var(--cs-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid rgba(39, 44, 205, 0.3);
  background: transparent;
  color: var(--cs-blue);
  transition: border-color .15s, background .15s, color .15s;
}
/* a gap in a paged chip row: a chip's slot, without the chip. Sized by the
   rule above so the row's width does not depend on where the gaps fall. */
.cs-process-dot.is-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  color: rgba(39, 44, 205, 0.45);
  cursor: default;
  padding: 0;
}
.cs-process-dot.is-active {
  background: var(--cs-orange-text);
  border-color: var(--cs-orange-text);
  color: var(--cs-white);
}
.cs-process-arrows {
  display: flex;
  gap: 10px;
}
.cs-process-arrow {
  font-family: var(--cs-font-mono);
  font-size: 13px;
  color: var(--cs-blue);
  border: 1px solid rgba(39, 44, 205, 0.3);
  border-radius: 4px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: transparent;
  transition: border-color .15s, color .15s;
}

/* mobile step navigation: a horizontal band on top of the content, in place
   of the expandable menu. Hidden on desktop, shown in the mobile block below. */
.cs-process-stepnav {
  display: none;
}
.cs-process-stepbtn {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(39, 44, 205, 0.3);
  background: var(--cs-white);
  color: var(--cs-blue);
  font-family: var(--cs-font-mono);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cs-process-steplabel {
  flex: 1;
  text-align: left;
  font-family: var(--cs-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--cs-blue);
}
.cs-process-steparrows {
  flex: none;
  display: flex;
  gap: 8px;
}

/* the orange hover shared by every chip / arrow / back button */
@media (hover: hover) {
  .cs-process-back:hover,
  .cs-process-arrow:hover,
  .cs-process-dot:hover,
  .cs-process-stepbtn:hover {
    border-color: var(--cs-orange);
    color: var(--cs-orange);
  }
}

/* ---- narrow (<= 1199px) --------------------------------------------------

   The switch used to sit at 900. Between there and about 1024 the image slot
   does not grow at all - the rail and the step-text column are both fixed, so
   the picture stays 330x250 however much room the screen has - and even an
   iPad Pro 11 in landscape only reached 463x350. Stacked, the same screen
   gives it the full width: 675x510 at 1024, 820x620 at 1194. 1200 is the line
   because every landscape tablet falls below it while laptops from 1280 up
   keep the two-column view with a slot 537px wide or more.

   js/process.js matches on the same width - keep the two in step.
   ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .cs-process {
    height: auto;
    min-height: 0;
    padding: 48px var(--cs-pad-x);
  }

  .cs-process-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 24px;
  }
  .cs-process-intro { text-align: left; }

  /* the timeline keeps its proportions and scrolls sideways */
  .cs-process-panel {
    flex: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* the scroll hint sits over each moving track only; the script clears it
     once you reach the end (or leave the diagram) */
  .cs-process-scrollshade {
    display: block;
  }
  .cs-process-body.can-scroll-right .cs-process-scrollshade {
    opacity: 1;
  }
  /* the phase label stays a full-width horizontal band on top of its steps,
     as before, but sticks in place so only the steps scroll under it. Its
     width is set to the panel's visible width by the script so it stays put
     while the timeline moves. */
  .cs-process-row {
    flex: none;
    display: block;
    min-width: 620px;
  }
  .cs-process-phase-label {
    position: sticky;
    left: 0;
    z-index: 3;
    font-size: 11px;
    padding: 10px 16px;
    border-right: 0;
  }
  .cs-process-track { padding: 14px 16px; }
  .cs-process-bar {
    padding: 10px 14px;
    min-height: 38px;
  }

  /* detail: the menu becomes a horizontal band on top of the content, with two
     arrows to step through instead of the expandable index */
  .cs-process-detail {
    flex: none;
    grid-template-columns: 1fr;
  }
  .cs-process-rail {
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--cs-border);
  }
  .cs-process-rail-steps,
  .cs-process-rail-list {
    display: none;
  }
  .cs-process-stepnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  .cs-process-content {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "a" "b" "c";
    gap: 22px;
    padding: 22px 18px;
  }

  /* let the slot's per-image ratio set the height here too: a fixed height on
     this column left wide side margins around the image between ~600-900px */
  .cs-process-b { height: auto; }

  /* stacked, the picture spans the full width of its container and the ratio
     gives it its height. The desktop hug narrows the box on a short screen,
     which is right beside a text column and wrong here, where the picture has
     the width to itself. */
  .cs-process-image {
    align-self: stretch;
    width: auto;
  }

  /* image controls move below the image on a phone: no number chips, just the
     two arrows on the right of the counter row (the script moves them there) */
  .cs-process-controls { display: none; }
  .cs-process-dots { display: none; }
  .cs-process-arrows {
    display: flex;
    gap: 8px;
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-process-detail,
  .cs-process-bar,
  .cs-process-back,
  .cs-process-arrow,
  .cs-process-dot,
  .cs-process-stepbtn,
  .cs-process-rail-item {
    transition: none;
  }
}