/* DHB Projecten Slider (npx) */
.npx{
  position:relative;
  padding:clamp(70px,9vh,110px) 0 clamp(56px,7vh,84px);
  background:
    radial-gradient(50% 40% at 8% 0%,rgba(255,76,0,.12),transparent 60%),
    radial-gradient(45% 40% at 100% 100%,rgba(255,76,0,.07),transparent 60%),
    linear-gradient(180deg,var(--npx-bg1,#F7F6F4) 0%,var(--npx-bg2,#F0EEEB) 100%);
  color:#141313;
  overflow:hidden;
  font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;
}

/* Kopkleur vastzetten.
   Koppen hier zetten alleen een lettertype en erven hun kleur van de
   wrapper. Overerving heeft geen specificiteit, dus de Elementor-kit
   (.elementor-kit-7 h2) wint daarvan en kleurt ze blauw. De wrapper
   staat hier dubbel, dus deze regel weegt zwaarder dan de kit; de eigen
   kleuren hieronder hebben de wrapper gekregen en winnen weer hiervan. */
.npx.npx h1,
.npx.npx h2,
.npx.npx h3,
.npx.npx h4,
.npx.npx h5,
.npx.npx h6 {
	color: inherit;
}

.npx *{margin:0;padding:0;box-sizing:border-box;}

/* -- Kop -- */
.npx-head{
  max-width:1350px;margin:0 auto;
  padding:0 24px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.npx-head h2{
  margin-top:0;
  font-weight:900;font-size:clamp(30px,3.8vw,48px);line-height:1.1;
}
.npx-sub{margin-top:12px;max-width:440px;font-size:15px;line-height:1.65;color:rgba(20,19,19,.6);}
.npx-nav{display:flex;gap:9px;}
.npx-btn{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff!important;
  border:1px solid rgba(20,19,19,.12)!important;
  color:#141313!important;cursor:pointer;
  box-shadow:0 10px 26px rgba(20,19,19,.1);
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease,color .2s ease,opacity .2s ease;
}
.npx-btn:hover{background:#141313!important;border-color:#141313!important;color:#FF8A55!important;transform:translateY(-2px);}
.npx-btn:disabled{opacity:.3;pointer-events:none;}
.npx-btn svg{width:18px;height:18px;}

/* -- Filters -- */
.npx-filters{
  max-width:1350px;margin:26px auto 0;
  padding:0 24px;
  display:flex;flex-wrap:wrap;gap:8px;
}
.npx-filter{
  padding:9px 16px;border-radius:999px;
  background:#fff!important;
  border:1.5px solid rgba(20,19,19,.14)!important;
  color:rgba(20,19,19,.75)!important;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease;
}
.npx-filter:hover{border-color:rgba(201,60,0,.5)!important;transform:translateY(-1px);}
.npx-filter.is-active,
.npx-filter.is-active:hover{
  background:linear-gradient(135deg,#FF6A2A,#FF4C00)!important;
  border-color:transparent!important;color:#fff!important;
  text-shadow:0 1px 6px rgba(20,19,19,.25);
  box-shadow:0 8px 22px rgba(255,76,0,.3);
}

/* -- Track -- */
.npx-viewport{margin-top:30px;padding:14px 0 8px;}
.npx-track{
  display:flex;gap:22px;
  padding:0 max(24px,calc((100vw - 1350px) / 2));
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:max(24px,calc((100vw - 1350px) / 2));
  scrollbar-width:none;
  cursor:grab;
}
.npx-track::-webkit-scrollbar{display:none;}
.npx-track.is-drag{cursor:grabbing;scroll-snap-type:none;}
.npx-track.is-drag .npx-card{pointer-events:none;}

/* -- Kaart -- */
.npx-card{
  position:relative;
  /* precies 3 kaarten naast elkaar binnen de 1350px-zone */
  flex:0 0 clamp(310px,calc((min(1350px,100vw - 48px) - 44px) / 3),436px);
  height:clamp(440px,54vh,520px);
  scroll-snap-align:start;
  border-radius:26px;overflow:hidden;
  background-size:cover;
  background-position:center;
  box-shadow:0 26px 60px rgba(20,19,19,.22);
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:opacity .35s ease,transform .35s ease,box-shadow .35s ease;
  will-change:transform,opacity;
  cursor:pointer;
}
.npx-card.is-hidden{display:none;}

/* Video op de kaart. De kaart zelf houdt zijn foto met het donkere verloop als
   achtergrond; de video ligt daaroverheen en wordt pas zichtbaar als hij speelt.
   Het verloop zit bij de foto in de achtergrond en zou onder de video verdwijnen,
   dus komt het er als losse laag nog een keer boven: eerst de video (0), dan het
   verloop (1), dan de tags en het paneel (2), dan de glansrand (3). Het verloop
   verschijnt tegelijk met de video, anders wordt de foto dubbel zo donker. */
.npx .npx-card .npx-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity .8s ease;
  pointer-events:none;background:transparent;border:0;border-radius:0;margin:0;padding:0;
}
.npx .npx-card--video::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(200deg,rgba(20,19,19,0) 0%,rgba(20,19,19,.25) 45%,rgba(15,14,14,.9) 100%);
  opacity:0;transition:opacity .8s ease;
}
.npx .npx-card--video.heeft-beeld .npx-video,
.npx .npx-card--video.heeft-beeld::after{opacity:1;}
.npx-card::before{
  content:"";position:absolute;inset:0;border-radius:26px;padding:1px;
  background:linear-gradient(200deg,rgba(255,255,255,.25),rgba(255,255,255,.04) 40%,rgba(255,76,0,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:3;
}
.npx-tags{
  position:absolute;left:18px;top:18px;right:18px;z-index:2;
  display:flex;flex-wrap:wrap;gap:6px;
}
.npx-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  background:linear-gradient(135deg,#FF6A2A,#FF4C00);
  color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 6px rgba(20,19,19,.25);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
/* "+4": de categorieën die niet meer op de kaart passen. Rustiger dan een echte tag. */
.npx-tag.npx-tag--meer{
  background:rgba(15,14,14,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
  padding:7px 11px;letter-spacing:.02em;
}
/* glassy infopaneel */
.npx-panel{
  position:relative;z-index:2;
  margin:14px;
  border-radius:18px;
  background:rgba(15,14,14,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:16px 17px 15px;
  transform:translateY(0);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),background-color .3s ease;
}
.npx-card:hover .npx-panel{background:rgba(15,14,14,.68);}
.npx-loc{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.7);
}
.npx-loc svg{width:12px;height:12px;color:#FF4C00;flex:none;}
.npx.npx .npx-panel h3{
  margin-top:5px;
  font-size:17.5px;font-weight:900;line-height:1.25;color:#fff;
}
.npx-specs{margin-top:11px;display:flex;flex-wrap:wrap;gap:5px;}
.npx-spec{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 9px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:10px;font-weight:600;color:#fff;
  white-space:nowrap;
}
.npx-spec b{color:#FF8A55;font-weight:900;font-variant-numeric:tabular-nums;}
/* onthullende beschrijving + link */
.npx-reveal{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.22,.61,.36,1),opacity .3s ease .05s;
  opacity:0;
}
.npx-card:hover .npx-reveal,.npx-card:focus-within .npx-reveal{max-height:130px;opacity:1;}
.npx-reveal p{
  margin-top:11px;
  font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.75);
}
.npx-link,
.npx-link:hover,
.npx-link:focus,
.npx-link:active,
.npx-link:visited{
  margin-top:12px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:700;
  color:#fff!important;text-decoration:none!important;
  background:transparent!important;border:0!important;box-shadow:none!important;outline:none;
}
.npx-link:focus-visible{outline:2px solid #FF4C00;outline-offset:3px;border-radius:8px;}
.npx-link .circ{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:#FF4C00;color:#141313;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.npx-link .circ svg{width:13px;height:13px;}
.npx-link:hover .circ{transform:rotate(45deg);}
@media (hover:none){
  .npx-reveal{max-height:130px;opacity:1;}
}

/* -- Voortgang -- */
.npx-foot{
  max-width:1350px;margin:26px auto 0;
  padding:0 24px;
  display:flex;align-items:center;gap:20px;
}
.npx-progress{
  flex:1;height:3px;border-radius:99px;
  background:rgba(20,19,19,.12);
  overflow:hidden;
}
.npx-progress i{
  display:block;height:100%;width:20%;
  border-radius:99px;
  background:linear-gradient(90deg,#E8440A,#FF6A2A);
  box-shadow:0 0 10px rgba(255,76,0,.45);
  transition:width .25s ease;
  font-style:normal;
}
.npx-count{
  font-size:14px;font-weight:900;color:#141313;font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.npx-count small{color:rgba(20,19,19,.4);font-weight:700;}

@media (prefers-reduced-motion:reduce){
  .npx-card,.npx-panel,.npx-reveal{transition:none;}
  .npx .npx-card .npx-video,.npx .npx-card--video::after{transition:none;}
  .npx-reveal{max-height:130px;opacity:1;}
}

/* Typografie: headings in DHB Elms, body blijft Satoshi */
.npx-head h2,.npx-panel h3{
  font-family:'DHB Elms','Satoshi',ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
}

/* -- Grid-variant (overzichtspagina) -- */
.npx-grid{
  max-width:1350px;margin:30px auto 0;
  padding:0 24px;
  display:grid;grid-template-columns:repeat(var(--npx-cols,3),1fr);gap:22px;
}
@media (max-width:1024px){.npx-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.npx-grid{grid-template-columns:1fr;}}
.npx-grid .npx-card{width:auto;}

/* ---------- Mobiel: rustiger kaarten, foto blijft zichtbaar ---------- */
@media (max-width:700px){
  /* tags als subtiel glas in plaats van felle lime blokken */
  .npx-tags{left:12px;top:12px;right:12px;gap:5px;}
  .npx-tag{
    padding:4px 9px;
    font-size:9px;font-weight:800;letter-spacing:.04em;
    background:rgba(15,14,14,.5);
    border:1px solid color-mix(in srgb,var(--npx-accent,#FF4C00) 45%,transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:#fff;
    text-shadow:0 1px 4px rgba(15,14,14,.4);
    box-shadow:0 4px 12px rgba(15,14,14,.3);
  }
  /* paneel compacter zodat de foto niet volledig verdwijnt */
  .npx-panel{margin:10px;padding:13px 14px 12px;border-radius:16px;}
  .npx-loc{font-size:11px;}
  .npx-panel h3{font-size:15.5px;margin-top:4px;}
  .npx-specs{margin-top:8px;gap:4px;}
  .npx-spec{padding:4px 8px;font-size:9.5px;}
  /* beschrijving weglaten: de kaart linkt zelf al door */
  .npx-reveal p{display:none;}
  .npx-link{margin-top:10px;font-size:12px;}
  .npx-link .circ{width:30px;height:30px;}
  .npx-link .circ svg{width:12px;height:12px;}
}
@media (max-width:700px){
  /* filters op één scrollbare regel in plaats van drie rijen */
  .npx-filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .npx-filters::-webkit-scrollbar{display:none;}
  .npx-filter{flex:none;padding:7px 13px;font-size:11.5px;}
}