/*
 * proof/process. Figma Ratgeber "So läuft's mit PROOF" 10:2150, see
 * sites/proof/design/ratgeber-spec.md §5: the blue band of proof/tool
 * (dither, tool-bg-shape at -1031 / -1168), label at 100, the 1194 head
 * 54 below its rule, four steps 120.5 below the intro (columns 383 wide,
 * 103 apart, the last one takes the rest), the inner card (promo) 92.5
 * below the steps, 78 to the section end. 141 below the block before it.
 */

.pf-block.pf-process {
	margin-top: calc(141 * var(--pf-u));
	padding-top: calc(100 * var(--pf-u));
	padding-bottom: calc(78 * var(--pf-u));
	background: var(--pf-blue);
}
/* Dither 2291 x 1309 at -186 / 0 (centred, from the top; it ends 1309
   down, as in the render), darken at 4 %. Own rule because the shared
   .pf-block .pf-dither::before only reaches descendants, not a block root. */
.pf-block.pf-process::before {
	content: "";
	position: absolute;
	left: calc(50% - 1145.5 * var(--pf-u));
	top: 0;
	width: calc(2291 * var(--pf-u));
	height: calc(1309 * var(--pf-u));
	background: url("../../assets/img/dither.png") no-repeat center / 100% 100%;
	mix-blend-mode: darken;
	opacity: 0.04;
	pointer-events: none;
}
/* process-bg-shape.svg = tool-bg-shape.svg with a 5 % black tint on the
   shape for Figma's noise (the render is ~5 % darker inside the shape). */
.pf-process::after {
	content: "";
	position: absolute;
	left: calc(50% - 1991 * var(--pf-u));
	top: calc(-1168 * var(--pf-u));
	width: calc(3982 * var(--pf-u));
	height: calc(3209 * var(--pf-u));
	background: url("../../assets/img/process-bg-shape.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.pf-process > * {
	position: relative;
	z-index: 1;
}
/* Label: white 72 %, rule 16 %, ls 1px (as proof/tool, plus this file's
   letter spacing). This file draws the rule 29.5 below the label's top
   (render: y 6044.5 for the label at 6015), 1.5 higher than .pf-label. */
.pf-block.pf-process .pf-label--light {
	padding-bottom: calc(11.3 * var(--pf-u));
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.72);
	border-bottom-color: rgba(255, 255, 255, 0.16);
}
/* 55.5 below the rule (54 below the old 12.8 label padding): the H2 stays
   at 6101. */
.pf-block.pf-process .pf-head {
	width: calc(1194 * var(--pf-u));
	margin-top: calc(55.5 * var(--pf-u));
}
/* Headline/H2: 56 / 1.2, ls -3 %, white. The intro follows the H2's line
   box 9.6 below (Figma: gap 24 between cap-trimmed boxes). */
.pf-block.pf-process .pf-h2 {
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: #fff;
}
.pf-block.pf-process .pf-sub {
	width: min(100%, calc(610 * var(--pf-u)));
	margin-top: calc(9.6 * var(--pf-u));
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0.72);
}

/* Editor hint of an empty block, readable on blue (not for the inner
   promo card's own hint). */
.pf-process > .pf-block-placeholder {
	border-color: rgba(255, 255, 255, 0.4);
	color: rgba(255, 255, 255, 0.8);
}

/* Steps */
.pf-block .pf-process-steps {
	display: flex;
	gap: calc(103 * var(--pf-u));
	margin-top: calc(120.5 * var(--pf-u));
}
.pf-process-step {
	position: relative;
	display: flex;
	flex: 0 1 calc(383 * var(--pf-u));
	flex-direction: column;
	min-width: 0;
	/* Figma: the active step is a fixed 252 box with its track at 249,
	   28.2 below the longest text (Figma's padding 32 is within it). */
	padding-bottom: calc(28.2 * var(--pf-u));
	border-bottom: 3px solid transparent;
	transition: border-color 0.3s;
}
.pf-process-step:last-child {
	flex: 1 1 0;
}
/* The active step's track (white 24 %) and bar (white, fills it). */
.pf-process-step.is-active {
	border-bottom-color: rgba(255, 255, 255, 0.24);
}
.pf-process-bar {
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 3px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
}
.pf-process-step.is-active .pf-process-bar {
	transform: none;
}
.pf-process-steps.is-running .pf-process-step.is-active .pf-process-bar {
	animation: pf-process-fill var(--pf-process-time, 5s) linear both;
}
.pf-process-steps.is-paused .pf-process-step.is-active .pf-process-bar {
	animation-play-state: paused;
}
@keyframes pf-process-fill {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
/* Number: Geist 24 / 40, ls 1px, lime. */
.pf-process-num {
	font-size: calc(24 * var(--pf-t));
	line-height: calc(40 * var(--pf-t));
	letter-spacing: 1px;
	color: var(--pf-lime);
}
.pf-block .pf-process-title {
	margin-top: calc(24 * var(--pf-u));
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(32 * var(--pf-t));
	line-height: 1.25;
	letter-spacing: -0.03125em;
	color: #fff;
}
.pf-block .pf-process-text {
	margin-top: calc(16 * var(--pf-u));
	font-size: calc(18 * var(--pf-t));
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.6);
}

.pf-block .pf-process-inner {
	margin-top: calc(92.5 * var(--pf-u));
}

@media (max-width: 1024px) {
	.pf-block.pf-process {
		margin-top: 96px;
		padding-top: 64px;
		padding-bottom: 56px;
	}
	.pf-block.pf-process .pf-label--light {
		padding-bottom: 12px; /* .pf-label's tablet value */
	}
	.pf-block.pf-process .pf-head {
		width: 100%;
		margin-top: 40px;
	}
	.pf-block.pf-process .pf-sub {
		width: min(100%, 560px);
		margin-top: 16px;
	}
	.pf-block .pf-process-steps {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
		margin-top: 56px;
	}
	.pf-process-step {
		padding-bottom: 20px;
	}
	.pf-process-num {
		font-size: 20px;
		line-height: 32px;
	}
	.pf-block .pf-process-title {
		margin-top: 12px;
		font-size: 24px;
	}
	.pf-block .pf-process-text {
		margin-top: 10px;
		font-size: 16px;
	}
	.pf-block .pf-process-inner {
		margin-top: 56px;
	}
}
@media (max-width: 767px) {
	.pf-block .pf-process-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.pf-process-step {
		transition: none;
	}
}