/* =============================================================
   NSP.CSS — Stichting Nederlandse Sport Pers
   Volledige stylesheet voor alle pagina's
   Versie 1.0 — Juli 2026
   ============================================================= */


/* -------------------------------------------------------------
   1. BASIS OVERRIDES
   Bootstrap Reboot handelt de algemene reset af.
   Hieronder staan alleen NSP-specifieke overrides.
   ------------------------------------------------------------- */

/* Vloeiend scrollen (Bootstrap stelt dit niet in) */
html { scroll-behavior: smooth; }

/* Lettertypes en basiskleur — overschrijft Bootstrap Reboot */
body {
  background: #F4EFE8;
  color: #15120F;
  font-family: 'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Tekstselectie in NSP-huisstijl */
::selection { background: #E86E10; color: #fff; }


/* -------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES (design tokens)
   ------------------------------------------------------------- */

:root {
  /* Kleuren */
  --c-bg:        #F4EFE8;
  --c-dark:      #15120F;
  --c-navy:      #093C68;
  --c-orange:    #E86E10;
  --c-orange-h:  #C75E0A;
  --c-blue:      #0B5BB0;
  --c-peach:     #F4B27A;
  --c-green:     #2E6E55;
  --c-amber:     #B5803A;
  --c-white:     #FFFFFF;
  --c-off-white: #FAF7F2;

  /* Tekst */
  --c-text:      #3A352F;
  --c-muted:     #6F675D;
  --c-subtle:    #A89C8C;
  --c-inverse:   #F4EFE8;

  /* Randen */
  --border-s:  1px solid rgba(21,18,15,.08);
  --border-m:  1px solid rgba(21,18,15,.12);
  --border-l:  1px solid rgba(21,18,15,.14);

  /* Typografie */
  --font-sans:  'Archivo', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;

  /* Layout */
  --max-w:   1240px;
  --gutter:  28px;
  --hh:      83px;   /* header height — gebruik als top-offset voor sticky elementen */

  /* Radius */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 5px;
  --r-lg: 6px;
  --r-xl: 8px;
}


/* -------------------------------------------------------------
   3. LAYOUT HULPKLASSEN
   ------------------------------------------------------------- */

.nsp-container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nsp-page {
  /* body-stijlen zijn al gezet via de body-override hierboven;
     .nsp-page zorgt alleen voor scoping als DC-wrapper actief is */
  min-height: 100vh;
  overflow-x: hidden;
}


/* -------------------------------------------------------------
   4. AANKONDIGINGSBALK
   ------------------------------------------------------------- */

.nsp-announcement {
  background: var(--c-navy);
  color: var(--c-inverse);
  font-size: 13px;
  letter-spacing: .02em;
}

.nsp-announcement__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 9px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}

.nsp-announcement__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--c-peach);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
}

.nsp-announcement__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-orange);
  display: inline-block;
  flex-shrink: 0;
}

.nsp-announcement__text { opacity: .85; }

.nsp-announcement__link {
  color: var(--c-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}


/* -------------------------------------------------------------
   5. HEADER & NAVIGATIE
   ------------------------------------------------------------- */

.nsp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,239,232,.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: var(--border-m);
}

.nsp-header__bar {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.nsp-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nsp-logo__img { height: 54px; width: auto; }

/* Desktop navigatie */
.nsp-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 600;
}

.nsp-nav__link {
  text-decoration: none;
  color: var(--c-dark);
  transition: color .15s;
}

.nsp-nav__link:hover,
.nsp-nav__link--active { color: var(--c-orange); }

/* Actieknoppen */
.nsp-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nsp-btn-login {
  text-decoration: none;
  color: var(--c-dark);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--r-xs);
  border: 1.5px solid rgba(21,18,15,.25);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: border-color .15s;
}

.nsp-btn-login:hover { border-color: var(--c-dark); }

.nsp-btn-join {
  text-decoration: none;
  background: var(--c-orange);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--r-xs);
  white-space: nowrap;
  letter-spacing: .01em;
  transition: background .15s;
}

.nsp-btn-join:hover { background: var(--c-orange-h); }

/* Hamburger */
.nsp-burger {
  display: none;
  background: none;
  border: 1px solid rgba(21,18,15,.25);
  border-radius: var(--r-xs);
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--c-dark);
  font-size: 18px;
  align-items: center;
  justify-content: center;
}

/* Mobiel menu */
.nsp-mobile-nav {
  border-top: var(--border-m);
  background: var(--c-bg);
  padding: 8px var(--gutter) 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
}

.nsp-mobile-nav__link {
  text-decoration: none;
  color: var(--c-dark);
  padding: 11px 0;
  border-bottom: var(--border-s);
}

.nsp-mobile-nav__link--last { border-bottom: none; }


/* -------------------------------------------------------------
   6. PAGINA-INHOUD PLACEHOLDER (alleen in template)
   ------------------------------------------------------------- */

.nsp-main {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nsp-placeholder {
  text-align: center;
  padding: 60px var(--gutter);
}

.nsp-placeholder__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-subtle);
  margin-bottom: 12px;
}

.nsp-placeholder__text {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--c-muted);
}


/* -------------------------------------------------------------
   7. FOOTER
   ------------------------------------------------------------- */

.nsp-footer {
  background: var(--c-navy);
  color: var(--c-inverse);
}

.nsp-footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 64px var(--gutter) 36px;
}

.nsp-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

/* Kolom 1: merk */
.nsp-footer__logo-wrap { margin-bottom: 20px; }

.nsp-footer__logo-bg {
  display: inline-flex;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 14px 16px;
}

.nsp-footer__logo-img { height: 60px; width: auto; }

.nsp-footer__payoff {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244,239,232,.6);
  max-width: 30em;
}

/* Kolommen 2-4 */
.nsp-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-peach);
  margin-bottom: 16px;
}

.nsp-footer__col-title a {
  text-decoration: none;
  color: var(--c-peach);
}

.nsp-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
}

.nsp-footer__link {
  text-decoration: none;
  color: rgba(244,239,232,.82);
  transition: color .15s;
}

.nsp-footer__link:hover { color: var(--c-inverse); }

.nsp-footer__link--active {
  color: var(--c-inverse);
  font-weight: 700;
}

/* Contactkolom */
.nsp-footer__address {
  font-size: 14.5px;
  color: rgba(244,239,232,.82);
  line-height: 1.6;
}

.nsp-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.nsp-footer__social-btn {
  text-decoration: none;
  color: var(--c-navy);
  background: var(--c-bg);
  width: 34px;
  height: 34px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  transition: opacity .15s;
}

.nsp-footer__social-btn:hover { opacity: .8; }

/* Onderbalk */
.nsp-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(244,239,232,.16);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(244,239,232,.55);
}

.nsp-footer__legal { display: flex; gap: 22px; }

.nsp-footer__legal-link {
  text-decoration: none;
  color: rgba(244,239,232,.55);
  transition: color .15s;
}

.nsp-footer__legal-link:hover { color: rgba(244,239,232,.85); }


/* -------------------------------------------------------------
   8. KNOPPEN
   ------------------------------------------------------------- */

.nsp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 700;
  border-radius: var(--r-xs);
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
  white-space: nowrap;
}

/* Primair (oranje, gevuld) */
.nsp-btn--primary {
  background: var(--c-orange);
  color: #fff;
  font-size: 15px;
  padding: 15px 30px;
}

.nsp-btn--primary:hover { background: var(--c-orange-h); }

/* Primair klein */
.nsp-btn--primary-sm {
  background: var(--c-orange);
  color: #fff;
  font-size: 14px;
  padding: 11px 20px;
}

.nsp-btn--primary-sm:hover { background: var(--c-orange-h); }

/* Donkerblauw (CTA op oranje achtergrond) */
.nsp-btn--navy {
  background: var(--c-navy);
  color: var(--c-inverse);
  font-size: 15px;
  padding: 16px 24px;
}

.nsp-btn--navy:hover { background: #06294A; }

/* Ghost (transparant met rand) op oranje achtergrond */
.nsp-btn--ghost {
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 15px;
  padding: 16px 24px;
  border: 1px solid rgba(255,255,255,.3);
}

.nsp-btn--ghost:hover { background: rgba(255,255,255,.26); }

/* Outline */
.nsp-btn--outline {
  background: transparent;
  color: var(--c-dark);
  font-size: 14px;
  padding: 10px 18px;
  border: 1.5px solid rgba(21,18,15,.25);
}

.nsp-btn--outline:hover { border-color: var(--c-dark); }

/* Tekstlink met oranje onderstreping */
.nsp-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--c-dark);
  border-bottom: 2px solid var(--c-orange);
  padding-bottom: 3px;
  transition: opacity .15s;
}

.nsp-link:hover { opacity: .75; }

/* Tekstlink blauw */
.nsp-link--blue {
  color: var(--c-blue);
  border-bottom-color: var(--c-blue);
}

/* Tekstlink op donkere achtergrond */
.nsp-link--inverse {
  color: var(--c-inverse);
  border-bottom-color: var(--c-orange);
}


/* -------------------------------------------------------------
   9. BADGES & LABELS
   ------------------------------------------------------------- */

/* Eyebrow-label (oranje streepje + tekst) */
.nsp-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-orange);
}

.nsp-label::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--c-orange);
  flex-shrink: 0;
}

.nsp-label--inverse { color: var(--c-peach); }
.nsp-label--inverse::before { background: var(--c-orange); }

/* Categorie-badge */
.nsp-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-xs);
  background: var(--c-orange);
  color: #fff;
}

.nsp-badge--navy    { background: var(--c-navy); }
.nsp-badge--blue    { background: var(--c-blue); }
.nsp-badge--green   { background: var(--c-green); }
.nsp-badge--amber   { background: var(--c-amber); }
.nsp-badge--outline {
  background: transparent;
  border: 1.5px solid currentColor;
}

/* Status-chip (agenda) */
.nsp-status {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nsp-status--open      { color: var(--c-green); }
.nsp-status--binnenkort { color: var(--c-amber); }
.nsp-status--afgerond  { color: var(--c-muted); }


/* -------------------------------------------------------------
   10. SECTIE-HEADERS (eyebrow + kop patroon)
   ------------------------------------------------------------- */

.nsp-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.nsp-section-header--mb-lg { margin-bottom: 38px; }

/* Op mobiel is er geen ruimte naast de titel, dus valt deze link
   (flex-wrap) los onder de titel als een onderstreepte regel die nogal
   op zichzelf staat. De pagina's zelf zijn ook via het hoofdmenu
   bereikbaar, dus we laten 'm op mobiel weg i.p.v. hem er als
   bijzaak bij te laten bungelen. */
@media (max-width: 575.98px) {
  .nsp-section-header > a.nsp-link { display: none; }
}

.nsp-section-header__left { }

.nsp-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 12px;
}

.nsp-section-label::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--c-orange);
  display: inline-block;
  flex-shrink: 0;
}

.nsp-section-label--inverse { color: var(--c-peach); }

/* Rechts uitgelijnde metatekst naast label+titel in een .nsp-section-header
   (bijv. "24 foto's · laatste 12 maanden") */
.nsp-section-header__meta {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-subtle);
}

.nsp-section-title {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
}

.nsp-section-title--lg  { font-size: clamp(32px, 4vw, 52px); }
.nsp-section-title--xl  { font-size: clamp(34px, 4.4vw, 58px); line-height: .98; }
.nsp-section-title--xxl { font-size: clamp(44px, 6vw, 82px);  line-height: .97; }

.nsp-section-intro {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--c-text);
  margin-top: 16px;
}


/* -------------------------------------------------------------
   11. KAARTEN
   ------------------------------------------------------------- */

/* Basis nieuwskaart */
.nsp-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .15s;
}

.nsp-card:hover { border-color: rgba(21,18,15,.3); }

.nsp-card__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }

.nsp-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.nsp-card__date { font-size: 12.5px; color: var(--c-subtle); font-weight: 600; margin-left: auto; }

.nsp-card__title {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.12;
  font-weight: 600;
  margin-bottom: 13px;
}

.nsp-card__excerpt {
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--c-muted);
  margin-bottom: 18px;
}

.nsp-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-dark);
  margin-top: auto;
}

