/*
 * Spenkelink — homepage (Figma frame 5:2, 1920×5424). Gescoped op de
 * home-secties; alle maten uit de design-data. Blokcontainer = 1106px
 * (marges 407 op 1920), contentcontainer = 1516px (marges 202).
 */

/* ---------- Gedeelde animatie-basis (JS zet .is-inview) ---------- */
[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; }
}

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

/* ---------- 1. Hero (1920×903) ---------- */
.spk-hero {
	position: relative;
	min-height: 903px;
	display: flex;
	align-items: stretch;
}
.spk-hero__media,
.spk-hero__media img,
.spk-hero__scrim,
.spk-hero__fade {
	position: absolute;
	inset: 0;
}
.spk-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 74%; /* Figma-venster: lager deel van de staande foto */
}
.spk-hero__scrim { background: rgba(0, 0, 0, 0.2); }
.spk-hero__fade { background: linear-gradient(to bottom, rgba(33, 33, 33, 0), #212121); }
.spk-hero__inner {
	position: relative;
	width: 100%;
	max-width: calc(var(--spk-content) + 48px);
	margin-inline: auto;
	padding: 352px 24px 0;
}
.spk-hero__title {
	font-size: 80px;
	font-weight: 400;
	line-height: normal;
	margin: 0 0 38px;
	min-height: 2.35em; /* 2 regels reserveren voor het typ-effect */
}
[data-spk-type].is-typing::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 0.85em;
	margin-left: 8px;
	background: var(--spk-white);
	animation: spk-caret 0.85s steps(1) infinite;
}
@keyframes spk-caret { 50% { opacity: 0; } }
.spk-hero__rating { margin: 0 0 38px; }
.spk-hero__btn { min-width: 225px; }

/* ---------- 2. Afwerking die thuis voelt ---------- */
.spk-intro {
	padding: 44px 0 92px;
}
.spk-intro__inner {
	max-width: calc(var(--spk-content) + 48px);
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 376px 730px;
	padding-left: calc(24px + 202px);
}
.spk-intro__title {
	font-size: 50px;
	font-weight: 400;
	line-height: 77px;
	margin: 0;
}
.spk-intro__body p {
	margin: 2px 0 22px;
	font-size: 16px;
	line-height: 25px;
}
.spk-btn--outline2 { border-width: 2px; min-width: 237px; }

/* ---------- 3. Meer dan tegels (#171717) ---------- */
.spk-cats {
	background: var(--spk-bg-dark);
	padding: 58px 0 89px;
}
.spk-cats__inner {
	max-width: 1319px; /* kaartraster 1271 + padding */
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-cats__title {
	font-size: 50px;
	font-weight: 400;
	text-align: center;
	margin: 0 0 14px;
}
.spk-cats__text {
	max-width: 839px;
	margin: 0 auto 19px;
	text-align: center;
	font-size: 16px;
	line-height: 25px;
}
.spk-cats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
}
.spk-cats__grid a {
	position: relative;
	display: block;
	height: 392px;
	overflow: hidden;
}
.spk-cats__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 112%; /* Figma-crop: top-anker + onderkant afsnijden (verbergt ook het foto-bijschrift) */
	object-fit: cover;
	object-position: center top;
	transition: transform 0.5s ease;
}
.spk-cats__grid a::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}
.spk-cats__grid a:hover .spk-cats__img { transform: scale(1.05); }
.spk-cats__row {
	position: absolute;
	left: 14px;
	right: 13px;
	bottom: 14px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.spk-cats__label {
	font-family: var(--spk-font-sans);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--spk-white);
}
.spk-cats__arrow { width: 29px; height: auto; }

/* ---------- 4. Visualiseer uw woonstijl ---------- */
.spk-moodboard {
	padding: 70px 0 92px;
}
.spk-moodboard__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-moodboard__copy h2 {
	max-width: 260px;
	font-size: 40px;
	font-weight: 400;
	margin: 60px 0 18px;
}
.spk-moodboard__copy p {
	font-size: 16px;
	line-height: 25px;
	margin: 0 0 18px;
}
.spk-moodboard__copy .spk-btn { min-width: 223px; }
.spk-moodboard__media {
	margin: 0;
	position: relative;
	height: 399px;
	overflow: hidden;
}
.spk-moodboard__media img {
	/* Exacte Figma-crop: ingezoomd op de samplewand (w 191%, offset -38%/-45%). */
	position: absolute;
	left: -38.19%;
	top: -45.18%;
	width: 191.44%;
	height: 193.1%;
	max-width: none;
	object-fit: cover;
}

