/*
 * proof/prompt-grid. Figma "Leistungsseiten" cluster grid 3174:1120, see
 * sites/proof/design/leistung-spec.md §5c: H2 1094 wide, the meta line 46
 * below it, the blue panel (p 40) 20 below with 8 x 2 tiles of 166.2
 * (gap 10.3), the three 383 cluster columns 20 below the panel.
 */

/* The H2's cap line 102 below the stat cards above. */
.pf-block.pf-pgrid {
	padding-top: calc(48 * var(--pf-u));
}
.pf-block.pf-pgrid .pf-head {
	width: calc(1094 * var(--pf-u));
}

/* Dot, then caps 11 / 16.5 with blue separators. */
.pf-block .pf-pgrid-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.3em;
	margin-top: calc(45.9 * var(--pf-u));
	font-size: calc(11 * var(--pf-t));
	line-height: calc(16.5 * var(--pf-t));
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #000;
}
.pf-pgrid-meta::before {
	content: "";
	flex: none;
	width: calc(8 * var(--pf-u));
	height: calc(8 * var(--pf-u));
	/* 8 to the text, of which the row's column gap is 0.3em. */
	margin-right: calc(8 * var(--pf-u) - 0.3em);
	border-radius: 50%;
	background: var(--pf-blue);
}
.pf-pgrid-sep {
	color: var(--pf-blue);
}

.pf-block .pf-pgrid-panel {
	margin-top: calc(20.5 * var(--pf-u));
	padding: calc(40 * var(--pf-u));
	border-radius: calc(8 * var(--pf-u));
	background: var(--pf-blue);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.06);
}
.pf-block .pf-pgrid-tiles {
	display: grid;
	grid-template-columns: repeat(8, calc(166.2 * var(--pf-u)));
	justify-content: center;
	gap: calc(10.3 * var(--pf-u));
}
/* #FAFAFA at 72% (pale blue on the panel), 1.3 border black 9%. */
.pf-pgrid-tile {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: calc(7.9 * var(--pf-u));
	background: rgba(250, 250, 250, 0.72);
	box-shadow: inset 0 0 0 calc(1.3 * var(--pf-u)) rgba(0, 0, 0, 0.09);
}
.pf-block .pf-pgrid-tile img {
	width: calc(91.6 * var(--pf-u));
	height: calc(96.4 * var(--pf-u));
}
.pf-pgrid-num,
.pf-pgrid-twin {
	position: absolute;
	top: calc(7.3 * var(--pf-u));
	font-size: calc(11.9 * var(--pf-t));
	line-height: calc(17.9 * var(--pf-t));
	letter-spacing: 0.04em;
}
.pf-pgrid-num {
	left: calc(11.6 * var(--pf-u));
	color: rgba(0, 0, 0, 0.35);
}
/* Visual twin: solid tile, 4px green frame, "↗ A" top right. */
.pf-pgrid-tile.is-twin {
	background: #fafafa;
	box-shadow: inset 0 0 0 calc(4 * var(--pf-u)) #8bd400;
}
.pf-pgrid-twin {
	right: calc(10 * var(--pf-u));
	font-weight: 700;
	color: var(--pf-blue);
}

/* Clusters: 383 wide, space-between; embossed rules (white + #E2E2E2,
   187 tall) in the gaps. Figma clips the columns at 159, cutting line 3's
   descenders; here the text is whole and the row ends with the rules. */
.pf-block .pf-pgrid-clusters {
	display: flex;
	justify-content: space-between;
	margin-top: calc(20 * var(--pf-u));
	padding: calc(20 * var(--pf-u)) calc(20 * var(--pf-u)) calc(21.4 * var(--pf-u));
}
.pf-pgrid-cluster {
	position: relative;
	width: calc(383 * var(--pf-u));
}
.pf-pgrid-cluster + .pf-pgrid-cluster::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(-157.5 * var(--pf-u));
	width: 2px;
	height: calc(187 * var(--pf-u));
	background: linear-gradient(90deg, #fff 50%, #e2e2e2 50%);
}
.pf-block .pf-pgrid-eyebrow {
	font-size: calc(16 * var(--pf-t));
	line-height: calc(40 * var(--pf-t));
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pf-blue);
}
.pf-block .pf-pgrid-name {
	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;
}
/* 16 below the title to its cap line. */
.pf-block .pf-pgrid-text {
	margin-top: calc(10 * var(--pf-u));
	font-size: calc(18 * var(--pf-t));
	line-height: 1.4;
	color: #585757;
}

@media (max-width: 1024px) {
	.pf-block.pf-pgrid {
		padding-top: 64px;
	}
	.pf-block.pf-pgrid .pf-head {
		width: 100%;
	}
	.pf-block .pf-pgrid-meta {
		margin-top: 32px;
		font-size: 11px;
		line-height: 16px;
	}
	.pf-pgrid-meta::before {
		width: 8px;
		height: 8px;
		margin-right: 8px;
	}
	.pf-block .pf-pgrid-panel {
		margin-top: 16px;
		padding: 24px;
		border-radius: 8px;
	}
	.pf-block .pf-pgrid-tiles {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 8px;
	}
	.pf-pgrid-tile {
		border-radius: 6px;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
	}
	.pf-pgrid-tile.is-twin {
		box-shadow: inset 0 0 0 3px #8bd400;
	}
	.pf-block .pf-pgrid-tile img {
		width: 55%;
		height: auto;
	}
	.pf-pgrid-num,
	.pf-pgrid-twin {
		top: 4px;
		font-size: 10px;
		line-height: 14px;
	}
	.pf-pgrid-num {
		left: 7px;
	}
	.pf-pgrid-twin {
		right: 6px;
	}
	.pf-block .pf-pgrid-clusters {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
		margin-top: 24px;
		padding: 0;
	}
	.pf-pgrid-cluster {
		width: auto;
	}
	.pf-pgrid-cluster + .pf-pgrid-cluster::before {
		left: -17px;
		height: 100%;
	}
	.pf-block .pf-pgrid-eyebrow {
		font-size: 14px;
		line-height: 32px;
	}
	.pf-block .pf-pgrid-name {
		font-size: 26px;
		line-height: 32px;
	}
	.pf-block .pf-pgrid-text {
		margin-top: 8px;
		font-size: 16px;
	}
}
@media (max-width: 767px) {
	.pf-block .pf-pgrid-panel {
		padding: 12px;
	}
	.pf-block .pf-pgrid-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
	}
	.pf-pgrid-num {
		left: 6px;
	}
	.pf-pgrid-twin {
		right: 5px;
	}
	.pf-block .pf-pgrid-clusters {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.pf-pgrid-cluster {
		padding: 16px 0 20px;
	}
	.pf-pgrid-cluster + .pf-pgrid-cluster {
		border-top: 1px solid #e2e2e2;
	}
	.pf-pgrid-cluster + .pf-pgrid-cluster::before {
		display: none;
	}
}