/* SalSal Bouw — page-projecten.css */
/* ---- Projecten gallery ---- */
  .pgal__filters{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 40px; }
  .pgal__chip{
    font-family:var(--f-sub); font-weight:500; font-size:16px;
    padding:11px 22px; border-radius:var(--radius-pill);
    border:1px solid var(--hair-strong); background:#fff; color:var(--ink-2);
    cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .pgal__chip:hover{ border-color:var(--ink); }
  .pgal__chip[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:#fff; }
  .pgal{ column-count:3; column-gap:22px; }
  .pcard{
    position:relative; display:block; border-radius:var(--radius-lg); overflow:hidden;
    background:#0e1112; box-shadow:var(--shadow-card);
    isolation:isolate; break-inside:avoid; margin-bottom:22px; width:100%;
  }
  .pcard img{ width:100%; height:auto; display:block; transition:transform .8s cubic-bezier(.2,.5,.2,1); }
  .pcard::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(11,13,14,.82) 0%, rgba(11,13,14,.18) 42%, rgba(11,13,14,0) 70%);
  }
  .pcard:hover img{ transform:scale(1.06); }
  .pcard__meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px 24px 22px; color:#fff; }
  .pcard__tag{
    display:inline-block; font-family:var(--f-sub); font-weight:600; font-size:12px;
    letter-spacing:.12em; text-transform:uppercase; color:#fff;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);
    padding:5px 12px; border-radius:var(--radius-pill); margin-bottom:12px;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  }
  .pcard__title{ font-family:var(--f-display); font-weight:700; font-size:23px; letter-spacing:-0.018em; line-height:1.15; }
  .pcard__place{ font-family:var(--f-sub); font-size:15px; color:rgba(255,255,255,.82); margin-top:4px; }
  .pgal__empty{ display:none; padding:40px 0; color:var(--text); font-size:18px; }
  @media (max-width:980px){ .pgal{ column-count:2; } }
  @media (max-width:600px){ .pgal{ column-count:1; } }