/* Studio Mierenwerk - het werk als stapel (js/stapel.js) en letters die opzij stappen
   (js/letters.js). De stapel geldt alleen als stapel.js de klasse zet (vanaf 900 px); daaronder
   blijft het raster uit site.css. */
.werklijst.is-stapel{display:block;}
.werklijst.is-stapel .wl-rij{position:sticky; display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:auto auto auto auto 1fr;
  column-gap:0; row-gap:10px; align-content:start; min-height:min(64vh, 540px); margin-bottom:56px;
  border:1.5px solid var(--mw-ink); background:var(--mw-paper); transform-origin:50% 0; will-change:transform;}
.werklijst.is-stapel .wl-rij:last-child{margin-bottom:0;}
/* de kaart eronder wordt iets donkerder als er een op ligt: een inktlaag, geen filter */
.werklijst.is-stapel .wl-rij::after{content:""; position:absolute; inset:0; background:var(--mw-ink); opacity:var(--bedekt, 0); pointer-events:none;}
.werklijst.is-stapel .wl-thumb, .werklijst.is-stapel .wl-rij:nth-child(-n+2) .wl-thumb{grid-column:1; grid-row:1 / -1; aspect-ratio:auto; height:100%;
  border:0; border-right:1.5px solid var(--mw-ink);}
.werklijst.is-stapel .wl-rij:hover .wl-thumb, .werklijst.is-stapel .wl-rij:focus-visible .wl-thumb{transform:none; box-shadow:none;}
.werklijst.is-stapel .wl-thumb img{transition:transform .4s var(--mw-ease);}
.werklijst.is-stapel .wl-rij:hover .wl-thumb img{transform:scale(1.02);}
.werklijst.is-stapel .wl-rij > :not(.wl-thumb){grid-column:2; margin-left:clamp(24px, 3vw, 40px); margin-right:clamp(24px, 3vw, 40px);}
.werklijst.is-stapel .wl-meta{margin-top:clamp(24px, 3vw, 36px);}
.werklijst.is-stapel .wl-rij h3{font-size:clamp(30px, 3.4vw, 46px); line-height:1.02;}
.werklijst.is-stapel .wl-hook{font-size:16px; max-width:36ch;}
.werklijst.is-stapel .wl-actie{align-self:end; margin-bottom:clamp(20px, 3vw, 32px);}

.opzij-woord{display:inline-block; white-space:nowrap;}
.opzij-l{display:inline-block; will-change:transform;}

/* smal scherm: dezelfde stapel, maar het beeld boven de tekst (stapel.js zet de klasse op elke breedte) */
@media(max-width:899px){
  .werklijst.is-stapel .wl-rij{grid-template-columns:1fr; grid-template-rows:auto; min-height:0; margin-bottom:28px; row-gap:8px; padding-bottom:18px;}
  .werklijst.is-stapel .wl-thumb, .werklijst.is-stapel .wl-rij:nth-child(-n+2) .wl-thumb{grid-column:1; grid-row:auto; height:auto; aspect-ratio:16/10;
    border-right:0; border-bottom:1.5px solid var(--mw-ink);}
  .werklijst.is-stapel .wl-rij > :not(.wl-thumb){grid-column:1; margin-left:18px; margin-right:18px;}
  .werklijst.is-stapel .wl-meta{margin-top:10px;}
  .werklijst.is-stapel .wl-rij h3{font-size:26px;}
  .werklijst.is-stapel .wl-hook{font-size:14px;}
  .werklijst.is-stapel .wl-actie{margin-bottom:0;}
}