/*
 * proof/steps. Figma "SEO Agency Page - V2" steps 3275:993, see
 * sites/proof/design/agency-spec.md §5: columns 581 / 582 / 581, 32 apart;
 * cards 581 x 261 (two per column), the image as tall as the columns; the
 * ghost word 330px at 4% behind them. The section ends with the grid.
 */

.pf-block.pf-steps {
	padding-top: calc(230 * var(--pf-u));
}
/* Figma breaks after "Durchschnitt 11". */
.pf-block.pf-steps .pf-sub {
	width: min(100%, calc(596 * var(--pf-u)));
}
.pf-block .pf-steps-ghost {
	position: absolute;
	left: 50%;
	top: calc(398 * var(--pf-u));
	z-index: 0;
	transform: translateX(-50%);
	font-weight: 500;
	font-size: calc(330 * var(--pf-t));
	line-height: 1.2;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: rgba(38, 16, 10, 0.04);
	pointer-events: none;
	user-select: none;
}
.pf-steps-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 581fr 582fr 581fr;
	gap: calc(32 * var(--pf-u));
	margin-top: calc(202.5 * var(--pf-u));
}
.pf-steps-col {
	display: flex;
	flex-direction: column;
	gap: calc(32 * var(--pf-u));
}
.pf-block .pf-steps-media {
	position: relative;
	min-height: calc(554 * var(--pf-u));
	overflow: hidden;
	border-radius: calc(8 * var(--pf-u));
}
.pf-block .pf-steps-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Blue card: dither (.pf-dither), the brand shape's light wedge behind the
   footer (::after), the caption pinned to the bottom. */
