/*--------------------------------------------------------------
>>> BUURKRACHT BLOCKS CSS
----------------------------------------------------------------
# BK Quote Block
# BK Team Block  
# BK Header Block
# BK Hero Tekst Links Block
# BK Numbers Block
# BK Logo Carousel Block
# BK News Items Block
# BK Vacatures Block
# Responsive Design
	- Mobile (max-width: 767px)
	- Tablet (768px - 1023px)
	- Desktop (1024px+)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# BK Quote Block
--------------------------------------------------------------*/

.bk_product_quote {
	text-align: center;
	background-color: var(--color-brand-blue-light);
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-bottom: var(--margin-bk-block-bottom);
	margin-top: var(--margin-bk-block-top);
}

.bk_quote_container {
	max-width: clamp(800px, 90vw, 1200px); /* oude waarde: 1200px */
	margin: clamp(2rem, 4vw, 3rem) auto; /* oude waarde: 3rem auto */
	padding: clamp(1.5rem, 3vw, 2rem); /* oude waarde: 2rem */
	text-align: center;
	align-items: center;
	display: flex;
	gap: clamp(1rem, 3vw, 2rem); /* oude waarde: 2rem */
}

.quote-from {   
	padding-top: clamp(8px, 1.5vw, 10px); /* oude waarde: 10px */
	font-weight: bold !important;
}

.bk_quote {
	text-align: left;
	padding-left: clamp(40px, 8vw, 60px); /* oude waarde: 60px */
	position: relative;
}

.bk_quote::before {
	position: absolute;
	left: 0;
	top: 0;
	font-family: swiss, sans-serif;
	font-size: clamp(2rem, 4vw, 3rem); /* oude waarde: 3rem */
	content: "\201C";   
}

.bk_quote::after {
	float: right;
	font-family: swiss, sans-serif;
	font-size: clamp(2rem, 4vw, 3rem); /* oude waarde: 3rem */
	content: "\201D"; 
}

.bk_product_quote_content {
	flex: 3;
	font-size: clamp(1.2rem, 2.5vw, 1.5rem); /* oude waarde: 1.5rem */
	line-height: 1.4;
	padding: 0;
	border: none;
	position: relative;
	color: var(--color-brand-blue);
	font-style: italic;
}

.bk_product_quote_author {
	flex: 1;
	color: var(--color-brand-blue);
	font-size: clamp(1rem, 2vw, 1.2rem); /* oude waarde: 1.2rem */
	align-items: center;
}

.quote-job-title {
	font-size: clamp(0.9rem, 1.8vw, 1.1rem); /* oude waarde: 1.1rem */
}

.bk_product_quote_author img {
	width: clamp(120px, 20vw, 180px); /* oude waarde: 180px */
	height: clamp(120px, 20vw, 180px); /* oude waarde: 180px */
	border-radius: 50%;
	overflow: hidden;
}



/*--------------------------------------------------------------
# BK CTA Block
--------------------------------------------------------------*/

.bk_cta {
	text-align: center;
	background-color: var(--color-brand-blue-light);
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-bottom: var(--margin-bk-block-bottom);
	margin-top: var(--margin-bk-block-top);
}

.bk_cta_container {
	max-width: clamp(800px, 90vw, 1200px); /* oude waarde: 1200px */
	margin: clamp(2rem, 4vw, 3rem) auto; /* oude waarde: 3rem auto */
	padding: clamp(1.5rem, 3vw, 2rem); /* oude waarde: 2rem */
	text-align: center;
	align-items: center;
	display: flex;
	gap: clamp(1rem, 3vw, 2rem); /* oude waarde: 2rem */
}

.bk_cta_content {
	flex: 3;
	padding: 0;
	border: none;
	position: relative;
	color: var(--color-brand-blue);
	text-align: left;
}

.bk_cta_photo img {
	width: clamp(120px, 20vw, 180px); /* oude waarde: 180px */
	height: clamp(120px, 20vw, 180px); /* oude waarde: 180px */
	border-radius: 50%;
	overflow: hidden;
}



/*--------------------------------------------------------------
# BK Team Block
--------------------------------------------------------------*/

