/* Hoe werkt het — Figma. White intro + steps + media (image/video) that straddles into a blue
   reviews block. Tokens only; Swiper powers the dummy reviews slider. Mobile-first. */

.ppc-hoe-werkt-het {
	position: relative;
	isolation: isolate;
	background: var(--ppc-color-surface);
	padding-top: var(--ppc-section-pad-y);
}

.ppc-hoe-werkt-het__container {
	max-width: var(--ppc-container-width);
	margin-inline: auto;
}

.ppc-hoe-werkt-het__top {
	position: relative;
	z-index: 2;
	padding-inline: var(--ppc-section-inset-x);
	margin-bottom: -3rem;
}

@media (min-width: 60rem) {
	.ppc-hoe-werkt-het__top {
		margin-bottom: -90px;
	}
}

/* Intro */
.ppc-hoe-werkt-het__intro {
	max-width: var(--ppc-measure);
	margin-inline: auto;
	text-align: center;
}

.ppc-hoe-werkt-het__eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-tagline);
	line-height: var(--ppc-line-height-tagline);
	color: var(--ppc-color-picton-blue-dark);
}

.ppc-hoe-werkt-het__title {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-h2);
	line-height: var(--ppc-line-height-heading);
	letter-spacing: var(--ppc-letter-spacing-heading);
	color: var(--ppc-color-blue-zodiac);
}

.ppc-hoe-werkt-het__text {
	margin: 1.5rem 0 0;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-lead);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
}

/* Steps */
.ppc-hoe-werkt-het__steps {
	counter-reset: ppc-step;
	list-style: none;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 48rem) {
	.ppc-hoe-werkt-het__steps {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(2.5rem, 5vw, 5rem);
	}
}

.ppc-hoe-werkt-het__step {
	counter-increment: ppc-step;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}

/* Glossy tilted icon droplet (Figma "info droplet"). */
.ppc-hoe-werkt-het__step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border: 0.7px solid var(--ppc-color-cta-border);
	border-radius: 50%;
	background:
		linear-gradient(152deg, rgba(162, 185, 255, 0.2) 12%, rgba(25, 79, 141, 0.2) 88%),
		#ffffff;
	box-shadow:
		0 2px 5px rgba(0, 0, 0, 0.2),
		inset 2.56px 1.92px 5px #ffffff,
		inset -2.56px -2.56px 2.3px rgba(0, 0, 0, 0.14);
	transform: rotate(8.64deg);
	color: var(--ppc-color-picton-blue-darker);
}

.ppc-hoe-werkt-het__step-svg {
	display: block;
	width: 31px;
	height: 31px;
}

.ppc-hoe-werkt-het__step-title {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-h6);
	line-height: var(--ppc-line-height-h5);
	letter-spacing: var(--ppc-letter-spacing-heading);
	color: var(--ppc-color-picton-blue-darker);
}

.ppc-hoe-werkt-het__step-title::before {
	content: counter(ppc-step) ". ";
}

.ppc-hoe-werkt-het__step-text {
	margin: 0;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-body);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
	opacity: 0.9;
}

/* Media (image or video). The block bleeds down into the blue reviews section. */
.ppc-hoe-werkt-het__media {
	position: relative;
	display: block;
	width: 100%;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: 0;
	border: 0;
	border-radius: 40px;
	overflow: hidden;
	background: var(--ppc-color-surface);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	aspect-ratio: 16 / 9;
}

@media (min-width: 60rem) {
	.ppc-hoe-werkt-het__media {
		aspect-ratio: 1280 / 529;
	}
}

.ppc-hoe-werkt-het__media--video {
	cursor: pointer;
}

.ppc-hoe-werkt-het__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 40px;
}

/* Glossy inset frame on the video/image (Figma), over the photo but under the star + caption. */
.ppc-hoe-werkt-het__media-gloss {
	position: absolute;
	inset: 0;
	border-radius: 40px;
	pointer-events: none;
	box-shadow:
		inset -3px -3px 4px rgba(0, 0, 0, 0.48),
		inset 4px 4px 4px rgba(255, 255, 255, 0.7);
}

