/* ============================================
   Projectenoverzicht met filters (/projecten/)
   ============================================ */
.page-projecten {
  --pj-gutter: clamp(16px, 4vw, 32px);
  --pj-ink: #1F2122;
  --pj-muted: #5C6063;
  --pj-line: #E4E4E4;
  --pj-soft: #F5F5F4;
}
.pj-wrap { width: 100%; max-width: calc(1140px + 2 * var(--pj-gutter)); margin: 0 auto; padding-inline: var(--pj-gutter); }

/* Kop */
.pj-head { padding-block: clamp(40px, 6vw, 72px); background: var(--color-primary); }
.pj-kicker {
  margin: 0 0 12px;
  color: var(--color-accent);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pj-title {
  margin: 0 0 16px;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.08;
}
.pj-lead { max-width: 40em; margin: 0; color: rgba(255, 255, 255, 0.95); font-family: var(--font-main); font-size: 18px; line-height: 1.7; }

/* Layout */
.pj-main { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px); background: var(--pj-soft); font-family: var(--font-main); }
.pj-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) {
  .pj-layout { grid-template-columns: 260px 1fr; gap: 40px; }
}

/* Paneel */
.pj-panel { display: none; }
.pj-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pj-panel__title { margin: 0; color: var(--pj-ink); font-size: 18px; font-weight: 700; }
.pj-panel__close { display: none; border: 0; background: none; color: var(--pj-ink); font-size: 28px; line-height: 1; cursor: pointer; }
.pj-panel__foot { display: flex; gap: 10px; }
.pj-panel__foot [data-close] { display: none; }

.pj-group { margin: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--pj-line); }
.pj-group__label { float: left; width: 100%; padding: 0; margin-bottom: 10px; color: var(--pj-ink); font-size: 14px; font-weight: 700; }
.pj-group__options { display: grid; clear: both; gap: 2px; }
.pj-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin-inline: -8px;
  border-radius: 6px;
  color: var(--pj-ink);
  font-size: 14px;
  cursor: pointer;
}
.pj-opt:hover { background: rgba(0, 0, 0, 0.04); }
.pj-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }
.pj-opt__swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.pj-opt__label { flex: 1; }
.pj-opt__count { color: var(--pj-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pj-opt.is-empty { opacity: 0.4; }

/* Kleur als compacte lijst in twee kolommen op desktop */
@media (min-width: 1024px) {
  .is-ready .pj-panel { display: block; position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow-y: auto; padding-right: 6px; }
  .pj-panel__foot { padding-top: 16px; border-top: 1px solid var(--pj-line); }
}

/* Mobiel: paneel als laag over de pagina */
@media (max-width: 1023px) {
  .pj-panel.is-open {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
  }
  .pj-panel.is-open .pj-panel__head { padding: 16px var(--pj-gutter); margin: 0; border-bottom: 1px solid var(--pj-line); }
  .pj-panel.is-open .pj-panel__close { display: block; }
  .pj-panel.is-open .pj-form { flex: 1; overflow-y: auto; padding: 0 var(--pj-gutter); }
  .pj-panel.is-open .pj-group:first-child { border-top: 0; }
  .pj-panel.is-open .pj-panel__foot { padding: 12px var(--pj-gutter); border-top: 1px solid var(--pj-line); }
  .pj-panel.is-open .pj-panel__foot [data-close] { display: inline-flex; flex: 1; justify-content: center; }
  html.pj-lock { overflow: hidden; }
}

/* Knoppen */
.pj-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pj-btn--ghost { background: transparent; color: var(--color-primary); }
.pj-btn--solid { background: var(--color-primary); color: var(--color-white); }
.pj-btn--filter { display: none; background: var(--color-white); color: var(--color-primary); }
.is-ready .pj-btn--filter { display: inline-flex; }
@media (min-width: 1024px) { .is-ready .pj-btn--filter { display: none; } }
.pj-btn__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 12px;
}
.pj-btn__badge[hidden] { display: none; }

/* Resultaten */
.pj-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pj-bar__count { margin: 0; color: var(--pj-muted); font-size: 15px; }
.pj-bar__count strong { color: var(--pj-ink); }
.pj-active { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pj-active[hidden] { display: none; }
.pj-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pj-pill::after { content: "×"; font-size: 16px; line-height: 1; opacity: 0.8; }
.pj-pill--reset { background: transparent; color: var(--color-primary); text-decoration: underline; }
.pj-pill--reset::after { content: none; }

.pj-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .pj-grid { grid-template-columns: repeat(2, 1fr); } }

.pj-empty { padding: 32px; border-radius: 10px; background: var(--color-white); text-align: center; }
.pj-empty[hidden] { display: none; }
.pj-empty p { margin: 0 0 16px; color: var(--pj-muted); line-height: 1.6; }
.pj-empty strong { color: var(--pj-ink); }

/* CTA */
.pj-cta { padding-block: clamp(40px, 6vw, 64px); background: var(--color-white); }
.pj-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.pj-cta__title { margin: 0 0 8px; color: var(--color-primary); font-family: var(--font-main); font-size: clamp(24px, 3vw, 32px); font-weight: 700; }
.pj-cta__text { margin: 0; color: var(--pj-muted); font-family: var(--font-main); font-size: 16px; }
.pj-cta .btn { padding: 18px 30px; }