/* ---------- 5. Van wens naar resultaat ---------- */
.spk-steps__inner {
	max-width: 1220px; /* raster 1172 + padding */
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-steps__title {
	font-size: 40px;
	font-weight: 400;
	text-align: center;
	margin: 0 0 8px;
}
.spk-steps__text {
	max-width: 648px;
	margin: 0 auto;
	text-align: center;
	font-size: 16px;
	line-height: 25px;
}
.spk-steps__grid {
	list-style: none;
	margin: 38px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 44px;
	counter-reset: spk-step;
}
.spk-step {
	position: relative;
	background: var(--spk-bg-dark);
	height: 272px;
	padding: 37px 30px 0;
	overflow: hidden;
}
.spk-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-step__heading {
	font-size: 25px;
	font-weight: 400;
	color: var(--spk-gold);
	line-height: normal;
	margin: 0 0 16px;
}
.spk-step__body {
	position: relative;
	font-size: 14px;
	line-height: 25px;
	max-width: 200px;
	margin: 0;
}
.spk-steps__cta {
	text-align: center;
	margin: 41px 0 0;
}
.spk-steps__cta .spk-btn { min-width: 223px; }

/* ---------- 6. Merkenbalk ---------- */
.spk-brands {
	padding: 78px 0 331px; /* onder: ruimte waarin de showcase-foto omhoog steekt */
}
.spk-brands__inner {
	max-width: 1154px;
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-brands__track {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	overflow-x: auto;
	scrollbar-width: none;
}
.spk-brands__track::-webkit-scrollbar { display: none; }
.spk-brands__track img {
	flex: none;
	opacity: 0.75;
	height: auto;
}
.spk-brands__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}
.spk-brands__dots[hidden] { display: none; } /* hidden-attribuut wint anders niet van display:flex */
.spk-brands__dots span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #4a4a4a;
}
.spk-brands__dots .is-active { background: var(--spk-gold); }

/* ---------- 7. Inspiratie uit de praktijk + reviews (#171717) ---------- */
.spk-showcase {
	background: var(--spk-bg-dark);
	padding-bottom: 105px;
	display: flow-root; /* voorkomt margin-collapse: de band blijft liggen, de foto steekt erbovenuit */
}
.spk-showcase__inner {
	max-width: 1154px;
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-showcase__grid {
	display: grid;
	grid-template-columns: 536px 519px;
	column-gap: 39px;
	justify-content: space-between;
	align-items: start;
	margin-top: -200px; /* foto steekt boven de donkere band uit (Figma) */
}
.spk-showcase__media {
	margin: 0;
	height: 399px;
	overflow: hidden;
}
.spk-showcase__media img {
	display: block;
	width: 100%;
	height: 137%; /* Figma-crop: 17% boven en 10% onder wegsnijden (verbergt foto-bijschrift) */
	object-fit: cover;
	transform: translateY(-17%);
}
.spk-showcase__copy { padding-top: 58px; }
.spk-showcase__copy h2 {
	max-width: 300px;
	font-size: 40px;
	font-weight: 400;
	margin: 0 0 18px;
}
.spk-showcase__copy p {
	font-size: 16px;
	line-height: 25px;
	margin: 0 0 44px;
}
.spk-showcase__copy .spk-btn { min-width: 213px; }

.spk-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 101px;
}
.spk-reviews__head h2 {
	font-size: 40px;
	font-weight: 400;
	margin: 0;
}

/* Slider: start op de bloklijn (407 op 1920) en loopt rechts door tot de
   viewportrand. De wrapper begint zélf op de bloklijn, zodat kaarten links
   op die lijn afknippen (zoals de Sjon Bedden-slider) i.p.v. door te lopen
   tot de linker schermrand. */
.spk-reviews {
	overflow: hidden;
	margin-top: 37px;
	margin-left: max(24px, calc((100% - 1106px) / 2));
}
.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;
}
.spk-reviews__track::-webkit-scrollbar { display: none; }
/* Sleepbaar zoals de Sjon Bedden-slider: grab-cursor, en tijdens het slepen
   geen snap/smooth zodat de rij 1:1 met de muis meebeweegt; bij loslaten
   snapt hij per kaart terug. */