/* Compact nieuwsrij (thumbnail + tekst) */
.nsp-card-row {
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 18px;
  padding: 20px;
  border-bottom: var(--border-s);
  align-items: start;
  transition: background .12s;
}

.nsp-card-row:hover { background: var(--c-off-white); }
.nsp-card-row:last-child { border-bottom: none; }

/* Categorie boven datum i.p.v. naast elkaar — voorkomt dat de rij op
   smallere breedtes (en al helemaal op mobiel) te vol/verdrukt oogt. */
.nsp-card-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 8px;
}

.nsp-card-row__date { font-size: 11.5px; color: var(--c-subtle); }

.nsp-card-row__title {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.22;
  font-weight: 600;
}

/* Nieuwslijstrij (alleen tekst, geen thumbnail) */
.nsp-list-row {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border-bottom: var(--border-s);
  transition: background .12s;
}

.nsp-list-row:hover { background: var(--c-off-white); }
.nsp-list-row:last-child { border-bottom: none; }

.nsp-list-row__meta { display: flex; align-items: center; gap: 10px; }

.nsp-list-row__date { font-size: 12px; color: var(--c-subtle); margin-left: auto; }

.nsp-list-row__title {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
}


/* -------------------------------------------------------------
   12. HERO-SECTIES
   ------------------------------------------------------------- */

/* Pagina-hero (licht) */
.nsp-hero {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 60px var(--gutter) 44px;
}

/* Hero op donkere achtergrond */
.nsp-hero--dark {
  background: var(--c-navy);
  color: var(--c-inverse);
}

.nsp-hero--black {
  background: var(--c-dark);
  color: var(--c-inverse);
}

.nsp-hero__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 70px var(--gutter) 60px;
}

/* Compacte variant voor kleinere paginakoppen (bijv. Nieuws-overzicht) */
.nsp-hero__inner--compact { padding: 52px var(--gutter) 44px; }

.nsp-hero__eyebrow { margin-bottom: 16px; }

.nsp-hero__title {
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .97;
  margin-bottom: 20px;
  overflow-wrap: break-word; /* vangnet: lange woorden (bijv. "sportjournalistiek")
                                worden nooit afgekapt, in het uiterste geval breken
                                ze middenin i.p.v. dat er een letter verdwijnt */
}

.nsp-hero__intro {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(244,239,232,.78);
  max-width: 40em;
}

.nsp-hero__intro--light { color: var(--c-text); }

/* Actiegroep (knop + link) onder een hero-intro */
.nsp-hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Accentwoord binnen een hero-titel, bijv. "...sportjournalistiek." in blauw */
.nsp-hero__title em { color: var(--c-blue); font-style: normal; }

/* Stat-blokken in hero */
.nsp-hero__stats { display: flex; gap: 28px; flex-wrap: wrap; flex-shrink: 0; }

.nsp-stat { text-align: center; }

.nsp-stat__number {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}

.nsp-stat__number em { color: var(--c-orange); font-style: normal; }

.nsp-stat__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244,239,232,.55);
  margin-top: 6px;
}

.nsp-stat__label--light { color: var(--c-muted); }


/* -------------------------------------------------------------
   13. SECTIES (algemeen)
   ------------------------------------------------------------- */

.nsp-section {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 54px var(--gutter) 20px;
}

.nsp-section--lg  { padding-top: 80px; }
.nsp-section--xl  { padding-top: 84px; padding-bottom: 70px; }

/* Sectie op witte achtergrond (volle breedte) */
.nsp-section-white {
  background: var(--c-white);
  border-top: var(--border-m);
  border-bottom: var(--border-m);
}

/* Sectie op navy achtergrond */
.nsp-section-navy {
  background: var(--c-navy);
  color: var(--c-inverse);
}

/* Sectie-inner wrapper */
.nsp-section-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 74px var(--gutter);
}

.nsp-section-inner--lg { padding: 80px var(--gutter); }

@media (max-width: 575.98px) {
  .nsp-section-inner { padding: 48px var(--gutter); }
  .nsp-section-inner--lg { padding: 52px var(--gutter); }
}


/* -------------------------------------------------------------
   14. SCHOT VOOR DE BOEG
   ------------------------------------------------------------- */

.nsp-schot { }

.nsp-schot__grid {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 58px var(--gutter);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: center;
}

.nsp-schot__subtitle {
  font-size: 13px;
  font-weight: 600;
  color: rgba(244,239,232,.6);
  letter-spacing: .04em;
  margin-top: 4px;
}

.nsp-schot__body {
  border-left: 1px solid rgba(244,239,232,.2);
  padding-left: 48px;
}

.nsp-schot__quote {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.32;
  font-weight: 500;
  margin-bottom: 18px;
}

.nsp-schot__intro {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--c-white);
  margin-top: 16px;
}

.nsp-schot__attr {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}

.nsp-schot__dash {
  width: 30px;
  height: 2px;
  background: var(--c-orange);
  display: inline-block;
}

.nsp-schot__name { font-size: 14px; font-weight: 700; }

.nsp-schot__when { font-size: 13.5px; color: rgba(244,239,232,.6); }


/* -------------------------------------------------------------
   15. FOTOESTAFETTE
   ------------------------------------------------------------- */

.nsp-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.nsp-strip::-webkit-scrollbar { display: none; }

.nsp-strip__item {
  text-decoration: none;
  color: inherit;
  flex: 0 0 230px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition: opacity .15s;
}

.nsp-strip__item:hover { opacity: .9; }

.nsp-strip__name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: 11px;
}

.nsp-strip__title {
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--c-muted);
  line-height: 1.3;
  margin-top: 3px;
}

.nsp-strip__when {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-subtle);
  margin-top: 6px;
}

/* Carrousel-knoppen */
.nsp-strip-controls { display: flex; gap: 8px; }

.nsp-strip-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(21,18,15,.22);
  background: var(--c-white);
  cursor: pointer;
  color: var(--c-dark);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}

.nsp-strip-btn:hover { border-color: var(--c-dark); }

.nsp-strip__img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}

/* Strip-item als knop (geen link) i.p.v. <a> — reset button-styling */
button.nsp-strip__item {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.nsp-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.nsp-strip-header__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-subtle);
}


/* -------------------------------------------------------------
   16. AGENDA
   ------------------------------------------------------------- */

.nsp-agenda-row {
  display: grid;
  grid-template-columns: 236px minmax(0,1fr) 190px;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: var(--border-s);
  background: var(--c-white);
}

.nsp-agenda-row:last-child { border-bottom: none; }

.nsp-agenda-row__comp { display: flex; align-items: center; gap: 13px; }

.nsp-agenda-row__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-color, var(--c-dark));
}

.nsp-agenda-row__name { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }

.nsp-agenda-row__kind {
  font-size: 12px;
  color: var(--c-subtle);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.nsp-agenda-row__match {
  font-family: var(--font-serif);
  font-size: 16.5px;
  color: var(--c-text);
}

.nsp-agenda-row__right {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
}

.nsp-agenda-row__when { font-size: 13px; color: var(--c-muted); font-weight: 600; white-space: nowrap; }


/* -------------------------------------------------------------
   17. MEDIASERVICE GRID (4 items)
   ------------------------------------------------------------- */

.nsp-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(244,239,232,.14);
  border: 1px solid rgba(244,239,232,.14);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .nsp-service-grid { grid-template-columns: 1fr; }
}

/* min-width: 0 is nodig omdat grid-items standaard niet smaller worden
   dan hun langste onafbreekbare woord (bijv. "Belangenbehartiging") —
   zonder dit duwt zo'n woord de kolom, en daarmee de hele grid, breder
   dan het scherm op mobiel. */
.nsp-service-item { background: var(--c-navy); padding: 30px 28px; min-width: 0; }

.nsp-service-item__num {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-orange);
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.nsp-service-item__title {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 9px;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}

.nsp-service-item__text {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(244,239,232,.66);
}


/* -------------------------------------------------------------
   18. CATEGORIETABS (sticky filter)
   ------------------------------------------------------------- */

.nsp-tabs {
  position: sticky;
  top: var(--hh);
  z-index: 40;
  background: var(--c-white);
  border-bottom: var(--border-m);
}

.nsp-tabs__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nsp-tabs__inner::-webkit-scrollbar { display: none; }

.nsp-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 18px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
	text-decoration: none;
}

.nsp-tab:hover { color: var(--c-dark); }

.nsp-tab--active {
  color: var(--c-dark);
  border-bottom-color: var(--c-orange);
}


/* -------------------------------------------------------------
   19. ARTIKEL (detail)
   ------------------------------------------------------------- */

.nsp-article-header { max-width: 720px; margin-inline: auto; }

.nsp-article-body {
  max-width: 38em;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.68;
  color: #2A2520;
}

.nsp-article-body p { margin-bottom: 1.4em; }

.nsp-article-body h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 2em;
  margin-bottom: .5em;
  color: var(--c-dark);
}

.nsp-pull-quote,
.nsp-article-body blockquote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  font-weight: 500;
  font-style: italic;
  color: var(--c-navy);
  border-left: 4px solid var(--c-orange);
  padding-left: 24px;
  margin: 2em 0;
}

/* Auteur-card */
.nsp-author-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-lg);
}

.nsp-author-card__img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--c-bg);
}

.nsp-author-card__name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

.nsp-author-card__role { font-size: 12.5px; color: var(--c-muted); font-weight: 600; margin-top: 2px; }

.nsp-author-card__bio {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
  margin-top: 8px;
}


/* -------------------------------------------------------------
   20. AWARDS
   ------------------------------------------------------------- */

.nsp-award-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}

.nsp-award-card:hover {
  border-color: rgba(21,18,15,.25);
  transform: translateY(-2px);
}

.nsp-award-card__header {
  padding: 28px 28px 24px;
  color: var(--c-inverse);
}

.nsp-award-card__body { padding: 24px 28px 28px; flex: 1; display: flex; flex-direction: column; }

.nsp-award-card__winner {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 4px;
}

.nsp-award-card__year { font-size: 13px; color: var(--c-muted); font-weight: 700; }


/* -------------------------------------------------------------
   21. PARTNERBALK
   ------------------------------------------------------------- */

.nsp-partners {
  background: var(--c-white);
  border-top: var(--border-m);
  border-bottom: var(--border-m);
}

.nsp-partners__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 38px var(--gutter);
}

.nsp-partners__label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-subtle);
  margin-bottom: 30px;
}

.nsp-partners__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.5vw, 52px);
  flex-wrap: wrap;
}

/* Aantal partners is CMS-gestuurd (repeat-blok) en dus variabel — bij
   wrapping op mobiel oogt een onvolledige laatste rij (bijv. 3+2) al
   snel scheef. In plaats daarvan op mobiel 1 horizontale, swipebare
   rij: werkt bij elk aantal logo's netjes, logo's blijven leesbaar op
   volledig formaat i.p.v. verkleind om toch te passen. */
@media (max-width: 575.98px) {
  .nsp-partners__logos {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nsp-partners__logos::-webkit-scrollbar { display: none; }
  .nsp-partners__logos img { flex-shrink: 0; }
}


/* -------------------------------------------------------------
   22. LIDMAATSCHAP CTA
   ------------------------------------------------------------- */

.nsp-cta-block {
  background: var(--c-orange);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 48px;
  align-items: center;
}

.nsp-cta-block__title {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 18px;
}

.nsp-cta-block__text {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255,255,255,.9);
  max-width: 32em;
}

.nsp-cta-block__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* -------------------------------------------------------------
   23. MEDIALIJST GRID
   ------------------------------------------------------------- */

.nsp-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1px;
  background: rgba(21,18,15,.1);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.nsp-media-entry { background: var(--c-white); padding: 24px 26px; }

.nsp-media-entry__name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}

.nsp-media-entry__details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nsp-media-entry__web {
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-blue);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nsp-media-entry__email {
  text-decoration: none;
  font-size: 13px;
  color: var(--c-muted);
  font-weight: 500;
}

.nsp-media-entry__tel {
  font-size: 13px;
  color: var(--c-muted);
  font-weight: 500;
}


/* -------------------------------------------------------------
   24. NOTIFICATIEBLOK (agenda)
   ------------------------------------------------------------- */

