/*
Theme Name: Hello Elementor Child
Description: Child theme van Hello Elementor
Template: hello-elementor
Version: 1.0.0
*/

.admin-bar .page-content{
//	margin-top: 30px;
}

.clickarea{
	cursor: pointer;
}

.linkgrow a{
	transition: transform 0.3s ease, color 0.3s ease;
}
.linkgrow a:hover {
  transform: scale(1.05);
}

@media(max-width: 767px){
	.woordafbreking{
		hyphens: auto;
	}
}
.woordafbrekinopalledevices{
	hyphens: auto;
}

a:hover{
	text-decoration: underline !important;
}
a.elementor-button:hover, .jet-filters-pagination a:hover, .projecten-carousel__btn:hover, .elementor-icon-list-items a:hover, .po2-wrap a:hover{
	text-decoration: none !important;
}
.underline a:hover, .e-n-accordion-item-title:hover .e-n-accordion-item-title-text, .satdesigntoggletitle:hover{
	text-decoration: underline !important;
}

/* ── Gutenberg blok "Grote tekst" (hoogendoorn/grote-tekst) ── */
.wp-block-hoogendoorn-grote-tekst,
.wp-block-hoogendoorn-grote-tekst p,
.wp-block-hoogendoorn-grote-tekst li {
	font-size: var( --e-global-typography-c855497-font-size );
	line-height: var( --e-global-typography-c855497-line-height );
	word-spacing: var( --e-global-typography-c855497-word-spacing );
	color: var( --e-global-color-ec24f60 );
}

/* ── Gutenberg blokken "Tekst + foto" / "Foto + tekst" ── */
.wp-block-hoogendoorn-tekst-foto,
.wp-block-hoogendoorn-foto-tekst {
	display: flex;
	gap: 80px;
	align-items: center;
	margin-top: 80px;
	margin-bottom: 80px;
}
.wp-block-hoogendoorn-tekst-foto > *,
.wp-block-hoogendoorn-foto-tekst > * {
	flex: 1 1 0;
	min-width: 0;
}
.wp-block-hoogendoorn-tekst-foto .wp-block-image,
.wp-block-hoogendoorn-foto-tekst .wp-block-image {
	margin: 0;
}
.wp-block-hoogendoorn-tekst-foto .wp-block-image img,
.wp-block-hoogendoorn-foto-tekst .wp-block-image img {
	display: block;
	border-radius: 10px;
	max-width: 100%;
	height: auto;
}
.wp-block-hoogendoorn-tekst-foto h2,
.wp-block-hoogendoorn-foto-tekst h2 {
	font-family: var( --e-global-typography-9cd1a4e-font-family ), Sans-serif;
	font-size: var( --e-global-typography-9cd1a4e-font-size );
	font-weight: var( --e-global-typography-9cd1a4e-font-weight );
	line-height: var( --e-global-typography-9cd1a4e-line-height );
	color: var( --e-global-color-ec24f60 );
}

