/* ---------------------------------------------------------------------------
   beeld.css - alles wat met eigen foto's en eigen videoclips te maken heeft.
   Staat los van hoofd.css met opzet: daar werkt iemand anders in.
   Alles hieronder hangt onder een eigen klasse (.mwv-, .mwb-) of onder een
   bestaande klasse die alleen op deze site voorkomt, zodat er niets botst.
--------------------------------------------------------------------------- */

/* --- videoblok, algemeen ------------------------------------------------- */
.mwv {
  margin: 2.6em 0;
  position: relative;
}
.mwv-film {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--ink-3, #242120);
}
.mwv figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  font-size: .86rem;
  color: var(--grey-2, #8A847B);
}
.mwv figcaption .lijn {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--amber, #EDA31B);
  flex: none;
}
/* de <img> binnen <video> is de terugval voor browsers zonder video */
.mwv-film > img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- twee clips naast elkaar --------------------------------------------- */
/* Ze krijgen allebei dezelfde hoogte en houden hun eigen breedte. De liggende
   clip (470x264) wordt dus breed en de staande (432x768) smal - er hoeft
   nergens iets bijgesneden te worden. Een bijschrift voor allebei samen,
   want onder een clip van 150 pixels breed past geen zin. */
.mwv-duo .mwv-duo-g {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  align-items: flex-start;
}
.mwv-duo .mwv-film {
  width: auto;
  height: clamp(168px, 25vw, 264px);
  max-width: 100%;
  flex: none;
}
@media (max-width: 560px) {
  .mwv-duo .mwv-duo-g { flex-direction: column; gap: 16px; }
  .mwv-duo .mwv-film { width: 100%; height: auto; }
  .mwv-duo .mwv-duo-g > video + video { max-width: 220px; }
}

/* --- staande clip naast een stuk tekst (over ons) ------------------------ */
.mwv-werkplaats {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 44px);
  align-items: center;
  margin-top: clamp(30px, 4.5vw, 56px);
  padding-top: clamp(26px, 4vw, 46px);
  border-top: 1px solid var(--line, rgba(243, 241, 236, .13));
}
.mwv-werkplaats .mwv { margin: 0; }
.mwv-werkplaats .mwv-film { border-radius: 5px; }
.mwv-tekst h3 {
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-stretch: 106%;
  letter-spacing: -.025em;
  color: var(--bone, #F3F1EC);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.14;
  margin: 8px 0 12px;
}
.mwv-tekst p {
  margin: 0 0 10px;
  color: #C6C0B6;
  line-height: 1.62;
  max-width: 52ch;
}
.mwv-tekst p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .mwv-werkplaats { grid-template-columns: 1fr; }
  .mwv-werkplaats .mwv-film { max-width: 300px; }
}

/* --- clip in een tegel van het werkraster op de voorpagina --------------- */
.werk-g .w video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.werk-g .w .mwv {
  margin: 0;
  position: absolute;
  inset: 0;
}
.werk-g .w .mwv-film { border-radius: 0; height: 100%; }

/* --- foto's: de bijschriften onder de tegels van de voorpagina ----------- */
.mwb-bij {
  margin-top: 9px;
  font-size: .86rem;
  color: var(--grey, #9A948B);
}

/* --- team op de over-ons-pagina ------------------------------------------ */
/* De vierkante uitsnede knipt de zijkanten weg; het brandpunt staat per foto
   in de img zelf, zodat er geen gezicht half af valt. */
.ov-mensen .mens-f img { filter: grayscale(.18); }

/* --- beweging uit ---------------------------------------------------------
   beeld.js zet de clips alleen aan als de bezoeker beweging niet heeft
   uitgezet. Staat hij uit, dan blijft de poster staan en komt er een
   afspeelknop bij. Deze regel is het vangnet voor het geval het script
   niet laadt. */
@media (prefers-reduced-motion: reduce) {
  .mwv-film { animation: none !important; }
}