/* ═══════════════════════════════════════════════════
   SECTION: audit-outcomes — source audit.html #sp-outcomes

   Four figures in one bordered row. The dividers are borders on the cells
   rather than a grid gap, so the row reads as a single object with sections
   instead of four cards standing next to each other.

   Below 1100 the row becomes two by two, and the divider has to switch from
   the right edge to the bottom — otherwise the second column keeps a rule
   against nothing.
═══════════════════════════════════════════════════ */

#sp-outcomes {
  background: var(--c-bg-2);
  padding: var(--sp-section) 0;
  border-bottom: 1px solid var(--c-border);
}

.sp-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--sp-16);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.sp-outcome-item {
  padding: var(--sp-10) var(--sp-8);
  border-right: 1px solid var(--c-border);
  position: relative;
  transition: background var(--dur-base);
}
.sp-outcome-item:last-child { border-right: none }

.sp-outcome-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent), rgba(var(--c-accent-rgb), .1));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
/* One step above the section, which is now --c-bg-2. It used to be --c-bg-2
   against a --c-bg section; leaving it there would have made the hover the
   exact colour of the ground it sits on and the state would not show at all. */
.sp-outcome-item:hover { background: var(--c-bg-3) }
.sp-outcome-item:hover::after { transform: scaleX(1) }

.sp-outcome-val {
  font-family: var(--f-display);
  font-size: clamp(36px, 3.5vw, 52px);
  font-weight: var(--fw-black);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--c-text-1);
  margin-bottom: var(--sp-2);
}
/* The unit, not an emphasis — the source uses <em> for the accent-coloured
   part of a figure and turns the italic back off. */
.sp-outcome-val em { color: var(--c-accent); font-style: normal }

.sp-outcome-label {
  font-family: var(--f-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  color: var(--c-text-1);
  line-height: 1.5;
  margin-bottom: var(--sp-1);
}
.sp-outcome-note  { font-size: var(--fs-200); color: var(--c-text-3); line-height: 1.7 }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .sp-outcomes-grid { grid-template-columns: 1fr 1fr }
  .sp-outcome-item { border-right: none; border-bottom: 1px solid var(--c-border) }
  /* Two by two: the right-hand cell of each row keeps its left neighbour's
     divider, and the bottom row loses its rule. */
  .sp-outcome-item:nth-child(odd) { border-right: 1px solid var(--c-border) }
  .sp-outcome-item:nth-last-child(-n+2) { border-bottom: none }
}

@media (max-width: 960px) {
  #sp-outcomes { padding: var(--sp-20) 0 }
}

@media (max-width: 640px) {
  .sp-outcomes-grid { grid-template-columns: 1fr; margin-top: var(--sp-10) }
  .sp-outcome-item { border-right: none; border-bottom: 1px solid var(--c-border); padding: var(--sp-8) var(--sp-6) }
  .sp-outcome-item:nth-child(odd) { border-right: none }
  .sp-outcome-item:last-child { border-bottom: none }
}

@media (prefers-reduced-motion: reduce) {
  .sp-outcome-item::after { transition: none }
}