.bk_team {
	margin-bottom: var(--margin-bk-block-bottom);
	margin-top: var(--margin-bk-block-top);
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30vw, 250px), 1fr)); /* oude waarde: minmax(250px, 1fr) */
	gap: clamp(20px, 4vw, 30px); /* oude waarde: 30px */
	max-width: clamp(800px, 90vw, 1200px); /* oude waarde: 1200px */
	margin: clamp(20px, 4vw, 30px) auto; /* oude waarde: 30px auto */
}

.team-member-card {
	background: #f8f9fa;
	border-radius: clamp(15px, 3vw, 20px); /* oude waarde: 20px */
	padding: clamp(20px, 4vw, 30px) clamp(15px, 3vw, 20px); /* oude waarde: 30px 20px */
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.team-photo {
	width: clamp(80px, 15vw, 120px); /* oude waarde: 120px */
	height: clamp(80px, 15vw, 120px); /* oude waarde: 120px */
	margin: 0 auto clamp(15px, 3vw, 20px); /* oude waarde: 0 auto 20px */
	border-radius: 50%;
	overflow: hidden;
	background-color: #e9ecef;
}

.team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-name {
	font-size: clamp(16px, 2.5vw, 18px); /* oude waarde: 18px */
	font-weight: 600;
	color: #2c5282;
	margin-bottom: clamp(3px, 1vw, 5px); /* oude waarde: 5px */
}

.team-function {
	font-size: clamp(12px, 1.8vw, 14px); /* oude waarde: 14px */
	color: #666;
	margin: 0;
}

/*--------------------------------------------------------------
# BK Header Block
--------------------------------------------------------------*/

.bk_header {
	text-align: center;
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	/* height: clamp(300px, 50vw, 400px); */ /* oude waarde: 400px */
	background-color: var(--color-brand-blue-light);  
	margin-bottom: var(--margin-bk-block-bottom);
	margin-top: var(--margin-bk-block-top);
	overflow: hidden;
}

.bk_header_container {
	position: relative;
	max-width: clamp(800px, 90vw, calc(1200px - var(--spacing-lg) - var(--spacing-lg))); /* oude waarde: 1200px */
	height: clamp(300px, 50vw, 400px); /* oude waarde: 400px */
	margin: 0 auto;
	text-align: left;
	align-items: center;
	display: flex;
	gap: 0;
	z-index: 50;
}

.bk_header_left {
	flex: 1;
	max-width: 50%;   
	padding: clamp(15px, 3vw, 20px) 0px; /* oude waarde: 0px 20px */
	height: clamp(300px, 50vw, 400px); /* oude waarde: 400px */
	background-color: var(--color-brand-blue-light);  
}

.bk_header_left p {
	font-weight: bold;
}

.bk_header_right img {
	position: absolute;
	top: 0;
}

.bk_header_image {
	position: absolute;
	top: 0;
	right: 0;
	float: right;
	overflow: hidden;
	z-index: 30;
	max-width: 60%;
}

/*--------------------------------------------------------------
# BK Hero Tekst Links Block
--------------------------------------------------------------*/

.bk_hero_tekst_links {
	display: flex;
	min-height: clamp(300px, 50vw, 400px); /* oude waarde: 400px */
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.bk_hero_tekst_content {
	flex: 1;
	padding: clamp(20px, 4vw, 30px); /* oude waarde: 30px */
	max-width: 60%;
}

.bk_hero_tekst_content h1 {
	font-size: clamp(2rem, 4vw, 3rem); /* oude waarde: 3rem */
	line-height: 1.2;
	margin: 0 0 clamp(1.5rem, 3vw, 2rem); /* oude waarde: 0 0 2rem */
	padding: 0;
	border: none;
	position: relative;
}

.bk_hero_tekst_content p {
	font-size: clamp(1.2rem, 2.5vw, 1.5rem); /* oude waarde: 1.5rem */
	line-height: 1.4;
	margin: 0 0 clamp(1.5rem, 3vw, 2rem); /* oude waarde: 0 0 2rem */
	padding: 0;
	border: none;
	position: relative;
}

.bk_hero_tekst_links .circles-container {
	flex: 1;
	position: relative;
	min-height: 100%;
}

.bk_hero_tekst_links .circle {
	border-radius: 50%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease;
}

.bk_hero_tekst_links .circle:hover {
	transform: scale(1.2);    
	z-index: 1001;
}

.bk_hero_tekst_links .image-circle {
	background-color: white;
	overflow: hidden;
	border-radius: 50%;
}

.bk_hero_tekst_links .image-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.bk_hero_tekst_links .size-small {
	width: clamp(40px, 8vw, 60px); /* oude waarde: 60px */
	height: clamp(40px, 8vw, 60px); /* oude waarde: 60px */
}

.bk_hero_tekst_links .size-medium {
	width: clamp(70px, 12vw, 100px); /* oude waarde: 100px */
	height: clamp(70px, 12vw, 100px); /* oude waarde: 100px */
}

.bk_hero_tekst_links .size-large {
	width: clamp(100px, 18vw, 140px); /* oude waarde: 140px */
	height: clamp(100px, 18vw, 140px); /* oude waarde: 140px */
}

.bk_hero_tekst_links .color1 {
	background: var(--color-brand-blue);
}

.bk_hero_tekst_links .color2 {
	background: var(--color-brand-green);
}

.bk_hero_tekst_links .color3 {
	background: var(--color-brand-orange);
}

.bk_hero_tekst_links .color4 {
	background: var(--color-brand-orange-light);
}

/*--------------------------------------------------------------
# BK Numbers Block
--------------------------------------------------------------*/

.bk_numbers_container {
	max-width: clamp(800px, 90vw, 1200px); /* oude waarde: 1200px */
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2rem); /* oude waarde: 2rem */
	text-align: center;
	align-items: center;
	display: flex;
	gap: clamp(1rem, 3vw, 2rem); /* oude waarde: 2rem */
}

.bk-numbers-wrapper {
	display: flex; 
	justify-content: center;
	align-items: center;
	gap: clamp(15px, 3vw, 20px); /* oude waarde: 20px */
	border-bottom: 3px solid var(--color-brand-orange);
	margin-bottom: var(--margin-bk-block-bottom);
	margin-top: var(--margin-bk-block-top);
}

/* 2025-09-27 Wordt niet gebruikt - oude variant gecommentarieerd
.bk-numbers-wrapper-fw {
	text-align: center;
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-brand-blue-light);
	border-bottom: 3px solid var(--color-brand-orange-light);
	margin-bottom: var(--margin-bk-block-bottom);
	margin-top: var(--margin-bk-block-top);
	display: none;
}
*/

.bk-numbers-wrapper-fw {
	text-align: center;
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-brand-blue-light);
	border-bottom: 3px solid var(--color-brand-orange-light);
	margin-bottom: var(--margin-bk-block-bottom);
	margin-top: var(--margin-bk-block-top);
}