.nsp-notice {
  background: var(--c-navy);
  color: var(--c-inverse);
  border-radius: var(--r-xl);
  padding: 30px 28px;
}

.nsp-notice__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-peach);
  margin-bottom: 16px;
}

.nsp-notice__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-orange);
}

.nsp-notice__date { font-size: 12.5px; color: rgba(244,239,232,.6); font-weight: 600; margin-bottom: 8px; }

.nsp-notice__title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.16; margin-bottom: 12px; }

.nsp-notice__text {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(244,239,232,.82);
}


/* -------------------------------------------------------------
   25. DISCLAIMER / INFO-BLOK
   ------------------------------------------------------------- */

.nsp-info {
  padding: 20px 24px;
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-lg);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 40px;
}

.nsp-info__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--c-orange);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  margin-top: 1px;
}

.nsp-info__text {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
}


/* -------------------------------------------------------------
   26. FORMULIER
   ------------------------------------------------------------- */

.nsp-form { display: flex; flex-direction: column; gap: 18px; }

.nsp-field { display: flex; flex-direction: column; gap: 6px; }

.nsp-label-field {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-dark);
  letter-spacing: .01em;
}

.nsp-input,
.nsp-select,
.nsp-textarea {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--c-dark);
  background: var(--c-white);
  border: 1.5px solid rgba(21,18,15,.2);
  border-radius: var(--r-xs);
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}

.nsp-input:focus,
.nsp-select:focus,
.nsp-textarea:focus { border-color: var(--c-blue); }

.nsp-textarea { resize: vertical; min-height: 140px; }

/* Eigen pijltje i.p.v. het per-besturingssysteem verschillende
   standaard select-uiterlijk */
.nsp-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236F675D' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 9px;
  padding-right: 40px;
  cursor: pointer;
}

/* Feedback-container (contactformulier): alleen ruimte eronder als er
   ook echt een succes-/foutmelding in staat, geen lege marge bij het
   eerste laden van de pagina */
#c-feedback:not(:empty) { margin-bottom: 24px; }

.nsp-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--c-text);
}

.nsp-checkbox-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }


/* -------------------------------------------------------------
   27. RESPONSIVE
   ------------------------------------------------------------- */

/* Bootstrap lg breakpoint: < 992px (tablet en kleiner) */
@media (max-width: 991.98px) {
  .nsp-nav { display: none; }
  .nsp-burger { display: inline-flex; }

  .nsp-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .nsp-schot__grid {
    grid-template-columns: 1fr;
  }

  .nsp-schot__body {
    border-left: none;
    border-top: 1px solid rgba(244,239,232,.2);
    padding-left: 0;
    padding-top: 32px;
  }

  .nsp-cta-block {
    grid-template-columns: 1fr;
  }
}

/* Bootstrap sm breakpoint: < 576px (mobiel) */
@media (max-width: 575.98px) {
  :root { --gutter: 18px; }

  /* Vaste 60/44px hero-padding en 54px sectie-top-padding stapelen
     samen op tot bijna 100px lege ruimte tussen de hero en de
     eerstvolgende sectie. Zonder kleurverschil tussen beide (allebei
     op de standaard achtergrond) oogt dat op mobiel als te veel wit. */
  .nsp-hero { padding: 36px var(--gutter) 28px; }
  .nsp-section { padding-top: 36px; }
  .nsp-section--lg { padding-top: 48px; }
  .nsp-section--xl { padding-top: 48px; padding-bottom: 44px; }

  .nsp-footer__grid {
    grid-template-columns: 1fr;
  }

  .nsp-agenda-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .nsp-agenda-row__right { justify-content: flex-start; }
}


/* -------------------------------------------------------------
   28. PAGINA-HEADER (juridisch, over, contact)
   ------------------------------------------------------------- */

.nsp-page-header {
  background: var(--c-white);
  border-bottom: var(--border-m);
}

.nsp-page-header__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 52px var(--gutter) 48px;
}

.nsp-page-header__title {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 18px;
}

.nsp-page-header__intro {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-muted);
  max-width: 52em;
}

.nsp-page-header__meta {
  font-size: 13px;
  color: var(--c-subtle);
  margin-top: 14px;
}


/* -------------------------------------------------------------
   29. REDACTIONELE CONTENT (artikelen, legal)
   ------------------------------------------------------------- */

.nsp-content {
  max-width: 780px;
  margin-inline: auto;
  padding: 56px var(--gutter) 80px;
}

.nsp-content__section { margin-bottom: 48px; }
.nsp-content__section--sm { margin-bottom: 32px; }

.nsp-content__h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}

.nsp-content__h2--mb-lg { margin-bottom: 20px; }

.nsp-content__h3-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.nsp-content__h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.nsp-content__p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-text);
}

.nsp-content__p + .nsp-content__p { margin-top: 14px; }
.nsp-content__p--mb   { margin-bottom: 14px; }
.nsp-content__p--mb-md { margin-bottom: 16px; }
.nsp-content__p--mb-lg { margin-bottom: 20px; }
.nsp-content__p--mb-xl { margin-bottom: 24px; }
.nsp-content__p--sm   { font-size: 16px; }

.nsp-content__meta {
  font-size: 13px;
  color: var(--c-subtle);
  margin-top: 10px;
}

.nsp-content__link { color: var(--c-blue); }


/* -------------------------------------------------------------
   30. DATA-TABEL (cookies, ledenlijst)
   ------------------------------------------------------------- */

.nsp-table-wrap {
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.nsp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.nsp-table thead tr { background: var(--c-bg); }

.nsp-table th {
  padding: 11px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--c-dark);
  border-bottom: 1px solid rgba(21,18,15,.1);
}

.nsp-table td {
  padding: 12px 16px;
  color: var(--c-text);
  border-bottom: 1px solid rgba(21,18,15,.06);
  background: var(--c-white);
}

.nsp-table tr:last-child td { border-bottom: none; }

.nsp-table__code {
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--c-navy);
}

.nsp-table__muted { color: var(--c-muted); }


/* -------------------------------------------------------------
   31. INFO-BOX (grijs blok onderaan legal pagina's)
   ------------------------------------------------------------- */

.nsp-info-box {
  padding: 28px;
  background: var(--c-bg);
  border-radius: var(--r-lg);
  border: var(--border-s);
}

.nsp-info-box__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.nsp-info-box__text {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}


/* -------------------------------------------------------------
   32. 404-PAGINA
   ------------------------------------------------------------- */

.nsp-404 {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 80px var(--gutter) 100px;
  text-align: center;
}

.nsp-404__number {
  font-size: clamp(100px, 18vw, 200px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  color: var(--c-orange);
  margin-bottom: 8px;
}

.nsp-404__title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}

.nsp-404__text {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-muted);
  max-width: 38em;
  margin-inline: auto;
  margin-bottom: 44px;
}

.nsp-404__links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
}

.nsp-404__link {
  text-decoration: none;
  color: var(--c-dark);
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 14.5px;
  transition: border-color .15s, background .15s;
}

.nsp-404__link:hover {
  border-color: var(--c-orange);
  background: var(--c-off-white);
}

.nsp-404__link-arrow {
  color: var(--c-orange);
  font-size: 18px;
  flex-shrink: 0;
  transition: transform .15s;
}

.nsp-404__link:hover .nsp-404__link-arrow {
  transform: translateX(3px);
}


/* -------------------------------------------------------------
   33. IMAGE PLACEHOLDER (handoff — wordt vervangen door CMS-afbeeldingen)
   ------------------------------------------------------------- */

.nsp-img-ph {
  background: repeating-linear-gradient(
    135deg,
    #e7ded1, #e7ded1 14px,
    #ded3c2 14px, #ded3c2 28px
  );
  display: block;
}

.nsp-img-ph--sm  { border-radius: 50%; }
.nsp-img-ph--rect { border-radius: var(--r-xl); }

/* Utility: foto volledig tonen i.p.v. bijsnijden — per foto in te schakelen */
.nsp-img-fit-contain {
  object-fit: contain !important;
  background: var(--c-dark);
}

.nsp-img-position {
  object-position: var(--img-pos, center);
}

/* Utility: vaste focuspunten als losse classes, voor als je liever één
   vaste classnaam vanuit de database meegeeft dan een berekende waarde. */
.nsp-img-pos-top    { object-position: top !important; }
.nsp-img-pos-center { object-position: center !important; }
.nsp-img-pos-bottom { object-position: bottom !important; }

/* -------------------------------------------------------------
   34. OVER-PAGINA — hero, stats, missie, pijlers, bestuur,
       redactie, partners, documenten, lidmaatschap CTA
   ------------------------------------------------------------- */

/* ── Over-hero (dark) ──────────────────────────────────── */

.nsp-over-hero {
  background: var(--c-navy);
  color: var(--c-inverse);
  position: relative;
  overflow: hidden;
}

.nsp-over-hero__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 80px var(--gutter) 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.nsp-over-hero__h1 {
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.035em;
  margin-bottom: 26px;
}

.nsp-over-hero__intro {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  color: rgba(244,239,232,.74);
  max-width: 34em;
  margin-bottom: 36px;
}

.nsp-over-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.nsp-over-hero__img {
  width: 100%;
  height: 420px;
  border-radius: var(--r-xl);
  position: relative;
	flex-shrink: 0;
  object-fit: cover;
  display: block;
}

/* ── Stats bar (orange) ───────────────────────────────── */

.nsp-stats-bar { background: var(--c-orange); }

.nsp-stats-bar__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.nsp-stats-bar__item {
  padding: 26px 28px;
  border-right: 1px solid rgba(255,255,255,.22);
}

.nsp-stats-bar__item:last-child { border-right: none; }

.nsp-stats-bar__value {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
}

.nsp-stats-bar__label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── Missie & visie ───────────────────────────────────── */

.nsp-missie__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 88px var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.nsp-missie__h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 26px;
}

.nsp-missie__p {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--c-text);
  margin-bottom: 20px;
}
.nsp-missie__p:last-child { margin-bottom: 0; }

.nsp-missie__cards { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }

.nsp-missie-card {
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-lg);
  padding: 28px 28px 30px;
  border-left: 4px solid transparent;
}

.nsp-missie-card--navy   { border-left-color: var(--c-navy); }
.nsp-missie-card--orange { border-left-color: var(--c-orange); }
.nsp-missie-card--blue   { border-left-color: var(--c-blue); }

.nsp-missie-card__lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.nsp-missie-card--navy   .nsp-missie-card__lbl { color: var(--c-navy); }
.nsp-missie-card--orange .nsp-missie-card__lbl { color: var(--c-orange); }
.nsp-missie-card--blue   .nsp-missie-card__lbl { color: var(--c-blue); }

.nsp-missie-card__p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-dark);
  margin: 0;
}

/* ── Vier pijlers ─────────────────────────────────────── */

.nsp-pillars-section {
  background: var(--c-white);
  border-top: var(--border-m);
  border-bottom: var(--border-m);
  margin-top: 88px;
}

.nsp-pillars-section__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 72px var(--gutter);
}

.nsp-pillars-intro {
  text-align: center;
  max-width: 38em;
  margin: 0 auto 52px;
}

.nsp-pillars-intro__p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-text);
  margin-top: 16px;
}

.nsp-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(21,18,15,.1);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.nsp-pillar {
  background: var(--c-bg);
  padding: 36px 30px 40px;
}

.nsp-pillar__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-size: 22px;
}

.nsp-pillar__num {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-orange);
  letter-spacing: .04em;
  margin-bottom: 12px;
}

.nsp-pillar__title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}

.nsp-pillar__body {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}

/* ── Quote-banner (foto met overlay) ─────────────────── */

.nsp-quote-banner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 80px var(--gutter) 0;
}

.nsp-quote-banner__wrap {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  height: clamp(280px, 35vw, 460px);
}

.nsp-quote-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nsp-quote-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(9,60,104,.82) 0%,
    rgba(9,60,104,.2) 55%,
    rgba(9,60,104,0) 100%
  );
  display: flex;
  align-items: center;
}

.nsp-quote-banner__body { max-width: 42%; padding: 48px; }

.nsp-quote-banner__text {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.32;
  color: var(--c-inverse);
  font-weight: 500;
  margin-bottom: 18px;
}

.nsp-quote-banner__attr {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-inverse);
}