/* Injected player (after clicking the poster). */
.ppc-hoe-werkt-het__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 40px;
	background: #000000;
}

.ppc-hoe-werkt-het__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
	transition: transform 0.2s ease;
}

.ppc-hoe-werkt-het__media--video:hover .ppc-hoe-werkt-het__play,
.ppc-hoe-werkt-het__media--video:focus-visible .ppc-hoe-werkt-het__play {
	transform: translate(-50%, -50%) scale(1.08);
}

/* Corner star behind the caption (Figma "Group 3": 432px box at right -125 / top -131, clipped
   by the media's overflow + radius). Exact transcription of the design's 463x463 vector: white
   ring 84%, 2px backdrop-blur + faded white wash inside the silhouette, soft drop shadow. The
   wrapper renders at the artwork's native 463px scaled to 432 so clip-path coords stay 1:1. */
.ppc-hoe-werkt-het__media-star {
	position: absolute;
	top: -131px;
	right: -125px;
	width: 463px;
	height: 463px;
	transform: scale(0.933);
	transform-origin: top right;
	pointer-events: none;
}

.ppc-hoe-werkt-het__media-star-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.08));
}

/* Faded white + blur inside the silhouette. The parent span carries the clip-path and the
   ::before carries the backdrop-filter (Chromium won't render both on one element). */
.ppc-hoe-werkt-het__media-star-blur {
	position: absolute;
	left: 0;
	top: 0;
	width: 455px;
	height: 453px;
	/* Milky interior so the caption stays readable on any footage (Figma renders ~60% white
	   with a 4px background blur). */
	background: rgba(255, 255, 255, 0.6);
	clip-path: path("M176.902 4.0002C176.902 4.0002 210.404 124.037 271.586 161.639C332.77 199.239 455 174.902 455 174.902C455 174.902 334.964 208.404 297.361 269.586L295.641 272.5C260.514 334.562 284.091 453 284.091 453C284.091 453 251.631 336.683 192.257 297.183L189.414 295.361C128.315 257.812 6.33227 282.024 6.0002 282.091C6.37779 281.986 122.382 249.535 161.818 190.256L163.639 187.414C201.24 126.231 176.902 4.0002 176.902 4.0002Z");
}

.ppc-hoe-werkt-het__media-star-blur::before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Caption centered on the star group's centre: group 432px at (right -125, top -131) puts the
   crossing at 91px from the media's right edge, 85px from its top (verified against the
   wrapper-clipped Figma render; the text node's metadata box is a rotated AABB - don't use it). */
.ppc-hoe-werkt-het__media-caption {
	position: absolute;
	top: 85px;
	right: 91px;
	white-space: nowrap;
	transform: translate(50%, -50%) rotate(-16deg);
	font-family: var(--ppc-font-sans);
	font-style: italic;
	font-size: 0.875rem;
	line-height: 1.45;
	text-align: center;
	color: var(--ppc-color-credit-text);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

/* Reviews (blue block) */
.ppc-hoe-werkt-het__reviews {
	position: relative;
	z-index: 1;
	/* Figma pattern fill: white stars at 16% blended with overlay onto the blue (see tokens.css). */
	background: var(--ppc-texture-scheme5) repeat left top / 54.95px 109.9px, var(--ppc-color-scheme5-bg);
	background-blend-mode: overlay, normal;
	color: var(--ppc-color-scheme5-text);
	padding-top: clamp(6rem, 12vw, 12.5rem);
	padding-bottom: clamp(4rem, 8vw, 8.75rem);
	padding-inline: var(--ppc-section-inset-x);
}

.ppc-hoe-werkt-het__rev-intro {
	max-width: var(--ppc-measure);
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}

.ppc-hoe-werkt-het__rev-eyebrow {
	margin: 0 0 1rem;
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: var(--ppc-font-size-tagline);
	line-height: var(--ppc-line-height-tagline);
	color: var(--ppc-color-scheme5-text);
}

.ppc-hoe-werkt-het__rev-title {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-h2);
	line-height: var(--ppc-line-height-heading);
	letter-spacing: var(--ppc-letter-spacing-heading);
	color: var(--ppc-color-scheme5-text);
}

