/* ============================================================
   PORTFOLIO — polaroid-wand
   ============================================================ */

/* ---------- hero ---------- */
.pf-hero{padding:clamp(112px,14vw,164px) 0 clamp(34px,4.5vw,56px)}
.pf-hero .label{margin-bottom:clamp(20px,3vw,34px)}
.pf-title{margin-bottom:clamp(28px,4vw,52px)}
.pf-hero-foot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,80px);align-items:start}
@media(max-width:820px){.pf-hero-foot{grid-template-columns:1fr;gap:22px}}

/* ---------- categorieën ---------- */
.pf-cats{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.pf-cats-inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.pf-cats-inner::-webkit-scrollbar{display:none}
.pf-cat{
  background:none;border:0;border-right:1px solid var(--rule);
  font:inherit;color:var(--grijs);cursor:pointer;white-space:nowrap;
  padding:19px clamp(14px,1.8vw,26px);
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  font-variation-settings:"wght" 600;
  display:flex;align-items:center;gap:9px;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.pf-cat:first-child{border-left:1px solid var(--rule)}
.pf-cat-n{font-size:10px;opacity:.55;letter-spacing:.1em}
.pf-cat:hover{color:var(--kastanje);background:var(--shade)}
.pf-cat.active{background:var(--kastanje);color:var(--creme)}
.pf-cat.active .pf-cat-n{opacity:.6}

/* ---------- panel ---------- */
.pf-panel{padding:clamp(52px,7vw,96px) 0 0}
.pf-panel-head{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,80px);
  align-items:end;margin-bottom:clamp(44px,6vw,84px);
}
@media(max-width:820px){.pf-panel-head{grid-template-columns:1fr;gap:20px;align-items:start}}
.pf-panel-head .label{margin-bottom:14px}

.pf-empty{padding:clamp(40px,7vw,90px) 0 clamp(60px,9vw,120px);max-width:52ch}
.pf-empty .label{margin-bottom:14px}
.pf-empty .body-text{margin-top:18px}

/* ---------- de polaroid-wand ---------- */
.pol-wall{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,3.2vw,54px) clamp(18px,2.6vw,42px);
  align-items:start;
}
@media(max-width:1080px){.pol-wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.pol-wall{grid-template-columns:repeat(2,1fr);gap:22px 16px}}
@media(max-width:420px){.pol-wall{grid-template-columns:1fr}}

/* verspringende hoogtes — pinboard-gevoel i.p.v. strak raster */
.pol-wall > .polaroid:nth-child(4n+2){margin-top:clamp(20px,3.4vw,54px)}
.pol-wall > .polaroid:nth-child(4n+3){margin-top:clamp(8px,1.4vw,22px)}
.pol-wall > .polaroid:nth-child(4n+4){margin-top:clamp(30px,5vw,80px)}
@media(max-width:760px){
  .pol-wall > .polaroid:nth-child(4n+2),
  .pol-wall > .polaroid:nth-child(4n+3),
  .pol-wall > .polaroid:nth-child(4n+4){margin-top:0}
  .pol-wall > .polaroid:nth-child(even){margin-top:26px}
}

/* De stijl voor lege polaroids staat in site.css: projects en over-mij
   gebruiken hem ook en laden dit bestand niet. */
.pol-note{
  display:block;text-align:center;font-size:clamp(20px,2.2vw,29px);
  margin-top:clamp(40px,5vw,70px);transform:rotate(-2deg);color:var(--kastanje);
}

/* ---------- cta ---------- */
.pf-cta{padding:var(--section) 0 0;text-align:center}
.pf-cta .body-text{margin-left:auto;margin-right:auto}