/* =========================================================
   MULTIVIEWER - recent werk als ATEM-multiviewer
   Nagebouwd in HTML naar Willems eigen ontwerp
   (MULTIVIEWER/Multiviewer.psd): boven Preview en Program,
   onder acht bronvakjes, het laatste is de kleurenbalk.
   In HTML in plaats van de PNG zodat alles scherp blijft op
   elke schermgrootte en de labels boven de foto's staan.
   ========================================================= */

/* Gecentreerd via GSAP (xPercent/yPercent in home.js), zodat
   de scale- en y-tweens er zonder conflict bovenop kunnen.
   De 3rem in de breedteformule is de ruimte voor de titel.
   Sinds 13-08 staat de klantenloop vast onder het paneel in
   hetzelfde frame (Willems vraag): --opdr-ruimte (gezet in
   opdrachtgevers.css) gaat van de hoogte af en het paneel
   schuift een halve loophoogte omhoog, zodat de band onderin
   vrij blijft. De fallback 0px houdt de archiefpagina's heel,
   die laden opdrachtgevers.css niet. */
.mv {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--opdr-ruimte, 0px) / 2);
  z-index: 38; /* boven de dip (35), onder de korrel (40) */
  /* de breedte staat in een variabele omdat de kopregel hem nodig
     heeft om zichzelf vrij te houden van de vaste hoeken; daarom
     100vw en geen 100%, want in een padding zou een procent tegen
     het paneel zelf rekenen in plaats van tegen het venster */
  --mv-w: min(100vw - var(--pad) * 2, (100vh - var(--pad) * 2 - 3rem - var(--opdr-ruimte, 0px)) * 16 / 9);
  width: var(--mv-w);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* pas als de fade to black voorbij is doet de muis het;
   home.js zet deze klasse op de juiste scrollpositie */
.mv.is-on {
  visibility: visible;
  pointer-events: auto;
}

/* de kopregel: label links, lopende timecode rechts.
   Op een hoog venster wordt het paneel zo breed dat deze regel
   onder de vaste bug (links) en de contactknop (rechts) doorloopt;
   op 1512x982, zijn eigen scherm, stond de bug bovenop de R van
   RECENT WORK (01-08). De kop houdt zichzelf daarom vrij: precies
   zoveel als er tekortkomt, en nul zodra het paneel smal genoeg is. */
.mv-top {
  --vrij-links: calc(var(--pad) + clamp(30px, 3.1vw, 42px) + 0.9rem);
  --vrij-rechts: calc(var(--pad) + 6.4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
  padding-left: max(0px, calc(var(--vrij-links) - (100vw - var(--mv-w)) / 2));
  padding-right: max(0px, calc(var(--vrij-rechts) - (100vw - var(--mv-w)) / 2));
}

/* de typografie van de kop komt van .sectiekop (home.css):
   één kopsysteem voor de hele site */

/* tijd-van-dag timecode, PAL: het bolletje kleurt met de tally mee */
.mv-tc {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.mv-tc i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(242, 241, 238, 0.22);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.mv.mv-live .mv-tc i {
  background: var(--tally);
  box-shadow: 0 0 12px rgba(255, 47, 24, 0.8);
}

/* Het raster zelf leest als een schakelpaneel-monitor in een
   donkere regie: dunne zichtbare lijnen tussen de vensters, een
   smalle bezel met een lichte randlijn, een zachte schermgloed
   en een slagschaduw eronder. Zonder dit is het op zwart "een
   raster met wat foto's" (Willem, 30-07). */
.mv-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  container-type: size;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 2fr 1fr 1fr;
  gap: max(0.16cqw, 2px);
  background: #232629;
  border: 1px solid #33373c;
  box-shadow:
    0 0 0 max(0.5cqw, 7px) #101214,
    0 0 0 calc(max(0.5cqw, 7px) + 1px) #383c41,
    0 min(2.4cqw, 26px) min(8cqw, 88px) rgba(0, 0, 0, 0.6),
    0 0 min(10cqw, 110px) rgba(160, 190, 255, 0.09);
}

/* elke bron een vleugje glas: een lichte sheen bovenlangs en een
   inwendige vignettering, boven de foto's maar onder de labels */
.mv-win::before,
.mv-src::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 16%);
  box-shadow: inset 0 0 min(3.2cqw, 34px) rgba(0, 0, 0, 0.35);
}

