/* YouTube-videos als raster, en de speler die eroverheen opent.
   Sober: het beeld doet het werk, de rest is een tijdsduur en een titel. */

.wsc-yt__intro { max-width: 60ch; }

.wsc-yt__grid {
  display: grid;
  grid-template-columns: repeat(var(--wsc-yt-kolommen, 4), minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 30px);
}

.wsc-yt__kaart { min-width: 0; }

/* Het beeld is de knop. Altijd 16 op 9, ook bij een Short: een raster waarin
   de ene tegel twee keer zo hoog is als de andere leest als een fout. Hoe de
   video zelf staat regelt de speler. */
.wsc-yt__still {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--wsc-line, rgba(0, 0, 0, .08));
  color: inherit;
  text-decoration: none;
}
.wsc-yt__still img {
  width: 100%;
  /* height: auto zou de verhouding laten vallen zodra er breedte- en
     hoogteattributen op de img staan; die zet een beeldfilter er soms bij. */
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
@media (hover: hover) {
  .wsc-yt__still:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .wsc-yt__still img { transition: none; }
  .wsc-yt__still:hover img { transform: none; }
}

/* De afspeelknop. Geen YouTube-rood: dit is de site, niet hun merk. */
.wsc-yt__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #111;
  padding-left: 3px;   /* een driehoek staat optisch links van het midden */
  transition: transform .2s ease, background .2s ease;
}
.wsc-yt__still:hover .wsc-yt__play,
.wsc-yt__still:focus-visible .wsc-yt__play {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .wsc-yt__play { transition: none; }
  .wsc-yt__still:hover .wsc-yt__play { transform: translate(-50%, -50%); }
}

.wsc-yt__duur {
  position: absolute;
  right: 8px; bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  border-radius: 3px;
}

/* Alleen voor schermlezers: de zichtbare titel staat onder de tegel, maar de
   link zelf moet ook zonder die context te begrijpen zijn. */
.wsc-yt__sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.wsc-yt__tag {
  display: inline-block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; background: var(--wsc-accent-bg, rgba(0, 0, 0, .06));
}

/* Twee regels, niet meer. Een titel van YouTube is vaak een zin met haakjes
   en hashtags erachter, en dan staat elke tegel op een andere hoogte en loopt
   het raster scheef. Wie een langere titel wil, zet er in het dashboard een
   eigen titel op; die wint. */
.wsc-yt__titel {
  font-size: 16px; margin: 0 0 4px; line-height: 1.3; text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wsc-yt__meta { font-size: 13px; margin: 0; color: var(--wsc-ink-3, #6b7280); }

.wsc-yt__meer { margin-top: clamp(22px, 3vw, 32px); }
.wsc-yt__aantal { opacity: .7; }

@media (max-width: 900px) {
  .wsc-yt__grid { grid-template-columns: repeat(min(var(--wsc-yt-kolommen, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .wsc-yt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wsc-yt__titel { font-size: 15px; }
  .wsc-yt__play { width: 44px; height: 44px; }
  .wsc-yt__meer .wsc-btn { display: block; width: 100%; text-align: center; }
}

/* ==========================================================================
   De speler over de pagina.
   ========================================================================== */

/* De pagina eronder mag niet meescrollen; anders scrolt de achtergrond weg
   terwijl je in de video zit en sta je na het sluiten ergens anders. */
html.wsc-yt-open, html.wsc-yt-open body { overflow: hidden; }

.wsc-yt-licht {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 48px);
}
.wsc-yt-licht[hidden] { display: none; }

.wsc-yt-licht__doek {
  position: absolute; inset: 0;
  background: rgba(8, 10, 9, .92);
  /* Niet volledig zwart: een randje van de pagina blijft zichtbaar, zodat het
     leest als iets dat óver de site heen ligt en niet als een nieuwe pagina. */
  backdrop-filter: blur(3px);
  animation: wsc-yt-in .18s ease both;
}

.wsc-yt-licht__midden {
  position: relative;
  width: min(1180px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: wsc-yt-op .22s ease both;
}

@keyframes wsc-yt-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wsc-yt-op { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wsc-yt-licht__doek, .wsc-yt-licht__midden { animation: none; }
}

/* Het kader bepaalt de verhouding. De hoogte is begrensd op de viewport, zodat
   een liggende video op een liggend scherm niet half onder de vouw valt. */
.wsc-yt-licht__kader {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 140px);
  max-height: calc(100svh - 140px);
  margin-inline: auto;
  background: #000;
  overflow: hidden;
}
.wsc-yt-licht.is-staand .wsc-yt-licht__kader {
  aspect-ratio: 9 / 16;
  /* Een Short is smal; hem over de volle breedte rekken maakt hem niet beter
     zichtbaar, alleen groter dan het scherm hoog is. */
  width: auto;
  height: min(calc(100vh - 140px), calc(100svh - 140px));
}
.wsc-yt-licht__speler, .wsc-yt-licht__speler iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.wsc-yt-licht__titel {
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .88);
  font-size: 15px;
  line-height: 1.4;
}

.wsc-yt-licht__sluit,
.wsc-yt-licht__pijl {
  position: absolute;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background .18s ease;
}
.wsc-yt-licht__sluit:hover,
.wsc-yt-licht__pijl:hover { background: rgba(255, 255, 255, .2); }
.wsc-yt-licht__sluit:focus-visible,
.wsc-yt-licht__pijl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.wsc-yt-licht__sluit { top: clamp(10px, 2vw, 22px); right: clamp(10px, 2vw, 22px); }
.wsc-yt-licht__pijl { top: 50%; transform: translateY(-50%); }
.wsc-yt-licht__pijl--vorige { left: clamp(6px, 1.5vw, 22px); }
.wsc-yt-licht__pijl--volgende { right: clamp(6px, 1.5vw, 22px); }
.wsc-yt-licht__pijl[hidden] { display: none; }

@media (max-width: 700px) {
  /* Op een telefoon zijn pijlen aan de zijkant tikvlakken over de video heen.
     Vegen doet de speler zelf niet, dus zetten we ze onderaan naast elkaar. */
  .wsc-yt-licht__pijl { top: auto; bottom: clamp(10px, 3vw, 20px); transform: none; }
  .wsc-yt-licht__pijl--vorige { left: clamp(10px, 5vw, 24px); }
  .wsc-yt-licht__pijl--volgende { right: clamp(10px, 5vw, 24px); }
  .wsc-yt-licht__kader { max-height: calc(100svh - 200px); }
  .wsc-yt-licht.is-staand .wsc-yt-licht__kader { height: min(calc(100svh - 200px), 78vh); }
  .wsc-yt-licht__titel { padding: 0 56px; font-size: 14px; }
}