/*
 * Spenkelink — dienstpagina Badkamers (Figma frame 96:1398, 1920×4827).
 * Alleen geladen op /badkamers/ (slug-CSS). Maten uit de design-data:
 * contentcontainer 1516 (marges 202), blokcontainer 1106 (marges 407),
 * bandcontainer 1236 (marges 342). Gedeelde basisblokken (animaties, badge,
 * review-slider) staan hier omdat home.css op subpagina's niet laadt.
 */

/* ---------- 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; }
}

/* Typ-cursor van de hero-titel ([Typen], theme.js) */
[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; } }

/* ---------- Hero (gedeelde partial; Figma: titel op y=352, intro 940 breed) ---------- */
.spk-bad-hero .spk-page-hero__inner { padding-top: 352px; }
.spk-bad-hero .spk-page-hero__intro { max-width: 940px; margin-top: 23px; }

/* ---------- 2. Traject: tekst links (542) + foto rechts (542×601) ---------- */
.spk-bad-intro {
	padding: 31px 0;
}
.spk-bad-intro__inner {
	max-width: 1154px; /* blok 1106 + padding */
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 542px 542px;
	justify-content: space-between;
	align-items: start;
}
.spk-bad-intro__copy { padding-top: 26px; }
.spk-bad-intro__copy p {
	margin: 0;
	font-size: 16px;
	line-height: 25px;
}
.spk-bad-intro__media {
	margin: 0;
	height: 601px;
	overflow: hidden;
}
.spk-bad-intro__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 3. Donkere band "Alles geregeld…" (527px) ---------- */
.spk-bad-band {
	background: var(--spk-bg-dark);
	min-height: 527px;
	padding-top: 50px;
}
.spk-bad-band__inner {
	max-width: 1284px; /* band 1236 + padding (marges 342 op 1920) */
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-bad-band__title {
	font-size: 50px;
	font-weight: 400;
	line-height: 58px;
	margin: 0 0 18px;
}
.spk-bad-band__text {
	margin: 0;
	font-size: 16px;
	line-height: 25px;
}

/* Twee foto's: 240px in de band, 184px eronder (Figma y=1628, band tot 1868) */
.spk-bad-gallery {
	margin-top: -240px;
}
.spk-bad-gallery__inner {
	max-width: 1284px;
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 788fr 426fr;
	gap: 22px;
}
.spk-bad-gallery figure {
	margin: 0;
	height: 424px;
	overflow: hidden;
}
.spk-bad-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* ---------- 5. Laat je inspireren + reviews (#171717) ---------- */
.spk-bad-show {
	background: var(--spk-bg-dark);
	padding-bottom: 105px;
	display: flow-root; /* voorkomt margin-collapse bij de uitstekende foto */
}
.spk-bad-show__inner {
	max-width: 1154px;
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-bad-show__grid {
	display: grid;
	grid-template-columns: 536px 1fr;
	column-gap: 39px;
	align-items: start;
	margin-top: -200px; /* foto steekt boven de donkere band uit (Figma y=2583) */
}
.spk-bad-show__media {
	margin: 0;
	height: 399px;
	overflow: hidden;
}
.spk-bad-show__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.spk-bad-show__copy { padding-top: 52px; }
.spk-bad-show__copy h2 {
	max-width: 260px;
	font-size: 40px;
	font-weight: 400;
	margin: 0 0 18px;
}
.spk-bad-show__copy p {
	max-width: 519px;
	font-size: 16px;
	line-height: 25px;
	margin: 0;
}
.spk-bad-show__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 25px; /* Figma: lege tekstregel (25px) tussen tekst en knoppen */
}
.spk-bad-show__btns .spk-btn--outline { min-width: 213px; }
.spk-bad-show__btns .spk-btn--gold { min-width: 223px; }

/* ---------- 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 {
	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; }

/* ---------- Review-slider (markup + theme.js-gedrag zoals op home) ---------- */
.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;
}
.spk-reviews {
	overflow: hidden;
	margin-top: 37px;
	margin-left: max(24px, calc((100% - 1106px) / 2)); /* kaarten knippen links op de bloklijn af */
}
.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; }
.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 {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.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) {
	/* Hero-titel volgt onder 1500 weer de gedeelde hoogtes uit page.css
	   (de 352px uit het 1920-design zou anders op alle breedtes blijven staan). */
	.spk-bad-hero .spk-page-hero__inner { padding-top: 240px; }
	.spk-bad-intro__inner { grid-template-columns: 1fr 1.05fr; column-gap: 48px; }
	.spk-bad-intro__media { height: 500px; }
	.spk-bad-band__title { font-size: 40px; line-height: 1.2; }
	.spk-bad-show__grid { grid-template-columns: 1fr 1.05fr; column-gap: 48px; margin-top: -160px; }
	/* Foto steekt hier 160 i.p.v. 200px uit; padding mee omlaag, anders groeit
	   de lucht boven de foto van 80 naar 120px. */
	.spk-bad-steps { padding-bottom: 240px; }
}
@media (max-width: 1100px) {
	.spk-bad-hero .spk-page-hero__inner { padding-top: 190px; }
	.spk-bad-intro { padding: 40px 0 40px; } /* 40px onder de hero, gelijk aan de andere dienstpagina's */
	.spk-bad-intro__inner { grid-template-columns: 1fr; row-gap: 32px; }
	.spk-bad-intro__copy { padding-top: 0; }
	.spk-bad-intro__media { height: 400px; }
	.spk-bad-band { min-height: 0; padding: 40px 0 48px; }
	.spk-bad-gallery { margin-top: 32px; }
	.spk-bad-gallery figure { height: 300px; }
	.spk-bad-steps { padding: 56px 0 200px; }
	.spk-bad-steps__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.spk-bad-show__grid { grid-template-columns: 1fr; row-gap: 32px; margin-top: -120px; }
	.spk-bad-show__copy { padding-top: 0; }
	.spk-bad-show__copy h2 { max-width: none; }
	.spk-reviews__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 64px; }
	.spk-bad-show { padding-bottom: 56px; } /* 105px desktoplucht onder de reviews was nooit verkleind */
}
@media (max-width: 640px) {
	.spk-bad-hero .spk-page-hero__inner { padding-top: 150px; }
	.spk-bad-band__title,
	.spk-bad-steps__title,
	.spk-bad-show__copy h2,
	.spk-reviews__head h2 { font-size: 28px; }
	.spk-bad-intro__media { height: 300px; }
	.spk-bad-gallery__inner { grid-template-columns: 1fr; }
	.spk-bad-gallery figure { height: 240px; }
	.spk-bad-steps { padding-bottom: 160px; }
	.spk-bad-steps__grid { grid-template-columns: 1fr; }
	.spk-bad-step { height: auto; min-height: 220px; padding-bottom: 30px; }
	/* Uitsteek mee omlaag met de kleinere onderpadding: 160 − 80 = 80px lucht
	   tussen de laatste stapkaart en de foto (was 160 − 120 = 40px). */
	.spk-bad-show__grid { margin-top: -80px; }
	.spk-bad-show { padding-bottom: 40px; }
	.spk-bad-show__media { height: 280px; }
	.spk-bad-show__btns .spk-btn { width: 100%; }
	.spk-review { flex-basis: 300px; }
}