/* Process — sticky split on the survey grid: pinned index, scrolling phases. */

.process { padding-block: var(--section-gap); }

.process__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-sm), minmax(0, 1fr));
  gap: var(--grid-gap);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.process__aside { grid-column: 1 / -1; }

.process__title { max-width: var(--measure-h2); }

/* The index is a position marker for the sticky column. Below 900px nothing is sticky
   and it simply printed the six phase names a second time, 600px before the phases. */
.process__index {
  display: none;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

@media (min-width: 900px) {
  .process__index { display: grid; }
}

.process__idx {
  display: flex;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: var(--border-hairline);
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-slide),
              border-color var(--dur-fast) var(--ease-slide);
}

.process__idx span { color: var(--text-muted); }

.process__idx.is-current { color: var(--text-primary); border-bottom-color: var(--accent); }
.process__idx.is-current span { color: var(--text-accent); }

.process__note {
  margin-top: var(--space-xl);
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--text-muted);
}

.process__panels {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--section-gap-tight);
  margin-top: var(--space-2xl);
}

.phase {
  display: grid;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--border-hairline);
}

.phase__num {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-size: var(--text-h3);
  color: var(--text-accent);
}

.phase__name { margin: 0; }

.phase__dur { margin: 0; max-width: 220px; }

.phase__img { margin-block: var(--space-sm); }

.phase__what { margin: 0; color: var(--text-secondary); }

.phase__get {
  margin: 0;
  padding-top: var(--space-sm);
  border-top: var(--border-hairline);
  font-family: var(--font-data);
  font-size: var(--text-data);
}

.phase__get-label {
  display: inline-block;
  margin-right: var(--space-xs);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-accent);
}

@media (min-width: 900px) {
  .process__inner { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }

  .process__aside {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--header-h) + var(--space-xl));
    align-self: start;
  }

  .process__panels {
    grid-column: 5 / -1;
    margin-top: 0;
  }

  .phase {
    grid-template-columns: 96px minmax(0, 1fr);
    /* Every named area must be a filled rectangle. The previous map broke "num"
       into two blocks with the image row between them, which makes the whole
       grid-template-areas declaration invalid — the browser dropped it and stacked
       every child into one cell, so the copy landed on top of the photograph. */
    grid-template-areas:
      "num name"
      "num dur"
      "num img"
      "num what"
      "num get";
    column-gap: var(--grid-gap);
  }

  .phase__num { grid-area: num; }
  .phase__name { grid-area: name; }
  .phase__dur { grid-area: dur; }
  .phase__img { grid-area: img; max-width: 560px; }
  .phase__what { grid-area: what; }
  .phase__get { grid-area: get; }
}