/* 2025-09-27 Wordt niet gebruikt - oude variant vervangen door responsive versie
.bk-numbers-wrapper-fw-OUDE-VARIANT {
	text-align: center;
	background-color: var(--color-brand-blue-light);
	grid-column: 1 / -1;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-bottom: var(--margin-bk-block-bottom);
	margin-top: var(--margin-bk-block-top);
}
*/

.bk-number-item {
	flex: 1;
}

.bk-number-item img {
	width: clamp(40%, 8vw, 50%); /* oude waarde: 50% */
}

.bk-number-label {
	font-size: clamp(1.2rem, 2.5vw, 1.5rem); /* oude waarde: 1.5rem */
	color: var(--color-brand-blue);
	font-family: swiss, sans-serif;
}

.bk-number-number {
	font-size: clamp(2rem, 4vw, 2.5rem); /* oude waarde: 2.5rem */
	color: var(--color-brand-orange);
	font-family: swiss, sans-serif;
}

/*--------------------------------------------------------------
# BK Logo Carousel Block
--------------------------------------------------------------*/

.logo-carousel-wrapper {
	width: 100%;
	margin-bottom: var(--margin-bk-block-bottom);
	margin-top: var(--margin-bk-block-top);
}

.logo-carousel-title {
	text-align: left;
	margin-bottom: clamp(20px, 4vw, 30px); /* oude waarde: 30px */
	color: var(--color-brand-orange);
}

.logo-carousel {
	width: 100%;
	overflow: hidden;
	background: #fff;
	padding: clamp(15px, 3vw, 20px) 0; /* oude waarde: 20px 0 */
	border-radius: clamp(8px, 1.5vw, 10px); /* oude waarde: 10px */
}

.logo-track {
	display: flex;
	align-items: center;
	animation: scroll-logos var(--scroll-duration, 20s) linear infinite;
}

