/* ============================================================================
   Antwoordpositie: opmaak voor de twee tekeningen (netwerk en kaart).
   Gedeeld door index.html en voor-ondernemers.html. Hoort bij tekeningen.js.

   Gebruikt de merk-tokens die de pagina zelf al zet (--ink, --brass, --line,
   --bg2). Geen losse hex-waardes, zodat een kleurwijziging in
   design/tokens.css hier vanzelf doorwerkt.
   ========================================================================= */

.tk { margin: 56px 0 0; }

/* korte inleiding boven een tekening, binnen een bestaande sectie */
.tk-intro { max-width: 640px; margin: 56px auto 26px; text-align: center; }
.tk-intro h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(23px, 2.6vw, 31px); line-height: 1.2;
  letter-spacing: -.015em; color: var(--ink, #14233f); margin: 0 0 12px;
}
.tk-intro p { margin: 0; color: var(--ink-soft, #33415c); font-size: 16.5px; }
.tk-intro + .tk { margin-top: 0; }

.tk-paneel {
  position: relative;
  width: 100%;
  border-radius: 22px;
  background: var(--bg2, #faf8f4);
  border: 1px solid var(--line, #ece8df);
  overflow: hidden;
}
.tk-paneel canvas { display: block; width: 100%; height: 100%; }

/* het netwerk is breed en laag, de kaart staand want Nederland is hoger dan breed */
.tk[data-tekening="netwerk"] .tk-paneel { aspect-ratio: 16 / 9; min-height: 380px; }
.tk[data-tekening="kaart"] .tk-paneel { aspect-ratio: 1 / 1.12; min-height: 400px; background: #fff; }

/* onderschrift met het gemeten getal */
.tk-cap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 10px;
  margin: 18px 0 0; text-align: center;
}
.tk-n {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700;
  color: var(--ink, #14233f); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tk-t { font-size: 14.5px; color: var(--ink-soft, #33415c); }
.tk-bron {
  flex-basis: 100%; font-size: 12.5px; color: var(--muted, #6b7280); margin-top: 2px;
}

/* De kaart staat naast zijn tekst, anders blijft er links en rechts van de
   smalle landsvorm te veel wit staan. */
.tk-naast {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.tk-naast .tk-cap {
  justify-content: flex-start; text-align: left;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line2, #e2ddd2);
}
.tk-naast .tk-tekst h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(24px, 2.8vw, 33px); line-height: 1.18;
  letter-spacing: -.015em; color: var(--ink, #14233f); margin: 0 0 14px;
}
.tk-naast .tk-tekst p { margin: 0; color: var(--ink-soft, #33415c); font-size: 16.5px; }

@media (max-width: 900px) {
  .tk-naast { grid-template-columns: minmax(0, 1fr); }
  .tk[data-tekening="kaart"] .tk-paneel {
    aspect-ratio: 1 / 1.05; max-width: 420px; margin: 0 auto;
  }
  .tk[data-tekening="netwerk"] .tk-paneel { aspect-ratio: 1 / .95; min-height: 320px; }
  .tk-naast .tk-cap { justify-content: center; text-align: center; }
}