/*
 * Spenkelink — pagina "Over ons" (Figma frame 80:343, 1920×3780).
 * Alle maten uit de design-data. Blokcontainer 1106 (marges 407),
 * USP-raster 1172 (marges 374), contentcontainer 1516 (marges 202).
 * Gescoped op body.spk-p-overons / eigen spk-overons-*-classes; de
 * reviewslider gebruikt de home-markup en krijgt hier dezelfde styling
 * (home.css laadt niet op deze pagina), gescoped binnen .spk-overons-service.
 */

/* ---------- Animatie-basis + typ-caret (theme.js; home.css laadt hier niet) ---------- */
.spk-p-overons [data-anim] {
	opacity: 0;
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.spk-p-overons [data-anim='up'] { transform: translateY(40px); }
.spk-p-overons [data-anim='pop'] { transform: translateY(14px) scale(0.95); }
.spk-p-overons [data-anim].is-inview { opacity: 1; transform: none; }
.spk-p-overons [data-spk-type].is-typing::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 0.85em;
	margin-left: 8px;
	background: var(--spk-white);
	animation: spk-oo-caret 0.85s steps(1) infinite;
}
@keyframes spk-oo-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.spk-p-overons [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Hero-intro (Figma 81:126: 1311px breed op y=415, 16/25, 2 alinea's) ---------- */
.spk-p-overons .spk-page-hero__intro {
	max-width: 1311px;
	margin-top: 18px;
	line-height: 25px;
	white-space: pre-line; /* lege regel in de default = alinea-witregel */
}

/* ---------- 2. Ontwerp en realisatie onder één dak ---------- */
.spk-overons-design {
	padding-top: 15px; /* foto op y=693, hero eindigt op 678 */
}
.spk-overons-design__inner {
	max-width: 1154px; /* blok 1106 + padding */
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 519px 536px;
	column-gap: 51px;
	justify-content: space-between;
	align-items: start;
}
.spk-overons-design__title {
	max-width: 448px;
	font-size: 40px;
	font-weight: 400;
	line-height: normal;
	margin: 21px 0 14px; /* titel y=714, foto y=693, tekst y=824 */
}
.spk-overons-design__text p {
	font-size: 16px;
	line-height: 25px;
	margin: 0 0 25px;
}
.spk-overons-design__text p:last-child { margin-bottom: 0; }
.spk-overons-design__media {
	margin: 0;
	position: relative;
	height: 432px;
	overflow: hidden;
}
.spk-overons-design__media img {
	/* Exacte Figma-crop (h 165.43%, top −38.04%): venster zonder foto-bijschrift. */
	position: absolute;
	left: 0;
	top: -38.04%;
	width: 100%;
	height: 165.43%;
	max-width: none;
	object-fit: cover;
}

/* ---------- 3. USP-tegels (4 × 260×272 op #171717) ---------- */
.spk-overons-usps {
	padding: 59px 0 287px; /* onder: ruimte waarin de service-foto omhoog steekt (band y=1743, foto y=1520) */
}
.spk-overons-usps__inner {
	max-width: 1220px; /* raster 1172 + padding */
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-overons-usps__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 44px;
}
.spk-overons-usp {
	background: var(--spk-bg-dark);
	height: 272px;
	padding: 28px 20px 0 22px;
	overflow: hidden;
}
.spk-overons-usp__icon {
	display: flex;
	align-items: flex-end; /* iconen (55/54/49 hoog) op één basislijn */
	height: 55px;
}
/* Iconen komen uit ACF (SVG heeft geen afmetingen in de mediabibliotheek), dus
   de hoogte hier begrenzen: een groter bestand kan de tegel niet oprekken. */
.spk-overons-usp__icon img { display: block; max-height: 55px; width: auto; }
.spk-overons-usp__title {
	font-size: 25px;
	font-weight: 400;
	line-height: normal;
	margin: 13px 0 0;
}
.spk-overons-usp__text {
	font-size: 14px;
	line-height: 25px;
	margin: 13px 0 0;
}

/* ---------- 4. Service waar u op kunt rekenen (#171717-band) + reviews ---------- */
.spk-overons-service {
	background: var(--spk-bg-dark);
	padding-bottom: 105px;
	display: flow-root; /* voorkomt margin-collapse: de foto steekt boven de band uit */
}
.spk-overons-service__inner {
	max-width: 1154px;
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-overons-service__grid {
	display: grid;
	grid-template-columns: 536px 519px;
	column-gap: 42px;
	justify-content: space-between;
	align-items: start;
	margin-top: -223px; /* foto (y=1520) steekt boven de band (y=1743) uit */
}
.spk-overons-service__media {
	margin: 0;
	position: relative;
	height: 440px;
	overflow: hidden;
}
.spk-overons-service__media img {
	/* Exacte Figma-crop (w 153.27%, h 124.54%, links −20.15%, top −10.67%). */
	position: absolute;
	left: -20.15%;
	top: -10.67%;
	width: 153.27%;
	height: 124.54%;
	max-width: none;
	object-fit: cover;
}
.spk-overons-service__copy { padding-top: 31px; }
.spk-overons-service__title {
	max-width: 318px;
	font-size: 40px;
	font-weight: 400;
	line-height: normal;
	margin: 0 0 18px;
}
.spk-overons-service__text p {
	font-size: 16px;
	line-height: 25px;
	margin: 0 0 25px;
}
.spk-overons-service__text p:last-child { margin-bottom: 0; }
.spk-overons-service__btn {
	min-width: 223px;
	margin-top: 17px;
}

/* ---------- Google-badge (core-markup; zelfde huisstijl als home) ---------- */
.spk-overons-service .sellabees-greviews {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	color: var(--spk-white);
	font-family: var(--spk-font-sans);
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}
.spk-overons-service .sellabees-greviews:hover { color: var(--spk-white); }
.spk-overons-service .sellabees-greviews__logo img {
	content: url('../../img/home/google-reviews.png');
	width: 58px;
	height: 29px;
	display: block;
	object-fit: contain;
}
.spk-overons-service .sellabees-greviews__score { text-transform: uppercase; }
.spk-overons-service .sellabees-greviews__stars { display: inline-flex; gap: 3px; }
.spk-overons-service .sellabees-greviews__star { width: 17px; height: 16px; }

/* ---------- Review-slider ("Zij gingen u voor", home-markup) ---------- */
.spk-overons-service .spk-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 83px; /* fotorand y=1960 → kop y=2043 */
}
.spk-overons-service .spk-reviews__head h2 {
	font-size: 40px;
	font-weight: 400;
	margin: 0;
}
.spk-overons-service .spk-reviews {
	overflow: hidden;
	margin-top: 37px;
	margin-left: max(24px, calc((100% - 1106px) / 2)); /* kaarten knippen links op de bloklijn af */
}
.spk-overons-service .spk-reviews__track {
	list-style: none;
	margin: 0;
	padding: 0 24px 0 0;
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
}
.spk-overons-service .spk-reviews__track::-webkit-scrollbar { display: none; }
.spk-overons-service .spk-reviews__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}
.spk-overons-service .spk-review {
	position: relative;
	flex: 0 0 382px;
	height: 259px;
	background: var(--spk-bg);
	border-radius: 10px;
	padding: 35px 19px 0 36px;
	scroll-snap-align: start;
}
.spk-overons-service .spk-review__avatar {
	position: absolute;
	top: 35px;
	left: 36px;
	width: 49px;
	height: 49px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--spk-font-sans);
	font-size: 24px;
	font-weight: 600;
	color: var(--spk-white);
}
.spk-overons-service .spk-review__avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
/* Avatarkleuren uit het design (Figma-ellipsen), toegewezen op volgorde. */
.spk-overons-service .spk-review:nth-child(4n+1) .spk-review__avatar { background: #004987; }
.spk-overons-service .spk-review:nth-child(4n+2) .spk-review__avatar { background: #12b347; }
.spk-overons-service .spk-review:nth-child(4n+3) .spk-review__avatar { background: #ff4b26; }
.spk-overons-service .spk-review:nth-child(4n+4) .spk-review__avatar { background: #167ee6; }
.spk-overons-service .spk-review__name {
	display: block;
	margin: 8px 0 0 64px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 40px;
}
.spk-overons-service .spk-review__g {
	position: absolute;
	top: 17px;
	right: 19px;
	width: 28px;
	height: 28px;
}
.spk-overons-service .spk-review__stars {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 26px 0 0;
}
.spk-overons-service .spk-review__stars img { width: 17px; height: 16px; }
.spk-overons-service .spk-review__check { margin-left: 4px; }
.spk-overons-service .spk-review__text {
	margin: 13px 0 0;
	font-size: 14px;
	line-height: 23px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.spk-overons-service .spk-review__more {
	background: none;
	border: 0;
	padding: 0;
	margin: 6px 0 0;
	font-family: var(--spk-font-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--spk-white);
	cursor: pointer;
}
.spk-overons-service .spk-review__more:hover { color: var(--spk-gold); }
.spk-overons-service .spk-review.is-open { height: auto; min-height: 259px; padding-bottom: 24px; }
.spk-overons-service .spk-review.is-open .spk-review__text { -webkit-line-clamp: unset; display: block; overflow: visible; }

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
	.spk-overons-design__inner,
	.spk-overons-service__grid { grid-template-columns: 1fr 1.05fr; column-gap: 48px; }
	/* De hero-intro wordt hier smaller en loopt door tot dichter bij de onderrand
	   van de hero; met de Figma-15px bleef er op 1200 maar ~64px tot de foto over
	   (1920: ~123px). Vanaf hier dus een echte tussenruimte. */
	.spk-overons-design { padding-top: 32px; }
	.spk-overons-usps { padding-bottom: 220px; }
	.spk-overons-service__grid { margin-top: -160px; }
}
@media (max-width: 1100px) {
	/* De lange intro laat de hero voorbij zijn min-height groeien: iets sterkere
	   scrim voor leesbaarheid op de lichte fotopartijen. De lucht onder de intro
	   (padding-bottom 40px op .spk-page-hero__inner) staat sinds de ruimte-audit
	   als gedeelde ondergrens in page.css — hier dus niet meer herhalen. */
	.spk-p-overons .spk-page-hero__scrim { background: rgba(0, 0, 0, 0.3); }
	.spk-overons-design__inner { grid-template-columns: 1fr; row-gap: 32px; }
	.spk-overons-design__title { margin-top: 0; max-width: none; }
	/* Onderruimte 176 − overhang 120 = 56px tussen de laatste USP-tegel en de
	   foto die uit de serviceband steekt (was 40px; 1920 = 64px). */
	.spk-overons-usps { padding: 48px 0 176px; }
	.spk-overons-usps__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	/* Figma-105px werd nooit verkleind: onder de reviewkaarten bleef een leeg
	   stuk #171717 staan (105 + 40 prefooter = 145px). 48 + 40 = 88px. */
	.spk-overons-service { padding-bottom: 48px; }
	.spk-overons-service__grid { grid-template-columns: 1fr; row-gap: 32px; margin-top: -120px; }
	.spk-overons-service__copy { padding-top: 0; }
	.spk-overons-service__title { max-width: none; }
	.spk-overons-service .spk-reviews__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 64px; }
}
@media (max-width: 640px) {
	.spk-p-overons .spk-page-hero__intro { line-height: 24px; }
	.spk-overons-design__title,
	.spk-overons-service__title,
	.spk-overons-service .spk-reviews__head h2 { font-size: 28px; }
	.spk-overons-usps__grid { grid-template-columns: 1fr; }
	.spk-overons-usp { height: auto; min-height: 220px; padding-bottom: 28px; }
	.spk-overons-service { padding-bottom: 40px; } /* 40 + 32 prefooter = 72px */
	.spk-overons-design__media { height: 320px; }
	.spk-overons-service__media { height: 320px; }
	.spk-overons-service .spk-review { flex-basis: 300px; }
}