/* ---------- vensters en bronvakjes ---------- */

.mv-win,
.mv-src {
  position: relative;
  overflow: hidden;
  background: #0c0d0e;
}

.mv-src {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.18s var(--ease);
}

/* aanwijzen licht het venster op en indrukken duwt het in, zoals een
   knop op een paneel; het beeld reageert, niet het kader (01-08) */
.mv-src:hover .mv-laag { filter: brightness(1.14); }
.mv-src:active { transform: scale(0.99); }

.mv-laag { transition: filter 0.25s var(--ease); }

/* de focusring ligt binnen het venster: met de standaard offset van
   3px zou hij over de buurvakjes heen vallen (de spleet is 2px) */
.mv-src:focus-visible { outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .mv-src:active { transform: none; }
}

.mv-preview,
.mv-program { grid-column: span 2; }

/* elke laag (foto, kleurenbalk, tekstkaart) vult zijn venster;
   mixen gebeurt door de nieuwe laag bovenop in te faden, de
   oude blijft eronder staan (geen helderheidsdip) */
.mv-laag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

img.mv-laag {
  object-fit: cover;
  object-position: 50% 32%;
}

/* ---------- rode tally om de live bron ---------- */

.mv-src.is-live::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 31;
  box-shadow: inset 0 0 0 max(0.3cqw, 2px) var(--tally);
  pointer-events: none;
}

/* ---------- de naamlabels, zoals in de PSD ---------- */

.mv-tag {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: 30;
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 1.02cqw;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.45em 1em 0.52em;
  border-radius: 2em;
  white-space: nowrap;
  pointer-events: none;
}

.mv-win .mv-tag { font-size: 1.5cqw; }

/* ---------- de kleurenbalk (100% EBU, uit Willems PNG) ---------- */

.mv-bars { display: flex; }

.mv-bars i { flex: 1; }

