.event-card {
	display: flex;
	flex-direction: column;
	gap: max(1rem, calc(1.5 * var(--su)));
	color: var(--primary-100);
	text-decoration: none;
}

.event-card .top {
	padding: max(1rem, calc(1 * var(--su)));
	background-color: var(--neutral-100);
}

.event-card .inner {
	display: flex;
	flex-direction: column;
	background-color: var(--white-100);
	/* height:100% t.o.v. .top (hoogte alleen via aspect-ratio) veroorzaakte een
	   Safari-specifiek renderbug — min-height was toch al bepalend. */
	min-height: max(28.125rem, calc(31.25 * var(--su)));
	padding: max(1rem, calc(1 * var(--su))) max(1rem, calc(1 * var(--su))) max(1.5rem, calc(2 * var(--su))) max(1rem, calc(1 * var(--su)));
}

.event-card .image-wrap {
	flex-shrink: 0;
	overflow: hidden;
	aspect-ratio: 360/240;
}

.event-card .image-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 400ms ease;
}

.event-card:hover .image-wrap img,
.event-card:focus-within .image-wrap img {
	scale: 1.05;
}

.event-card .content {
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: flex-end;
	margin-top: max(1.5rem, calc(2 * var(--su)));
	text-align: center;
	max-width: 90%;
	margin-inline: auto;
}

.event-card .top .title-content {
	display: flex;
	flex-direction: column;
	gap: max(.5rem, calc(.5 * var(--su)))
}

.event-card .date {
	margin: 0;
	font-size: var(--body-xs-regular);
}

.event-card .title {
	margin: 0;
	font-size: var(--scaling-h5);
}

.event-card .meta-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: max(.75rem, calc(.75 * var(--su)));
	margin-top: max(1rem, calc(1 * var(--su)));
}

.event-card .meta-row .category-badge {
	display: inline-flex;
	align-items: center;
	gap: max(.5rem, calc(.5 * var(--su)));
	padding: max(.5rem, calc(.5 * var(--su))) max(1.25rem, calc(1.25 * var(--su)));
	border-radius: 999px;
	outline: 1px solid var(--primary-20);
	outline-offset: -1px;
	background-color: var(--primary-2-5);
}

.event-card .meta-row .category-badge .label {
	line-height: 1.6;
}

.event-card .category-badge .dot {
	display: block;
	width: .5em;
	height: .5em;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--category-color, var(--accent-100));
}

.event-card .meta-row .pk-button {
	position: absolute;
	right: 0;
	flex-shrink: 0;
}

.event-card .meta-row .pk-button .pk-button-icon::before {
	transform: rotate(45deg);
}

.event-card .meta-row .pk-button .pk-button-icon {
	transition: transform 300ms ease, background-color 300ms ease, outline-color 300ms ease;
}

.event-card:hover .meta-row .pk-button .pk-button-icon,
.event-card:active .meta-row .pk-button .pk-button-icon {
	background-color: var(--accent-100);
	outline-color: var(--accent-100);
}

.event-card:hover .meta-row .pk-button .pk-button-icon::before,
.event-card:active .meta-row .pk-button .pk-button-icon::before {
	background-color: var(--white-100);
}

.event-card .bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	height: 100%;
	gap: max(1rem, calc(1 * var(--su)));
}

.event-card .bottom .reference-text {
	margin: 0;
	font-size: var(--scaling-h4);
	overflow-wrap: break-word;
}

.event-card .bottom .pk-button.tertiary {
	pointer-events: none;
}

@media screen and (max-width: 767px) {



}