.spk-reviews__track { cursor: grab; user-select: none; }
.spk-reviews__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}
.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-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-review__avatar img {
	/* Echte Google-avatar bovenop de kleurcirkel; laadt hij niet, dan
	   verwijdert onerror hem en blijft de initiaal zichtbaar. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
/* Avatarkleuren uit het design (Figma-ellipsen), toegewezen op volgorde. */
.spk-review:nth-child(4n+1) .spk-review__avatar { background: #004987; }
.spk-review:nth-child(4n+2) .spk-review__avatar { background: #12b347; }
.spk-review:nth-child(4n+3) .spk-review__avatar { background: #ff4b26; }
.spk-review:nth-child(4n+4) .spk-review__avatar { background: #167ee6; }
.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-review__g {
	position: absolute;
	top: 17px;
	right: 19px;
	width: 28px;
	height: 28px;
}
.spk-review__stars {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 26px 0 0;
}
.spk-review__stars img { width: 17px; height: 16px; }
.spk-review__check { margin-left: 4px; }
.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-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-review__more:hover { color: var(--spk-gold); }
.spk-review.is-open { height: auto; min-height: 259px; padding-bottom: 24px; }
.spk-review.is-open .spk-review__text { -webkit-line-clamp: unset; display: block; overflow: visible; }

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
	.spk-hero { min-height: 760px; }
	.spk-hero__inner { padding-top: 280px; }
	.spk-hero__title { font-size: 64px; }
	.spk-intro__inner { padding-left: 24px; grid-template-columns: 1fr 1.6fr; column-gap: 48px; }
	.spk-moodboard__inner,
	.spk-showcase__grid { grid-template-columns: 1fr 1.05fr; }
	.spk-showcase__grid { column-gap: 48px; }
	.spk-brands { padding-bottom: 240px; }
	.spk-showcase__grid { margin-top: -160px; }
}
@media (max-width: 1100px) {
	.spk-hero { min-height: 620px; }
	.spk-hero__inner { padding-top: 220px; }
	.spk-hero__title { font-size: 48px; margin-bottom: 28px; }
	/* 64 onder de intro + 48 boven de kaarten was 112px lucht tot de donkere
	   band — gelijkgetrokken met de 80px die onder de kaarten staat. */
	.spk-intro { padding: 40px 0 32px; }
	.spk-intro__inner { grid-template-columns: 1fr; row-gap: 20px; }
	.spk-intro__title { font-size: 40px; line-height: 1.3; }
	/* Strakkere sectieruimtes bij gestapelde layout: de desktoppaddings
	   (89 onder de kaarten + 70 boven het moodboard) zijn hier te ruim. */
	.spk-cats { padding: 48px 0 40px; }
	.spk-cats__grid { grid-template-columns: repeat(2, 1fr); }
	.spk-cats__grid a { height: 320px; }
	.spk-moodboard { padding: 40px 0 56px; }
	.spk-moodboard__inner { grid-template-columns: 1fr; row-gap: 32px; }
	.spk-moodboard__copy h2 { margin-top: 0; max-width: none; }
	.spk-steps__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.spk-brands { padding: 56px 0 160px; } /* 120px foto-overlap + 40px lucht onder de dots */
	.spk-brands__track { justify-content: flex-start; }
	/* 105px onder de reviewkaarten (Figma) stond op elke breedte: samen met de
	   prefooter-padding gaf dat 161px lucht boven "Plan je bezoek". */
	.spk-showcase { padding-bottom: 48px; }
	.spk-showcase__grid { grid-template-columns: 1fr; row-gap: 32px; margin-top: -120px; }
	.spk-showcase__copy { padding-top: 0; }
	.spk-showcase__copy h2 { max-width: none; }
	.spk-reviews__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 64px; }
}
@media (max-width: 640px) {
	.spk-hero { min-height: 520px; }
	.spk-hero__inner { padding-top: 170px; }
	.spk-hero__title { font-size: 34px; min-height: 0; }
	.spk-hero__rating { margin-bottom: 28px; }
	.spk-intro__title { font-size: 30px; }
	.spk-cats__title, .spk-steps__title, .spk-reviews__head h2, .spk-showcase__copy h2, .spk-moodboard__copy h2 { font-size: 28px; }
	.spk-cats__grid { grid-template-columns: 1fr; }
	.spk-steps__grid { grid-template-columns: 1fr; }
	.spk-step { height: auto; min-height: 220px; padding-bottom: 30px; }
	.spk-review { flex-basis: 300px; }
	.spk-showcase { padding-bottom: 40px; }
	/* Lagere fotoboxen op mobiel: de hoogte hoort op de figure, niet op de img —
	   de img houdt zijn procentuele Figma-crop en schaalt mee met de box. */
	.spk-moodboard__media { height: 280px; }
	.spk-showcase__media { height: 280px; }
}