@media (max-width: 767px) {
	.wp-block-hoogendoorn-tekst-foto,
	.wp-block-hoogendoorn-foto-tekst {
		flex-direction: column;
		gap: 24px;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.wp-block-hoogendoorn-foto-tekst {
		flex-direction: column-reverse;
	}
}

/* Reviews */
.reviewscontainer .jet-slick-dots li{
	border: solid 2px var(--e-global-color-secondary);
}
.reviewscontainer .jet-listing-grid__slider-icon{
	border-radius: 50%;
	background: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/02/icon_right.svg') no-repeat center center !important;
	background-size: 75% !important;
	background-color: #FFF !important;
	transition: all .3s !important;
}
.reviewscontainer .jet-listing-grid__slider-icon.prev-arrow{
	background-image: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/02/icon_left.svg') !important;
}
.reviewscontainer .jet-listing-grid__slider-icon.next-arrow{ transform: scaleX(1);
}
.reviewscontainer .jet-listing-grid__slider-icon svg{
	display: none;
}
.reviewscontainer .jet-listing-grid__slider-icon:hover{
	transform: scale(1.08) !important;
}

/* ── Branches overzicht ── */
.branches-overzicht {
	display: flex;
	gap: 12px;
}

.branches-item {
	position: relative;
	display: block;
	flex: 1;
	min-height: 340px;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1),
	            margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.branches-overzicht .branches-item__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.branches-item__label {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	color: #f5a623 !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	font-family: "Open Sans", sans-serif !important;
	padding: 8px 16px !important;
	border-radius: 6px !important;
	line-height: 1.3 !important;
	white-space: nowrap;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1),
	            color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.branches-item:hover .branches-item__label {
	background: #f5a623 !important;
	color: #fff !important;
	font-size: 20px !important;
}

/* Hover: actieve kaart wordt breder + hoger, rest krimpt */
@media (hover: hover) and (min-width: 1025px) {
	.branches-overzicht:hover .branches-item {
		flex: 0.85;
	}
	.branches-overzicht .branches-item:hover {
		flex: 1.3;
		margin-top: -30px;
		margin-bottom: -30px;
	}
	.branches-item:hover .branches-item__img {
		transform: scale(1.05);
	}
}

/* Tablet: 2 rijen */
@media (max-width: 1024px) and (min-width: 768px) {
	.branches-overzicht {
		flex-wrap: wrap;
	}
	.branches-item {
		flex: 1 1 calc(33.333% - 8px);
		min-height: 240px;
	}
}

/* Mobiel: 2 naast elkaar */
@media (max-width: 767px) {
	.branches-overzicht {
		flex-wrap: wrap;
	}
	.branches-item {
		flex: 1 1 calc(50% - 6px);
		min-height: 180px;
	}
}

/* ── Inspiratie overzicht (3-kolom scroll collage) ── */
.inspiratie-overzicht {
	display: flex;
	gap: 12px;
	height: 700px;
	overflow: hidden;
	border-radius: 16px;
}

.inspiratie-kolom {
	flex: 1;
	overflow: hidden;
}

.inspiratie-kolom__inner {
	will-change: transform;
}

.inspiratie-kolom__set {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 12px;
}

.inspiratie-item {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	flex-shrink: 0;
}

.inspiratie-item--vertical img {
	aspect-ratio: 220 / 258;
}

.inspiratie-item--horizontal img {
	aspect-ratio: 220 / 205;
}

.inspiratie-item img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: cover;
}

.inspiratie-item__label {
	position: absolute;
	bottom: 12px;
	left: 12px;
	background: var(--e-global-color-secondary);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 5px 14px;
	border-radius: 6px;
	line-height: 1.3;
	white-space: nowrap;
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
	.inspiratie-overzicht {
		height: 500px;
	}
	.inspiratie-kolom:nth-child(3) {
		display: none;
	}
}

/* Mobiel */
@media (max-width: 767px) {
	.inspiratie-overzicht {
		height: 400px;
		gap: 8px;
	}
	.inspiratie-kolom:nth-child(3) {
		display: none;
	}
	.inspiratie-kolom__set {
		gap: 8px;
		padding-bottom: 8px;
	}
	.inspiratie-item {
		border-radius: 8px;
	}
}

/* ── Projecten carrousel ── */
.projecten-carousel {
	position: relative;
	overflow: hidden;
	height: calc(850px * 642 / 1024);
}

.projecten-carousel__track {
	display: flex;
	align-items: center;
	transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.projecten-carousel__slide {
	position: relative;
	flex: 0 0 850px;
	height: calc(850px * 642 / 1024);
	border-radius: 20px;
	overflow: hidden;
	margin: 0 8px;
	transform: scale(0.9);
	transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.projecten-carousel__slide[aria-hidden="false"] {
	transform: scale(1);
}

.projecten-carousel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.projecten-carousel__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 60px 80px;
	background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
}

.projecten-carousel__title {
	color: #fff !important;
	line-height: 1;
	margin: 0 0 20px 0;
	max-width: 600px;
	font-family: "Kanit", Sans-serif !important;
	font-size: 3rem !important;
	line-height: 2.9rem !important;
	font-weight: 600 !important;
}

.projecten-carousel__btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: var(--e-global-color-secondary);
	color: #fff !important;
	padding: 5px 15px 5px 15px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.3s ease, transform 0.3s ease;
	font-size: 1.2rem;
	font-weight: 700;
}
.projecten-carousel__btn:hover {
	background: var(--e-global-color-ec24f60);
}

