/* Basisopmaak voor twee kolommen */
.container {
	display: flex;
	flex-wrap: nowrap;
	margin: 20px auto;
	width: 100%;
	padding: 10px;
}

/* Content-container (linkerkolom, 70%) */
.content-container {
	/* Flex-basis instellen op 70% minus de 20px margin-right */
	flex: 0 0 calc(70% - 20px);
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	margin-right: 20px;
}

/* Hoofdcontent binnen de content-container */
.column-main {
	flex: 1;
	padding: 0 20px 20px 20px;
}

/* Sidebar (rechterkolom, 30%) */
.column-right {
	flex: 0 0 30%;
	width: 30%;
	max-width: 30%;
	padding: 14px;
	/* Vervang de oorspronkelijke blauwachtige gradient door een lichtere, minder blauwe variant */
	background: linear-gradient(90deg, #e9e9e9, #f6f5f6);
	border-radius: 8px;
}

/* Styling voor link-blokken in de sidebar */
.column-right .link-block {
	margin-bottom: 20px;
	padding: 10px;
	border-radius: 8px;
	background: none;
	box-shadow: none;
}

.link-block {
	background: none;
	box-shadow: none;
}

.column-right .link-block a {
	display: block;
	color: #40099c;
	text-decoration: none;
	margin-bottom: 5px;
}

/* Advertentiebak in de sidebar */
.column-right .advertisement {
	width: 100%;
	height: 150px;
	background-color: #f6c644;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	color: #40099c;
}

/* Media Queries voor responsiviteit */

/* Op schermen onder 1024px: kolommen stapelen */
@media (max-width: 1024px) {
	body {
		background-color: #ffffff;
	}
	.container {
		padding: 0px;
		flex-wrap: wrap;
		gap: 0px;
	}
	.content-container,
	.column-right {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
	.content-container {
		box-shadow: none;
		border-radius: 0px;
		margin-right: 0; 
	}
	.column-right {
		order: 3;
		margin: 20px 0px 0px 0px;
		/* In responsieve modus wordt de gradient verticaal getoond met minder blauwe tint */
		background: linear-gradient(180deg, #e9e9e9, #f6f5f6);
		padding: 10px 20px;
		border-top: 1px solid #cfc7da;
		border-radius: 0px;
	}
}

/* Op schermen onder 640px: extra aanpassingen */
@media (max-width: 640px) {
	/* Verberg de linkerkolom als deze bestaat */
	.column-left {
		display: none;
	}
	.column-main {
		flex: 0 0 100%;
		order: 1;
		padding: 12px;
		border-left: none;
		border-right: none;
	}
	.column-right {
		flex: 1 1 100%;
		order: 2;
		background: linear-gradient(180deg, #e9e9e9, #f6f5f6);
	}
	.content-container {
		flex: 0 0 100%;
		padding: 0;
		box-sizing: border-box;
		margin: 0;
	}
}