/* wv: video-sectie "werf in beeld" (dak) — alpha-service.be */
.wv{padding:88px 0;background:var(--paper)}
.wv-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"head video" "list video";column-gap:64px;row-gap:0;align-items:start}
.wv-head{grid-area:head}
.wv-head h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1;letter-spacing:.01em;margin-bottom:1rem}
.wv-head .sec-sub{max-width:54ch;margin-bottom:2rem}
.wv-media{grid-area:video;justify-self:center;width:100%;max-width:340px}
.wv-frame{position:relative;aspect-ratio:9/16;background:var(--ink);border:2px solid var(--ink);box-shadow:var(--shadow);overflow:hidden}
.wv-frame::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;z-index:3;background:repeating-linear-gradient(-45deg,var(--amber) 0 12px,var(--ink) 12px 24px);pointer-events:none}
.wv-video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.wv-badge{position:absolute;z-index:3;left:12px;top:20px;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(25,21,18,.82);color:var(--paper);padding:.35rem .6rem;pointer-events:none}
.wv-badge i{width:7px;height:7px;border-radius:50%;background:#ef4444;display:block;animation:wvpulse 1.8s infinite}
@keyframes wvpulse{0%,100%{opacity:1}50%{opacity:.25}}
.wv-cap{position:absolute;z-index:3;left:12px;right:12px;top:54px;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;line-height:1.1;color:var(--ink);background:var(--amber);padding:.4rem .7rem;width:max-content;max-width:calc(100% - 24px);opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none}
.wv.is-playing .wv-cap{opacity:1;transform:none}
.wv-play{position:absolute;z-index:4;inset:0;width:100%;border:0;background:linear-gradient(180deg,rgba(25,21,18,.05) 35%,rgba(25,21,18,.72));cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.9rem;padding-bottom:2.2rem;color:var(--paper);font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase}
.wv-play-ico{position:relative;width:76px;height:76px;background:var(--amber);color:var(--ink);display:grid;place-items:center;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.wv-play-ico svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
.wv-play:hover .wv-play-ico{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.wv-play-ico::after{content:"";position:absolute;inset:-2px;border:2px solid var(--amber);animation:wvring 2.4s ease-out infinite;pointer-events:none}
@keyframes wvring{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.45)}}
.wv-play-t{display:flex;gap:.6rem;align-items:center}
.wv-play-t small{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;font-weight:500;opacity:.85}
.wv.is-playing .wv-play,.wv.is-started:not(.is-ended) .wv-play{display:none}
.wv-frame-note{margin-top:.9rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(25,21,18,.6);display:flex;justify-content:space-between;gap:1rem}
.wv-list{grid-area:list;list-style:none;display:grid;gap:12px;margin:0 0 1.8rem;padding:0}
.wv-ch{width:100%;display:grid;grid-template-columns:72px 1fr auto;gap:1rem;align-items:center;text-align:left;font:inherit;color:inherit;background:#fff;border:2px solid var(--ink);padding:.6rem 1rem .6rem .6rem;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.wv-ch:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.wv-ch img{width:72px;height:72px;object-fit:cover;border:1px solid var(--line)}
.wv-ch-t{font-family:var(--disp);font-weight:800;font-size:1.25rem;line-height:1.05;text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:.25rem}
.wv-ch-d{font-size:.88rem;line-height:1.45;color:rgba(25,21,18,.72);display:block}
.wv-ch-time{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--amber-deep);align-self:start;padding-top:.15rem}
.wv-ch[aria-current="true"]{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--amber)}
.wv-ch[aria-current="true"] .wv-ch-d{color:rgba(246,243,238,.72)}
.wv-ch[aria-current="true"] .wv-ch-time{color:var(--amber)}
.wv-lower{grid-column:1/-1;margin-top:3rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:start}
.wv-note{background:var(--ink);color:var(--paper);padding:1.8rem 2rem;border-left:6px solid var(--amber)}
.wv-note h3{font-family:var(--disp);font-weight:800;font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;color:var(--amber);margin-bottom:.5rem}
.wv-note p{font-size:.98rem;color:rgba(246,243,238,.82);margin-bottom:1.2rem}
.wv-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem;padding:0}
.wv-chips li{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-l);padding:.3rem .6rem;color:rgba(246,243,238,.85)}
.wv-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.wv-note .btn--amber{box-shadow:6px 6px 0 rgba(246,243,238,.22)}
.wv-note .btn--amber:hover{box-shadow:9px 9px 0 rgba(246,243,238,.22)}
.wv-more{border:2px solid var(--ink);padding:1.6rem 1.8rem;background:var(--paper-2)}
.wv-more h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:.9rem;font-weight:500}
.wv-more ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.wv-more a{display:flex;justify-content:space-between;gap:1rem;align-items:center;text-decoration:none;font-family:var(--disp);font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.03em;padding:.55rem 0;border-bottom:1px solid var(--line);min-height:44px}
.wv-more a:hover{color:var(--amber-deep)}
.wv-more a span{font-family:var(--body);transition:transform .2s}
.wv-more a:hover span{transform:translateX(4px)}
@media(max-width:900px){
  .wv{padding:64px 0}
  .wv-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "video" "list"}
  .wv-media{max-width:320px;margin-bottom:2rem}
  .wv-head .sec-sub{margin-bottom:1.6rem}
  .wv-lower{grid-template-columns:minmax(0,1fr);margin-top:1.5rem}
}
@media(max-width:480px){
  .wv-ch{grid-template-columns:56px 1fr auto;gap:.8rem}
  .wv-ch img{width:56px;height:56px}
  .wv-ch-t{font-size:1.12rem}
  .wv-note{padding:1.4rem 1.3rem}
  .wv-cta .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.wv-badge i,.wv-play-ico::after{animation:none}.wv-cap,.wv-ch,.wv-play-ico{transition:none}}

/* v4: de clip heeft eigen huisstijl (header, titels) — geen extra overlays */
.wv-frame::before,.wv-badge,.wv-cap{display:none}
.wv-play{justify-content:center;padding-bottom:0;background:rgba(25,21,18,.22)}
.wv-play-t{display:none}
.wv-frame{box-shadow:var(--shadow)}

/* v5 compat: stadspagina's gebruiken andere variabelen/klassen (--font-head, .section) */
.wv{--disp:var(--font-head,'Barlow Condensed',Impact,sans-serif);--body:var(--font-body,'Inter',system-ui,sans-serif);--mono:var(--font-mono,'IBM Plex Mono',monospace);--ink:#191512;--paper:#f6f3ee;--paper-2:#efe9df;--amber:#f59e0b;--amber-deep:#a0490a;--steel:#7d97ad;--wa:#15803d;--line:rgba(25,21,18,.16);--line-l:rgba(246,243,238,.16);--shadow:6px 6px 0 #191512;color:var(--ink);font-family:var(--body)}
.wv .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wv .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-deep);display:block;margin-bottom:.8rem}
.wv .sec-sub{font-size:.98rem;color:rgba(25,21,18,.68);line-height:1.6}
.wv .btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:1.15rem;padding:.85rem 1.6rem;text-decoration:none;border:2px solid var(--ink);cursor:pointer;line-height:1.2;transition:transform .2s,box-shadow .2s}
.wv .btn--amber{background:var(--amber);color:var(--ink)}
.wv .btn--wa{background:var(--wa);color:#fff;border-color:var(--wa);box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.wv .btn--wa:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 rgba(0,0,0,.35)}
.wv h2,.wv h3,.wv p,.wv ul,.wv ol{margin-top:0}
.wv button{font-family:inherit}