/* Pijlen */
.projecten-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) !important;
	z-index: 2;
	width: 62px !important;
	height: 62px !important;
	border-radius: 50% !important;
	border: none !important;
	background: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/02/icon_left.svg') no-repeat center center !important;
	background-size: 75% !important;
	background-color: #FFF !important;
	color: #f5a623 !important;
	cursor: pointer !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.projecten-carousel__arrow:hover {
	transform: translateY(-50%) scale(1.08) !important;
}
.projecten-carousel__arrow:focus-visible {
	outline: 3px solid #f5a623;
	outline-offset: 3px;
}
.projecten-carousel__arrow--prev {
	left: max(16px, calc((100% - 850px) / 2 - 32px));
}
.projecten-carousel__arrow--next {
	background-image: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/02/icon_right.svg') !important;
	right: max(16px, calc((100% - 850px) / 2 - 32px));
}

/* Tablet */
@media (max-width: 1100px) {
	.projecten-carousel {
		height: calc((100vw - 80px) * 642 / 1024);
	}
	.projecten-carousel__slide {
		flex: 0 0 calc(100vw - 80px);
		height: calc((100vw - 80px) * 642 / 1024);
	}
	.projecten-carousel__arrow--prev {
		left: 12px;
		width: 52px !important;
		height: 52px !important;
	}
	.projecten-carousel__arrow--next {
		right: 12px;
		width: 52px !important;
		height: 52px !important;
	}
	.projecten-carousel__title {
		font-size: 26px;
	}
	.projecten-carousel__overlay {
		padding: 30px 32px;
	}
}

/* Mobiel */
@media (max-width: 767px) {
	.projecten-carousel {
		height: calc((100vw - 48px) * 642 / 1024);
	}
	.projecten-carousel__slide {
		flex: 0 0 calc(100vw - 48px);
		height: calc((100vw - 48px) * 642 / 1024);
		margin: 0 8px;
	}
	.projecten-carousel__arrow {
		width: 44px;
		height: 44px;
	}
	.projecten-carousel__arrow--prev {
		left: 8px;
		width: 50px !important;
		height: 50px !important;
	}
	.projecten-carousel__arrow--next {
		right: 8px;
		width: 50px !important;
		height: 50px !important;
	}
	.projecten-carousel__title {
		font-size: 1.5rem !important;
		line-height: 1.6rem !important;
		margin-bottom: 16px;
	}
	.projecten-carousel__overlay {
		padding: 24px;
		padding-left: 40px;
		padding-right: 40px;
		background: linear-gradient(270deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 29%);
	}
	.projecten-carousel__btn {
		padding: 8px 22px;
		font-size: 14px;
	}
}

/* ── Projecten duo (2 kaarten naast elkaar) ── */
.projecten-duo {
	position: relative;
}
.projecten-duo__viewport {
	overflow: hidden;
}
.projecten-duo__track {
	display: flex;
	gap: 20px;
	transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
	transform: translateX(calc((-100% - 20px) / 3));
}
.projecten-duo__slide {
	position: relative;
	flex: 0 0 calc((100% - 20px) / 2);
	aspect-ratio: 16 / 13;
	border-radius: 20px;
	overflow: hidden;
}
.projecten-duo__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center center;
}
.projecten-duo__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30px 40px;
	background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 45%, transparent 75%);
}
.projecten-duo__title {
	color: #fff !important;
	margin: 0 0 16px 0;
	max-width: 90%;
	font-family: "Kanit", Sans-serif !important;
	font-size: 2.1rem !important;
	line-height: 2.2rem !important;
	font-weight: 600 !important;
	text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.projecten-duo__btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: var(--e-global-color-secondary);
	color: #fff !important;
	padding: 5px 15px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.3s ease;
	font-size: 1rem;
	font-weight: 700;
}
.projecten-duo__btn:hover {
	background: var(--e-global-color-ec24f60);
}

/* Pijlen */
.projecten-duo__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) !important;
	z-index: 2;
	width: 52px !important;
	height: 52px !important;
	border-radius: 50% !important;
	border: none !important;
	background: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/02/icon_left.svg') no-repeat center center !important;
	background-size: 75% !important;
	background-color: #FFF !important;
	color: #f5a623 !important;
	cursor: pointer !important;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.projecten-duo__arrow:hover {
	transform: translateY(-50%) scale(1.08) !important;
}
.projecten-duo__arrow:focus-visible {
	outline: 3px solid #f5a623;
	outline-offset: 3px;
}
.projecten-duo__arrow--prev {
	left: -20px;
}
.projecten-duo__arrow--next {
	background-image: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/02/icon_right.svg') !important;
	right: -20px;
}

