.flex-layout.content_list {
	--active-highlight: var(--accent-100);
	--active-button: var(--accent-100);
}

.flex-layout.content_list.bg-primary-100 {
	--text-color: var(--white-100);
	--content-bg: var(--primary-95);
	--content-text: var(--primary-30);
	--content-title: var(--white-100);
	--inactive-button: var(--primary-50);
}

.flex-layout.content_list.bg-white-100 {
	--text-color: var(--primary-100);
	--content-bg: var(--neutral-50);
	--content-text: var(--primary-80);
	--content-title: var(--primary-100);
	--inactive-button: var(--primary-40);
}

.flex-layout.content_list .intro-col {
	text-align: center;
	margin-bottom: max(2rem, calc(3 * var(--su)));
}

.flex-layout.content_list .intro-col .pk-heading {
	margin-bottom: max(1rem, calc(1 * var(--su)));
	color: var(--text-color);
}

.flex-layout.content_list .intro-col .pk-text {
	font-size: var(--body-m-regular);
	color: var(--text-color);
}

.flex-layout.content_list .button-col {
	height: fit-content;
	margin-block: auto;
	display: flex;
	flex-direction: column;
	gap: max(1rem, calc(1.5 * var(--su)));
}

.flex-layout.content_list .button-col button {
	position: relative;
	display: flex;
	align-items: center;
	width: fit-content;
	padding: 0 0 0 max(1rem, calc(1 * var(--su)));
	border: none;
	background-color: transparent;
	color: var(--inactive-button);
	font-size: var(--scaling-h5);
	text-align: left;
	cursor: pointer;
	transition: color 150ms ease-in-out;
}

.flex-layout.content_list .button-col button.active {
	color: var(--active-button);
}

.flex-layout.content_list .button-col button::before {
	content: '';
	position: absolute;
	left: 0;
	width: max(.5rem, calc(.5 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	outline: 1px solid currentColor;
	outline-offset: -1px;
	transition: background-color 150ms ease-in-out;
}

.flex-layout.content_list .button-col button.active::before {
	background-color: var(--active-highlight);
}

.flex-layout.content_list .swiper-slide {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: max(1rem, calc(1.5 * var(--su)));
	height: auto;
}

.flex-layout.content_list .swiper-slide .image {
	position: relative;
	grid-column: 1 / 6;
}

.flex-layout.content_list .swiper-slide .image::before {
	content: '';
	display: block;
	padding-top: 100%;
}

.flex-layout.content_list .swiper-slide .image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding-left: max(1.5rem, calc(2.5 * var(--su)));
}

.flex-layout.content_list .swiper-slide .content {
	grid-column: 6 / 10;
	display: flex;
	flex-direction: column;
	padding: max(1rem, calc(2 * var(--su)));
	background-color: var(--content-bg);
}

.flex-layout.content_list .swiper-slide .content .title {
	margin-bottom: max(1rem, calc(1 * var(--su)));
	color: var(--content-title);
}

.flex-layout.content_list .swiper-slide .content .pk-text {
	font-size: var(--body-xs-regular);
	color: var(--content-text);
	margin-bottom: max(1rem, calc(1 * var(--su)));
}

.flex-layout.content_list .swiper-slide .content .pk-button {
	margin-top: auto;
	width: fit-content;
}

.flex-layout.content_list .key-fact {
	position: absolute;
	left: 0;
	bottom: max(1.5rem, calc(1.5 * var(--su)));
	width: 80%;
	padding: max(1rem, calc(1.5 * var(--su)));
	background-color: var(--neutral-50);
	color: var(--primary-100);
}

.flex-layout.content_list .key-fact .badge {
	display: block;
	width: max(2rem, calc(2 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	margin-bottom: max(.75rem, calc(.75 * var(--su)));
	outline: 1px solid var(--primary-10);
	outline-offset: -1px;
	border-radius: 50%;
	background: var(--white-100) var(--logo-nova) center / 50% no-repeat;
}

.flex-layout.content_list .key-fact .title {
	margin-bottom: max(.5rem, calc(.5 * var(--su)));
	font-size: var(--scaling-h5);
}

.flex-layout.content_list .key-fact .text {
	margin-bottom: 0;
	font-size: var(--body-s-regular);
	color: var(--primary-80);
}

.flex-layout.content_list.bg-white-100 .key-fact {
	background-color: var(--primary-100);
	color: var(--white-100);
}

.flex-layout.content_list.bg-white-100 .key-fact .title {
	color: var(--white-100);
}

.flex-layout.content_list.bg-white-100 .key-fact .text {
	color: var(--primary-20);
}

/* ─── PAGINATIE ───────────────────────────────────────────────── */
/* Op desktop wissel je met de lijst links, daar is dit dubbelop. */

.flex-layout.content_list .content_list-pagination {
	display: none;
}

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

	.flex-layout.content_list .intro-col {
		text-align: left;
	}

	.flex-layout.content_list .button-col {
		display: none;
	}

	.flex-layout.content_list .swiper-slide {
		grid-template-columns: minmax(0, 1fr);
	}

	.flex-layout.content_list .swiper-slide :is(.image, .content) {
		grid-column: 1 / 2;
	}

	.flex-layout.content_list .swiper-slide .content {
		order: 1;
	}

	.flex-layout.content_list .swiper-slide .image {
		order: 2;
	}

	.flex-layout.content_list .key-fact {
		position: absolute;
		bottom: .5rem;
		top: unset;
		left: .5rem;
		right: .5rem;
		width: calc(100% - 1rem);
	}

	.flex-layout.content_list .swiper-slide .image {
		aspect-ratio: 3/4;
	}

	.flex-layout.content_list .swiper-slide .image img {
		padding-left: unset;
		height: 100%;
	}

	.flex-layout.content_list .content_list-pagination {
		display: flex;
		margin-top: max(2rem, calc(2 * var(--su)));
	}

	.flex-layout.content_list .swiper-slide .content .pk-button {
		margin-top: 1rem;
	}

}