/* NIKA op de homepage (11 okt 2026).
   Desktop: kaarthoogte volgt de schermhoogte, zodat kop, vier kaarten en voetregel samen in één scherm passen.
   Mobiel (≤700px, via nika-scroll.js): kaarten staan vast en schuiven horizontaal mee met naar beneden scrollen. */
.nika-photo .np-progress{display:none}

@media(min-width:1000px) and (min-height:641px){
  /* onder: de wolkenrand van de CTA-sectie valt 118px over deze sectie heen, de voetregel moet daarboven blijven */
  #filosofie.nika-home .pinner{padding-top:100px;padding-bottom:calc(118px + 36px)}
  #filosofie .nika-photo .np-heading{margin-bottom:30px}
  /* kop op één regel waar het past (zelfde tekst, regelafbreking alleen via CSS) */
  #filosofie .nika-photo .np-heading h2{font-size:clamp(38px,4.2vw,60px);text-wrap:balance}
  #filosofie .nika-photo .np-heading h2 br{display:none}
  #filosofie .nika-photo .np-card{min-height:clamp(340px,calc(100svh - 520px),500px)}
  #filosofie .nika-photo .np-letter{font-size:clamp(104px,min(13vw,19svh),180px);margin:24px 0}
  #filosofie .nika-photo .np-footer{margin-top:24px}
}

@media(max-width:700px){
  #filosofie .nika-photo.np-h .np-heading{margin-bottom:8px}
  #filosofie .nika-photo.np-h .np-sticky{
    position:sticky;top:var(--np-top,0px);height:calc(100svh - var(--np-top,0px));
    width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;gap:16px;
  }
  #filosofie .nika-photo.np-h .np-grid{
    position:relative;display:flex;gap:12px;padding:0 18px;margin:0;
    will-change:transform;
  }
  #filosofie .nika-photo.np-h .np-card,
  #filosofie .nika-photo.np-h .np-card:nth-child(even){
    flex:0 0 min(82vw,360px);transform:none;min-height:0;
    height:min(calc(100svh - var(--np-top,0px) - 84px),540px);padding:22px;
  }
  /* letter groot en midden in de kaart, tussen nummer en tekst */
  #filosofie .nika-photo.np-h .np-letter{font-size:clamp(120px,min(46vw,26svh),210px);margin:auto 0;align-self:center;text-align:center}
  #filosofie .nika-photo.np-h .np-card-copy{margin-top:0}
  #filosofie .nika-photo.np-h .np-card h3{font-size:24px}
  #filosofie .nika-photo.np-h .np-progress{display:flex;justify-content:center;gap:22px;font-size:17px;font-weight:900;letter-spacing:.02em}
  #filosofie .nika-photo.np-h .np-progress span{color:color-mix(in srgb,var(--burgundy) 28%,var(--white));transition:color .25s,transform .25s}
  #filosofie .nika-photo.np-h .np-progress span.on{color:var(--purple);transform:scale(1.3)}
  #filosofie .nika-photo.np-h .np-footer{margin-top:8px}
}

/* "Lees meer": pijl en een rustige pulse als klikindicatie (stopt bij hover/focus en bij minder beweging) */
#filosofie .nika-photo .np-practice{position:relative;gap:10px}
#filosofie .nika-photo .np-practice::after{content:"→";font-size:16px;line-height:1;transition:transform .2s}
#filosofie .nika-photo .np-practice:hover::after{transform:translateX(3px)}
@media(prefers-reduced-motion:no-preference){
  #filosofie .nika-photo .np-practice{animation:npPulse 2.4s ease-out infinite}
  #filosofie .nika-photo .np-practice:hover,#filosofie .nika-photo .np-practice:focus-visible{animation:none}
}
html[data-motion="off"] #filosofie .nika-photo .np-practice{animation:none}
@keyframes npPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--purple) 55%,transparent)}
  70%{box-shadow:0 0 0 12px color-mix(in srgb,var(--purple) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--purple) 0%,transparent)}
}