.mv-bars i:nth-child(1) { background: #ffffff; }
.mv-bars i:nth-child(2) { background: #ffff00; }
.mv-bars i:nth-child(3) { background: #00ffff; }
.mv-bars i:nth-child(4) { background: #00ff00; }
.mv-bars i:nth-child(5) { background: #ff00ff; }
.mv-bars i:nth-child(6) { background: #ff0000; }
.mv-bars i:nth-child(7) { background: #0000ff; }
.mv-bars i:nth-child(8) { background: #000000; }

.mv-bars svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12%;
  height: auto;
}

/* ---------- de tekstkaart op Preview ---------- */

.mv-card { z-index: auto; }

.mv-card .mv-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  /* blurstraal kost rekentijd per pixel; 1.4cqw werd op een 27 inch
     ruim 31px over een groot vlak, en dat is niet zichtbaar mooier
     dan 16px (01-08) */
  filter: blur(min(1.4cqw, 16px)) brightness(0.5);
  transform: scale(1.12);
}

.mv-card .mv-cardtekst {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 9%;
}

.mv-card .mono { color: var(--ink-soft); margin: 0 0 1.3em; }

.mv-card h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 2.7cqw;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.mv-card .tekst {
  margin: 1.3em 0 0;
  font-size: 1.12cqw;
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 44ch;
}

/* ---------- telefoon: Program boven, bronnen in twee kolommen ---------- */

@media (max-width: 700px) {
  /* Op een telefoon staat het paneel lager dan de vaste hoeken, dus
     de kop hoeft zich niet vrij te houden; een klein duwtje omlaag
     geeft de bug lucht boven de titel (was op 320px een haarlijn) */
  .mv {
    --mv-w: calc(100vw - var(--pad) * 2);
    margin-top: 0.9rem;
  }

  .mv-top {
    margin-bottom: 0.8rem;
    padding-left: 0;
    padding-right: 0;
  }

  .mv-tc { font-size: 0.55rem; gap: 0.4rem; }
  .mv-tc i { width: 5px; height: 5px; }

  /* ---------- telefoon: één groot Program, tekst eronder ----------
     Program en Preview vochten hier om dezelfde hoogte. Gevolg:
     Program werd 2,3:1 terwijl de foto's 16:9 zijn (een kwart van het
     beeld eraf) en de tekst moest naar 9,9px om te passen. Willems
     oordeel (01-08): allebei niet goed.

     Daarom is Preview op een telefoon geen venster meer maar een
     bijschrift onder Program. Program krijgt zijn volle 16:9 terug,
     de tekst een normale leesmaat, en de bronvakjes eronder blijven
     de wand die het paneel een multiviewer maakt. */
  .mv-grid {
    aspect-ratio: auto;
    /* de klantenloop staat sinds 13-08 onder het paneel in
       hetzelfde frame; zijn ruimte gaat hier van de hoogte af */
    height: min(80vh - var(--opdr-ruimte, 0px), 168vw);
    /* hoogte is nu deels inhoudsgestuurd, dus alleen de breedte kan
       nog als containermaat dienen */
    container-type: inline-size;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto repeat(4, minmax(0, 1fr));
    gap: 2px;
    box-shadow: 0 0 0 4px #101214, 0 0 0 5px #383c41, 0 12px 60px rgba(0, 0, 0, 0.6);
  }

  .mv-program {
    grid-row: 1;
    grid-column: span 2;
    aspect-ratio: 16 / 9; /* het hele beeld, niets eraf */
  }

  .mv-preview {
    grid-row: 2;
    grid-column: span 2;
    background: transparent;
    overflow: visible;
  }

  /* het bijschrift is geen monitor: geen glas, geen kleurenbalk,
     geen geblurde achtergrond en geen naampil */
  .mv-preview::before,
  .mv-preview .mv-tag,
  .mv-preview .mv-bars,
  .mv-preview img.mv-laag,
  .mv-card .mv-blur { display: none; }

  .mv-card {
    position: relative;
    /* GSAP schrijft hier een inline dekking voor de mix; op een
       telefoon moet het bijschrift altijd leesbaar blijven */
    opacity: 1 !important;
  }

  .mv-card .mv-cardtekst {
    position: relative;
    padding: 0.8rem 0.15rem 0.25rem;
  }

  /* het "recent werk"-labeltje is dubbelop met de kop erboven */
  .mv-card .mono { display: none; }

  .mv-card h3 {
    font-size: 1.02rem;
    line-height: 1.05;
  }

  .mv-card .tekst {
    margin-top: 0.55em;
    font-size: 0.78rem;   /* was 0.62rem: 12,5px in plaats van 9,9px */
    line-height: 1.5;
    max-width: none;
    color: rgba(242, 241, 238, 0.72);
  }

  .mv-tag { font-size: 0.55rem; }
  .mv-win .mv-tag { font-size: 0.66rem; }
}

/* kleine telefoons: het bijschrift een maat terug, anders eten de
   langere teksten de bronvakjes op */
@media (max-width: 360px) {
  .mv-card h3 { font-size: 0.92rem; }
  .mv-card .tekst { font-size: 0.72rem; line-height: 1.45; }
  /* elke pixel die het bijschrift hier inlevert, gaat naar de
     bronvakjes: die zijn op zo'n scherm het krapst */
  .mv-card .mv-cardtekst { padding: 0.5rem 0.15rem 0.1rem; }
  .mv-card .tekst { margin-top: 0.4em; }
}