/*
 * Spenkelink — Maak een afspraak (Figma frame 100:3526, 1920×3421).
 * Wordt alléén op deze pagina geladen. Alle maten uit de design-data:
 * formulierband 357–1562 (kolommen 590/553), stappenraster 1172,
 * blokcontainer 1106, reviewkaarten 382×259.
 */

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

/* Typ-cursor bij de herotitel [Typen] (zelfde patroon als home.css). */
[data-spk-type].is-typing::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 0.85em;
	margin-left: 8px;
	background: var(--spk-white);
	animation: spk-apt-caret 0.85s steps(1) infinite;
}
@keyframes spk-apt-caret { 50% { opacity: 0; } }

/* ---------- Hero-afwijkingen van deze pagina (Figma: titel op y=352,
   intro 940px breed ín de hero) — gescoped op de eigen body-class. ---------- */
body.spk-afspraak .spk-page-hero__inner { padding-top: 352px; }
body.spk-afspraak .spk-page-hero__intro {
	max-width: 940px;
	margin-top: 26px;
	line-height: 25px;
}

/* Figma toont op deze pagina géén pre-footer ("Plan je bezoek of kom langs"),
   alleen de footerbalk — de globale footer-sectie wordt hier verborgen. */
body.spk-afspraak .spk-prefooter { display: none; }

/* =====================================================================
   1. AFSPRAAKBLOK (USP's + formulier links 590, personeelsfoto rechts 553)
   ===================================================================== */
.spk-apt {
	padding: 77px 0 0;
}
.spk-apt__inner {
	max-width: 1253px; /* content exact 1205 breed (Figma 357–1562) */
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 590px 553px;
	justify-content: space-between;
	align-items: start;
}
.spk-apt__usps {
	list-style: none;
	margin: 74px 0 0;
	padding: 0;
}
.spk-apt__usps li {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 14px;
}
.spk-apt__usps em {
	font-family: var(--spk-font-serif);
	font-size: 16px;
	font-weight: 700;
	font-style: italic;
	line-height: 26px;
}
.spk-apt__msg {
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--spk-gold);
	font-size: 14px;
	line-height: 22px;
}
.spk-apt__form {
	margin-top: 52px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 21px 22px;
}

/* Formulierlabels zijn alleen voor hulptechnologie: de WP-kernklasse
   .screen-reader-text bestaat niet in dit thema, waardoor de labels
   zichtbaar boven de velden stonden (en de kalenderknop naast het label
   in plaats van ín het veld). Hier visueel verbergen, gescoped op deze
   pagina. */
body.spk-afspraak .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}
.spk-apt__field { margin: 0; }
.spk-apt__field input,
.spk-apt__field select,
.spk-apt__field textarea {
	display: block;
	width: 100%;
	height: 45px;
	padding: 0 18px;
	border: 2px solid var(--spk-white);
	border-radius: 0;
	background: transparent;
	color: var(--spk-white);
	font-family: var(--spk-font-sans);
	font-size: 14px;
	line-height: normal;
}
.spk-apt__field ::placeholder {
	color: var(--spk-white);
	opacity: 1;
}
.spk-apt__field input:focus,
.spk-apt__field select:focus,
.spk-apt__field textarea:focus {
	outline: none;
	border-color: var(--spk-gold);
}
.spk-apt__field select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.spk-apt__field select option {
	color: #171717;
	background: #ffffff;
}
.spk-apt__field textarea {
	height: 122px;
	padding: 10px 18px;
	line-height: 22px;
	resize: vertical;
}
.spk-apt__field--message { grid-column: 1 / -1; }
.spk-apt__actions {
	grid-column: 1 / -1;
	margin: 1px 0 0;
	text-align: right;
}
.spk-apt__actions .spk-btn { min-width: 213px; }
.spk-apt__media { margin: 0; }
.spk-apt__media img {
	display: block;
	width: 100%;
	height: 694px;
	object-fit: cover;
}

/* ---------- Datepicker (Figma 100:3418: paneel 200px, #171717, 10px tekst,
   grijze dagen #acacac = niet kiesbaar; opent bóven het datumveld) ---------- */
