/* videograaf-films: aanbod van de videograafpreview Kaderlicht (fictief).
   Bron: React Bits Pro Blocks/showcase-7 (block-port: twee kolommen, sticky voorbeeldkader 4:3,
   lijst met gestaffelde rijen) plus Components/pixelate-hover (origineel gecompileerd, three uit
   _shared/vendor) op het actieve beeld. Alles gescoped onder .msm-videograaf-films. */
.msm-videograaf-films{--vf-p:var(--m-primary,#e55b34);--vf-bg:var(--m-bg,#11130f);--vf-ink:var(--m-ink,#f5f2ea);--vf-s:var(--m-surface,#1a1d18);--vf-mu:var(--m-muted,#a9a596);--vf-a:var(--m-accent2,#e9dfc6);--vf-l:var(--m-line,#2b2e28);--vf-fd:var(--m-font-display,"Syne","Segoe UI",system-ui,sans-serif);--vf-fb:var(--m-font-body,"DM Sans","Segoe UI",system-ui,sans-serif);--vf-ease:cubic-bezier(.22,1,.36,1);position:relative;scroll-margin-top:112px;padding:64px 16px;background:var(--vf-bg);color:var(--vf-ink);font-family:var(--vf-fb);font-size:16px;line-height:1.5}
.msm-videograaf-films *{box-sizing:border-box}
.msm-videograaf-films [hidden]{display:none!important}
.msm-videograaf-films .vf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.msm-videograaf-films .vf-wrap{max-width:1400px;margin:0 auto;width:100%}
.msm-videograaf-films .vf-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}

/* Linker kolom: sticky vanaf lg (top 4 rem) */
.msm-videograaf-films .vf-title{margin:0;font:600 clamp(30px,4vw,48px)/1.05 var(--vf-fd);letter-spacing:-.02em;color:var(--vf-ink);text-wrap:balance}
.msm-videograaf-films .vf-intro{margin:20px 0 0;max-width:28rem;color:var(--vf-mu);font-size:16px;line-height:1.625;text-wrap:pretty}
.msm-videograaf-films .vf-link{display:inline-flex;align-items:center;gap:6px;margin-top:24px;color:var(--vf-ink);font-size:14px;font-weight:500;text-decoration:none;transition:color .2s}
.msm-videograaf-films .vf-link:hover{color:var(--vf-mu)}
.msm-videograaf-films .vf-link svg,.msm-videograaf-films .vf-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msm-videograaf-films .vf-link:focus-visible,.msm-videograaf-films .vf-row:focus-visible{outline:2px solid var(--vf-ink);outline-offset:4px}

/* Voorbeeldkader 4:3 met wisselende beelden, pixelate-hover erover en een onderrand-verloop */
.msm-videograaf-films .vf-frame{position:relative;margin-top:40px;aspect-ratio:4/3;overflow:hidden;border-radius:24px;border:1px solid var(--vf-l);background:var(--vf-s)}
.msm-videograaf-films .vf-slides,.msm-videograaf-films .vf-slide,.msm-videograaf-films .vf-focus,.msm-videograaf-films .vf-captions{position:absolute;inset:0}
.msm-videograaf-films .vf-slide{margin:0;opacity:0;transform:scale(1.06);transition:opacity .55s var(--vf-ease),transform .55s var(--vf-ease)}
.msm-videograaf-films .vf-slide.is-active{opacity:1;transform:scale(1)}
.msm-videograaf-films .vf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none}
.msm-videograaf-films .vf-focus{z-index:2;pointer-events:none}
.msm-videograaf-films .vf-focus.is-live{pointer-events:auto;cursor:crosshair;transition:opacity .55s var(--vf-ease)}
.msm-videograaf-films .vf-focus.is-switching{opacity:0}
/* originele pixelate-hover.css, gescoped */
.msm-videograaf-films .pixelate-hover-container{position:relative;width:100%;height:100%;overflow:hidden}
.msm-videograaf-films .pixelate-hover-container canvas{display:block;width:100%;height:100%;object-fit:cover}
.msm-videograaf-films .vf-captions{z-index:3;pointer-events:none}
.msm-videograaf-films .vf-caption{position:absolute;left:0;right:0;bottom:0;padding:64px 20px 20px;background:linear-gradient(to top,color-mix(in srgb,var(--vf-bg) 80%,transparent),color-mix(in srgb,var(--vf-bg) 25%,transparent),transparent);opacity:0;transition:opacity .55s var(--vf-ease)}
.msm-videograaf-films .vf-caption.is-active{opacity:1}
.msm-videograaf-films .vf-caption p{margin:0}
.msm-videograaf-films .vf-caption-title{color:var(--vf-ink);font-size:14px;font-weight:500}
.msm-videograaf-films .vf-caption-line{margin-top:4px!important;color:var(--vf-a);font-size:12px}
.msm-videograaf-films .vf-counter{position:absolute;z-index:4;left:16px;top:16px;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--vf-bg) 80%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--vf-ink);font-size:11px;letter-spacing:.12em;font-variant-numeric:tabular-nums;pointer-events:none}
.msm-videograaf-films .vf-note{margin:12px 0 0;color:var(--vf-mu);font-size:12px;letter-spacing:.04em}

