/* =========================================================
   VERTROUWENSBALK HOMEPAGE
   ========================================================= */

.trust-bar {
	position: relative;

	z-index: 5;

	border-top: 1px solid var(--joyce-border);
	border-bottom: 1px solid var(--joyce-border);

	background: var(--joyce-white);
}

.trust-bar__grid {
	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-item {
	display: flex;

	min-height: 88px;

	align-items: center;

	gap: 14px;

	padding: 15px 21px;

	border-right: 1px solid var(--joyce-border);
}

.trust-item:first-child {
	border-left: 1px solid var(--joyce-border);
}


/* =========================================================
   ICONEN VERTROUWENSBALK
   ========================================================= */

.trust-item__icon {
	display: flex;

	width: 50px;
	height: 50px;

	flex: 0 0 50px;

	align-items: center;
	justify-content: center;

	overflow: hidden;

	border-radius: 14px;

	background: #f3f7fb;
}

.trust-item__icon img {
	display: block;

	width: 40px;
	height: 40px;

	object-fit: contain;
}

.trust-item__content {
	min-width: 0;
}

.trust-item strong,
.trust-item__content > span {
	display: block;
}

.trust-item strong {
	margin-bottom: 3px;

	color: var(--joyce-heading);

	font-size: 0.88rem;

	line-height: 1.35;
}

.trust-item__content > span {
	color: var(--joyce-muted);

	font-size: 0.74rem;

	line-height: 1.4;
}


/* =========================================================
   LEREN RIJDEN BIJ JOYCE
   ========================================================= */

.about-section {
	background:
		linear-gradient(
			180deg,
			var(--joyce-white) 0%,
			#fafbfe 100%
		);
}

.about-section__grid {
	display: grid;

	grid-template-columns:
		minmax(330px, 0.82fr)
		minmax(0, 1.18fr);

	align-items: center;

	gap: clamp(45px, 7vw, 85px);
}

.about-section__visual {
	position: relative;

	min-height: 430px;
}


/* =========================================================
   FOTO LESAUTO
   Volledige auto zichtbaar houden
   ========================================================= */

.about-section__image {
	display: flex;

	width: 88%;
	height: 360px;

	align-items: center;
	justify-content: center;

	overflow: hidden;

	padding: 22px;

	border-radius: 36px;

	background: #edf3f8;

	box-shadow: var(--joyce-shadow-medium);
}

.about-section__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: center center;
}


/* =========================================================
   QUOTE
   ========================================================= */

.about-section__quote {
	position: absolute;

	right: 0;
	bottom: 0;

	width: min(340px, 82%);

	padding: 22px 25px;

	border-left: 5px solid var(--joyce-red);

	border-radius: var(--joyce-radius-medium);

	background: var(--joyce-white);

	box-shadow: var(--joyce-shadow-medium);
}

.about-section__quote p {
	margin: 0;

	color: var(--joyce-blue-dark);

	font-family: Georgia, serif;

	font-size: 1.02rem;
	font-style: italic;

	line-height: 1.55;
}


/* =========================================================
   TEKST JOYCE-SECTIE
   ========================================================= */

.about-section__content {
	max-width: 700px;
}

.about-section__content > p {
	font-size: 0.98rem;
}

.about-section__highlights {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 13px;

	margin-top: 28px;
}

.about-section__highlights div {
	padding: 16px;

	border: 1px solid var(--joyce-border);

	border-radius: 13px;

	background: var(--joyce-white);
}

.about-section__highlights strong,
.about-section__highlights span {
	display: block;
}

.about-section__highlights strong {
	margin-bottom: 4px;

	color: var(--joyce-blue-dark);

	font-size: 0.92rem;
}

.about-section__highlights span {
	color: var(--joyce-muted);

	font-size: 0.78rem;

	line-height: 1.4;
}

.about-section__button {
	margin-top: 25px;
	margin-bottom: 0;
}


/* =========================================================
   CTA ONDERAAN HOMEPAGE
   ========================================================= */

.contact-cta {
	padding-top: 8px;

	padding-bottom: clamp(55px, 7vw, 85px);

	background: var(--joyce-white);
}

.contact-cta__panel {
	display: grid;

	grid-template-columns:
		minmax(0, 1.2fr)
		minmax(280px, 0.8fr);

	align-items: center;

	gap: 45px;

	padding: clamp(34px, 5vw, 55px);

	overflow: hidden;

	border-radius: var(--joyce-radius-large);

	background:
		radial-gradient(
			circle at 90% -20%,
			rgba(239, 184, 73, 0.26),
			transparent 42%
		),
		linear-gradient(
			135deg,
			var(--joyce-blue-deep),
			var(--joyce-blue)
		);

	box-shadow: var(--joyce-shadow-medium);
}

.contact-cta h2,
.contact-cta p {
	color: var(--joyce-white);
}

.contact-cta__content > p:last-child {
	max-width: 680px;

	color: rgba(255, 255, 255, 0.78);
}

.contact-cta__actions {
	display: grid;

	gap: 12px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	.trust-bar__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.trust-item:nth-child(3),
	.trust-item:nth-child(4) {
		border-top: 1px solid var(--joyce-border);
	}

	.trust-item:nth-child(3) {
		border-left: 1px solid var(--joyce-border);
	}

	.about-section__grid,
	.contact-cta__panel {
		grid-template-columns: 1fr;
	}

	.about-section__visual {
		width: min(100%, 590px);
		min-height: 410px;
	}

	.about-section__image {
		height: 340px;
		padding: 20px;
	}

	.contact-cta__actions {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 650px) {

	.trust-bar__grid,
	.about-section__highlights {
		grid-template-columns: 1fr;
	}

	.trust-item,
	.trust-item:first-child,
	.trust-item:nth-child(3) {
		min-height: 78px;

		border-top: 0;
		border-right: 1px solid var(--joyce-border);
		border-bottom: 1px solid var(--joyce-border);
		border-left: 1px solid var(--joyce-border);
	}

	.trust-item:last-child {
		border-bottom: 0;
	}

	.trust-item__icon {
		width: 46px;
		height: 46px;

		flex-basis: 46px;
	}

	.trust-item__icon img {
		width: 36px;
		height: 36px;
	}

	.about-section__visual {
		min-height: 355px;
	}

	.about-section__image {
		width: 92%;
		height: 270px;

		padding: 16px;

		border-radius: 27px;
	}

	.about-section__quote {
		width: 88%;

		padding: 19px 21px;
	}

	.contact-cta {
		padding-top: 0;
	}

	.contact-cta__panel {
		gap: 30px;

		padding: 32px 23px;

		border-radius: 22px;
	}

	.contact-cta__actions {
		grid-template-columns: 1fr;
	}

}