/* Pijlen buiten de kaarten op brede schermen */
@media (min-width: 1151px) {
	.projecten-duo__arrow--prev { left: -70px; }
	.projecten-duo__arrow--next { right: -70px; }
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
	.projecten-duo__overlay {
		padding: 24px 28px;
	}
	.projecten-duo__title {
		font-size: 1.4rem !important;
		line-height: 1.5rem !important;
	}
}

/* Mobiel: 1 kaart in beeld */
@media (max-width: 767px) {
	.projecten-duo__track {
		gap: 12px;
		transform: translateX(calc((-100% - 12px) / 3));
	}
	.projecten-duo__slide {
		flex: 0 0 100%;
		aspect-ratio: 4 / 3;
		border-radius: 14px;
	}
	.projecten-duo__overlay {
		padding: 20px 64px;
		background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 50%, transparent 80%);
	}
	.projecten-duo__title {
		font-size: 1.2rem !important;
		line-height: 1.3rem !important;
		margin-bottom: 12px;
	}
	.projecten-duo__arrow {
		width: 44px !important;
		height: 44px !important;
	}
	.projecten-duo__arrow--prev { left: 8px; }
	.projecten-duo__arrow--next { right: 8px; }
}

/** Header **/
@media(max-width: 767px){
	.headercontainer .boog, .headercontainer .rij2{
		-moz-transition: all 0.3s ease-out;  /* FF4+ */
		-o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.3s ease-out;  /* IE10 */
		transition: all 0.3s ease-out;
	}
	.headercontainer.scrolled .boog{
		min-height: 0px;
		height: 0px;
	}
	.headercontainer.scrolled .rij2{
		margin-bottom: -5px;
	}
}
@media(min-width: 768px){
	.headercontainer .rij1, .headercontainer .rij2{
		-moz-transition: all 0.3s ease-out;  /* FF4+ */
		-o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
		-webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
		-ms-transition: all 0.3s ease-out;  /* IE10 */
		transition: all 0.3s ease-out;
	}
	.headercontainer.scrolled .rij1{
		padding-top: 4px;
		//padding-bottom: 0px;
	}
	.headercontainer.scrolled .rij2{
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: -7px;
	}
}

/** FAQ **/
.faqcontainer button{
	border: none;
	white-space: initial;
	text-align: left;
}
.faqcontainer button:focus{
	background: none !important;
}
.faqcontainer li{
	 background: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/02/blad.svg') no-repeat left top 16px;
	background-size: 28px;
}
.faqcontainer li h3{
	margin-top: 6px;
	margin-bottom: 15px;
}
.faqcontainer .satdesigntogglecontent{
	font-size: var( --e-global-typography-c855497-font-size );
	line-height: var( --e-global-typography-c855497-line-height );
	word-spacing: var( --e-global-typography-c855497-word-spacing );
	color: var( --e-global-color-ec24f60 );
}
.faqcontainer .active .satdesigntoggletitle{
	text-decoration: underline;
}

@media(max-width: 767px){
	.faqcontainer li h3{
		margin-top: 16px;
		margin-bottom: 22px;
	}
	.faqcontainer li{
		background-position: left top 22px;
	}
}

/* ── JetEngine gallery (hero + 3 kolommen masonry) ── */
.vg-gallery {
	display: flex;
	gap: 25px;
	width: 100%;
}
.vg-gallery__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.vg-gallery .vg-gallery__item {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
}
.vg-gallery .vg-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.vg-gallery .vg-gallery__item:hover .vg-gallery__img {
	transform: scale(1.03);
}

/* Featured layout: 3-koloms grid met hero (spant 2 kolommen, rij 1)
   en side-kolom (spant beide rijen). Hierdoor lijnen alle bodems
   automatisch uit op rij 2's onderrand. */
.vg-gallery--featured {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: max-content 1fr;
	gap: 25px;
}
.vg-gallery--featured .vg-gallery__hero {
	grid-column: 1 / 3;
	grid-row: 1;
	display: block;
}
.vg-gallery--featured .vg-gallery__col--col1 {
	grid-column: 1;
	grid-row: 2;
}
.vg-gallery--featured .vg-gallery__col--col2 {
	grid-column: 2;
	grid-row: 2;
}
.vg-gallery--featured .vg-gallery__col--side {
	grid-column: 3;
	grid-row: 1 / 3;
}

/* Laatste foto per kolom rekt mee om de bodems te vullen,
   afbeelding cropt met object-fit:cover.
   Kolom 1 & 2 krijgen een minimumhoogte zodat het laatste vlak
   niet te smal wordt onder de hero. */