.ppc-hoe-werkt-het__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	font-family: var(--ppc-font-sans);
	font-size: 0.875rem;
	color: var(--ppc-color-scheme5-text);
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.ppc-hoe-werkt-het__rating-label {
	font-weight: var(--ppc-font-weight-semibold);
}

.ppc-hoe-werkt-het__rating-logo {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ppc-color-success);
}

/* Slider */
.ppc-hoe-werkt-het__slider {
	overflow: hidden;
	padding-block: 1rem;
}

.ppc-hoe-werkt-het__slide {
	height: auto;
	display: flex;
	padding: 1rem 0.5rem;
}

.ppc-hoe-werkt-het__review {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	padding: 3rem 2rem 2.5rem;
	border-radius: 32px;
	background: var(--ppc-color-card-surface);
	color: var(--ppc-color-neutral-darker);
	box-shadow:
		0 0 4px rgba(0, 0, 0, 0.16),
		inset -3px -3px 4px rgba(0, 0, 0, 0.06),
		inset 3px 3px 3px rgba(255, 255, 255, 0.25);
	transform: rotate(-2deg);
}

.ppc-hoe-werkt-het__review-corner {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--ppc-color-picton-blue), var(--ppc-color-picton-blue-dark));
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.ppc-hoe-werkt-het__review-name {
	margin: 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: 1.25rem;
	line-height: var(--ppc-line-height-h5);
	color: var(--ppc-color-picton-blue-darker);
}

.ppc-hoe-werkt-het__review-role {
	margin: 0.25rem 0 0;
	font-family: var(--ppc-font-heading);
	font-weight: var(--ppc-font-weight-bold);
	font-size: var(--ppc-font-size-h6);
	line-height: var(--ppc-line-height-h5);
	color: var(--ppc-color-picton-blue-dark);
}

.ppc-hoe-werkt-het__review-quote {
	margin: 0;
	font-family: var(--ppc-font-open-sans);
	font-size: var(--ppc-font-size-lead);
	line-height: var(--ppc-line-height-body);
	color: var(--ppc-color-neutral-darker);
}

.ppc-hoe-werkt-het__slider-dots {
	/* Static: Swiper pins .swiper-pagination absolute at bottom 8px, on top of the cards. */
	position: static;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	/* 40px visual gap to the tilted cards' envelope (Figma); the ±2deg rotation extends the
	   cards ~10px below their layout box, the slide's own padding covers the rest. */
	margin-top: 2.125rem;
}

.ppc-hoe-werkt-het__slider-dots .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
	transition: background-color 0.2s ease;
}

.ppc-hoe-werkt-het__slider-dots .swiper-pagination-bullet-active {
	background: #ffffff;
}

/* Mobile: no corner star (with its caption) on the small video, tighter review cards, and the
   slider spills past its box (neighbouring cards peek in; the reviews block clips at its own
   edge so the page never scrolls sideways). */
@media (max-width: 40rem) {
	.ppc-hoe-werkt-het__media-star,
	.ppc-hoe-werkt-het__media-caption {
		display: none;
	}

	.ppc-hoe-werkt-het__review {
		padding: 2rem 1.5rem;
	}

	/* Smaller corner tile so even long unbreakable role words ("Dropshipboekhouder") fit
	   beside it; the padding keeps wrapped lines clear of the tile. */
	.ppc-hoe-werkt-het__review-corner {
		top: 1rem;
		right: 1rem;
		width: 40px;
		height: 40px;
		border-radius: 14px;
	}

	.ppc-hoe-werkt-het__review-name,
	.ppc-hoe-werkt-het__review-role {
		padding-right: 2.5rem;
	}

	.ppc-hoe-werkt-het__review-role {
		font-size: 1.125rem;
	}

	.ppc-hoe-werkt-het__reviews {
		overflow: hidden;
	}

	.ppc-hoe-werkt-het__slider {
		overflow: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppc-hoe-werkt-het__play,
	.ppc-hoe-werkt-het__slider-dots .swiper-pagination-bullet {
		transition: none;
	}
}