/* Videokaart (1-11-2026): een kaart met omslagbeeld die de video op de pagina zelf afspeelt,
   in een venster (js/videokaart.js). Zonder JavaScript is de kaart een gewone link naar de mp4.
   Gebruikt op de aanbodpagina's ("Zo werkt het bij ons", staand 9:16) en op /verwijzers/ en
   /huisartsen/ (bijsluiter voor verwijzers en huisartsen, liggend 16:9), en als tegels in de strook
   "Even lachen" op Kijk & Luister (Hulp die ..., liggend).
   Kleuren en lettertypen uit de :root-variabelen van elke pagina, net als bijsluiterkaart.css. */

.vk-rij{display:flex;flex-wrap:wrap;gap:16px;margin:28px 0 0}
.vk{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;flex:0 1 420px;max-width:460px;padding:10px 18px 10px 10px;background:var(--surface,#fff);border:2.5px solid var(--ink,#211733);border-radius:var(--radius-lg,22px);box-shadow:4px 4px 0 var(--ink,#211733);color:var(--text,#241A36);text-decoration:none;text-align:left;transition:transform .25s var(--ease,ease),box-shadow .25s}
.vk--breed{grid-template-columns:minmax(0,200px) minmax(0,1fr);flex-basis:560px;max-width:620px}
a.vk:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--roze,#F14B7C)}
a.vk:hover .vk-actie{text-decoration:underline;text-underline-offset:3px}

.vk-beeld{position:relative;display:block;aspect-ratio:9/16;border:2px solid var(--ink,#211733);border-radius:12px;overflow:hidden;background:#F7F2EA}
.vk--breed .vk-beeld{aspect-ratio:16/9}
.vk-beeld img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.vk-play{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--roze,#F14B7C);color:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(34,24,51,.28);transition:transform .25s var(--ease,ease)}
.vk-play svg{width:18px;height:18px;margin-left:3px}
a.vk:hover .vk-play{transform:scale(1.08)}

.vk-tekst{display:flex;flex-direction:column;gap:4px;min-width:0}
.vk-kicker{font-family:var(--font-display,system-ui,sans-serif);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--roze,#F14B7C)}
.vk-titel{font-family:var(--font-display,system-ui,sans-serif);font-weight:800;font-size:1.06rem;line-height:1.25;letter-spacing:-.01em;color:var(--aubergine-deep,#221833)}
.vk-actie{font-family:var(--font-display,system-ui,sans-serif);font-weight:700;font-size:.92rem;color:var(--roze,#F14B7C)}

/* Staand (aanbodpagina's, 2-11-2026): het omslagbeeld zelf is de kaart, met een grote afspeelknop
   en het onderschrift "Zo werkt ... bij ons" eronder. Op een breed scherm staat het rechts naast
   de koptekst (de container van de kop wordt dan een raster met twee kolommen). */
.vk-rij--staand{gap:20px}
.vk.vk--staand{display:flex;flex-direction:column;align-items:stretch;gap:12px;flex:0 0 auto;width:200px;max-width:none;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.vk--staand .vk-beeld{border-width:2.5px;border-radius:var(--radius-lg,22px);box-shadow:5px 5px 0 var(--ink,#211733);transition:transform .25s var(--ease,ease),box-shadow .25s}
a.vk.vk--staand:hover{transform:none;box-shadow:none}
a.vk--staand:hover .vk-beeld{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--roze,#F14B7C)}
.vk--staand .vk-play{width:64px;height:64px;margin:-32px 0 0 -32px;border:2.5px solid #fff}
.vk--staand .vk-play svg{width:28px;height:28px;margin-left:4px}
.vk-duur{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(19,13,30,.78);color:#fff;font-family:var(--font-display,system-ui,sans-serif);font-weight:700;font-size:.8rem;line-height:1.3}
.vk-onder{font-family:var(--font-display,system-ui,sans-serif);font-weight:700;font-size:1rem;line-height:1.3;color:var(--aubergine-deep,#221833);text-align:center;text-wrap:balance}
a.vk--staand:hover .vk-onder{color:var(--roze,#F14B7C)}

/* Boksgroepen: twee filmpjes naast elkaar in de donkere kop (rechts staat al de foto) */
.boks-hero .vk.vk--staand{width:170px}
.boks-hero .vk--staand .vk-beeld{border-color:#fff;box-shadow:5px 5px 0 var(--roze,#F14B7C)}
.boks-hero .vk-onder{color:#fff}
.boks-hero a.vk--staand:hover .vk-onder{color:var(--roze,#F14B7C)}

@media (min-width:900px){
  .page-head .container:has(> .vk-rij--staand),
  .gw-hero .container:has(> .vk-rij--staand){display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:repeat(8,auto) 1fr;column-gap:64px}
  .page-head .container:has(> .vk-rij--staand) > *,
  .gw-hero .container:has(> .vk-rij--staand) > *{grid-column:1}
  .page-head .container > .vk-rij--staand,
  .gw-hero .container > .vk-rij--staand{grid-column:2;grid-row:1 / -1;align-self:center;margin:0;padding-bottom:32px}
  .page-head .container > .vk-rij--staand .vk--staand,
  .gw-hero .container > .vk-rij--staand .vk--staand{width:250px}
}

/* Tegels: een raster van liggende filmpjes ("Even lachen" op Kijk & Luister) */
.vk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin:32px 0 0}
.vk.vk--tegel{display:flex;flex-direction:column;align-items:stretch;gap:12px;max-width:none;padding:10px 10px 14px}
.vk--tegel .vk-tekst{padding:0 6px}
.vk-hulp{font-family:var(--font-display,system-ui,sans-serif);font-weight:800;font-size:1rem;line-height:1.2;color:var(--aubergine-deep,#221833)}
.vk-hulp em{display:block;font-style:normal;color:var(--roze,#F14B7C)}

/* Het venster */
.vk-venster{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;padding:0;border:2.5px solid var(--ink,#211733);border-radius:18px;background:#130D1E;max-width:96vw;max-height:94vh;overflow:visible}
.vk-venster::backdrop{background:rgba(19,13,30,.78)}
.vk-venster video{display:block;max-width:94vw;max-height:88vh;width:auto;height:auto;border-radius:16px}
.vk-venster--staand video{height:88vh}
.vk-dicht{position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:50%;border:2.5px solid var(--ink,#211733);background:#fff;color:var(--ink,#211733);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.vk-dicht:hover{background:var(--roze,#F14B7C);color:#fff}

@media (max-width:520px){
  .vk,.vk--breed{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:8px 12px 8px 8px;box-shadow:3px 3px 0 var(--ink,#211733);flex-basis:100%}
  .vk--breed{grid-template-columns:120px minmax(0,1fr)}
  .vk-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .vk.vk--tegel{padding:6px 6px 10px;gap:8px}
  .vk--tegel .vk-tekst{padding:0 4px}
  .vk-hulp{font-size:.9rem}
  .vk-play{width:30px;height:30px;margin:-15px 0 0 -15px}
  .vk-play svg{width:13px;height:13px;margin-left:2px}
  .vk-titel{font-size:.97rem}
  .vk.vk--staand{flex-basis:auto;width:160px;padding:0;box-shadow:none}
  .vk--staand .vk-beeld{box-shadow:4px 4px 0 var(--ink,#211733)}
  .vk--staand .vk-play{width:52px;height:52px;margin:-26px 0 0 -26px}
  .vk--staand .vk-play svg{width:22px;height:22px;margin-left:3px}
  .vk-onder{font-size:.92rem}
  .vk-dicht{top:6px;right:6px}
}

@media print{.vk-rij{display:none!important}}