/* NS Zoekwoordpagina-opbouw 1.0.0: split-secties, duo, stappenrij, CTA-band. Kleuren per pagina via --zw-*. */
.ns-pa { --zw-ink: #1d1a24; --zw-zacht: #575166; --zw-lijn: #e7e3ee; --zw-vlak: #f7f5fa; --zw-accent: #5b3a86; --zw-donker: #1f1733; --zw-knop: #c9b3ec; --zw-knop-ink: #1d1236; }
.ns-tk { --zw-ink: #1b1c22; --zw-zacht: #5a5c66; --zw-lijn: #e6e6ea; --zw-vlak: #f6f6f8; --zw-accent: #0e6b74; --zw-donker: #12262b; --zw-knop: #8fd3d6; --zw-knop-ink: #0b2427; }
.ns-st { --zw-ink: #1d2027; --zw-zacht: #5c6170; --zw-lijn: #e4e4e8; --zw-vlak: #f4f3f1; --zw-accent: #2f6b4f; --zw-donker: #1c2a23; --zw-knop: #b9dcc4; --zw-knop-ink: #10241a; }

.ns-zw-split { max-width: 1160px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.ns-zw-split.ns-zw-breed-beeld { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ns-zw-split.ns-zw-om > .ns-zw-beeld { order: -1; }
.ns-zw-tekst { max-width: 560px; min-width: 0; }
.ns-zw-om .ns-zw-tekst { justify-self: start; }
.ns-zw-beeld { min-width: 0; margin: 0; }
.ns-zw-beeld table { margin: 0 !important; }
.ns-zw-beeld caption { caption-side: top; text-align: left; font-size: .86rem; color: var(--zw-zacht); padding: 0 0 8px; }
.ns-zw-beeld video, .ns-zw-beeld img { display: block; width: 100%; height: auto; border-radius: 12px; }

.ns-zw-smal { max-width: 700px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) 0 0; }

.ns-zw-duo { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); }
.ns-zw-duo > div { min-width: 0; }
.ns-zw-duo > div + div { border-left: 1px solid var(--zw-lijn); padding-left: clamp(24px, 5vw, 72px); }

.ns-zw-stappen { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 0 0; }
.ns-zw-stappen > h2 { text-align: center; }
.ns-zw-stappen > ol, .ns-zw-stappen > ul { list-style: none !important; counter-reset: zw; margin: clamp(20px, 3vw, 36px) 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px) clamp(18px, 2.5vw, 32px); }
.ns-zw-stappen > ol > li, .ns-zw-stappen > ul > li { counter-increment: zw; margin: 0 !important; padding: 14px 0 0 !important; border-top: 2px solid var(--zw-accent); background: none !important; font-size: .95rem; color: var(--zw-zacht); line-height: 1.55; }
.ns-zw-stappen > ol > li::before, .ns-zw-stappen > ul > li::before { content: counter(zw) !important; display: block !important; position: static !important; width: auto !important; height: auto !important; background: none !important; font-weight: 700; font-size: 1.6rem; color: var(--zw-accent); line-height: 1; margin: 0 0 8px !important; }
.ns-zw-stappen > ol > li strong, .ns-zw-stappen > ul > li strong { display: block; color: var(--zw-ink); font-weight: 600; margin-bottom: 4px; font-size: 1rem; }

.ns-zw-cta { max-width: 1160px; margin: clamp(56px, 7vw, 96px) auto 0; background: var(--zw-donker); color: #e6e8ee; border-radius: 14px; padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 24px; align-items: center; }
.ns-zw-cta h2 { color: #fff !important; }
.ns-zw-cta p { color: #cfd3dc; margin: 0 !important; }
.ns-zw-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.ns-zw-cta .ns-zw-knop { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--zw-knop); color: var(--zw-knop-ink) !important; font-weight: 700; text-decoration: none; }
.ns-zw-cta .ns-zw-knop.ns-zw-knop-licht { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.ns-zw-cta .ns-zw-knop:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 849px) {
  .ns-zw-split, .ns-zw-split.ns-zw-breed-beeld, .ns-zw-duo, .ns-zw-cta { grid-template-columns: minmax(0, 1fr); }
  .ns-zw-split > .ns-zw-beeld, .ns-zw-split.ns-zw-om > .ns-zw-beeld { order: 2; }
  .ns-zw-tekst { max-width: none; }
  .ns-zw-duo > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--zw-lijn); padding-top: 28px; }
  .ns-zw-stappen > ol, .ns-zw-stappen > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ns-zw-stappen > ol, .ns-zw-stappen > ul { grid-template-columns: minmax(0, 1fr); }
}

/* Stenen (16237): het oudere happy-stones-artikel in de opbouw passen; de vw-paddings van post-16237.css vervallen hier. */
html body.postid-16237 .ns-st-opbouw { background: transparent; max-width: 1160px; margin: 0 auto; font-family: Poppins, system-ui, sans-serif; }
html body.postid-16237 .ns-st-opbouw h2 { font-family: Poppins, system-ui, sans-serif !important; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem) !important; line-height: 1.2; }
html body.postid-16237 .ns-st-opbouw h3 { font-family: Poppins, system-ui, sans-serif !important; }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__answer,
html body.postid-16237 .ns-st-opbouw .nsb4-stones__steps,
html body.postid-16237 .ns-st-opbouw .nsb4-stones__projects { display: block; padding: 0; }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__route { margin-top: 1.6rem; }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__lead { font-size: clamp(1.02rem, 1rem + .25vw, 1.12rem); }
html body.postid-16237 .ns-st-opbouw figure img { border-radius: 12px; aspect-ratio: 3 / 2; object-fit: cover; }
html body.postid-16237 .ns-st-opbouw figcaption { padding: 10px 0 0; border: 0; color: var(--zw-zacht); }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__chooser,
html body.postid-16237 .ns-st-opbouw .nsb4-stones__outside { padding: clamp(56px, 7vw, 96px) 0 0; }
html body.postid-16237 .ns-st-kiezer .nsb4-stones__chooser > h2 { text-align: center; }
html body.postid-16237 .ns-st-materiaal { position: relative; width: 100vw; left: 50%; margin: clamp(56px, 7vw, 96px) 0 0 -50vw; }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__materials { padding: clamp(44px, 6vw, 80px) max(24px, calc((100vw - 1160px) / 2)); }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__steps > ol { margin: 0; }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__steps > ol > li { padding: .8rem 0; }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__projects > div { grid-template-columns: minmax(0, 1fr); gap: 0; background: none; }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__projects article { padding: 1rem 0; border-top: 1px solid var(--zw-lijn); background: none; }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__projects article h3 { margin: .2rem 0 .3rem !important; }
html body.postid-16237 .ns-st-opbouw .nsb4-stones__projects article ol { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding-left: 1.1rem; }
html body.postid-16237 .ns-st-buiten { max-width: 900px; margin: 0 auto; }
@media (max-width: 849px) {
  html body.postid-16237 .ns-st-opbouw .nsb4-stones__shapes { grid-template-columns: minmax(0, 1fr); }
}
html body.postid-16237 .ns-st-stappen { max-width: 820px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 0 0; }
html body.postid-16237 .ns-st-opbouw .ns-st-b .nsb4-stones__chooser { padding: 0; }
html body.postid-16237 .ns-st-opbouw .ns-st-b .nsb4-stones__shapes { gap: 1.2rem; }
/* stappen stenen: het nummer staat in de eerste kolom, titel en uitleg in de tweede (de stip-::before van de steenproef niet hier) */
html body.postid-16237 .ns-st-stappen .nsb4-stones__steps > ol > li::before { position: static !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; color: var(--zw-accent); font-weight: 700; font-size: 1.6rem; line-height: 1; grid-column: 1; grid-row: 1 / span 2; }
html body.postid-16237 .ns-st-stappen .nsb4-stones__steps > ol > li > b, html body.postid-16237 .ns-st-stappen .nsb4-stones__steps > ol > li > p { grid-column: 2; }
html body.postid-16237 .ns-st-stappen .nsb4-stones__steps > ol > li { padding-left: 0 !important; }
/* materiaalband stenen: ingesloten blok met eigen binnenmarge, zodat tekst nooit tegen de rand van het groen staat */
html body.postid-16237 .ns-st-materiaal { position: static; width: auto; left: auto; margin: clamp(56px, 7vw, 96px) 0 0; }
html body.postid-16237 .ns-st-opbouw .ns-st-materiaal .nsb4-stones__materials { padding: clamp(24px, 5vw, 64px) !important; border-radius: 14px; }
html body.postid-16237 .ns-st-opbouw .ns-st-materiaal .nsb4-stones__materials ul { padding-left: 1.1rem; }