.pf-block .pf-step {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(261 * var(--pf-u));
	padding: calc(24 * var(--pf-u));
	overflow: hidden;
	border-radius: calc(8 * var(--pf-u));
	background: var(--pf-blue);
}
.pf-step::after {
	content: "";
	position: absolute;
	left: calc(-567 * var(--pf-u));
	top: calc(-169 * var(--pf-u));
	width: calc(1183 * var(--pf-u));
	height: calc(953.3 * var(--pf-u));
	background: url("../../assets/img/steps-card-shape.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.pf-step > * {
	position: relative;
	z-index: 1;
}
/* Cap-trimmed in Figma: 3px higher than the 40 line box puts it. */
.pf-step-num {
	margin-top: calc(-7 * var(--pf-u));
	font-family: var(--pf-mono);
	font-size: calc(32 * var(--pf-t));
	line-height: calc(40 * var(--pf-t));
	letter-spacing: 1px;
	color: var(--pf-lime);
}
.pf-block .pf-step-title {
	margin-top: calc(14 * 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.03em;
	color: #fff;
}
.pf-block .pf-step-text {
	margin-top: calc(12 * var(--pf-u));
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}
/* Rule, caption and the Proof badge at the right end. */
.pf-block .pf-step-caption {
	margin-top: auto;
	padding-top: calc(24 * var(--pf-u));
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: calc(14 * var(--pf-t));
	line-height: calc(20 * var(--pf-t));
	text-transform: uppercase;
	color: #fff;
}
.pf-step-caption::after {
	content: "";
	position: absolute;
	right: 0;
	top: calc(18 * var(--pf-u));
	width: calc(32 * var(--pf-u));
	height: calc(32 * var(--pf-u));
	background: url("../../assets/img/proof-mark-badge.svg") no-repeat center / contain;
}

@media (max-width: 1024px) {
	.pf-block.pf-steps {
		padding-top: 96px;
	}
	/* No one-word last line ("Strategie- / Call."). */
	.pf-block.pf-steps .pf-sub {
		width: min(100%, 560px);
		text-wrap: pretty;
	}
	.pf-block .pf-steps-ghost {
		display: none;
	}
	.pf-steps-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		margin-top: 48px;
	}
	.pf-block .pf-steps-media {
		grid-column: 1 / -1;
		grid-row: 1;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
	.pf-steps-col {
		gap: 16px;
	}
	.pf-block .pf-step {
		min-height: 240px;
		padding: 20px;
	}
	.pf-step-num {
		margin-top: -6px;
		font-size: 26px;
		line-height: 34px;
	}
	.pf-block .pf-step-title {
		margin-top: 8px;
		font-size: 24px;
	}
	.pf-block .pf-step-text {
		font-size: 15px;
	}
	.pf-block .pf-step-caption {
		margin-top: 20px;
		padding-top: 18px;
		font-size: 13px;
	}
	.pf-step-caption::after {
		top: 12px;
		width: 28px;
		height: 28px;
	}
}
@media (max-width: 767px) {
	.pf-steps-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Layout "scatter": Figma "Leistungsseiten" steps 3174:563, see
 * sites/proof/design/leistung-spec.md §7. 95 below the tool's dashboard
 * (as padding: the section is transparent above the grid, and a margin
 * would collapse with the tool's), label 25 below that, the plain H2
 * (not the agency head) 106 below the label, a dashed grid from the label
 * rule (vertical lines every 128 at x 127.5, dashes 5.95; horizontal every
 * 127.8 from 127 below the rule, dashes 2.98; #7A7A7A at 8%). The stage
 * below the sub is 1066 tall: the 512 x 447 frame with the 3D image and
 * four 510 x 318 card wrappers (grey, masking the grid) placed as drawn.
 * Bottom border 1.5 #E9E8E7.
 */
.pf-block.pf-steps--scatter {
	padding-top: calc(120 * var(--pf-u));
	border-bottom: 1.5px solid #e9e8e7;
}
.pf-steps--scatter::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(150 * var(--pf-u));
	bottom: 0;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='11.9'%3E%3Crect width='1.49' height='5.95' fill='%237a7a7a' fill-opacity='.08'/%3E%3C/svg%3E") calc(126.755 * var(--pf-u)) 0 / calc(128 * var(--pf-u)) calc(11.9 * var(--pf-u)),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.96' height='127.8'%3E%3Crect width='2.98' height='1.49' fill='%237a7a7a' fill-opacity='.08'/%3E%3C/svg%3E") 0 calc(126.255 * var(--pf-u)) / calc(5.96 * var(--pf-u)) calc(127.8 * var(--pf-u));
	pointer-events: none;
}
.pf-steps--scatter > * {
	position: relative;
}
.pf-block.pf-steps--scatter .pf-head {
	margin-top: calc(61.5 * var(--pf-u));
}
/* 733 in Figma; Chrome's Geist runs narrower. */
.pf-block.pf-steps--scatter .pf-sub {
	width: min(100%, calc(720 * var(--pf-u)));
}
.pf-steps-stage {
	position: relative;
	height: calc(1066 * var(--pf-u));
}
/* Frame (grey, masks the grid) with the 452 x 411 image at 30 / 12
   (the 1px border is inside the frame in Figma). */
.pf-block .pf-steps-frame {
	position: absolute;
	left: calc(648 * var(--pf-u));
	top: calc(235 * var(--pf-u));
	width: calc(512 * var(--pf-u));
	height: calc(447 * var(--pf-u));
	padding: calc(12 * var(--pf-u) - 1px) calc(30 * var(--pf-u) - 1px) calc(24 * var(--pf-u) - 1px);
	border: 1px solid rgba(0, 0, 0, 0.09);
	background: var(--pf-bg);
}
.pf-block .pf-steps-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter:
		drop-shadow(7px 10px 27px rgba(0, 0, 0, 0.24))
		drop-shadow(28px 41px 50px rgba(0, 0, 0, 0.16))
		drop-shadow(63px 93px 67px rgba(0, 0, 0, 0.08))
		drop-shadow(112px 165px 80px rgba(0, 0, 0, 0.04));
}
/* Wrapper p 20 in the page grey; the card inside has no fill. */
.pf-block .pf-stepcard {
	position: absolute;
	width: calc(510 * var(--pf-u));
	padding: calc(20 * var(--pf-u));
	background: var(--pf-bg);
}
/* Desktop: layers as in Figma, bottom to top: the frame's grey and border,
   the wrappers' grey (masking the grid and the frame's corners at cards 01
   and 04), then the 3D image and the cards, so the image's drop shadow and
   the cards' Shadow Soft fall across the neighbouring wrappers. (Painted
   per element, each wrapper hid the shadows of the elements before it and
   showed as a pale box around cards 02-04.) */
@media (min-width: 1025px) {
	.pf-steps-stage {
		isolation: isolate;
	}
	.pf-block .pf-steps-frame {
		border-color: transparent;
		background: none;
	}
	.pf-block .pf-steps-frame::before {
		content: "";
		position: absolute;
		inset: -1px;
		z-index: -2;
		border: 1px solid rgba(0, 0, 0, 0.09);
		background: var(--pf-bg);
	}
	.pf-block .pf-stepcard {
		background: none;
	}
	.pf-block .pf-stepcard::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--pf-bg);
	}
	/* Figma's card is a space-between column (chip | title + text | tag):
	   a shorter text (card 02, 2 lines) centres the title block between
	   chip and tag. The 20 above the title stays the minimum (padding). */
	.pf-block .pf-stepcard .pf-stepcard-title {
		margin-top: auto;
		padding-top: calc(20 * var(--pf-u));
	}
	/* The card has no fill, so in Figma its Shadow Soft is cast by what it
	   holds, in effect the white tag field (the 1px border and the text
	   add next to nothing), and shows through the card too. As a box
	   shadow on the whole card it was twice as dark below the card and
	   missing inside it. */
	.pf-steps--scatter .pf-stepcard-in {
		box-shadow: none;
	}
	.pf-steps--scatter .pf-stepcard-tag {
		box-shadow:
			8px 20px 46px rgba(0, 0, 0, 0.07),
			31px 78px 84px rgba(0, 0, 0, 0.06),
			71px 176px 114px rgba(0, 0, 0, 0.03),
			126px 312px 135px rgba(0, 0, 0, 0.01);
	}
}
.pf-stepcard:nth-of-type(1) {
	left: calc(202 * var(--pf-u));
	top: calc(44 * var(--pf-u));
}
.pf-stepcard:nth-of-type(2) {
	left: calc(1225 * var(--pf-u));
	top: calc(172 * var(--pf-u));
}
.pf-stepcard:nth-of-type(3) {
	left: calc(73 * var(--pf-u));
	top: calc(429 * var(--pf-u));
}
.pf-stepcard:nth-of-type(4) {
	left: calc(1032 * var(--pf-u));
	top: calc(620 * var(--pf-u));
}
/* Card 470 x 278: border black 9%, Shadow Soft, p 20; chip, 20, title,
   16, text, footer tag pinned to the bottom. */