.nsp-quote-banner__attr::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--c-orange);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Bestuur ──────────────────────────────────────────── */

.nsp-bestuur__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 80px var(--gutter) 0;
}

.nsp-bestuur__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.nsp-bestuur__h2 {
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
}

.nsp-bestuur__docs-link {
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-dark);
  border-bottom: 2px solid var(--c-orange);
  padding-bottom: 3px;
  white-space: nowrap;
}

/* Voorzitter — groot */
.nsp-chairman {
  background: var(--c-navy);
  color: var(--c-inverse);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 340px 1fr;
  margin-bottom: 24px;
}

.nsp-chairman__img { position: relative; }

.nsp-chairman__img .nsp-img-ph {
  width: 100%;
  height: 100%;
  min-height: 340px;
}

.nsp-chairman__img img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}

.nsp-chairman__body {
  padding: clamp(32px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nsp-chairman__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-peach);
  margin-bottom: 12px;
}

.nsp-chairman__name {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.nsp-chairman__bio {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(244,239,232,.78);
  max-width: 36em;
  margin: 0;
}

/* Overig bestuursgrid */
.nsp-board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.nsp-board-card {
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nsp-board-card__img .nsp-img-ph { width: 100%; height: 220px; }

.nsp-board-card__img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background: var(--c-bg);
}

.nsp-board-card__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nsp-board-card__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 6px;
}

.nsp-board-card__name {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}

.nsp-board-card__org {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-subtle);
  margin-bottom: 10px;
}

.nsp-board-card__bio {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-muted);
  margin: auto 0 0;
}

/* ── Redactie ─────────────────────────────────────────── */

.nsp-redactie {
  background: var(--c-white);
  border-top: var(--border-m);
  border-bottom: var(--border-m);
  margin-top: 72px;
}

.nsp-redactie__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 64px var(--gutter);
}

.nsp-editor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.nsp-editor-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 20px;
  border: var(--border-s);
  border-radius: var(--r-lg);
  background: var(--c-bg);
}

.nsp-editor-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  background: var(--c-bg);
}

.nsp-editor-card__name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
}

.nsp-editor-card__role {
  font-size: 12px;
  color: var(--c-muted);
  font-weight: 600;
  margin-top: 2px;
}

/* ── Partners (Over-pagina: "Internationale verbanden & partners") ──
   Eigen naam i.p.v. .nsp-partners__inner — die class hoort al bij de
   PARTNERBALK (sectie 21, homepage-logostrip in .nsp-partners) en had
   hier per ongeluk dezelfde naam gekregen. Doordat deze regel later
   in het bestand staat, overschreef 'm de 38px-symmetrische padding
   van de homepage-balk met deze 72px-top/0-onder padding — vandaar
   de "te veel wit boven, te weinig onder" op de homepage. ── */

.nsp-about-partners__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 72px var(--gutter) 0;
}

.nsp-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.nsp-partner-card {
  text-decoration: none;
  color: inherit;
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-lg);
  padding: 28px 28px 30px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  transition: border-color .15s;
}

.nsp-partner-card:hover { border-color: rgba(21,18,15,.3); }

.nsp-partner-card__abbr {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--c-inverse);
  letter-spacing: .04em;
}

.nsp-partner-card__name {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

.nsp-partner-card__scope {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-orange);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 10px;
}

.nsp-partner-card__desc {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-muted);
  margin: 0;
}

.nsp-media-row {
  border-top: var(--border-m);
  padding-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.nsp-media-row__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  flex-shrink: 0;
}

.nsp-media-row__names {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  opacity: .55;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
}

/* ── Documenten / downloads ───────────────────────────── */

.nsp-docs__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 72px var(--gutter) 0;
}

.nsp-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.nsp-doc-card {
  text-decoration: none;
  color: inherit;
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-lg);
  padding: 22px 22px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: border-color .15s;
}

.nsp-doc-card:hover { border-color: rgba(21,18,15,.3); }

.nsp-doc-card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  color: var(--c-inverse);
  letter-spacing: .04em;
}

.nsp-doc-card__title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.nsp-doc-card__date {
  font-size: 12.5px;
  color: var(--c-subtle);
  font-weight: 600;
}

/* ── Lidmaatschap CTA ─────────────────────────────────── */

.nsp-lid-cta__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 72px var(--gutter) 88px;
}

.nsp-lid-cta {
  background: var(--c-orange);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 48px;
  align-items: center;
}

.nsp-lid-cta__h2 {
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 18px;
}

.nsp-lid-cta__p {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255,255,255,.9);
  max-width: 32em;
  margin: 0;
}

.nsp-lid-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* -------------------------------------------------------------
   35. CONTACT-PAGINA — hero, channels, formulier, FAQ, kaart
   ------------------------------------------------------------- */

/* ── Contact-hero (navy) ──────────────────────────────── */

.nsp-contact-hero {
  background: var(--c-navy);
  color: var(--c-inverse);
}

.nsp-contact-hero__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 64px var(--gutter) 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.nsp-contact-hero__h1 {
  font-size: clamp(40px, 5.5vw, 70px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.035em;
  margin-bottom: 22px;
}

.nsp-contact-hero__intro {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: rgba(244,239,232,.74);
  max-width: 34em;
  margin: 0;
}

/* Contactinfo-cards (rechts in hero) */
.nsp-contact-info-cards { display: flex; flex-direction: column; gap: 14px; }

.nsp-contact-info-card {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: rgba(244,239,232,.07);
  border: 1px solid rgba(244,239,232,.15);
  border-radius: var(--r-lg);
  color: var(--c-inverse);
  transition: background .15s;
}

.nsp-contact-info-card:hover { background: rgba(244,239,232,.12); }
a.nsp-contact-info-card       { cursor: pointer; }

.nsp-contact-info-card--static { cursor: default; }
.nsp-contact-info-card--static:hover { background: rgba(244,239,232,.07); }

.nsp-contact-info-card__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

.nsp-contact-info-card__icon--orange { background: var(--c-orange); }
.nsp-contact-info-card__icon--blue   { background: var(--c-blue); }
.nsp-contact-info-card__icon--dark   { background: var(--c-dark); }

.nsp-contact-info-card__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-peach);
  margin-bottom: 4px;
}

.nsp-contact-info-card__val {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-inverse);
}

.nsp-contact-info-card__sub {
  font-size: 12.5px;
  color: rgba(244,239,232,.55);
  margin-top: 2px;
}

/* ── Channels per onderwerp ───────────────────────────── */

.nsp-channels__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 72px var(--gutter) 0;
}

.nsp-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.nsp-channel-card {
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-xl);
  padding: 32px 30px 34px;
  display: flex;
  flex-direction: column;
}

.nsp-channel-card__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.nsp-channel-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
}

.nsp-channel-card__title {
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -.01em;
  margin-bottom: 5px;
}

.nsp-channel-card__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nsp-channel-card p {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  margin-bottom: 22px;
}

.nsp-channel-card ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.nsp-channel-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--c-text);
  font-weight: 500;
}

.nsp-channel-card li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-orange);
  flex-shrink: 0;
}
.nsp-channel-card__footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: var(--border-s);
}

.nsp-channel-card__cta {
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-dark);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid var(--c-orange);
  padding-bottom: 2px;
}

.nsp-channel-card__cta-arrow { color: var(--c-orange); }

/* ── Formulier + sidebar layout ───────────────────────── */

.nsp-contact-form__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 72px var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

.nsp-form-card {
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-xl);
  padding: 36px 36px 40px;
}

.nsp-form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.nsp-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.nsp-form-required {
  font-size: 12.5px;
  color: var(--c-subtle);
  font-weight: 600;
}

.nsp-form-required mark {
  background: none;
  color: var(--c-orange);
  font-style: normal;
}

/* ── Contact-sidebar ──────────────────────────────────── */

.nsp-contact-sidebar {
  position: sticky;
  top: calc(var(--hh) + 20px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Adreskaart (donker) */
.nsp-address-card {
  background: var(--c-dark);
  color: var(--c-inverse);
  border-radius: var(--r-xl);
  padding: 28px 26px 30px;
}

.nsp-address-card__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-peach);
  margin-bottom: 16px;
}

.nsp-address-card__addr {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(244,239,232,.9);
  margin-bottom: 18px;
}

.nsp-address-card__contacts { display: flex; flex-direction: column; gap: 10px; }

.nsp-address-card__contact {
  text-decoration: none;
  color: rgba(244,239,232,.82);
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 14px;
}

.nsp-address-card__contact-abbr { color: var(--c-peach); }

.nsp-address-card__hours {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(244,239,232,.14);
}

.nsp-address-card__hours-lbl {
  font-size: 12px;
  font-weight: 700;
  color: rgba(244,239,232,.5);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}

.nsp-address-card__hours-val {
  font-size: 13.5px;
  color: rgba(244,239,232,.74);
  line-height: 1.5;
}

.nsp-address-card__social {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.nsp-address-card__social-btn {
  text-decoration: none;
  color: var(--c-navy);
  background: var(--c-inverse);
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

/* Service Punt kaart */
.nsp-service-card {
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-xl);
  padding: 24px 24px 26px;
}

.nsp-service-card__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 10px;
}

.nsp-service-card__title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.nsp-service-card__p {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-text);
  margin-bottom: 16px;
}

/* Reactietermijnen kaart */
.nsp-response-card {
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-xl);
  padding: 22px 22px 24px;
}

.nsp-response-card__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 12px;
}

.nsp-response-rows { display: flex; flex-direction: column; gap: 0; }

.nsp-response-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  padding-bottom: 10px;
  border-bottom: var(--border-s);
  padding-top: 0;
}

.nsp-response-row:last-child { border-bottom: none; padding-bottom: 0; }
.nsp-response-row + .nsp-response-row { padding-top: 10px; }

.nsp-response-row__key {
  color: var(--c-text);
  font-weight: 600;
}

.nsp-response-row__val {
  font-weight: 700;
  color: var(--c-dark);
}

/* ── Bestuur direct contactbaar ───────────────────────── */

.nsp-board-contact__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 72px var(--gutter) 0;
}

.nsp-board-contact__intro {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-text);
  margin-bottom: 30px;
  max-width: 44em;
}

.nsp-board-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.nsp-board-contact-card {
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-lg);
  padding: 22px 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nsp-board-contact-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nsp-board-contact-card__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 4px;
}

.nsp-board-contact-card__name {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 2px;
}

.nsp-board-contact-card__email {
  text-decoration: none;
  font-size: 13px;
  color: var(--c-blue);
  font-weight: 600;
}

/* ── Veelgestelde vragen ──────────────────────────────── */

.nsp-faq-section {
  background: var(--c-white);
  border-top: var(--border-m);
  border-bottom: var(--border-m);
  margin-top: 72px;
}

.nsp-faq-section__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 64px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.nsp-faq-intro__h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 20px;
}

.nsp-faq-intro__p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}

.nsp-faq-list {
  display: flex;
  flex-direction: column;
  border: var(--border-s);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.nsp-faq-item {
  padding: 20px 22px;
  border-bottom: var(--border-s);
}

.nsp-faq-item:last-child { border-bottom: none; }

.nsp-faq-item__q {
  font-weight: 700;
  font-size: 15.5px;
  margin-bottom: 8px;
}

.nsp-faq-item__a {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-muted);
  margin: 0;
}

/* ── Kaartplaatshouder ────────────────────────────────── */

.nsp-map__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 64px var(--gutter) 88px;
}

.nsp-map__placeholder {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  height: 300px;
  background: repeating-linear-gradient(
    135deg,
    #e7ded1, #e7ded1 14px,
    #ded3c2 14px, #ded3c2 28px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.nsp-map__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.nsp-map__label { text-align: center; }

.nsp-map__label-icon { font-size: 36px; margin-bottom: 10px; }

.nsp-map__label-text {
  font-weight: 700;
  font-size: 16px;
  color: var(--c-muted);
}

.nsp-map__label-sub {
  font-size: 13px;
  color: var(--c-subtle);
  margin-top: 4px;
}

.nsp-map__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--c-navy);
  color: var(--c-inverse);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
}


/* -------------------------------------------------------------
   36. RESPONSIVE — Over + Contact
   ------------------------------------------------------------- */

