/* ==========================================================================
   Blok: diagram. Doorsnede (SVG, 720×400) 7/12 en genummerde punten 5/12 vanaf 64em; mobiel gestapeld.
   De SVG-stijlen staan hier (tokens), niet inline in de partials. Geen prototype-equivalent.
   ========================================================================== */

.block-diagram__head {
  max-width: 48rem;
}

.block-diagram__lead {
  max-width: 34rem;
  margin-top: var(--sp-5);
  color: var(--text-secondary);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.block-diagram__pending {
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  border-left: var(--stroke-bold) solid var(--color-primary);
  background: var(--color-white);
  color: var(--color-black);
  font-size: var(--fs-small);
}

.block-diagram__grid {
  display: grid;
  gap: var(--sp-10);
  margin-top: var(--sp-12);
}

.block-diagram__figure {
  padding: var(--sp-4);
  background: var(--color-white);
  border: var(--border-hairline-w) solid var(--color-silver);
}

.block-diagram__points {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
}

.block-diagram__point {
  display: grid;
  grid-template-columns: var(--sp-10) minmax(0, 1fr);
  column-gap: var(--sp-4);
}

.block-diagram__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.block-diagram__point h3 {
  font-size: var(--fs-step-title);
}

.block-diagram__point p {
  margin-top: var(--sp-1);
  color: var(--text-secondary);
}

/* ---------- SVG ---------- */
.diagram {
  width: 100%;
  height: auto;
}

.diagram__wall { fill: var(--color-silver-light); stroke: var(--color-gray-mid); stroke-width: 1.5; }
.diagram__deck { fill: var(--color-silver); stroke: var(--color-gray-mid); stroke-width: 1.5; }
.diagram__barrier { fill: var(--color-charcoal-2); }
.diagram__insulation { fill: var(--color-off-white); stroke: var(--color-gray-mid); stroke-width: 1.5; }
.diagram__membrane { fill: var(--color-black); }
.diagram__finish { fill: var(--color-primary); }
.diagram__gap { fill: var(--color-white); }
.diagram__pipe { fill: var(--color-charcoal); }
.diagram__drain { fill: none; stroke: var(--color-charcoal); stroke-width: 3; stroke-linejoin: miter; }
.diagram__room { fill: var(--color-off-white); }
.diagram__hatch { stroke: var(--color-gray-mid); stroke-width: 1; fill: none; }
.diagram__dim { stroke: var(--color-gray); stroke-width: 1.5; }
.diagram__dim-head { fill: var(--color-gray); }
.diagram__leader { stroke: var(--color-gray); stroke-width: 1.5; }
.diagram__dot { fill: var(--color-black); stroke: var(--color-white); stroke-width: 1.5; }
.diagram__marker { fill: var(--color-primary-dark); }
.diagram__flow { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-dasharray: 8 6; }
.diagram__stain { fill: var(--color-primary); fill-opacity: 0.28; stroke: var(--color-primary); stroke-width: 1.5; }

.diagram__num {
  fill: var(--color-white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

@media (min-width: 64em) {
  .block-diagram__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-8);
    margin-top: var(--sp-16);
  }

  .block-diagram__figure {
    grid-column: span 7;
  }

  .block-diagram__points {
    grid-column: 9 / span 4;
  }
}