/* How an engagement works: an example process map goes through each stage (sections/engagement.js).
   Without JS none of this applies and the stages stay the plain four-column list. */

.eg-visual { display: none; }

.eg-live .eg-body, .eg-still .eg-body {
  display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); column-gap: var(--gutter);
  margin-top: 5rem; width: min(var(--wall), 100%);
}
.eg-live .stages, .eg-still .stages { display: block; margin-top: 0; grid-column: 1; grid-row: 1; }
.eg-live .stages .small, .eg-still .stages .small { margin-top: 0.5rem; }
.eg-live .eg-visual, .eg-still .eg-visual { display: block; grid-column: 2; grid-row: 1; }

/* scrolling: each stage holds the screen while the map performs it; the map stays pinned beside them */
.eg-live .stages { padding-top: 26vh; }
.eg-live .stages li { min-height: 64vh; }
.eg-live .stages li:last-child { min-height: 84vh; }
.eg-live .eg-visual { position: sticky; top: 9vh; height: 82vh; }
.eg-live .stages li > * { transition: opacity 500ms var(--ease); }
.eg-run .stages li:not(.eg-now) > * { opacity: 0.55; } /* ~4.6:1, still readable; only once the map runs */

/* reduced motion: the finished map, still, beside the plain list */
.eg-still .stages li + li { margin-top: 3.5rem; }
.eg-still .eg-visual { position: relative; height: min(80vh, 46rem); align-self: start; }

.eg-frame { position: relative; width: 100%; height: 100%; }
.eg-cap { position: absolute; left: 0; top: 0; margin: 0; font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.eg-map { position: absolute; inset: 2.75rem 0 4rem 0; overflow-x: clip; } /* hidden labels waiting past the edge never widen the page */
.eg-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.eg-lb {
  position: absolute; left: 0; top: 0; display: grid; gap: 0.3rem; pointer-events: none;
  font: 500 0.875rem/1.2 var(--font-sans); color: var(--ink); white-space: nowrap;
  text-shadow: 0 0 6px var(--paper), 0 0 3px var(--paper), 0 0 1px var(--paper);   /* reads over the thread */
  transition: color 250ms var(--ease);
}
.eg-lb .nm { position: relative; justify-self: inherit; }
.eg-lb .nm::after { /* the strike: same coral pen as the case study's before list */
  content: ""; position: absolute; left: -3px; right: -3px; top: 55%; height: 1.5px; background: #ff5a3c;
  transform: scaleX(var(--k, 0)); transform-origin: left;
}
.eg-lb .sub { display: grid; }
.eg-lb .sub > * { grid-area: 1 / 1; font: 500 0.625rem/1 var(--font-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.eg-lb .why.cut { color: #ff5a3c; }
.eg-lb .tag.ai { color: var(--xv-ai); }
.eg-lb.hit .nm { text-decoration: underline; text-decoration-color: #ff5a3c; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.eg-status {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 1rem;
  padding-top: 0.9rem; border-top: 1px solid var(--ui-line);
  font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.eg-step { color: var(--ink); }
.eg-read { display: inline-flex; align-items: center; gap: 0.6rem; }
.eg-read.run { color: var(--ink); }
.eg-read.run::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff5a3c; animation: eg-breathe 3.2s ease-in-out infinite; }
@keyframes eg-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

@media (max-width: 1199px) {
  .eg-live .eg-body, .eg-still .eg-body { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

/* phone: the map pins along the top, the stages scroll up beneath it */
@media (max-width: 700px) {
  .eg-live .eg-body, .eg-still .eg-body { display: block; margin-top: 2.5rem; }
  .eg-live .eg-visual {
    position: sticky; top: 0; z-index: 1; height: 50svh; margin-inline: calc(-1 * var(--side)); padding: 0.5rem var(--side) 1rem;
    background: var(--paper);
  }
  .eg-live .eg-visual::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2.5rem; background: linear-gradient(var(--paper), transparent); pointer-events: none; }
  .eg-live .stages { padding-top: 3rem; }
  .eg-live .stages li { min-height: 52svh; }
  .eg-live .stages li:last-child { min-height: 60svh; }
  .eg-live .eg-status { bottom: 0.25rem; padding-top: 0.75rem; }
  .eg-live .eg-frame { height: 100%; }
  .eg-still .eg-visual { height: 50svh; margin-bottom: 2.5rem; }
  .eg-map { inset: 2rem 0 3rem 0; }
  .eg-lb { font-size: 0.6875rem; gap: 0.2rem; }
  .eg-lb .sub > * { font-size: 0.5625rem; }
}