@media (max-width: 991.98px) {
  /* Over-hero */
  .nsp-over-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .nsp-over-hero__img   { height: 280px; }

  /* Stats bar */
  .nsp-stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .nsp-stats-bar__item  { border-right: none; border-bottom: 1px solid rgba(255,255,255,.22); }
  .nsp-stats-bar__item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.22); }
  .nsp-stats-bar__item:last-child,
  .nsp-stats-bar__item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  /* Missie */
  .nsp-missie__inner { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; }

  /* Pijlers */
  .nsp-pillars { grid-template-columns: repeat(2, 1fr); }

  /* Chairman */
  .nsp-chairman { grid-template-columns: 1fr; }
  .nsp-chairman__img .nsp-img-ph { min-height: 260px; }

  /* Board grid */
  .nsp-board-grid { grid-template-columns: repeat(2, 1fr); }

  /* Editor grid */
  .nsp-editor-grid { grid-template-columns: repeat(2, 1fr); }

  /* Partner grid */
  .nsp-partner-grid { grid-template-columns: 1fr; }

  /* Doc grid */
  .nsp-doc-grid { grid-template-columns: repeat(2, 1fr); }

  /* Lid CTA */
  .nsp-lid-cta { grid-template-columns: 1fr; gap: 28px; }

  /* Contact hero */
  .nsp-contact-hero__inner { grid-template-columns: 1fr; gap: 36px; }

  /* Channels */
  .nsp-channel-grid { grid-template-columns: 1fr; }

  /* Form layout */
  .nsp-contact-form__inner { grid-template-columns: 1fr; }
  .nsp-contact-sidebar     { position: static; }

  /* Board contact */
  .nsp-board-contact-grid { grid-template-columns: 1fr; }

  /* FAQ */
  .nsp-faq-section__inner { grid-template-columns: 1fr; gap: 32px; }

  /* Quote banner */
  .nsp-quote-banner__body { max-width: 60%; }
}

@media (max-width: 575.98px) {
  .nsp-pillars         { grid-template-columns: 1fr; }
  .nsp-board-grid      { grid-template-columns: 1fr; }
  .nsp-editor-grid     { grid-template-columns: 1fr; }
  .nsp-doc-grid        { grid-template-columns: 1fr; }
  .nsp-form-2col       { grid-template-columns: 1fr; }
  .nsp-stats-bar__inner { grid-template-columns: 1fr; }
  .nsp-stats-bar__item  { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.22); }
  .nsp-stats-bar__item:last-child { border-bottom: none; }
  .nsp-quote-banner__body { max-width: 80%; padding: 24px; }
}

/* -------------------------------------------------------------
   37. AWARDS-OVERZICHT — hero, ankernavigatie, awardpanelen, CTA
   ------------------------------------------------------------- */

/* ── Hero met ankernavigatie ──────────────────────────── */

.nsp-awards-hero {
  background: var(--c-dark);
  color: var(--c-inverse);
}

.nsp-awards-hero__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 60px var(--gutter) 0;
}

.nsp-awards-hero__intro {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: rgba(244,239,232,.72);
  max-width: 38em;
  margin-top: 22px;
}

.nsp-award-tabs {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: 38px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-top: 1px solid rgba(244,239,232,.1);
  scrollbar-width: none;
}

.nsp-award-tabs::-webkit-scrollbar { display: none; }

.nsp-award-tab {
  text-decoration: none;
  flex-shrink: 0;
  padding: 16px 22px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(244,239,232,.6);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s;
}

.nsp-award-tab:hover { color: var(--c-inverse); }

.nsp-award-tab.active {
  color: var(--c-inverse);
  border-bottom-color: var(--c-inverse);
}


/* ── Groot awardpaneel (top 2 winnaars) ───────────────── */

.nsp-award-panel {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 72px var(--gutter) 0;
}

.nsp-award-panel--tight { padding-top: 40px; }

.nsp-award-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* Als het hele paneel een link is (bijv. het evenementenblok op de
   homepage) i.p.v. een niet-klikbare div */
a.nsp-award-panel__grid { text-decoration: none; color: inherit; transition: border-color .15s; }
a.nsp-award-panel__grid:hover { border-color: rgba(21,18,15,.3); }

.nsp-award-panel__body {
  padding: clamp(36px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Eyebrow-kleur volgt de award-accent i.p.v. de standaard oranje van .nsp-section-label */
.nsp-section-label--accent { color: var(--award-accent, var(--c-orange)); }

.nsp-award-panel__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-subtle);
  margin: 16px 0 10px;
}

.nsp-award-panel__name {
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 18px;
}

.nsp-award-panel__desc {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-text);
  margin-bottom: 26px;
}

.nsp-award-panel__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.nsp-award-panel__img {  position: relative; height: 420px; }
.nsp-award-panel__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nsp-award-card-compact__img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.nsp-award-panel__credit {
  position: absolute;
  bottom: 18px;
  background: rgba(21,18,15,.72);
  backdrop-filter: blur(6px);
  color: var(--c-inverse);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
}

.nsp-award-panel__credit--left  { left: 18px; }
.nsp-award-panel__credit--right { right: 18px; }

/* Knop in award-accentkleur (varieert per award, zie --award-accent) */
.nsp-btn--award {
  background: var(--award-accent, var(--c-orange));
  color: #fff;
  font-size: 14px;
  padding: 13px 22px;
}

.nsp-btn--award:hover { filter: brightness(.92); }

/* ── Compacte awardkaarten (overige 3) ────────────────── */

.nsp-award-grid {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 40px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.nsp-award-card-compact {
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nsp-award-card-compact__img { position: relative; }

.nsp-award-card-compact__img .nsp-img-ph { width: 100%; height: 220px; }

.nsp-award-card-compact__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-xs);
  background: var(--award-accent, var(--c-dark));
  color: var(--c-inverse);
}

.nsp-award-card-compact__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nsp-award-card-compact__year {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--award-accent, var(--c-muted));
  margin-bottom: 8px;
}

.nsp-award-card-compact__name {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.nsp-award-card-compact__desc {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--c-text);
  margin-bottom: 18px;
  flex: 1;
}

.nsp-award-card-compact__link {
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--award-accent, var(--c-dark));
  border-bottom: 2px solid var(--award-accent, var(--c-dark));
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Uitreikingsevenement CTA ──────────────────────────── */

.nsp-award-event {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 60px var(--gutter) 80px;
}

.nsp-award-event__box {
  background: var(--c-navy);
  color: var(--c-inverse);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.nsp-award-event__title {
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 20px;
}

.nsp-award-event__desc {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(244,239,232,.74);
  margin-bottom: 28px;
}

.nsp-award-event__facts { display: flex; flex-direction: column; gap: 18px; }

.nsp-award-event__fact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(244,239,232,.07);
  border-radius: var(--r-md);
  border: 1px solid rgba(244,239,232,.12);
}

.nsp-award-event__fact-icon {
  font-size: 22px;
  font-weight: 900;
  color: var(--c-peach);
  min-width: 48px;
}

.nsp-award-event__fact-title { font-weight: 700; font-size: 15px; }

.nsp-award-event__fact-sub {
  font-size: 13px;
  color: rgba(244,239,232,.6);
  margin-top: 2px;
}


/* -------------------------------------------------------------
   38. AWARD DETAIL-PAGINA — header, winnaar, archief, andere awards
   ------------------------------------------------------------- */

/* ── Broodkruimel ──────────────────────────────────────── */

.nsp-award-breadcrumb {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 18px var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-subtle);
}

.nsp-award-breadcrumb a { text-decoration: none; color: var(--c-subtle); }
.nsp-award-breadcrumb__current { color: var(--c-muted); }

/* ── Paginakop met award-accentkleur ──────────────────── */
/* Achtergrondkleur volgt --award-accent, ingesteld op <main> of de sectie zelf */

.nsp-award-detail-header {
  background: var(--award-accent, var(--c-navy));
  color: var(--c-inverse);
/*  margin-top: 20px; */
}

.nsp-award-detail-header__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 52px var(--gutter) 46px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.nsp-award-detail-header__title {
  font-size: clamp(36px, 5vw, 66px);
  line-height: .96;
  font-weight: 900;
  letter-spacing: -.035em;
  margin-bottom: 20px;
}

.nsp-award-detail-header__desc {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(244,239,232,.72);
  max-width: 34em;
}

.nsp-award-facts { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

.nsp-award-fact {
  background: rgba(244,239,232,.08);
  border: 1px solid rgba(244,239,232,.15);
  border-radius: var(--r-md);
  padding: 20px 22px;
}

.nsp-award-fact__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-peach);
  margin-bottom: 6px;
}

.nsp-award-fact__value { font-size: 22px; font-weight: 900; }
.nsp-award-fact__value--sm { font-size: 16px; font-weight: 700; }
.nsp-award-fact__value--quote {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-serif);
  font-style: italic;
}

/* ── Winnaar huidig jaar ───────────────────────────────── */

.nsp-award-winner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 64px var(--gutter) 0;
}

.nsp-award-winner__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 32px;
}

/* Geen foto beschikbaar: tekst over de volle breedte i.p.v. uitgerekt/leeg vak */
.nsp-award-winner__grid--no-foto { grid-template-columns: 1fr; }

.nsp-award-winner__grid--no-foto .nsp-award-winner__body {
  max-width: 780px;
  margin-inline: auto;
}

.nsp-award-winner__img { position: relative; min-height: 480px; }

.nsp-award-winner__img .nsp-img-ph { width: 100%; height: 100%; }

.nsp-award-winner__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nsp-award-winner__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,18,15,.6) 0%, rgba(21,18,15,0) 50%);
  pointer-events: none;
}

.nsp-award-winner__img-caption { position: absolute; bottom: 20px; left: 20px; right: 20px; }

.nsp-award-winner__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-xs);
  margin-bottom: 10px;
}

.nsp-award-winner__credit { color: var(--c-inverse); font-size: 13px; font-weight: 600; }

.nsp-award-winner__body {
  padding: clamp(36px, 4.5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nsp-award-winner__name {
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 12px;
}

.nsp-award-winner__role {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 24px;
}

.nsp-award-winner__citation {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text);
  margin-bottom: 28px;
}

.nsp-award-winner__body .quote {
  border-left: 3px solid var(--c-orange);
  padding: 16px 20px;
  background: var(--c-off-white);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 28px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text);
  font-style: italic;
}

.nsp-award-winner__body .quote span {
  display: block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-orange);
  font-style: normal;
}

/* Donkere knop (juryrapport) */
.nsp-btn--dark {
  background: var(--c-dark);
  color: var(--c-inverse);
  font-size: 13.5px;
  padding: 12px 20px;
}

.nsp-btn--dark:hover { background: #000; }

/* ── Winnaarsarchief ───────────────────────────────────── */

.nsp-award-archive {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 72px var(--gutter) 0;
}

.nsp-award-archive__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.nsp-award-archive__count { font-size: 13.5px; color: var(--c-subtle); font-weight: 600; }

.nsp-award-archive__table {
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.12);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.nsp-award-archive-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  border-bottom: 1px solid rgba(21,18,15,.08);
  transition: background .12s;
}

.nsp-award-archive-row:last-child { border-bottom: none; }
.nsp-award-archive-row:hover { background: var(--c-off-white); }

.nsp-award-archive-row__year {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--c-muted);
}

.nsp-award-archive-row--recent .nsp-award-archive-row__year {
  background: var(--award-accent);
  color: var(--c-inverse);
}

.nsp-award-archive-row__main { padding: 18px 22px; display: flex; align-items: center; gap: 18px; }
.nsp-award-archive-row__name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.nsp-award-archive-row__role { font-size: 13px; color: var(--c-muted); font-weight: 600; margin-top: 3px; }

.nsp-award-archive-row__pdf {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  gap: 12px;
}

.nsp-award-archive-row__pdf-link {
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-blue);
  border-bottom: 1.5px solid var(--c-blue);
  padding-bottom: 1px;
  white-space: nowrap;
}

.nsp-award-archive__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--c-subtle);
  font-weight: 500;
}

/* ── Andere awards nav ─────────────────────────────────── */

.nsp-award-others {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 64px var(--gutter) 80px;
}

