/* ==========================================================================
   COMPONENTS · PROCESS — "how the record is made": numbered steps threaded on a
   hairline spine. Mono ordinals pressed into a keyline disc, serif titles, a
   furniture/reading body. Default runs vertical (the spine is a vertical
   hairline behind the ordinals); --row lays 3–4 steps across on wide screens
   and turns the spine horizontal, collapsing back to vertical on phones.
   ========================================================================== */

.op-process {
  --po-num: 3rem;               /* the ordinal disc */
  --po-gap: var(--space-xl);    /* the inter-step pitch in --row */
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--space-lg);
  counter-reset: op-process;
}

/* The connecting spine — a hairline run through the centres of the ordinals */
.op-process::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--po-num) / 2);
  inset-inline-start: calc(var(--po-num) / 2);
  inline-size: 1px;
  transform: translateX(-0.5px);
  background: var(--rule);
}

.op-process__step {
  display: grid;
  grid-template-columns: var(--po-num) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

/* The ordinal: a mono numeral set in a keyline disc lifted off the spine */
.op-process__num {
  inline-size: var(--po-num);
  block-size: var(--po-num);
  display: grid;
  place-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-seal);
  background: var(--surface-raised);
  box-shadow: var(--shadow-emboss);
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: var(--text);
}
.op-process__num::before {
  counter-increment: op-process;
  content: counter(op-process, decimal-leading-zero);
}

.op-process__content { display: grid; gap: var(--space-3xs); }

.op-process__title {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-process__body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.op-process__body [data-numeric] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}

/* — Row variant: 3–4 steps across on wide screens; the spine turns horizontal — */
@media (min-width: 56.25rem) {
  .op-process--row {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--po-gap);
  }
  .op-process--row::before { content: none; }            /* drop the vertical spine */
  .op-process--row .op-process__step {
    position: relative;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-sm);
  }
  /* a horizontal hairline from each ordinal across the gap to the next */
  .op-process--row .op-process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--po-num) / 2);
    inset-inline-start: calc(var(--po-num) / 2);
    inline-size: calc(100% + var(--po-gap));
    block-size: 1px;
    transform: translateY(-0.5px);
    background: var(--rule);
    z-index: -1;
  }
}