/* Klanten aan het woord: video interview cards (portrait poster, quote) and the video dialog */
.eba-iv__kop { display: grid; gap: 8px; margin-bottom: 32px; max-width: 46rem; }
.eba-iv__intro { margin: 4px 0 0; color: var(--eba-gedempt); }
.eba-iv__rij {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.eba-iv__kaart {
	display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--eba-r-kaart); overflow: hidden;
	box-shadow: var(--eba-schaduw-kaart); border: 1px solid var(--eba-rand); position: relative;
}
.eba-iv__speel { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--eba-donker); color: #fff; text-decoration: none; }
.eba-iv__speel:focus-visible { outline: 3px solid var(--eba-primair); outline-offset: -3px; }
.eba-iv__verloop { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--eba-zwart) 82%, transparent) 100%); }
.eba-iv__knop {
	position: absolute; left: 50%; top: 64%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
	display: grid; place-items: center; padding-left: 4px; background: var(--eba-primair); color: #fff;
	box-shadow: 0 0 0 8px color-mix(in srgb, #fff 28%, transparent), 0 10px 30px rgba(0, 0, 0, .3);
	transition: transform .25s ease, background-color .2s ease;
}
.eba-iv__speel:hover .eba-iv__knop, .eba-iv__speel:focus-visible .eba-iv__knop { transform: scale(1.08); background: var(--eba-primair-hover); }
.eba-iv__duur {
	position: absolute; top: 14px; right: 14px; padding: 4px 9px; border-radius: 999px;
	font: 600 0.8125rem/1 var(--eba-font-tekst); background: color-mix(in srgb, var(--eba-zwart) 70%, transparent); color: #fff;
}
.eba-iv__naam { position: absolute; left: 20px; right: 20px; bottom: 18px; display: grid; gap: 2px; font: 700 1.25rem/1.25 var(--eba-font-kop); color: #fff; }
.eba-iv__naam span { font: 500 0.9375rem/1.4 var(--eba-font-tekst); color: var(--eba-op-donker); }
.eba-iv__lijf { padding: 20px 22px 22px; display: grid; gap: 14px; align-content: space-between; }
.eba-iv__citaat { margin: 0; }
.eba-iv__citaat p { margin: 0; font: 500 1.0625rem/1.5 var(--eba-font-tekst); color: var(--eba-tekst); }
.eba-iv__project { font: 600 1rem var(--eba-font-tekst); color: var(--eba-link); text-decoration: none; }
.eba-iv__project:hover { text-decoration: underline; }

/* Phones and tablets: one row that scrolls sideways (snap), the next card peeks in */
@media (max-width: 63.99em) {
	.eba-iv__rij {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 20rem);
		overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
		margin: 0 calc(-1 * var(--eba-goot)); padding: 4px var(--eba-goot) 8px; scroll-padding: 0 var(--eba-goot);
	}
	.eba-iv__rij::-webkit-scrollbar { display: none; }
	.eba-iv__kaart { scroll-snap-align: start; }
}

/* Video dialog: portrait video as large as the screen allows */
.eba-iv__venster {
	padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%;
	display: none; place-items: center; overflow: hidden;
}
.eba-iv__venster[open] { display: grid; }
.eba-iv__venster::backdrop { background: rgba(8, 10, 14, .88); }
.eba-iv__scherm { position: relative; width: min(92vw, calc((100dvh - 48px) * 9 / 16)); aspect-ratio: 9 / 16; }
.eba-iv__scherm video { width: 100%; height: 100%; display: block; border-radius: 12px; background: #000; object-fit: contain; }
.eba-iv__sluit {
	position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center; background: color-mix(in srgb, var(--eba-zwart) 70%, transparent); color: #fff;
}
.eba-iv__sluit:hover, .eba-iv__sluit:focus-visible { background: var(--eba-primair); }