.nsp-award-others__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.nsp-award-other-card {
  text-decoration: none;
  color: inherit;
  padding: 18px 18px 20px;
  background: var(--c-white);
  border: var(--border-s);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s;
}

.nsp-award-other-card:hover { border-color: rgba(21,18,15,.3); }

.nsp-award-other-card__bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--award-accent, var(--c-orange));
}

.nsp-award-other-card__name { font-weight: 800; font-size: 15px; letter-spacing: -.01em; line-height: 1.2; }

.nsp-award-other-card__winner { font-size: 12.5px; color: var(--c-muted); font-weight: 600; margin-top: 2px; }
.nsp-award-other-card__winner strong { color: var(--c-dark); font-weight: 700; }


/* -------------------------------------------------------------
   39. RESPONSIVE — Awards
   ------------------------------------------------------------- */

@media (max-width: 991.98px) {
  /* Awardpanelen */
  .nsp-award-panel__grid { grid-template-columns: 1fr; }
  .nsp-award-panel__img  { height: 280px; }

  /* Compacte awardkaarten */
  .nsp-award-grid { grid-template-columns: repeat(2, 1fr); }

  /* Uitreiking CTA */
  .nsp-award-event__box { grid-template-columns: 1fr; gap: 28px; }

  /* Award-detailpagina header */
  .nsp-award-detail-header__inner { grid-template-columns: 1fr; gap: 36px; }

  /* Winnaar huidig jaar */
  .nsp-award-winner__grid { grid-template-columns: 1fr; }
  .nsp-award-winner__img  { min-height: 320px; }

  /* Andere awards */
  .nsp-award-others__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575.98px) {
  .nsp-award-grid             { grid-template-columns: 1fr; }
  .nsp-award-others__grid     { grid-template-columns: 1fr; }
  .nsp-award-archive-row      { grid-template-columns: 56px 1fr; }
  .nsp-award-archive-row__pdf { display: none; }
}


/* -------------------------------------------------------------
   40. MEDIALIJST-PAGINA — hero, categorietabs, entrygrid, disclaimer
   ------------------------------------------------------------- */

/* ── Hero met tellers ──────────────────────────────────── */

.nsp-medialijst-hero {
  background: var(--c-navy);
  color: var(--c-inverse);
}

.nsp-medialijst-hero__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 70px var(--gutter) 60px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.nsp-medialijst-hero__title {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: .96;
  font-weight: 900;
  letter-spacing: -.035em;
  margin: 20px 0;
}

.nsp-medialijst-hero__intro {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(244,239,232,.78);
  max-width: 40em;
}

/* Tellers hergebruiken .nsp-hero__stats / .nsp-stat / .nsp-stat__number / .nsp-stat__label (zie sectie 12) */

/* ── Content-wrapper + telling ─────────────────────────── */

.nsp-medialijst__content {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 52px var(--gutter) 80px;
}

.nsp-medialijst-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-subtle);
  margin-bottom: 28px;
}

/* Entrygrid + disclaimer hergebruiken .nsp-media-grid / .nsp-media-entry* (sectie 23) en .nsp-info* (sectie 25) */


/* -------------------------------------------------------------
   41. RESPONSIVE — Medialijst
   ------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .nsp-medialijst-hero__inner { align-items: flex-start; }
}

@media (max-width: 575.98px) {
  .nsp-hero__stats { gap: 20px; }
}


/* =============================================================
   AANVULLINGEN — Nieuws, Artikel, Artikel-archief
   Alles hieronder is nieuw t.o.v. de eerder gesynchroniseerde
   versie en puur additief: geen van deze regels overschrijft
   bestaande selectors hierboven. Waar een regel wél een eerder
   gedefinieerde class uitbreidt (bijv. .nsp-pull-quote--boxed
   naast .nsp-pull-quote), staat die bewust ná de basisregel in
   het bestand, dus de volgorde hieronder niet wijzigen.
   ============================================================= */

/* -- Categorie-tags (aanvulling sectie 9. BADGES & LABELS) -- */
/* Categorie-tag (kleine gekleurde chip — Nieuws-overzicht en Artikel) */
.nsp-cat-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-sm);
}

.nsp-cat-tag--actueel            { color: var(--c-blue);   background: rgba(11,91,176,.1); }
.nsp-cat-tag--column             { color: var(--c-orange); background: rgba(232,110,16,.1); }
.nsp-cat-tag--schot-voor-de-boeg { color: var(--c-amber);  background: rgba(181,128,58,.12); }
.nsp-cat-tag--spotlight          { color: var(--c-navy);   background: rgba(9,60,104,.1); }
.nsp-cat-tag--aankondiging       { color: var(--c-green);  background: rgba(46,110,85,.1); }
.nsp-cat-tag--sportfoto          { color: var(--c-orange); background: rgba(232,110,16,.1); }

/* Op een donkere achtergrond (uitgelicht artikel, galerij) */
.nsp-cat-tag--on-dark { background: rgba(255,255,255,.14); }

/* -- Kaartuitbreidingen (aanvulling sectie 11. KAARTEN) -- */
/* Afbeelding bovenaan (Nieuws-overzicht, verwante artikelen) */
.nsp-card__img {
  display: block;
  width: 100%;
  height: 196px;
  object-fit: cover;
  background: var(--c-bg);
}

/* Compacte titelmaat voor gebruik in een 3-koloms grid */
.nsp-card__title--sm { font-size: 20px; line-height: 1.2; }

/* Auteur + leestijd-regel onderaan kaart (alternatief voor .nsp-card__cta) */
.nsp-card__author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--c-subtle);
  font-weight: 600;
  margin-top: auto;
  padding-top: 14px;
}

.nsp-card__author span { color: rgba(168,156,140,.5); }

/* Auteursnaam zelf blijft vet en donker, alleen scheidingsteken/leestijd blijven gedempt */
.nsp-card__author span.nsp-card__author-name { color: var(--c-dark); font-weight: 700; }

/* Zelfde stijl, los van .nsp-card__author — voor gebruik boven de titel
   i.p.v. onderaan de kaart (bijv. de uitgelichte column op de homepage,
   binnen .nsp-featured__meta). Zonder deze regel bleef de naam
   ongestileerd (kleurt mee met de link eromheen = zwart). */
.nsp-card__author-name { color: var(--c-dark); font-weight: 700; }

/* Locatie-tekst in .nsp-award-panel (bijv. evenement) hoort net als in
   de dc gedempt te zijn, niet het lichtere subtle-grijs van een
   lijst-datum */
.nsp-card-row__date--muted { color: var(--c-muted); }

/* Thumbnail (Nieuwsarchief — dichte lijstweergave) */
.nsp-card-row__img {
  width: 128px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
  background: var(--c-bg);
}

/* -- Auteursbio + geblokte quote (aanvulling sectie 19. ARTIKEL) -- */
/* Grotere avatar voor de auteursbio onderaan een artikel */
.nsp-author-card__img--lg { width: 64px; height: 64px; }

/* Geblokte variant van de pull-quote (Artikel-detail, in-body citaat).
   .nsp-article-body blockquote krijgt 'm automatisch mee, zodat een
   redacteur in het CMS gewoon <blockquote> kan typen zonder classes. */
.nsp-pull-quote--boxed,
.nsp-article-body blockquote {
  background: var(--c-white);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 28px 32px;
  font-style: normal;
}




/* -------------------------------------------------------------
   42. NIEUWS-OVERZICHT — filtertabs+zoek, uitgelicht artikel,
   artikelgrid, kolombanner, paginering
   Hero hergebruikt .nsp-hero / .nsp-hero--dark / .nsp-hero__inner
   (sectie 12). Tabs hergebruiken .nsp-tabs* (sectie 18).
   ------------------------------------------------------------- */

/* ── Zoekveld in de tabsbalk ────────────────────────────── */

/* Rechterkant van de tabsbalk — link naar het archief */
.nsp-tabs__aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 10px 0;
  flex-shrink: 0;
}

/* ── Uitgelicht artikel ─────────────────────────────────── */

.nsp-featured {
  max-width: var(--max-w);
  margin: 44px auto 60px;
  padding: 0 var(--gutter);
}

.nsp-featured__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  height: 420px;
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.nsp-featured__img { position: relative; min-width: 0; height: 420px; }

.nsp-featured__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.nsp-featured__tag { position: absolute; top: 20px; left: 20px; }

.nsp-featured__body {
  min-width: 0;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.nsp-featured__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.nsp-featured__date { font-size: 12.5px; color: var(--c-subtle); font-weight: 600; }

.nsp-featured__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.nsp-featured__excerpt {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-muted);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.nsp-featured__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-subtle);
  font-weight: 600;
}

/* ── Artikelgrid (3-koloms; ook gebruikt voor "Verwante berichten" op Artikel) ── */

.nsp-article-grid {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--gutter) 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* ── Nieuwsfeed-wrapper (breedte/gutter, geen eigen grid) ──
   Alleen breedte-begrenzing en padding, zoals .nsp-article-grid,
   maar zonder display:grid — de kolomindeling zelf komt hier van
   Bootstrap's .row/.col-* (al geladen via bootstrap.min.css),
   zodat één doorlopende repeat-loop per item vrij de kolombreedte
   kan kiezen (col-12, col-lg-4, col-lg-6, ...) i.p.v. een vast
   3-koloms schema. Gebruikt op /nieuws. ── */

.nsp-feed {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 44px var(--gutter) 20px;
}

/* ── Column van de week ─────────────────────────────────── */

/* Schermbreed: breekt bewust uit .nsp-feed/.col-12 via de 100vw-truc,
   zodat de witte achtergrond randloos loopt zoals in de dc. De
   inhoud zelf blijft via .nsp-column-banner__wrap netjes op
   dezelfde breedte/gutter als de rest van de pagina. */
.nsp-column-banner {
  width: 100vw;
  margin: 40px calc(50% - 50vw);
  background: var(--c-white);
  border-top: 1px solid rgba(21,18,15,.12);
  border-bottom: 1px solid rgba(21,18,15,.12);
}

.nsp-column-banner__wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nsp-column-banner__inner {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: stretch;
  height: 320px;
  overflow: hidden;
}

.nsp-column-banner__body {
  min-width: 0;
  padding: 40px;
  border-right: 1px solid rgba(21,18,15,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.nsp-column-banner__label { margin-bottom: 14px; }

.nsp-column-banner__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.15;
  font-weight: 600;
  color: var(--c-dark);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.nsp-column-banner__excerpt {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-muted);
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.nsp-column-banner__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nsp-column-banner__author { display: flex; align-items: center; gap: 9px; }

.nsp-column-banner__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--c-bg);
  display: block;
}

.nsp-column-banner__author-name { font-size: 13px; font-weight: 700; color: var(--c-dark); }

.nsp-column-banner__link {
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  padding-bottom: 2px;
  margin-left: auto;
}

.nsp-column-banner__img { position: relative; min-width: 0; height: 320px; }

.nsp-column-banner__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Paginering ──────────────────────────────────────────── */

.nsp-pagination {
  max-width: var(--max-w);
  margin: 20px auto 80px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nsp-pagination__btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  border: 1.5px solid rgba(21,18,15,.15);
  background: var(--c-white);
  color: var(--c-dark);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.nsp-pagination__btn:hover { border-color: var(--c-dark); }

.nsp-pagination__btn--active {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-inverse);
}

.nsp-pagination__btn--disabled { opacity: .35; pointer-events: none; }

/* ── Link naar het volledige archief (onderaan /nieuws) ─── */

/* -------------------------------------------------------------
   43. ARTIKEL-DETAIL — broodkruimel, kop, 2-koloms lay-out,
   evenement-infobalk, galerij, tags, zijbalkkaarten, spotlight,
   "lees ook"-lijst
   Body hergebruikt .nsp-article-body / .nsp-pull-quote /
   .nsp-author-card (sectie 19).
   ------------------------------------------------------------- */

/* ── Broodkruimel (generiek) ────────────────────────────── */

.nsp-breadcrumb {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 22px var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-subtle);
}

.nsp-breadcrumb a { color: var(--c-muted); text-decoration: none; }
.nsp-breadcrumb a:hover { color: var(--c-dark); }
.nsp-breadcrumb__current { color: var(--c-dark); font-weight: 600; }