@media (min-width: 768px) {
	.vg-gallery .vg-gallery__col > .vg-gallery__item:last-child {
		flex: 1 1 auto;
		min-height: 0;
	}
	.vg-gallery .vg-gallery__col > .vg-gallery__item:last-child .vg-gallery__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.vg-gallery--featured .vg-gallery__col > .vg-gallery__item:last-child {
		min-height: 300px;
	}
}

@media (max-width: 767px) {
	.vg-gallery {
		flex-direction: column;
		gap: 20px;
	}
	.vg-gallery__col {
		flex: 1 1 auto;
		gap: 20px;
	}
	.vg-gallery .vg-gallery__item {
		border-radius: 10px;
	}
	.vg-gallery--featured {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
}

/* ── Donkere gradient onderaan voor leesbaarheid icoon ── */
.vergrootglas a.e-gallery-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.75) 100%);
	pointer-events: none;
	z-index: 1;
}

/* ── Vergrootglas-icoon op gallery items ── */
.vergrootglas a.e-gallery-item::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--e-global-color-secondary);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	pointer-events: none;
	z-index: 2;
	transition: transform 0.25s ease, background-color 0.25s ease;
}
.vergrootglas a.e-gallery-item:hover::after {
	transform: scale(1.08);
	background-color: #fff;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5a623'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>");
}

@media (max-width: 767px) {
	.vergrootglas a.e-gallery-item::after {
		width: 30px;
		height: 30px;
		right: 8px;
		bottom: 8px;
		background-size: 18px 18px;
	}
}

/* ── Projecten overzicht 2 (masonry collage) ── */
.po2-wrap {
	width: 100%;
}

.po2-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}

.po2-wrap a.po2-filter {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	background: transparent !important;
	color: var(--e-global-color-ec24f60) !important;
	border: 2px solid var(--e-global-color-ec24f60) !important;
	border-radius: 10px !important;
	padding: 9px 22px !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-weight: bold !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.po2-wrap a.po2-filter .po2-filter__label {
	pointer-events: none !important;
}

.po2-wrap a.po2-filter:focus,
.po2-wrap a.po2-filter:focus-visible,
.po2-wrap a.po2-filter:active {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--e-global-color-ec24f60) !important;
	color: var(--e-global-color-ec24f60) !important;
}

.po2-wrap a.po2-filter:hover {
	background: var(--e-global-color-ec24f60) !important;
	color: #fff !important;
	border-color: var(--e-global-color-ec24f60) !important;
}

.po2-wrap a.po2-filter.is-active {
	background: var(--e-global-color-ec24f60) !important;
	color: #fff !important;
	border-color: var(--e-global-color-ec24f60) !important;
}

.po2-wrap a.po2-filter::before,
.po2-wrap a.po2-filter::after {
	content: none !important;
	display: none !important;
}

.po2-grid.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.po2-grid {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.po2-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.po2-card {
	position: relative;
	display: block;
	width: 100%;
	flex: 1 1 auto;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
}

/* Foto-kaart */
.po2-card--thumb {
	aspect-ratio: 4 / 5;
	background: #c8dcb6;
	min-height: 0;
}

.po2-card__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	overflow: hidden;
}

.po2-grid .po2-card .po2-card__media .po2-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.po2-card--thumb:hover .po2-card__img {
	transform: scale(1.04);
}

.po2-card__logo {
	position: absolute;
	top: 25px;
	left: 25px;
	z-index: 2;
	display: block;
	background: #fff;
	border-radius: 8px;
	padding: 8px 10px;
	max-width: 40%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.po2-grid .po2-card .po2-card__logo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60px;
	max-width: 100%;
	object-fit: contain;
}

/* Tekst-kaart */
.po2-card--text {
	background: var(--e-global-color-accent);
	padding: 22px;
	min-height: 220px;
	color: #fff;
	display: flex;
	flex-direction: column;
	transition: background 0.3s ease;
}

.po2-card--text:hover {
	background: var(--e-global-color-ec24f60);
}

.po2-card__org {
	font-size: 1.6rem;
	line-height: 1.1
	font-weight: 600;
	color: #fff !important;
	margin-bottom: 8px;
	opacity: 0.9;
}

.po2-card__title {
	font-family: "Kanit", Sans-serif;
	font-size: 1.6rem;
	line-height: 1.1;
	font-weight: 700;
	color: #fff !important;
	margin: 0;
}