.spk-apt__field--date { position: relative; }
.spk-apt__field--date input { padding-right: 46px; }
.spk-apt__cal-toggle {
	position: absolute;
	right: 10px;
	top: 11px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
}
.spk-apt__cal {
	position: absolute;
	left: 70px;
	bottom: calc(100% - 8px);
	width: 200px;
	padding: 11px 10px 12px;
	background: var(--spk-bg-dark);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
	z-index: 30;
}
.spk-apt__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.spk-apt__cal-title {
	font-size: 10px;
	line-height: normal;
	color: var(--spk-white);
	text-transform: uppercase;
}
.spk-apt__cal-nav {
	padding: 2px;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
}
.spk-apt__cal-nav img { display: block; width: 7px; height: auto; }
.spk-apt__cal-nav[data-spk-cal-prev] img { transform: rotate(90deg); }
.spk-apt__cal-nav[data-spk-cal-next] img { transform: rotate(-90deg); }
.spk-apt__cal-nav:disabled { opacity: 0.35; cursor: default; }
.spk-apt__cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-top: 9px;
	text-align: center;
}
.spk-apt__cal-wd {
	font-size: 10px;
	line-height: 20px;
	color: var(--spk-white);
}
.spk-apt__cal-day {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--spk-font-sans);
	font-size: 10px;
	line-height: 22px;
	color: var(--spk-white);
	cursor: pointer;
}
.spk-apt__cal-day:hover:not(:disabled),
.spk-apt__cal-day.is-selected { color: var(--spk-gold); }
.spk-apt__cal-day:disabled { color: #acacac; cursor: default; }

/* =====================================================================
   2. VAN WENS NAAR RESULTAAT (zelfde maten als de home-sectie; raster 1172)
   ===================================================================== */
.spk-apt-steps {
	padding: 72px 0 317px; /* onder: ruimte waarin de showcase-foto omhoog steekt */
}
.spk-apt-steps__inner {
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-apt-steps__title {
	font-size: 40px;
	font-weight: 400;
	text-align: center;
	margin: 0 0 8px;
}
.spk-apt-steps__text {
	max-width: 648px;
	margin: 0 auto;
	text-align: center;
	font-size: 16px;
	line-height: 25px;
}
.spk-apt-steps__grid {
	list-style: none;
	margin: 38px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 44px;
}
.spk-apt-step {
	position: relative;
	background: var(--spk-bg-dark);
	height: 272px;
	padding: 37px 30px 0;
	overflow: hidden;
}
.spk-apt-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-apt-step__heading {
	font-size: 25px;
	font-weight: 400;
	color: var(--spk-gold);
	line-height: normal;
	margin: 0 0 16px;
}
.spk-apt-step__body {
	position: relative;
	font-size: 14px;
	line-height: 25px;
	max-width: 200px;
	margin: 0;
}

/* =====================================================================
   3. INSPIRATIE UIT DE PRAKTIJK + ZIJ GINGEN U VOOR (#171717-band;
   foto 536×399 steekt 200px boven de band uit, outline-knop)
   ===================================================================== */
.spk-apt-showcase {
	background: var(--spk-bg-dark);
	padding-bottom: 105px;
	display: flow-root;
}
.spk-apt-showcase__inner {
	max-width: 1154px;
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-apt-showcase__grid {
	display: grid;
	grid-template-columns: 536px 519px;
	column-gap: 39px; /* tekstkolom op x=982 (Figma), dus géén space-between */
	align-items: start;
	margin-top: -200px;
}
.spk-apt-showcase__media {
	margin: 0;
	height: 399px;
	overflow: hidden;
}
.spk-apt-showcase__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.spk-apt-showcase__copy { padding-top: 58px; }
.spk-apt-showcase__copy h2 {
	max-width: 300px;
	font-size: 40px;
	font-weight: 400;
	margin: 0 0 18px;
}
.spk-apt-showcase__copy p {
	font-size: 16px;
	line-height: 25px;
	margin: 0 0 44px;
}
.spk-apt-showcase__copy .spk-btn { min-width: 213px; }
.spk-apt-showcase__reviews-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 101px;
}
.spk-apt-showcase__reviews-head h2 {
	font-size: 40px;
	font-weight: 400;
	margin: 0;
}

/* Google-badge (core-markup; huisstijl zoals op de homepage, hier gescoped). */
.spk-apt-showcase .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-apt-showcase .sellabees-greviews:hover { color: var(--spk-white); }
.spk-apt-showcase .sellabees-greviews__logo img {
	content: url('../../img/home/google-reviews.png');
	width: 58px;
	height: 29px;
	display: block;
	object-fit: contain;
}
.spk-apt-showcase .sellabees-greviews__score { text-transform: uppercase; }
.spk-apt-showcase .sellabees-greviews__stars { display: inline-flex; gap: 3px; }
.spk-apt-showcase .sellabees-greviews__star { width: 17px; height: 16px; }

/* Review-slider (zelfde patroon/maten als home.css, gescoped op deze sectie;
   theme.js verzorgt [automatische slide], slepen en "Lees verder"). */
.spk-apt-showcase .spk-reviews {
	overflow: hidden;
	margin-top: 37px;
	margin-left: max(24px, calc((100% - 1106px) / 2)); /* kaarten knippen links op de bloklijn af */
}
.spk-apt-showcase .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-apt-showcase .spk-reviews__track::-webkit-scrollbar { display: none; }
.spk-apt-showcase .spk-reviews__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}
.spk-apt-showcase .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-apt-showcase .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-apt-showcase .spk-review__avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.spk-apt-showcase .spk-review:nth-child(4n+1) .spk-review__avatar { background: #004987; }
.spk-apt-showcase .spk-review:nth-child(4n+2) .spk-review__avatar { background: #12b347; }
.spk-apt-showcase .spk-review:nth-child(4n+3) .spk-review__avatar { background: #ff4b26; }
.spk-apt-showcase .spk-review:nth-child(4n+4) .spk-review__avatar { background: #167ee6; }
.spk-apt-showcase .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-apt-showcase .spk-review__g {
	position: absolute;
	top: 17px;
	right: 19px;
	width: 28px;
	height: 28px;
}
.spk-apt-showcase .spk-review__stars {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 26px 0 0;
}
.spk-apt-showcase .spk-review__stars img { width: 17px; height: 16px; }
.spk-apt-showcase .spk-review__check { margin-left: 4px; }
.spk-apt-showcase .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-apt-showcase .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-apt-showcase .spk-review__more:hover { color: var(--spk-gold); }
.spk-apt-showcase .spk-review.is-open {
	height: auto;
	min-height: 259px;
	padding-bottom: 24px;
}
.spk-apt-showcase .spk-review.is-open .spk-review__text {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1500px) {
	body.spk-afspraak .spk-page-hero__inner { padding-top: 280px; }
	.spk-apt__inner { grid-template-columns: 1.07fr 1fr; column-gap: 48px; }
	.spk-apt__media img { height: 620px; }
	.spk-apt-steps { padding-bottom: 260px; }
	.spk-apt-showcase__grid { grid-template-columns: 1fr 1.05fr; column-gap: 48px; margin-top: -160px; }
}
@media (max-width: 1100px) {
	body.spk-afspraak .spk-page-hero__inner { padding-top: 210px; }
	.spk-apt { padding-top: 56px; }
	.spk-apt__inner { grid-template-columns: 1fr; row-gap: 32px; }
	.spk-apt__usps { margin-top: 0; }
	/* Foto wordt hier een brede uitsnede van een staand beeld: iets naar
	   boven croppen zodat de gezichten in beeld blijven. */
	.spk-apt__media img { height: 460px; object-position: 50% 22%; }
	/* De showcase-foto steekt hier 120px omhoog; met 160px onderruimte bleef er
	   maar 40px tussen de laatste stapkaart en die foto. 200px onder = 80px lucht. */
	.spk-apt-steps { padding: 64px 0 200px; }
	.spk-apt-steps__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	/* Geen pre-footer op deze pagina: de band grenst direct aan de footerbalk
	   (zelfde #171717), dus 105px onderruimte leest als een leeg zwart gat.
	   48px + de 48px kopruimte van de footer = 96px lucht. */
	.spk-apt-showcase { padding-bottom: 48px; }
	.spk-apt-showcase__grid { grid-template-columns: 1fr; row-gap: 32px; margin-top: -120px; }
	.spk-apt-showcase__copy { padding-top: 0; }
	.spk-apt-showcase__copy h2 { max-width: none; }
	.spk-apt-showcase__reviews-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 64px; }
}
@media (max-width: 640px) {
	body.spk-afspraak .spk-page-hero__inner { padding-top: 150px; }
	.spk-apt__form { grid-template-columns: 1fr; margin-top: 40px; }
	.spk-apt__actions .spk-btn { width: 100%; }
	.spk-apt__cal { left: 0; }
	.spk-apt__media img { height: 320px; }
	/* Foto steekt nog steeds 120px omhoog: 190px onder = 70px lucht (was 20px). */
	.spk-apt-steps { padding: 48px 0 190px; }
	.spk-apt-showcase { padding-bottom: 40px; } /* + 40px footerkop = 80px lucht */
	.spk-apt-steps__title,
	.spk-apt-showcase__copy h2,
	.spk-apt-showcase__reviews-head h2 { font-size: 28px; }
	.spk-apt-steps__grid { grid-template-columns: 1fr; }
	.spk-apt-step { height: auto; min-height: 220px; padding-bottom: 30px; }
	.spk-apt-showcase__media { height: 280px; }
	.spk-apt-showcase .spk-review { flex-basis: 300px; }
}