/*
 * Spenkelink — dienstpagina's Vloertegels (Figma 94:394, 1920×4895) en
 * Wandtegels (Figma 96:910, 1920×4975). Beide pagina's delen de sectie-opbouw:
 * gedeelde blokken op prefix .spk-svc-… met --vt/--wt-varianten voor de
 * verschillen. page-vloertegels.css en page-wandtegels.css zijn identieke
 * kopieën (per pagina wordt er maar één geladen).
 */

/* ---------- Gedeelde animatie-basis (JS zet .is-inview; zelfde patroon als home) ---------- */
[data-anim] {
	opacity: 0;
	transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-anim='up'] { transform: translateY(40px); }
[data-anim='pop'] { transform: translateY(14px) scale(0.95); }
[data-anim].is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Hero (gedeelde partial; intro is op deze pagina's 1311 breed) ---------- */
.spk-svc-hero .spk-page-hero__intro {
	max-width: 1311px;
	line-height: 25px;
	white-space: pre-line; /* witregel in de tekst = alinea-scheiding */
}
.spk-svc-hero--vt .spk-page-hero__intro { margin-top: 16px; } /* Figma: titel y=304, intro y=415 */

/* ---------- Intro: kop links + tekst rechts [Fade in] ---------- */
.spk-svc-intro {
	padding: 51px 0 282px; /* tekst op y≈729; onder: band op 1136 waar de brede foto in steekt */
}
.spk-svc-intro__inner {
	display: grid;
	align-items: start;
}
.spk-svc-intro--vt .spk-svc-intro__inner {
	max-width: 1154px; /* blok 1106 + padding */
	margin-inline: auto;
	padding-inline: 24px;
	grid-template-columns: 377px 729px; /* Figma: kop x=408, tekst x=784 b=729 */
}
.spk-svc-intro--vt .spk-svc-intro__title { margin-top: 4px; } /* kop y=733, tekst y=729 */
.spk-svc-intro--wt { padding: 56px 0 286px; } /* kop y=734 */
.spk-svc-intro--wt .spk-svc-intro__inner {
	max-width: calc(var(--spk-content) + 48px);
	margin-inline: auto;
	padding-inline: 24px;
	padding-left: calc(24px + 111px);   /* kop 111px links van de bloklijn (x=313 op 1920) */
	grid-template-columns: 470px 823px; /* Figma: kop x=313, tekst x=783 b=823 */
}
.spk-svc-intro--wt .spk-svc-intro__text { margin-top: 8px; } /* kop y=734, tekst y=742 */
.spk-svc-intro__title {
	font-size: 50px;
	font-weight: 400;
	line-height: 58px;
	margin: 0;
}
.spk-svc-intro__text {
	margin: 0;
	font-size: 16px;
	line-height: 25px;
}

/* ---------- Brede foto('s) tussen intro en donkere band [Omhoog sliden] ---------- */
.spk-svc-gallery {
	max-width: calc(1377px + 48px); /* Figma: 1377×525 gecentreerd (paar: 2×677 + 22) */
	margin: -231px auto 0;          /* foto y=905, band y=1136 */
	padding-inline: 24px;
}
.spk-svc-gallery img {
	display: block;
	width: 100%;
	height: 525px;
	object-fit: cover;
}
.spk-svc-gallery--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

/* ---------- Donkere band: detailsectie ---------- */
.spk-svc-detail {
	background: var(--spk-bg-dark);
	display: flow-root; /* eerste kind heeft negatieve top-marge; band zelf blijft liggen */
}
.spk-svc-detail__inner {
	max-width: 1154px;
	margin-inline: auto;
	padding-inline: 24px;
	display: flow-root;
}
.spk-svc-detail--vt .spk-svc-detail__inner {
	display: grid;
	grid-template-columns: 542px 476px; /* Figma: tekst 542 op x=407, foto 476×553 op x=1009 */
	column-gap: 60px;
	align-items: start;
	padding-bottom: 59px; /* band tot 2113, foto-onderkant 2054 (laagste kolom) */
}
.spk-svc-detail__title {
	font-size: 50px;
	font-weight: 400;
	line-height: 58px;
	margin: 0 0 15px;
}
.spk-svc-detail--vt .spk-svc-detail__title { margin-top: 111px; } /* kop y=1541, brede foto tot 1430 */
.spk-svc-detail--vt .spk-svc-detail__media { margin: 71px 0 0; }  /* foto y=1501 */
.spk-svc-detail__media img {
	display: block;
	width: 100%;
	height: 553px;
	object-fit: cover;
}
.spk-svc-detail__text {
	margin: 0;
	font-size: 16px;
	line-height: 25px;
}
.spk-svc-detail--vt .spk-svc-detail__text { font-size: 14px; } /* Figma 94:678: 14px */
.spk-svc-detail__btn { min-width: 223px; margin-top: 21px; }
.spk-svc-detail--wt .spk-svc-detail__inner { padding-bottom: 184px; } /* band tot 1993, knop tot 1809 */
.spk-svc-detail--wt .spk-svc-detail__title { margin-top: 56px; }      /* kop y=1486, fotopaar tot 1430 */
.spk-svc-detail--wt .spk-svc-detail__text { margin-top: 18px; }       /* tekst y=1562 */
.spk-svc-detail--wt .spk-svc-detail__btn { margin-top: 25px; }        /* knop y=1762 */

/* ---------- "Van wens naar resultaat" (zelfde blok als home) [poppen] ---------- */
.spk-svc-steps {
	padding: 53px 0 317px; /* titel 53 onder de band; onder: showband-foto steekt 200px omhoog */
	display: flow-root;
}
.spk-svc-steps--wt { padding-top: 0; padding-bottom: 252px; }
.spk-svc-hang {
	max-width: calc(1108px + 48px); /* Figma (wandtegels): 1108×424 gecentreerd */
	margin: -144px auto 0;          /* foto y=1849, band eindigt op 1993 */
	padding-inline: 24px;
}
.spk-svc-hang img {
	display: block;
	width: 100%;
	height: 424px;
	object-fit: cover;
}
.spk-svc-steps--wt .spk-svc-steps__title { margin-top: 38px; } /* titel y=2311, foto tot 2273 */
.spk-svc-steps__inner {
	max-width: 1220px; /* raster 1172 + padding */
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-svc-steps__title {
	font-size: 40px;
	font-weight: 400;
	text-align: center;
	margin: 0 0 4px; /* titel y=2166, tekst y=2218 */
}
.spk-svc-steps__text {
	max-width: 648px;
	margin: 0 auto;
	text-align: center;
	font-size: 16px;
	line-height: 25px;
}
.spk-svc-steps__grid {
	list-style: none;
	margin: 38px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 44px;
}
.spk-svc-step {
	position: relative;
	background: var(--spk-bg-dark);
	height: 272px;
	padding: 37px 30px 0;
	overflow: hidden;
}
.spk-svc-step__num {
	position: absolute;
	right: -4px;
	bottom: -36px;
	font-family: var(--spk-font-serif);
	font-size: 180px;
	line-height: 1;
	color: rgba(179, 159, 113, 0.33);
	pointer-events: none;
}
.spk-svc-step__heading {
	font-size: 25px;
	font-weight: 400;
	color: var(--spk-gold);
	line-height: normal;
	margin: 0 0 16px;
}
.spk-svc-step__body {
	position: relative;
	font-size: 14px;
	line-height: 25px;
	max-width: 200px;
	margin: 0;
}

/* ---------- Donkere band: inspiratie + reviews ---------- */
.spk-svc-showband {
	background: var(--spk-bg-dark);
	padding-bottom: 105px;
	display: flow-root;
}
.spk-svc-showband__inner {
	max-width: 1154px;
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-svc-show {
	display: grid;
	grid-template-columns: 536px 519px; /* Figma: foto 536×399, tekst 519 op x=979 */
	column-gap: 36px;
	align-items: start;
	margin-top: -200px; /* foto steekt boven de band uit */
}
.spk-svc-show__media { margin: 0; }
.spk-svc-show__media img {
	display: block;
	width: 100%;
	height: 399px;
	object-fit: cover;
}
.spk-svc-show__copy { padding-top: 60px; } /* kop 60 onder de fotobovenrand */
.spk-svc-show__title {
	max-width: 300px;
	font-size: 40px;
	font-weight: 400;
	margin: 0 0 22px;
}
.spk-svc-show__text {
	font-size: 16px;
	line-height: 25px;
	margin: 0 0 18px;
}
.spk-svc-show__actions {
	display: flex;
	gap: 21px; /* Figma (wandtegels): knoppen op x=982 en x=1216 */
	flex-wrap: wrap;
}
.spk-svc-show__btn { min-width: 213px; }
.spk-svc-show__btn2 { min-width: 223px; }

.spk-svc-reviews-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 101px; /* kop 101 onder de foto-onderrand */
}
.spk-svc-reviews-head h2 {
	font-size: 40px;
	font-weight: 400;
	margin: 0;
}

/* Google-badge (core-markup; zelfde huisstijl als op home) */
.spk-svc-reviews-head .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-svc-reviews-head .sellabees-greviews:hover { color: var(--spk-white); }
.spk-svc-reviews-head .sellabees-greviews__logo img {
	content: url('../../img/home/google-reviews.png'); /* design-logo i.p.v. core-woordmerk */
	width: 58px;
	height: 29px;
	display: block;
	object-fit: contain;
}
.spk-svc-reviews-head .sellabees-greviews__score { text-transform: uppercase; }
.spk-svc-reviews-head .sellabees-greviews__stars { display: inline-flex; gap: 3px; }
.spk-svc-reviews-head .sellabees-greviews__star { width: 17px; height: 16px; }

/* Review-slider [automatische slide] — markup + JS-hooks van theme.js,
   styling hier gescoopt op de showband (zelfde maten als het home-blok). */
.spk-svc-showband .spk-reviews {
	overflow: hidden;
	margin-top: 37px;
	margin-left: max(24px, calc((100% - 1106px) / 2)); /* kaarten knippen links op de bloklijn af */
}
.spk-svc-showband .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-svc-showband .spk-reviews__track::-webkit-scrollbar { display: none; }
.spk-svc-showband .spk-reviews__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}
.spk-svc-showband .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-svc-showband .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-svc-showband .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-svc-showband .spk-review:nth-child(4n+1) .spk-review__avatar { background: #004987; }
.spk-svc-showband .spk-review:nth-child(4n+2) .spk-review__avatar { background: #12b347; }
.spk-svc-showband .spk-review:nth-child(4n+3) .spk-review__avatar { background: #ff4b26; }
.spk-svc-showband .spk-review:nth-child(4n+4) .spk-review__avatar { background: #167ee6; }
.spk-svc-showband .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-svc-showband .spk-review__g {
	position: absolute;
	top: 17px;
	right: 19px;
	width: 28px;
	height: 28px;
}
.spk-svc-showband .spk-review__stars {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 26px 0 0;
}
.spk-svc-showband .spk-review__stars img { width: 17px; height: 16px; }
.spk-svc-showband .spk-review__check { margin-left: 4px; }
.spk-svc-showband .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-svc-showband .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-svc-showband .spk-review__more:hover { color: var(--spk-gold); }
.spk-svc-showband .spk-review.is-open { height: auto; min-height: 259px; padding-bottom: 24px; }
.spk-svc-showband .spk-review.is-open .spk-review__text { -webkit-line-clamp: unset; display: block; overflow: visible; }

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
	.spk-svc-intro--vt .spk-svc-intro__inner { grid-template-columns: 1fr 1.6fr; column-gap: 48px; }
	.spk-svc-intro--wt .spk-svc-intro__inner { padding-left: 24px; grid-template-columns: 1fr 1.6fr; column-gap: 48px; }
	.spk-svc-detail--vt .spk-svc-detail__inner { grid-template-columns: 1fr 0.8fr; column-gap: 48px; }
	.spk-svc-show { grid-template-columns: 1fr 1.05fr; column-gap: 48px; }
}
@media (max-width: 1100px) {
	/* Onderpadding volgt de galerij-marge: 200 − 120 = 80px lucht tussen de
	   introtekst en de uitstekende foto (was 140 − 120 = 20px: tekst plakte). */
	.spk-svc-intro { padding: 40px 0 200px; }
	.spk-svc-intro--vt .spk-svc-intro__inner,
	.spk-svc-intro--wt .spk-svc-intro__inner { grid-template-columns: 1fr; row-gap: 16px; }
	.spk-svc-intro__title { font-size: 40px; line-height: 1.3; }
	.spk-svc-intro--vt .spk-svc-intro__title,
	.spk-svc-intro--wt .spk-svc-intro__text { margin-top: 0; }
	.spk-svc-gallery { margin-top: -120px; }
	.spk-svc-gallery img { height: auto; }
	.spk-svc-detail--vt .spk-svc-detail__inner { grid-template-columns: 1fr; row-gap: 32px; padding-bottom: 48px; }
	.spk-svc-detail--vt .spk-svc-detail__title { margin-top: 48px; }
	.spk-svc-detail--vt .spk-svc-detail__media { margin-top: 0; }
	.spk-svc-detail__media img { height: 480px; } /* portretfoto gecapt (cover-crop); anders ~1130px hoog gestapeld */
	.spk-svc-detail__title { font-size: 40px; line-height: 1.3; }
	.spk-svc-detail--wt .spk-svc-detail__title { margin-top: 40px; }
	/* 180 − 100 hang-marge = 80px lucht tussen knop en uitstekende foto (was 20px). */
	.spk-svc-detail--wt .spk-svc-detail__inner { padding-bottom: 180px; }
	.spk-svc-hang { margin-top: -100px; }
	.spk-svc-hang img { height: auto; }
	/* 48 bandpadding + 40 = 88px onder de donkere band (was 64 + 53 = 117px). */
	.spk-svc-steps { padding-top: 40px; padding-bottom: 200px; }
	.spk-svc-steps--wt { padding-top: 0; } /* hang-foto blijft tegen de sectiebovenkant */
	.spk-svc-steps--wt .spk-svc-steps__title { margin-top: 32px; }
	.spk-svc-steps__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.spk-svc-show { grid-template-columns: 1fr; row-gap: 32px; margin-top: -120px; }
	.spk-svc-show__copy { padding-top: 0; }
	.spk-svc-show__title { max-width: none; }
	.spk-svc-reviews-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 64px; }
	.spk-svc-showband { padding-bottom: 56px; } /* 105px desktoplucht onder de reviews was nooit verkleind */
}
@media (max-width: 640px) {
	.spk-svc-intro { padding: 32px 0 152px; } /* 152 − 80 galerij-marge = 72px lucht boven de foto */
	.spk-svc-intro__title, .spk-svc-detail__title { font-size: 30px; }
	.spk-svc-steps__title, .spk-svc-show__title, .spk-svc-reviews-head h2 { font-size: 28px; }
	.spk-svc-gallery { margin-top: -80px; }
	.spk-svc-gallery--pair { grid-template-columns: 1fr; }
	.spk-svc-hang { margin-top: -60px; }
	.spk-svc-detail--vt .spk-svc-detail__title { margin-top: 32px; }
	.spk-svc-detail--vt .spk-svc-detail__inner { padding-bottom: 40px; }
	.spk-svc-detail--wt .spk-svc-detail__inner { padding-bottom: 132px; } /* 132 − 60 = 72px boven de foto */
	.spk-svc-detail__media img { height: 340px; }
	/* 40 bandpadding + 32 = 72px onder de donkere band (was 64 + 53 = 117px). */
	.spk-svc-steps { padding-top: 32px; padding-bottom: 160px; }
	.spk-svc-steps--wt { padding-top: 0; }
	.spk-svc-steps__grid { grid-template-columns: 1fr; }
	.spk-svc-step { height: auto; min-height: 220px; padding-bottom: 30px; }
	.spk-svc-show { margin-top: -80px; }
	.spk-svc-show__actions .spk-btn { min-width: 0; flex: 1 1 auto; }
	.spk-svc-showband { padding-bottom: 40px; }
	.spk-svc-showband .spk-review { flex-basis: 300px; }
}