.pf-stepcard-in {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: calc(278 * var(--pf-u));
	/* Figma draws the border inside the 20 padding. */
	padding: calc(20 * var(--pf-u) - 1px);
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: calc(8 * var(--pf-u));
	box-shadow:
		8px 20px 46px rgba(0, 0, 0, 0.07),
		31px 78px 84px rgba(0, 0, 0, 0.06),
		71px 176px 114px rgba(0, 0, 0, 0.03),
		126px 312px 135px rgba(0, 0, 0, 0.01);
}
/* Chip: "01" cap-trimmed (11) + p 4. */
.pf-stepcard-num {
	padding: calc(4 * var(--pf-u));
	background: var(--pf-blue);
	font-size: calc(16 * var(--pf-t));
	line-height: calc(11 * var(--pf-t));
	letter-spacing: 1px;
	color: #fff;
}
.pf-block .pf-stepcard-title {
	margin-top: calc(20 * var(--pf-u));
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(32 * var(--pf-t));
	line-height: calc(40 * var(--pf-t));
	letter-spacing: -0.031em;
	color: #000;
}
/* Cap-trimmed in Figma: 16 above and at least 20 below the glyphs. */
.pf-block .pf-stepcard-text {
	margin-top: calc(11 * var(--pf-u));
	margin-bottom: calc(15 * var(--pf-u));
	font-size: calc(14 * var(--pf-t));
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.6);
}
.pf-block .pf-stepcard-tag {
	display: grid;
	place-items: center;
	align-self: stretch;
	height: calc(70 * var(--pf-u));
	margin-top: auto;
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: calc(8 * var(--pf-u));
	background: #fff;
	font-size: calc(16 * var(--pf-t));
	line-height: calc(40 * var(--pf-t));
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000;
}

/* Below desktop: image, then the cards in reading order. */
@media (max-width: 1024px) {
	.pf-block.pf-steps--scatter {
		padding-top: 88px;
		padding-bottom: 64px;
	}
	.pf-steps--scatter::before {
		top: 118px;
	}
	.pf-block.pf-steps--scatter .pf-head {
		margin-top: 40px;
	}
	.pf-block.pf-steps--scatter .pf-sub {
		width: min(100%, 560px);
	}
	.pf-steps-stage {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		height: auto;
		margin-top: 40px;
	}
	.pf-block .pf-steps-frame,
	.pf-block .pf-stepcard {
		position: static;
		width: auto;
	}
	.pf-block .pf-steps-frame {
		grid-column: 1 / -1;
		justify-self: center;
		width: min(100%, 420px);
		height: auto;
		aspect-ratio: 512 / 447;
		padding: 12px 28px;
	}
	.pf-block .pf-stepcard {
		display: flex;
		padding: 12px;
	}
	.pf-stepcard-in {
		flex: 1;
		min-height: 260px;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 4px 10px 24px rgba(0, 0, 0, 0.07);
	}
	.pf-stepcard-num {
		padding: 4px;
		font-size: 15px;
		line-height: 11px;
	}
	.pf-block .pf-stepcard-title {
		margin-top: 16px;
		font-size: 26px;
		line-height: 32px;
	}
	.pf-block .pf-stepcard-text {
		margin-top: 10px;
		margin-bottom: 20px;
		font-size: 15px;
	}
	.pf-block .pf-stepcard-tag {
		height: 56px;
		border-radius: 8px;
		font-size: 14px;
		line-height: 20px;
	}
}
@media (max-width: 767px) {
	.pf-steps-stage {
		grid-template-columns: 1fr;
	}
	.pf-stepcard-in {
		min-height: 0;
	}
}