/* =============== PORTFOLIO HERO (Schoon) =============== */
.hero-portfolio {
  position: relative;
  min-height: clamp(48svh, 54svh, 60svh);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  overflow: hidden;
}

.hero-portfolio__bg {
  position: absolute;
  inset: 0;
  /* Alle instellingen staan hier, de bron (url) komt uit de HTML */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero-portfolio__inner {
  position: relative;
  z-index: 1;
  color: #fff;
  width: 100%;
  max-width: clamp(1120px, 92vw, 1400px);
  padding: 100px 24px 80px;
}

.hero-portfolio__title {
  font-size: clamp(2.2rem, 4.8vw, 3.2rem);
  line-height: 1.1;
  margin: 0 0 10px;
  color: #fff;
}

.hero-portfolio__sub {
  color: rgba(255,255,255,.95);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  max-width: 60ch;
  margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-portfolio__inner {
    padding: 80px 20px 60px;
  }
  .hero-portfolio__btn {
    margin: 0 auto;
  }
  .hero-portfolio{
    margin-top: 70px;
  }
  .hero-portfolio__sub{
    display: none;
  }
}




/*========================*/
/*FILTER PORTFOLIO SECTION*/
/*========================*/

/* Toolbar */
.projects-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
.projects-filter{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip{
  padding:8px 12px; border-radius:999px;
  background:#f7fafc; border:1px solid #c5cfd6; color:#2b3a44;
  font-weight:800; cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.06); transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-chip:hover{ transform:translateY(-1px); }
.filter-chip.is-active{ background:var(--mussan-primary); border-color:var(--mussan-primary); color:#fff; }

.projects-sort{ display:flex; align-items:center; gap:8px; font-weight:700; }
.projects-sort select{
  border:1px solid #c5cfd6; background:#fff; border-radius:10px; padding:8px 10px; font-weight:700;
}

/* Grid (leunt op jouw service2 card-stijl) */
.projects-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px){ .projects-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .projects-grid{ grid-template-columns: 1fr; } }

/* verbergen bij filter */
.project-card.is-hidden{ display:none !important; }

/* ==== PROJECT CARDS: juiste stijl + animaties ==== */
.service2 .project-card{
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(300px, 32vw, 420px);
  padding: 20px 18px;
  border-radius: 18px; overflow: hidden;
  background-color: #e9eef2;
  background-image: var(--img);          /* <— uit HTML inline style */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(0,0,0,0);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  transition:
    opacity .28s ease,
    transform .28s ease,
    box-shadow .22s ease,
    border-color .22s ease;
  /* animatie stagger bij in-fade */
  transition-delay: var(--stagger, 0ms);
}
/* donkere gradient onderin voor leesbaarheid */
.service2 .project-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.55) 90%);
}
/* tekst boven de overlay, wit zoals in je voorbeeld */
.service2 .project-card h5,
.service2 .project-card p,
.service2 .project-card .card-cta2{
  position: relative; z-index: 1; color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.service2 .project-card h5{ margin:0 0 2px; font-size:1.22rem; line-height:1.25; }
.service2 .project-card p{ margin:0 0 6px; font-size:1.02rem; opacity:.98; }
.service2 .project-card .card-cta2{ display:inline-flex; align-items:center; gap:6px; font-weight:800; text-decoration:none; }
.service2 .project-card .card-cta2:hover{ text-decoration: underline; }
/* badge linksboven */
.icon-badge2{
  position:absolute; left:18px; top:18px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:999px;
  background:#f7fafc; border:1px solid #c5cfd6; color: var(--mussan-primary);
  box-shadow:0 6px 14px rgba(0,0,0,.08); font-weight:800; font-size:.95rem;
}
.icon-badge2 i{ font-size:1rem; margin-right:8px; }
/* hover state */
@media (hover:hover){
  .service2 .project-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(0,0,0,.12);
    border-color: rgba(0,0,0,.06);
  }
}

/* ==== FILTER-ANIMATIE ==== */
.project-card{ opacity:1; transform: translateY(0) scale(1); }
.project-card.is-filtered-out{
  opacity:0;
  transform: translateY(8px) scale(.98);
  pointer-events:none;
}
.project-card.is-hidden{ display:none !important; }








/* --- Responsive filterchips & sort --- */

/* Desktop blijft zoals je had */
.projects-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}

/* Mobiel: stapelen + horizontaal scrollbare chips */
@media (max-width: 768px){
  .projects-toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .projects-filter{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 2px 10px;        /* extra ruimte voor vinger */
    margin: 0 -8px;               /* optisch rand-tot-rand */
    padding-left: 8px;            /* eerste chip niet geplakt aan rand */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .filter-chip{
    flex: 0 0 auto;               /* laat chips hun eigen breedte houden */
    scroll-snap-align: start;
    font-size: .95rem;
    padding: 8px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
  }

  /* Sorteerblok onder de chips, full width */
  .projects-sort{
    justify-content: space-between;
    gap: 10px;
  }
  .projects-sort select{
    flex: 1 1 auto;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
  }
}

/* Extra klein (iPhone SE etc.) -> nog compacter */
@media (max-width: 380px){
  .filter-chip{ padding: 7px 10px; font-size: .9rem; }
  .projects-sort span{ font-size: .9rem; }
}

/* (optioneel) nette, subtiele scrollbar op mobiel/desktop */
.projects-filter::-webkit-scrollbar{ height: 6px; }
.projects-filter::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12); border-radius: 999px;
}
.projects-filter{ scrollbar-color: rgba(0,0,0,.12) transparent; scrollbar-width: thin; }

/* --- Badge groep + +N tooltip --- */
.badge-group{
  position:absolute; left:18px; top:18px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
}

/* binnen de groep is de hoofd-badge niet absoluut gepositioneerd */
.badge-group .icon-badge2{
  position:relative; left:auto; top:auto;
}

/* +N badge */
.badge-more{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 10px;
  border-radius:999px; font-weight:800; line-height:1;
  background:#f7fafc; border:1px solid #c5cfd6; color:#2b3a44;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  cursor:pointer;
}

/* Tooltip */
.badge-tooltip{
  position:absolute; left:0; top:calc(100% + 8px);
  display:none; padding:8px 10px; border-radius:12px;
  background:#fff; color:#2b3a44; border:1px solid #c5cfd6;
  box-shadow:0 18px 34px rgba(0,0,0,.12);
  white-space:nowrap;
}
.badge-tooltip.is-open,
.badge-group .badge-more:hover + .badge-tooltip{ display:block; }

.badge-tooltip .tip-item{
  display:flex; align-items:center; gap:8px;
  padding:6px 2px; font-weight:700;
}
.badge-tooltip .tip-item i{ font-size:1rem; }


/* =================================
   AANGEPASTE CONTAINER (Correctie)
================================= */
.container-portfolio {
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
    
    /* Was 1440px, nu aangepast naar een fijnere breedte */
    max-width: 1280px; 
}

/* =================================
   LAZY LOAD ANIMATIE
================================= */
/* 1. Onzichtbare kaarten écht verbergen. '.service2' geeft dit absolute voorrang. */
.service2 article.lazy-card:not(.is-visible) {
  opacity: 0 !important;
  transform: translateY(60px) !important;
}

/* 2. De soepele 0.8s animatie. Negeert tijdelijk de filter-stagger. */
.service2 article.lazy-card {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out !important;
  transition-delay: 0ms !important; 
}