/* Leren naaldvilten (pagina 11). Alleen geladen op pagina's met data-nvw-leren. */
.nvw-leren .nl-hero { margin: 0 0 1.5rem; max-width: none; }
.nvw-leren .nl-hero img { display: block; width: 100%; height: auto; border-radius: var(--nvw-radius, 16px); }
.nvw-leren .nl-lede { font-size: 1.2rem; line-height: 1.65; color: var(--nvw-ink); }
.nvw-leren .nl-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 2rem; }
.nvw-leren .nl-knop { display: inline-flex; align-items: center; min-height: 48px; padding: .7rem 1.2rem; border-radius: 999px; background: var(--nvw-forest); color: var(--nvw-surface); font-weight: 700; text-decoration: none !important; }
.nvw-leren .nl-knop:hover { background: var(--nvw-forest-strong); }
.nvw-leren .nl-knop--licht { background: transparent; color: var(--nvw-forest); box-shadow: inset 0 0 0 2px var(--nvw-forest); }
.nvw-leren .nl-knop--licht:hover { background: var(--nvw-mist); }
.nvw-leren .nl-figuur { margin: 1.5rem 0; color: var(--nvw-ink); }
.nvw-leren .nk-svg { display: block; width: 100%; height: auto; max-width: 640px; }
.nvw-leren figcaption { font-size: .95rem; color: var(--nvw-muted); margin-top: .5rem; }
.nvw-leren .nk { margin: 1.5rem 0 2rem; padding: 1.25rem 0; border-top: 3px solid var(--nvw-forest); border-bottom: 1px solid var(--nvw-line); }
.nvw-leren .nk-stappen { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.nvw-leren .nk-stappen legend { font-weight: 700; font-size: 1.15rem; color: var(--nvw-ink); margin-bottom: .5rem; padding: 0; }
.nvw-leren .nk-stappen label { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .4rem 0; border-bottom: 1px solid var(--nvw-line); cursor: pointer; color: var(--nvw-ink); }
.nvw-leren .nk-stappen input { width: 1.2rem; height: 1.2rem; accent-color: var(--nvw-forest); flex: none; margin: 0; }
.nvw-leren .nk-stappen label:has(input:checked) { font-weight: 700; }
.nvw-leren .nk-uit { margin: 1.25rem 0; }
.nvw-leren .nk-uit-kop { font-weight: 700; font-size: 1.15rem; color: var(--nvw-ink); margin-bottom: .5rem; }
.nvw-leren .nk-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.nvw-leren .nk-feiten dt { font-size: .85rem; color: var(--nvw-muted); }
.nvw-leren .nk-feiten dd { margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--nvw-ink); }
.nvw-leren .nk-pakket { color: var(--nvw-forest); font-weight: 600; }
.nvw-leren .nk-leeg { font-style: italic; }
.nvw-leren .nk-vraag { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0 .5rem; }
.nvw-leren .nk-vraag label { font-weight: 700; color: var(--nvw-ink); }
.nvw-leren .nk-vraag select { min-height: 48px; font: inherit; padding: .5rem .75rem; border: 2px solid var(--nvw-line); border-radius: 8px; background: var(--nvw-surface); color: var(--nvw-ink); max-width: 100%; }
.nvw-leren .nk-probleem-uit { padding-left: 1rem; border-left: 3px solid var(--nvw-coral); color: var(--nvw-ink); }
.nvw-leren .nk-bron { font-size: .9rem; }
.nvw-leren .nl-mallen { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.25rem; align-items: center; margin: 1.5rem 0; }
.nvw-leren .nl-mallen img { display: block; width: 100%; height: auto; border: 1px solid var(--nvw-line); border-radius: 8px; background: #fff; }
.nvw-leren .nl-mallen figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin: 0; }
.nvw-leren :focus-visible { outline: 3px solid var(--nvw-focus); outline-offset: 3px; }
@media (max-width: 640px) {
  .nvw-leren .nk-stappen { grid-template-columns: minmax(0, 1fr); }
  .nvw-leren .nk-feiten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nvw-leren .nl-mallen { grid-template-columns: 120px minmax(0, 1fr); }
  .nvw-leren .nl-knop { width: 100%; justify-content: center; }
}
/* Brede tabellen op smalle schermen: laat zien dat er meer rechts staat. */
@media (max-width: 640px) {
  .nvw-leren .next40-table { background: linear-gradient(to right, var(--nvw-paper) 30%, transparent), linear-gradient(to left, var(--nvw-paper) 30%, transparent) 100% 0, radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .18), transparent); background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%; background-position: 0 0, 100% 0, 100% 0; background-attachment: local, local, scroll; }
}