/**
 * Ondersteunende CSS voor cards.js.
 *
 * Beginstand (vóór hover): beschrijving volledig ingeklapt (hoogte 0,
 * onzichtbaar), media neemt 75% van de kaart-hoogte in. GSAP animeert
 * deze percentages bij hover — deze CSS zorgt puur voor een correcte
 * uitgangssituatie, vóórdat er ooit gehoverd is.
 *
 * LET OP: .js-card heeft een VASTE hoogte nodig (hier 420px als
 * startpunt) — de 55%/75%-hoogtes van media/beschrijving zijn namelijk
 * relatief aan de hoogte van .js-card zelf. Pas dit getal aan naar de
 * daadwerkelijke ontwerp-afmeting.
 * Beschrijving is absoluut gepositioneerd (bottom:0) — groeit bij hover
 * omhoog vanuit de onderkant, in plaats van in de normale documentflow
 * mee te groeien (wat de kaart zou uitrekken). Eigen padding nodig
 * (i.p.v. te leunen op de padding van de kaart), want absolute
 * positionering negeert die. Line-clamp op 4 regels voorkomt dat een
 * (te) lange tekst de kaart alsnog zou kunnen laten "exploderen" —
 * werkt hier prima samen met GSAP's height:'auto'-meting, want die meet
 * de al-geclampte (afgekapte) hoogte, niet de volledige tekst.
 */
.js-card {
	position: relative;
	height: 420px;
	overflow: hidden;
}


.js-card-media {
	height: 75%;
	overflow: hidden;
}

.js-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.js-card-desc {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0 24px 24px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.js-card h5{
	position: relative;
	margin-bottom:0;
}
.js-card h5:after{
	content: '';
	background-image: url(../../images/Arrow-black.svg);
	background-repeat: no-repeat;
	background-size: 12px 12px;
	background-position: center;
	width: 32px;
	height: 32px;
	position: absolute;
	right: 12px;
	top: -3px;
	border-radius: 8px;
	border: 1px solid var(--Primary-CCG-Grijs-25, rgba(245, 245, 244, 0.25));
	transition: 0.3s;
}