/* Algemene sectie */
section.employee {
	background: #FFF;
}

	section.employee.former .profile-aside {
		background-color: #f3f3f3;
		border: 1px dashed #ccc;
	}

	section.employee.former .profile-main h1::after {
		content: " (niet meer in dienst)";
		font-size: 0.9rem;
		font-weight: normal;
		color: #666;
		margin-left: 0.5rem;
	}

/* Layout van de medewerker */
section.meetMember {
	display: flex;
	background: #FFF;
}

.profile-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

/* Linkerblok - tekst */
.profile-main {
	flex: 1 1 60%;
}

	.profile-main p {
		font-size: 1.3rem;
		line-height: 1.7rem;
		margin-bottom: 1.5rem;
	}

/* Rechterblok - aside met foto & data */
.profile-aside {
	flex: 1 1 35%;
	background-color: #f8f8f8;
	padding: 1rem;
	border-radius: 8px;
}

	/* Profielfoto (rond en gecentreerd) */
	.profile-aside .profile-picture {
		width: 200px;
		height: 200px;
		border: 5px solid #CCC;
		border-radius: 50%;
		text-align: center;
		overflow: hidden;
		background: #FFF;
		margin: 0 auto 1rem auto;
	}

		.profile-aside .profile-picture img {
			object-fit: cover;
		}

	/* Social iconen */
	.profile-aside a img {
		width: 40px;
		height: 40px;
		margin: 10px 0;
	}

	/* Description list (feitenblok) */
	.profile-aside h3 {
		font-size: 1.1rem;
		margin-bottom: 0.5rem;
		border-bottom: 1px solid #ddd;
		padding-bottom: 0.3rem;
	}

	.profile-aside dl {
		display: grid;
		column-gap: 1rem;
		row-gap: 0.3rem;
		margin-top: 1rem;
		font-size: 1rem;
	}

	.profile-aside dt {
		font-weight: bold;
	}

	.profile-aside dd {
		margin: 0;
	}

/* Responsiveness */
@media screen and (max-width: 768px) {
	.profile-wrapper {
		flex-direction: column;
	}

	.profile-main, .profile-aside {
		flex: 1 1 100%;
	}

		.profile-main p {
			font-size: 1.1rem;
			line-height: 1.6rem;
		}
}