/* Rechter kolom: lijst met bovenrand, rijen als echte links */
.msm-videograaf-films .vf-list{border-top:1px solid var(--vf-l)}
.msm-videograaf-films .vf-row{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:20px;padding:28px 0;border-bottom:1px solid var(--vf-l);color:inherit;text-decoration:none;cursor:pointer}
.msm-videograaf-films .vf-row:focus-visible{outline-offset:-2px}
.msm-videograaf-films .vf-num{padding-top:6px;color:var(--vf-mu);font-size:12px;letter-spacing:.12em;font-variant-numeric:tabular-nums;transition:color .2s}
.msm-videograaf-films .vf-row.is-active .vf-num{color:var(--vf-ink)}
.msm-videograaf-films .vf-body{min-width:0}
.msm-videograaf-films .vf-row-title{margin:0;font:600 clamp(24px,3vw,36px)/1.15 var(--vf-fd);letter-spacing:-.02em;color:var(--vf-ink)}
.msm-videograaf-films .vf-meta{margin:8px 0 0;color:var(--vf-mu);font-size:14px}
.msm-videograaf-films .vf-sum{margin:12px 0 0;max-width:32rem;color:var(--vf-mu);font-size:15px;line-height:1.625;text-wrap:pretty}
.msm-videograaf-films .vf-arrow{display:grid;place-items:center;flex-shrink:0;margin-top:4px;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--vf-ink) 30%,var(--vf-bg));color:var(--vf-ink);transition:background-color .2s,border-color .2s,color .2s}
.msm-videograaf-films .vf-arrow svg{transition:transform .2s ease-out}
.msm-videograaf-films .vf-row:hover .vf-arrow,.msm-videograaf-films .vf-row:focus-visible .vf-arrow{background:var(--vf-ink);border-color:var(--vf-ink);color:var(--vf-bg)}
.msm-videograaf-films .vf-row:hover .vf-arrow svg,.msm-videograaf-films .vf-row:focus-visible .vf-arrow svg{transform:translate(2px,-2px)}
.msm-videograaf-films .vf-row.is-armed .vf-arrow{background:var(--vf-p);border-color:var(--vf-p);color:var(--vf-bg)}

@media (min-width:640px){
.msm-videograaf-films{padding:80px 24px}
.msm-videograaf-films .vf-intro{font-size:18px}
.msm-videograaf-films .vf-frame{margin-top:48px}
.msm-videograaf-films .vf-caption{padding:64px 24px 24px}
.msm-videograaf-films .vf-row{gap:32px;padding:36px 0}
.msm-videograaf-films .vf-sum{font-size:16px}
}
@media (min-width:1024px){
.msm-videograaf-films{padding:96px 32px}
.msm-videograaf-films .vf-grid{grid-template-columns:.9fr 1.1fr;gap:64px}
.msm-videograaf-films .vf-sticky{position:sticky;top:4rem}
}
@media (min-width:1280px){
.msm-videograaf-films .vf-grid{gap:80px}
}
@media (prefers-reduced-motion:reduce){
.msm-videograaf-films .vf-slide{transform:none;transition:opacity .3s}
.msm-videograaf-films .vf-arrow svg,.msm-videograaf-films .vf-focus{transition:none}
}