.logo-item {
	flex: 0 0 auto;
	margin: 0 clamp(20px, 4vw, 30px); /* oude waarde: 0 30px */
	height: clamp(60px, 10vw, 80px); /* oude waarde: 80px */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

.logo-item:hover {
	opacity: 1;
}

.logo-item img {
	max-height: clamp(60px, 10vw, 80px); /* oude waarde: 80px */
	max-width: clamp(150px, 25vw, 200px); /* oude waarde: 200px */
	object-fit: contain;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.logo-item:hover img {
	filter: grayscale(0%);
}

@keyframes scroll-logos {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

.logo-carousel:hover .logo-track {
	animation-play-state: paused;
}

/*--------------------------------------------------------------
# BK News Items Block
--------------------------------------------------------------*/

.read-more {
	text-align: center;
}

.knop-read-more {
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(clamp(0.5, 1vw, 0.6)); /* oude waarde: scale(0.6) */
	transition: all 0.3s ease;
}

/*--------------------------------------------------------------
# BK Vacatures Block
--------------------------------------------------------------*/

.vacature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30vw, 250px), 1fr)); /* oude waarde: minmax(250px, 1fr) */
	align-items: stretch;
	gap: clamp(20px, 4vw, 30px); /* oude waarde: 30px */
	max-width: clamp(800px, 90vw, 1200px); /* oude waarde: 1200px */
	margin: clamp(20px, 4vw, 30px) auto; /* oude waarde: 30px auto */
}

.vacature-grid article {
	height: 100%;
}

.vacature-grid article a {
	display: block;
	height: 100%;
	text-decoration: none;
}

.vacature-grid .post-content {
	display: grid;
	grid-template-rows: clamp(80px, 12vw, 100px) 1fr auto; /* oude waarde: 100px 1fr auto */
	height: 100%;
	font-size: clamp(0.9rem, 1.5vw, 1rem); /* oude waarde: 1rem */
}

.vacature-grid .specs {  
	font-size: clamp(0.7rem, 1.2vw, 0.8rem); /* oude waarde: 0.8rem */
}

.bk_vacatures_container {
	margin: 0 auto;
	padding: clamp(0.8em, 1.5vw, 1em); /* oude waarde: 1em */
}

/*--------------------------------------------------------------
# Responsive Design
--------------------------------------------------------------*/

/* Mobile (max-width: 767px)
--------------------------------------------- */
@media (max-width: 767px) {
	/* BK Quote Block Mobile */
	.bk_quote_container {
		flex-direction: column;
		gap: 1.5rem;
		padding: 1.5rem 1rem;
	}

	.bk_product_quote_content {
		font-size: 1.2rem;
	}

	.bk_product_quote_author img {
		width: 120px;
		height: 120px;
	}

	.bk_quote {
		padding-left: 40px;
	}

	/* BK Team Block Mobile */
	.team-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.team-photo {
		width: 80px;
		height: 80px;
	}

	/* BK Header Block Mobile */

	.bk_header_container {
		height: 100%;;
		flex-direction: column;
		text-align: left;
		padding: 0px clamp(1rem, 3vw, 2rem);
		max-width: clamp(800px, 90vw, calc(767px - var(--spacing-sm) - var(--spacing-sm))); /* oude waarde: 1200px */
	}

	.bk_header_left {
		max-width: 100%;
		height: auto;
		padding: clamp(15px, 3vw, 20px) 0px; /* oude waarde: 0px 20px */
	}

	.bk_header_image {
		/*position: relative;
		max-width: 100%;
		margin-top: 1rem;*/
		display:none;
	}
	
	.bk_header_right {
		display:none;
	}

	/* BK Hero Tekst Links Mobile */
	.bk_hero_tekst_links {
		flex-direction: column;
		min-height: auto;
	}

	.bk_hero_tekst_content {
		max-width: 100%;
		padding: 20px;
	}

	.bk_hero_tekst_content h1 {
		font-size: 2rem;
	}

	.bk_hero_tekst_content p {
		font-size: 1.2rem;
	}

	.bk_hero_tekst_links .circles-container {
		min-height: 200px;
		margin-top: 1rem;
	}

	/* BK Numbers Block Mobile */
	.bk_numbers_container {
		flex-direction: column;
		gap: 1.5rem;
	}

	.bk-numbers-wrapper {
		flex-direction: column;
		gap: 1.5rem;
	}

	/* Logo Carousel Mobile */
	.logo-item {
		margin: 0 20px;
		height: 60px;
	}
	
	.logo-item img {
		max-width: 120px;
		max-height: 60px;
	}

	/* Vacatures Mobile */
	.vacature-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.vacature-grid .post-content {
		grid-template-rows: 80px 1fr auto;
	}
}

