/* Effect: filmpjes — v0.1.0 (nieuw in djturbeau.com v0.5.1) */
.filmlaag { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
.filmlaag::backdrop { background: rgba(4, 3, 6, 0.86); backdrop-filter: blur(6px); }
.film-kader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 520px); max-height: 94vh; display: grid; gap: 10px; }
.film-kop { display: flex; align-items: center; gap: 10px; color: #f1ecf8; }
.film-titel { flex: 1; font: 400 22px/1 var(--display, serif); }
.film-sluit { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(57, 255, 144, 0.5); background: #0b0910; color: #39ff90; font-size: 16px; cursor: pointer; }
.film-speler { width: 100%; max-height: 74vh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border-radius: 12px; border: 2px solid #ff3b1f; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 50px rgba(255, 60, 20, 0.25); }
.film-duimen { display: flex; gap: 8px; justify-content: center; }
.film-duim { width: 54px; height: 84px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #000; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; }
.film-duim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-duim.aan, .film-duim:hover { opacity: 1; border-color: #ff3b1f; }
/* miniaturen: bij een datum (Dates-venster) en als rij in Highlights */
.film-tegel { position: relative; flex: none; width: 118px; aspect-ratio: 9 / 16; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); background: #000; cursor: pointer; transition: border-color 0.25s, transform 0.25s; }
.film-tegel img, .film-tegel video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.film-tegel:hover { border-color: #ff3b1f; transform: translateY(-2px); }
.film-tegel:hover img, .film-tegel:hover video { transform: scale(1.06); }
.film-tegel::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85); }
.film-tegel small { position: absolute; left: 6px; right: 6px; bottom: 6px; font: 700 8.5px/1.2 var(--mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px #000; }
.kaart-films { display: flex; gap: 8px; margin: 8px 0 4px 70px; overflow-x: auto; }
.kaart-films .film-tegel { width: 70px; border-radius: 8px; }
.kaart-films .film-tegel::after { font-size: 16px; }
@media (max-width: 767px) { .kaart-films { margin-left: 0; } .kaart-films .film-tegel { width: 62px; } }
.film-rij { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; }
.film-rij-kop { margin: 18px 0 6px; font: 700 11px/1 var(--mono, monospace); letter-spacing: 0.2em; text-transform: uppercase; color: #ff3b1f; }
/* sociale knoppen */
.kop-soc { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: rgba(241, 236, 248, 0.84) !important; transition: background 0.25s, color 0.25s; }
.kop-soc svg, .soc-knop svg { width: 18px; height: 18px; fill: currentColor; }
.kop-soc:hover, .kop-soc:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff !important; outline: 0; }
.soc-rij { display: flex; gap: 10px; margin: 10px 0; }
.soc-knop { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); color: #f1ecf8; transition: background 0.25s, border-color 0.25s, transform 0.2s; }
.soc-knop.soc-ig:hover { background: rgba(225, 48, 108, 0.2); border-color: #e1306c; transform: translateY(-2px); }
.soc-knop.soc-fb:hover { background: rgba(24, 119, 242, 0.2); border-color: #1877f2; transform: translateY(-2px); }
@media (max-width: 767px) { .band--kop .kop-soc { display: none; } }
/* vooraan: filmpjes onderaan het Dates-vak */
.vlak-lijst ol { flex: 1 1 auto; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.vlak-films { flex: none; display: grid; gap: 5px; }
/* de lijst meet zichzelf: veel plaats = grote filmpjes, weinig plaats = kleine, de data blijven leesbaar */
.vlak--dates .vlak-lijst { container-type: size; }
.vlak-films-rij { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(57,255,144,.4) transparent; padding-bottom: 4px; }
.vlak-films-rij .lus-tegel { flex: none; scroll-snap-align: start; cursor: pointer; }
.lus-tegel { position: relative; flex: 0 1 auto; display: block; }
.vlak-films video { flex: 0 1 auto; width: auto; height: clamp(84px, calc(100cqh - 340px), 230px); display: block; }
.lus-tegel small { position: absolute; left: 5px; right: 5px; bottom: 5px; font: 700 8px/1.2 var(--mono, monospace); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px #000, 0 0 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vlak-films-rij { display: flex; gap: 6px; }
.vlak-films video { flex: 1 1 0; min-width: 0; aspect-ratio: 9 / 16; max-height: clamp(84px, calc(100cqh - 340px), 230px); object-fit: cover; border-radius: 8px; border: 1px solid rgba(255, 59, 31, 0.5); background: #000; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
@media (max-width: 767px) { .vlak-films { display: none; } }
.vlak-films-kop { display: flex; align-items: center; gap: 10px; }
.lus-geluid { margin-left: auto; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(57, 255, 144, 0.55); background: rgba(5, 4, 7, 0.7); color: #39ff90; font: 700 10px/1 var(--mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.lus-geluid[aria-pressed="true"] { background: #39ff90; color: #04130a; box-shadow: 0 0 18px rgba(57, 255, 144, 0.5); }
.lus-geluid:focus-visible { outline: 2px solid #39ff90; outline-offset: 2px; }
.lus-tegel.met-geluid video { border-color: #39ff90; box-shadow: 0 0 0 2px #39ff90, 0 0 24px rgba(57, 255, 144, 0.5); }
.lus-luid { position: absolute; right: 6px; top: 46px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(5, 4, 7, 0.72); border: 1px solid rgba(57, 255, 144, 0.6); font-size: 12px; line-height: 1; pointer-events: none; transition: transform 0.2s, background 0.2s; }
.lus-tegel:hover .lus-luid { transform: scale(1.15); background: #39ff90; }
.lus-tegel.met-geluid .lus-luid { background: #39ff90; animation: luid-puls 1s ease-in-out infinite; }
@keyframes luid-puls { 50% { transform: scale(1.2); } }