/* ── Kop boven de 2-koloms lay-out ──────────────────────── */

.nsp-article-hero {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 32px var(--gutter) 0;
}

.nsp-article-hero__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }

.nsp-article-hero__date { font-size: 13px; color: var(--c-subtle); font-weight: 600; }

.nsp-article-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.5vw, 58px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.02em;
  max-width: 18em;
  margin-bottom: 20px;
}

.nsp-article-hero__intro {
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.52;
  color: var(--c-text);
  max-width: 36em;
  margin-bottom: 28px;
}

.nsp-article-hero__byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: var(--border-m);
  border-bottom: var(--border-m);
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.nsp-article-hero__author { display: flex; align-items: center; gap: 14px; }

.nsp-article-hero__author img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--c-bg);
}

.nsp-article-hero__author-name { font-size: 15px; font-weight: 700; }
.nsp-article-hero__author-role { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }

/* ── Deel-knoppen (donkere vierkante iconbuttons) ───────── */

.nsp-share { display: flex; align-items: center; gap: 10px; }

.nsp-share__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.nsp-share-btn {
  text-decoration: none;
  background: var(--c-dark);
  color: var(--c-inverse);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: opacity .15s;
}

.nsp-share-btn:hover { opacity: .8; }

/* ── 2-koloms lay-out: artikelbody + sticky zijbalk ─────── */

.nsp-article-layout {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 44px var(--gutter) 80px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: start;
}

.nsp-article-layout__sidebar {
  position: sticky;
  top: calc(var(--hh) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Hero-afbeelding in de body ─────────────────────────── */

.nsp-article-figure { margin: 0 0 2em; }

.nsp-article-figure img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}

.nsp-article-figure__caption {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--c-subtle);
  margin-top: 10px;
}

/* ── Fotoserie: matrix + lightbox-carousel ─────────────── */

.nsp-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 2em 0;
}

.nsp-photo-grid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--c-bg);
}

.nsp-photo-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.nsp-photo-grid__item:hover img { transform: scale(1.05); }

.nsp-photo-modal .modal-dialog { max-width: min(1280px, 92vw); }
.nsp-photo-modal .modal-content { background: var(--c-dark); border: none; }
.nsp-photo-modal__close { position: absolute; top: 16px; right: 16px; z-index: 10; filter: invert(1); opacity: .9; }
.nsp-photo-modal .carousel-item img,
.nsp-photo-modal .modal-content > img { width: 100%; max-height: 90vh; object-fit: contain; display: block; }
.nsp-photo-modal__caption { color: var(--c-inverse); font-size: 13.5px; text-align: center; padding: 14px 60px; }

@media (max-width: 575.98px) {
  .nsp-photo-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ── Sportfoto-overzicht: 1 uitgelichte foto (.nsp-award-panel) +
   grid van 12 eerdere foto's (.nsp-award-grid / .nsp-award-card-compact,
   hergebruikt van de Awards-pagina). Klikken opent de foto vergroot
   in .nsp-photo-modal. Geen eigen kaart-CSS nodig — alleen een kleine
   aanvulling zodat een niet-interactief kaartelement (div i.p.v. link)
   er ook als klikbaar oogt op de plek van de "bekijk"-trigger. ── */

.nsp-award-card-compact__link--foto {
  cursor: zoom-in;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

/* ── Evenement-infobalk (alleen artikeltype "evenement") ── */

.nsp-event-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(21,18,15,.1);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 2em 0;
}

.nsp-event-facts__item { background: var(--c-white); padding: 18px 20px; }

.nsp-event-facts__label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-subtle);
  margin-bottom: 6px;
}

.nsp-event-facts__value { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--c-dark); }

/* ── Fotogalerij (alleen artikeltype "fotoestafette") ───── */

.nsp-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 2em 0;
}

.nsp-gallery__item { border-radius: var(--r-md); overflow: hidden; }
.nsp-gallery__item img { width: 100%; height: 220px; object-fit: cover; display: block; }
.nsp-gallery__item--wide { grid-column: 1 / -1; }
.nsp-gallery__item--wide img { height: 320px; }

/* ── Tags onderaan artikel ──────────────────────────────── */

.nsp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2em 0; }

.nsp-tag {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-muted);
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.12);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

.nsp-tag:hover { border-color: rgba(21,18,15,.3); color: var(--c-dark); }

/* ── Zijbalkkaarten (basis + kleurvarianten) ────────────── */

.nsp-side-card {
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-lg);
  padding: 24px;
}

.nsp-side-card--dark   { background: var(--c-dark); color: var(--c-inverse); border-color: transparent; }
.nsp-side-card--navy   { background: var(--c-navy); color: var(--c-inverse); border-color: transparent; }
.nsp-side-card--orange { background: var(--c-orange); color: #fff; border-color: transparent; }

.nsp-side-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-subtle);
  margin-bottom: 12px;
}

.nsp-side-card--dark .nsp-side-card__label,
.nsp-side-card--navy .nsp-side-card__label { color: var(--c-peach); }
.nsp-side-card--orange .nsp-side-card__label { color: rgba(255,255,255,.8); }

.nsp-side-card__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.nsp-side-card__text {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.nsp-side-card--dark .nsp-side-card__text,
.nsp-side-card--navy .nsp-side-card__text { color: rgba(244,239,232,.78); }
.nsp-side-card--orange .nsp-side-card__text { color: rgba(255,255,255,.9); }

.nsp-side-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--c-navy);
  border-bottom: 2px solid var(--c-orange);
  padding-bottom: 2px;
}

.nsp-side-card--dark .nsp-side-card__link,
.nsp-side-card--navy .nsp-side-card__link,
.nsp-side-card--orange .nsp-side-card__link { color: var(--c-inverse); }

.nsp-side-card__btn { display: block; width: 100%; text-align: center; }

/* Fotoestafette-navigatie: vorige/volgende editie */
.nsp-side-nav { display: flex; flex-direction: column; gap: 0; }

.nsp-side-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 0;
  border-top: 1px solid rgba(244,239,232,.14);
}

.nsp-side-nav__link:first-child { border-top: none; padding-top: 0; }
.nsp-side-nav__link:last-child { padding-bottom: 0; }

/* ── Spotlight-profielkaart (alleen artikeltype "spotlight") ── */

.nsp-spotlight {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-dark);
}

.nsp-spotlight__img { position: relative; height: 340px; }
.nsp-spotlight__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nsp-spotlight__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,18,15,.92) 0%, rgba(21,18,15,.1) 55%, transparent 100%);
}

.nsp-spotlight__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  color: var(--c-inverse);
}

.nsp-spotlight__name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.nsp-spotlight__role { font-size: 12.5px; color: rgba(244,239,232,.7); margin-top: 2px; }

.nsp-spotlight__specs { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }

.nsp-spotlight__spec {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(244,239,232,.1);
}

.nsp-spotlight__spec:last-child { border-bottom: none; padding-bottom: 0; }

.nsp-spotlight__spec-label { color: rgba(244,239,232,.55); }
.nsp-spotlight__spec-value { color: var(--c-inverse); font-weight: 700; text-align: right; }

/* ── "Lees ook" mini-lijst ───────────────────────────────── */

.nsp-mini-list { display: flex; flex-direction: column; gap: 0; }

.nsp-mini-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  padding: 12px 0;
  border-bottom: var(--border-s);
}

.nsp-mini-item:first-child { padding-top: 0; }
.nsp-mini-item:last-child { border-bottom: none; padding-bottom: 0; }

.nsp-mini-item__img {
  width: 76px;
  height: 60px;
  border-radius: var(--r-sm);
  object-fit: cover;
  display: block;
  background: var(--c-bg);
}

.nsp-mini-item__title {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
}

.nsp-mini-item__date { font-size: 11.5px; color: var(--c-subtle); margin-top: 6px; }


/* -------------------------------------------------------------
   44. RESPONSIVE — Nieuws + Artikel
   ------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .nsp-featured__card    { grid-template-columns: 1fr; height: auto; }
  /* Foto altijd bovenaan bij het stapelen, los van brondocument-volgorde */
  .nsp-featured__img     { height: 320px; order: 1; }
  .nsp-featured__body    { order: 2; }
  .nsp-featured__title, .nsp-featured__excerpt { -webkit-line-clamp: unset; }
  .nsp-article-grid      { grid-template-columns: repeat(2, 1fr); }
  .nsp-column-banner__inner { grid-template-columns: 1fr; height: auto; }
  .nsp-column-banner__body  { overflow: visible; }
  .nsp-column-banner__excerpt { -webkit-line-clamp: unset; }
  .nsp-column-banner__body  { border-right: none; border-bottom: 1px solid rgba(21,18,15,.1); }

  .nsp-article-layout {
    grid-template-columns: 1fr;
  }

  .nsp-article-layout__sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nsp-article-layout__sidebar > * { flex: 1 1 260px; }
}

@media (max-width: 575.98px) {
  .nsp-article-grid        { grid-template-columns: 1fr; }
  .nsp-event-facts         { grid-template-columns: 1fr; }
  .nsp-gallery             { grid-template-columns: 1fr; }
  .nsp-article-hero__byline { flex-direction: column; align-items: flex-start; }
  .nsp-article-layout__sidebar { flex-direction: column; }
}


/* -------------------------------------------------------------
   45. NIEUWSARCHIEF — filterbalk (jaar + zoek), resultaattelling,
   dichte lijstweergave, lege staat
   Paginakop hergebruikt .nsp-page-header* (sectie 28).
   Categorietabs hergebruiken .nsp-tabs* (sectie 18) — zelfde
   tabs als op /nieuws, voor visuele continuïteit tussen beide
   pagina's. Rijen hergebruiken .nsp-card-row* (sectie 11).
   ------------------------------------------------------------- */

/* ── Filterbalk: jaar-select + zoekveld ─────────────────── */

.nsp-archive-filters {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 24px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.nsp-archive-filters__form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nsp-archive-filters__form .nsp-select { width: auto; min-width: 130px; }
.nsp-archive-filters__form input[type="search"] { width: 260px; }

/* ── Resultaattelling ────────────────────────────────────── */

.nsp-archive-count {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--gutter) 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-subtle);
}

/* ── Dichte lijstweergave ────────────────────────────────── */

.nsp-archive-list {
  max-width: var(--max-w);
  margin: 0 auto 20px;
  padding: 0 var(--gutter);
}

.nsp-archive-list__inner {
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ── Lege staat (0 resultaten bij filter/zoekopdracht) ──── */

.nsp-empty-state {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 60px var(--gutter);
  text-align: center;
}

.nsp-empty-state__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }

.nsp-empty-state__text {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--c-muted);
}


/* -------------------------------------------------------------
   46. RESPONSIVE — Nieuwsarchief
   ------------------------------------------------------------- */

@media (max-width: 575.98px) {
  .nsp-archive-filters__form input[type="search"] { width: 100%; }
  /* Kolombreedte/thumbnail-formaat bewust NIET verkleinen op mobiel —
     dat oogde juist kleiner dan op desktop, terwijl een grotere foto
     hier beter werkt. Alleen gap/padding iets krapper voor de smallere
     breedte. */
  .nsp-card-row { gap: 14px; padding: 16px; }
}


/* -------------------------------------------------------------
   47. HOMEPAGE — hero, uitgelicht nieuws, spotlight, evenement,
       agenda-lijst
   ------------------------------------------------------------- */

/* ── Home-hero (licht, 2-koloms met foto + badge) ─────────── */

/* Geen eigen max-width/margin/padding hier — .nsp-hero (de omliggende
   <section>) regelt dat al. Deze class stond er dubbelop, wat de hero
   te laag liet beginnen, een te grote witruimte gaf vóór het volgende
   blok, en op mobiel de tekstkolom onnodig versmalde (dubbele --gutter
   aan weerszijden). */
.nsp-home-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.nsp-home-hero__media { position: relative; }

.nsp-home-hero__media img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--r-xl);
  display: block;
}

.nsp-home-hero__badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: var(--c-navy);
  color: var(--c-inverse);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 12px 34px -14px rgba(21,18,15,.7);
}

.nsp-home-hero__badge strong { color: var(--c-peach); font-weight: 700; }