/* Bekijk-case knop (op beide types) */
.po2-card__btn {
	position: absolute;
	bottom: 25px;
	left: 25px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	background: var(--e-global-color-secondary);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 8px;
	line-height: 1.3;
	transition: background 0.3s ease;
}

.po2-card:hover .po2-card__btn {
	background: var(--e-global-color-ec24f60, #e89015);
}

/* Meer-laden knop */
.po2-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.po2-more {
	align-items: center !important;
	align-self: flex-start !important;
	background: var(--e-global-color-secondary) !important;
	color: #fff !important;
	padding: 5px 15px 5px 15px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: background 0.3s ease, transform 0.3s ease !important;
	font-size: 1.2rem !important;
	font-weight: 700 !important;
	border: none !important;
}

.po2-more:hover {
	background: var(--e-global-color-ec24f60) !important;
}

.po2-more[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* Tablet: alle kaarten over 2 kolommen (masonry), 3 kolom-wrappers oplossen */
@media (max-width: 1199px) and (min-width: 768px) {
	.po2-grid {
		display: block;
		column-count: 2;
		column-gap: 24px;
	}
	.po2-col {
		display: contents;
	}
	.po2-card {
		display: inline-block; /* Safari/WebKit: voorkomt multicol kaart- en marge-bugs */
		vertical-align: top;
		width: 100%;
		margin: 0 0 24px;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}
	.po2-card__title {
		font-size: 1.4rem;
	}
}

/* Mobiel */
@media (max-width: 767px) {
	.po2-grid {
		flex-direction: column;
		gap: 16px;
	}
	.po2-col {
		flex: 1 1 auto;
		width: 100%;
		gap: 16px;
	}
	.po2-col:nth-child(3) {
		display: flex;
	}
	.po2-card {
		border-radius: 10px;
	}
	.po2-card--text {
		padding: 16px 14px;
		min-height: 180px;
	}
	.po2-card__title {
		font-size: 1.1rem;
	}
	.po2-card__org {
		font-size: 1.4rem;
	}
	.po2-card__logo {
		top: 25px;
		left: 25px;
		padding: 6px 8px;
		max-width: 45%;
	}
	.po2-card__logo img {
		max-height: 50px;
	}
	.po2-card__btn {
		bottom: 25px;
		left: 25px;
		font-size: 1.1rem;
		line-height: 26.4px;
		padding: 5px 15px;
	}
	.po2-more{
		font-size: 1.1rem !important;
	}
}


/** Social share icons **/
.sharebuttons{
	margin: 0px;
	padding: 0px;
}
.sharebuttons li{
	margin: 0px;
	padding: 0px !important;
	list-style: none;
	display: inline-block;
}
.sharebuttons li a{
	font-size: 0px;
	height: 35px;
	width: 65px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 18px;
	border-radius: 3px;
	margin-right: 0px;
	display: block;
}
.sharebuttons .linkedin a{
	background-image: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/05/social_linkedin.svg');
	background-color: #007BB6;
}
.sharebuttons .linkedin a:hover{
	background-color: #0072a7;
}
.sharebuttons .x a{
	background-image: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/05/social_x.svg');
	background-color: #000;
}
.sharebuttons .x a:hover{
	background-color: rgb(45, 45, 45);
}
.sharebuttons .facebook a{
	background-image: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/05/social_facebook.svg');
	background-color: #3B5998;
}
.sharebuttons .facebook a:hover{
	background-color: #344e85;
}
.sharebuttons .pinterest a{
	background-image: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/05/social_pinterest.svg');
	background-color: #E60023;
}
.sharebuttons .pinterest a:hover{
	background-color: #cc001f;
}
.sharebuttons .mail a{
	background-image: url('https://hoogendoorn.webdesignprojecten.nl/wp-content/uploads/2026/05/icon_mail_wit.svg');
	background-color: #8E8E8E;
}
.sharebuttons .mail a:hover{
	background-color: #7c7c7c;
}
@media(max-width: 767px){
	.sharebuttons li a{
	  margin-right: 0px;
	}
}


.wp-block-gallery{
	padding-top: 30px;
	padding-bottom: 30px;
}

@media(max-width: 1075px){
	.e-eicon-frame-expand{
		display: none !important;
	}
	.elementor-lightbox .elementor-lightbox-item{
		padding: 20px !important;
	}
}