/* Tablet (768px - 1023px)
--------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	/* BK Quote Block Tablet */
	.bk_quote_container {
		gap: 1.5rem;
	}

	.bk_product_quote_author img {
		width: 150px;
		height: 150px;
	}

	/* BK Team Block Tablet */
	.team-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 25px;
	}

	.team-photo {
		width: 100px;
		height: 100px;
	}

	/* BK Header Block Tablet */

	.bk_header_container {
		height: 350px;
		max-width: clamp(800px, 90vw, calc(1023px - var(--spacing-lg) - var(--spacing-lg))); /* oude waarde: 1200px */
	}

	.bk_header_left {
		height: 350px;
		padding: clamp(15px, 3vw, 20px) 0px; /* oude waarde: 0px 20px */
	}

	/* BK Hero Tekst Links Tablet */
	.bk_hero_tekst_links {
		min-height: 350px;
	}

	.bk_hero_tekst_content h1 {
		font-size: 2.5rem;
	}

	.bk_hero_tekst_content p {
		font-size: 1.3rem;
	}

	/* BK Numbers Block Tablet */
	.bk_numbers_container {
		flex-wrap: wrap;
		gap: 1.5rem;
	}

	/* Vacatures Tablet */
	.vacature-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}
}

/* Desktop (1024px+)
--------------------------------------------- */
@media (min-width: 1024px) {
	/* Ensure desktop layout remains unchanged */
	.bk_quote_container {
		max-width: 1200px;
		margin: 3rem auto;
		padding: 2rem;
		gap: 2rem;
	}

	.bk_product_quote_content {
		font-size: 1.5rem;
	}

	.bk_product_quote_author {
		font-size: 1.2rem;
	}

	.bk_product_quote_author img {
		width: 180px;
		height: 180px;
	}

	.team-grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 30px;
		max-width: 1200px;
		margin: 30px auto;
	}

	.team-photo {
		width: 120px;
		height: 120px;
		margin-bottom: 20px;
	}

	.bk_header {
		height: 400px;
	}

	.bk_header_container {
		max-width: clamp(800px, 90vw, calc(1200px - var(--spacing-lg) - var(--spacing-lg))); /* oude waarde: 1200px */
		height: 400px;
	}

	.bk_header_left {
		height: 400px;
		padding: clamp(15px, 3vw, 20px) 0px; /* oude waarde: 0px 20px */
	}

	.bk_hero_tekst_links {
		min-height: 400px;
	}

	.bk_hero_tekst_content {
		padding: 30px;
	}

	.bk_hero_tekst_content h1 {
		font-size: 3rem;
		margin-bottom: 2rem;
	}

	.bk_hero_tekst_content p {
		font-size: 1.5rem;
		margin-bottom: 2rem;
	}

	.bk_numbers_container {
		max-width: 1200px;
		padding: 2rem;
		gap: 2rem;
	}

	.bk-numbers-wrapper {
		gap: 20px;
	}

	.logo-item {
		margin: 0 30px;
		height: 80px;
	}

	.logo-item img {
		max-height: 80px;
		max-width: 200px;
	}

	.vacature-grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 30px;
		max-width: 1200px;
		margin: 30px auto;
	}

	.vacature-grid .post-content {
		grid-template-rows: 100px 1fr auto;
		font-size: 1rem;
	}

	.vacature-grid .specs {
		font-size: 0.8rem;
	}
}

/* 2025-09-27 Wordt niet gebruikt - oude media queries vervangen door responsive versie
@media (max-width: 1000px) {
	.team-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.logo-item {
		margin: 0 20px;
		height: 60px;
	}
	.logo-item img {
		max-width: 120px;
		max-height: 60px;
	}
}

@media (max-width: 480px) {
	.team-grid {
		grid-template-columns: 1fr;
	}
}
*/