/* Zonder dit brak de titelkolom op mobiel/tablet niet mee — bij de vaste
   1.05fr/.95fr-verdeling werd de tekstkolom op een telefoon nog geen 150px
   breed, waardoor lange woorden zoals "sportjournalistiek" over de rand
   liepen en zichtbaar werden afgekapt. */
@media (max-width: 991.98px) {
  .nsp-home-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .nsp-home-hero__media img { height: 320px; }
}

@media (max-width: 575.98px) {
  .nsp-home-hero__media img { height: 240px; }

  /* De vaste clamp-ondergrens van 44px (zie .nsp-hero__title) is op
     telefoonbreedte nog te groot voor "sportjournalistiek" als los
     woord op de derde regel — met overflow-wrap breekt het woord dan
     lelijk middenin i.p.v. netjes te passen. Hier een lagere, wél nog
     schaalbare ondergrens specifiek voor smalle schermen. */
  .nsp-hero__title { font-size: clamp(30px, 8.5vw, 44px); }

  /* Iets meer lucht tussen de tekstkolom en de foto eronder dan de
     32px die bij het klappen naar 1 kolom (991.98px) al gold. */
  .nsp-home-hero__inner { gap: 36px; }
}

/* ── Herbruikbare 2-koloms splitsing (uitgelicht nieuws, nieuws
   & columns, sportfoto-teaser) ────────────────────────────── */

.nsp-split-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: stretch;
}

.nsp-split-grid--narrow { grid-template-columns: 360px 1fr; }

@media (max-width: 991.98px) {
  .nsp-split-grid,
  .nsp-split-grid--narrow { grid-template-columns: 1fr; gap: 22px; }
}

/* Grotere kaartfoto voor de uitgelichte kaart in een split-grid */
.nsp-card__img--tall { height: 316px; }

/* Bordered doos met gestapelde .nsp-card-row items (compacte lijst
   naast een uitgelichte kaart) */
.nsp-card-row-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white);
  border: 1px solid rgba(21,18,15,.1);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ── Spotlight-uitlichting (full-bleed, 2-koloms) ─────────── */

/* Namespace-klasse; styling komt van .nsp-section-white (achtergrond
   + randen) en de onderstaande __grid/__media/__body-elementen. */
.nsp-spotlight-feature { }

.nsp-spotlight-feature__grid {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.nsp-spotlight-feature__media { position: relative; min-height: 440px; }

.nsp-spotlight-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nsp-spotlight-feature__body {
  padding: clamp(40px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nsp-spotlight-feature__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.nsp-spotlight-feature__meta-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

@media (max-width: 767.98px) {
  .nsp-spotlight-feature__grid { grid-template-columns: 1fr; }
  .nsp-spotlight-feature__media { min-height: 300px; }
}

/* ── Datumbadge voor uitgelicht evenement (in .nsp-award-panel) ── */

.nsp-event-date-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  background: var(--c-navy);
  color: var(--c-inverse);
  border-radius: var(--r-xs);
  padding: 8px 14px;
}

.nsp-event-date-badge__day {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}

.nsp-event-date-badge__month {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Agenda-lijst (bordered wrapper om .nsp-agenda-row-items) ── */

.nsp-agenda-list {
  border: 1px solid rgba(21,18,15,.12);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Kleine voetnoot onder een sectie-intro (bijv. onder de agenda) */
.nsp-section-intro--footnote { margin-top: 16px; font-size: 13.5px; }

/* Intro met extra ruimte erboven/eronder (bijv. mediaservice-tekst
   tussen titel en knop) */
.nsp-hero__intro--spaced { margin: 22px 0 30px; }

/* Statistiekenrij buiten een hero-context (bijv. "Over de NSP") */
.nsp-hero__stats--section { margin-top: 24px; }

/* Zodra .nsp-split-grid naar 1 kolom klapt, wordt deze statistiekenrij
   ineens de volle sectiebreedte in plaats van de smalle tekstkolom
   ernaast — de standaard links uitgelijnde flex-items ogen dan scheef.
   Gecentreerd staat dan beter. */
@media (max-width: 991.98px) {
  .nsp-hero__stats--section { justify-content: center; }
  .nsp-hero__stats--section .nsp-stat__number { font-size: 36px; }
}

/* Link die op deze statistiekenrij volgt netjes mee laten centreren
   i.p.v. links te blijven staan onder de nu gecentreerde cijfers. */
@media (max-width: 991.98px) {
  .nsp-hero__stats--section + .nsp-link--block { text-align: center; }
}

/* Op telefoonbreedte past het 3e item (met de langste cijfer-breedte,
   "550+"/"1934" op 46px) niet meer naast de andere twee binnen de flex-
   wrap en valt naar een 2e regel. Vaste, gelijke kolommen dwingen alle
   3 op 1 rij i.p.v. te laten wrappen op content-breedte. */
@media (max-width: 575.98px) {
  .nsp-hero__stats--section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .nsp-hero__stats--section .nsp-stat { min-width: 0; }
}

/* Link die als losstaand blok na een tekstblok volgt */
.nsp-link--block { margin-top: 28px; }

/* Meta-rij boven een evenemententitel: datumbadge + soort */
.nsp-event-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.nsp-event-meta-row__kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-orange);
}

/* ── Sportfoto-teaser (fotoestafette-stijl): fotograaf profiel +
   lead-foto + strip met eerdere foto's, gebruikt binnen
   .nsp-split-grid--narrow (320px/360px kolom + 1fr) ─────────── */

/* min-width: 0 op beide grid-kolommen van .nsp-split-grid--narrow is
   cruciaal: grid-items krijgen standaard min-width:auto, wat betekent
   dat de kolom nooit smaller mag worden dan het "liefst" wil zijn op
   basis van de inhoud. Bij een <img> zonder object-fit + vaste hoogte
   is dat het NATIVE pixelformaat van de foto (persfoto's al gauw
   3000px+ breed) — de kolom (en daarmee de hele sectie) werd daardoor
   in werkelijkheid torenbreed, wat door overflow-x:hidden elders
   verborgen bleef maar wel een verschoven/uitgesneden weergave gaf. */
.nsp-foto-profiel { min-width: 0; }

.nsp-foto-profiel__portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.nsp-foto-profiel__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nsp-foto-profiel__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--c-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-xs);
}

.nsp-foto-profiel__name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-top: 18px;
}

.nsp-foto-profiel__role {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-top: 4px;
}

.nsp-foto-profiel__theme {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 18px;
}

.nsp-foto-lead {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Geen vaste hoogte en geen object-fit:cover meer: die knipten altijd
   een stuk van de foto weg, ongeacht de eigen verhouding van de bron.
   Breedte is leidend (100% van de kolom) en de hoogte volgt de eigen
   beeldverhouding van de foto zelf — zo blijft elke sportfoto, welke
   verhouding hij ook heeft, altijd volledig en onbeschadigd zichtbaar. */
.nsp-foto-lead img {
  width: 100%;
  height: auto;
  display: block;
  min-width: 0;
}

/* Grid-kolom die .nsp-foto-lead bevat, min-width:0 geven — zelfde reden
   als .nsp-foto-profiel hierboven. Deze kolom heeft geen eigen naam in
   de HTML, vandaar :has() i.p.v. een class. */
.nsp-split-grid--narrow > div:has(.nsp-foto-lead) { min-width: 0; }

.nsp-foto-lead__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,18,15,.7) 0%, rgba(21,18,15,0) 45%);
  pointer-events: none;
}

.nsp-foto-lead__caption { position: absolute; left: 20px; right: 20px; bottom: 18px; color: var(--c-inverse); }

.nsp-foto-lead__title { font-size: 15px; font-weight: 700; }

.nsp-foto-lead__credit { font-size: 12.5px; color: rgba(244,239,232,.78); margin-top: 2px; }

/* Extra ruimte boven de "Eerdere foto's"-header. Selector richt zich op
   .nsp-foto-lead__info (niet .nsp-foto-lead) omdat dat altijd het
   voorgaande sibling-element is — ook op desktop, waar .nsp-foto-lead__info
   met display:none verborgen is maar wel gewoon in de DOM staat en dus
   de rechtstreekse "+"-aangrenzing van .nsp-foto-lead naar
   .nsp-strip-header doorbreekt. */
.nsp-foto-lead__info + .nsp-strip-header { margin-top: 26px; }

/* .nsp-foto-lead__info: alleen zichtbaar op mobiel/tablet, zie media
   query hieronder. Bevat dezelfde velden als .nsp-foto-profiel maar
   dan direct onder de sportfoto, met gedeelde achtergrondkleur zodat
   titel + fotograaf + tekst en de foto als 1 geheel ogen. */
.nsp-foto-lead__info { display: none; }

.nsp-foto-lead__info-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}

/* .nsp-foto-profiel__portrait gebruikt aspect-ratio: 4/5, wat prima
   werkt in de vaste 360px-kolom op desktop. Zodra .nsp-split-grid--narrow
   op <991.98px naar 1 kolom klapt, wordt die kolom ineens de volle
   sectiebreedte — en schaalt de 4:5-ratio mee tot een absurd hoge foto
   (op tablet al gauw 800px+). Op mobiel/tablet laten we het hele
   fotograafprofiel (incl. portret) daarom vallen en tonen we titel +
   fotograaf + tekst i.p.v. daarvan in .nsp-foto-lead__info, direct
   onder de sportfoto zelf. */
@media (max-width: 991.98px) {
  .nsp-foto-profiel { display: none; }

  .nsp-foto-lead__overlay,
  .nsp-foto-lead__caption { display: none; }

  /* Sportfoto schermbreed (full-bleed, buiten de sectie-gutter om) en
     cover, zodat er meer van de originele foto zichtbaar blijft i.p.v.
     een krappe crop binnen de smalle kolombreedte. */
  .nsp-foto-lead {
    margin-inline: calc(-1 * var(--gutter));
    width: calc(100% + var(--gutter) * 2);
    border-radius: 0;
  }

  /* "Deze maand"-badge die eerst op het fotograafportret stond, nu op
     de sportfoto zelf (::before i.p.v. een los HTML-element, want de
     tekst is altijd hetzelfde). .nsp-foto-lead heeft al position:relative
     in de basisregel, dat blijft gewoon gelden. */
  .nsp-foto-lead::before {
    content: "Deze maand";
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--c-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--r-xs);
    z-index: 1;
  }

  /* Tekstkader visueel aan de foto gekoppeld: zelfde full-bleed breedte,
     direct eronder (geen gap/marge), gedeelde achtergrondkleur. */
  .nsp-foto-lead__info {
    display: block;
    margin-inline: calc(-1 * var(--gutter));
    width: calc(100% + var(--gutter) * 2);
    background: var(--c-white);
    padding: 22px var(--gutter) 26px;
  }
  .nsp-foto-lead__info .nsp-foto-profiel__name { margin-top: 0; font-size: 16px; }
  .nsp-foto-lead__info .nsp-foto-profiel__role { margin-bottom: 4px; }
  .nsp-foto-lead__info .nsp-card__excerpt { margin: 10px 0 14px; }
}

/* ── "Over de NSP"-foto op de homepage (was .nsp-img-ph placeholder) ── */

.nsp-about__img {
  height: 420px;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.nsp-about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767.98px) {
  .nsp-about__img { height: 280px; }
}


/* -------------------------------------------------------------
   48. TELLERBALK (oranje, flexibele items + optionele notitie)
   Overgenomen uit de originele Fotoestafette.dc.html-teller, nu
   generiek bruikbaar. Anders dan .nsp-stats-bar (vaste 4-koloms
   grid, zie Over-pagina): items hebben hier hun eigen breedte en
   een optionele rechts uitgelijnde notitie via margin-left:auto.
   ------------------------------------------------------------- */

.nsp-counter-bar { background: var(--c-orange); }

.nsp-counter-bar__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.nsp-counter-bar__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.nsp-counter-bar__value {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #fff;
}

.nsp-counter-bar__label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.nsp-counter-bar__divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.28);
}

.nsp-counter-bar__note {
  margin-left: auto;
  font-family: var(--font-serif);
  font-size: 16px;
  color: rgba(255,255,255,.86);
  font-style: italic;
}

@media (max-width: 575.98px) {
  .nsp-counter-bar__note { margin-left: 0; width: 100%; }
}