/*
 * proof/compare-cards. Figma Ratgeber "Wege im Vergleich" 10:1641 (visible
 * card row 10:1760), see sites/proof/design/ratgeber-spec.md §4: head 1808
 * wide (label + H2 left, intro 521 right, bottoms aligned), four cards 428
 * wide and 32 apart, 112 below the head, the closing note 64 below them.
 * 112 below the article's last line.
 */

.pf-block.pf-cmpcards {
	padding-top: calc(112 * var(--pf-u));
}

/* Head */
.pf-cmpcards-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: calc(40 * var(--pf-u));
}
.pf-cmpcards-headcopy {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--pf-u));
	width: calc(1181 * var(--pf-u));
	max-width: 100%;
}
/* Section label of this file: typed caps, ls 1px, black 60 %, no rule. */
.pf-block.pf-cmpcards .pf-label--norule {
	align-self: flex-start;
	letter-spacing: 1px;
	text-align: left;
	color: rgba(0, 0, 0, 0.6);
}
/* Headline/H2: ls -3 %, black. */
.pf-block.pf-cmpcards .pf-h2 {
	letter-spacing: -0.03em;
	color: #000;
}
.pf-block .pf-cmpcards-sub {
	flex: none;
	width: calc(521 * var(--pf-u));
	max-width: 100%;
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.6);
}

/* Cards */
.pf-cmpcards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: calc(32 * var(--pf-u));
	margin-top: calc(112 * var(--pf-u));
}
.pf-block .pf-cmpcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: calc(24 * var(--pf-u));
	overflow: hidden;
	border-radius: calc(8 * var(--pf-u));
	background: #fff;
}
.pf-cmpcard > * {
	position: relative;
	z-index: 1;
}
/* "weg 01": 18 / 1.4 black (card 1 is 16 / 24 at 60 % in Figma). */
.pf-block .pf-cmpcard-label {
	font-size: calc(18 * var(--pf-t));
	line-height: 1.4;
	color: #000;
}
/* Headline/H3; two lines tall in every card, so the rows line up. */
.pf-block .pf-cmpcard-title {
	min-height: calc(80 * var(--pf-u));
	margin-top: calc(32 * 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: #000;
}
.pf-block .pf-cmpcard-logo {
	width: calc(183 * var(--pf-u));
	height: auto;
}
/* Criteria: square + label (Geist 500 16 / 24, caps), the value 14 below
   (14 / 1.4, black 60 %), rows 32 apart; the rule 8 below the last one. */
.pf-block .pf-cmpcard-list {
	display: flex;
	flex-direction: column;
	gap: calc(32 * var(--pf-u));
	margin: calc(24 * var(--pf-u)) 0 0;
	padding-bottom: calc(8.4 * var(--pf-u));
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.pf-block .pf-cmpcard-row dt {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--pf-u));
	font-weight: 500;
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	text-transform: uppercase;
	color: #000;
}
.pf-block .pf-cmpcard-row dd {
	margin: calc(14 * var(--pf-u)) 0 0;
	font-size: calc(14 * var(--pf-t));
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.6);
}
.pf-cmpcard-rate {
	flex: none;
	width: calc(12 * var(--pf-u));
	height: calc(12 * var(--pf-u));
	background: #96db0f;
}
.pf-cmpcard-rate--medium {
	background: #fad562;
}
.pf-cmpcard-rate--bad {
	background: #d42b2b;
}
.pf-block .pf-cmpcard-summary {
	margin-top: calc(31 * var(--pf-u));
	font-size: calc(18 * var(--pf-t));
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.6);
}

/* The PROOF card: blue with dither (.pf-dither) and the brand shape at
   -567 / 139. compare-card-shape.svg is steps-card-shape.svg without the
   stroke (as Figma draws it) and with a 4.5 % black tint standing in for
   Figma's noise on the shape (measured: the render is ~4.5 % darker
   inside the shape, unchanged outside). */
.pf-block .pf-cmpcard--proof {
	background: var(--pf-blue);
}
/* Figma: the dither is 649.6 x 371.2, centred (not cover). */
.pf-block .pf-cmpcard--proof.pf-dither::before {
	background-size: calc(649.6 * var(--pf-u)) calc(371.2 * var(--pf-u));
	background-repeat: no-repeat;
}
.pf-cmpcard--proof::after {
	content: "";
	position: absolute;
	left: calc(-567 * var(--pf-u));
	top: calc(139 * var(--pf-u));
	width: calc(1183 * var(--pf-u));
	height: calc(953 * var(--pf-u));
	background: url("../../assets/img/compare-card-shape.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.pf-block .pf-cmpcard--proof .pf-cmpcard-label {
	color: var(--pf-lime);
}
.pf-block .pf-cmpcard--proof .pf-cmpcard-row dt {
	color: #fff;
}
.pf-block .pf-cmpcard--proof :is(.pf-cmpcard-row dd, .pf-cmpcard-summary) {
	color: rgba(255, 255, 255, 0.72);
}
.pf-block .pf-cmpcard--proof .pf-cmpcard-list {
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* Closing note, 697 wide, centred. */
.pf-block .pf-cmpcards-note {
	align-self: center;
	width: calc(697 * var(--pf-u));
	max-width: 100%;
	margin-top: calc(64 * var(--pf-u));
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	text-align: center;
	color: rgba(0, 0, 0, 0.6);
}
.pf-cmpcards-note > * + * {
	margin-top: calc(12 * var(--pf-u));
}
.pf-block .pf-cmpcards-note strong {
	font-weight: 600;
}
.pf-cmpcards-note a {
	color: var(--pf-blue);
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.pf-block.pf-cmpcards {
		padding-top: 96px;
	}
	.pf-cmpcards-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.pf-cmpcards-headcopy {
		gap: 16px;
		width: 100%;
	}
	.pf-block .pf-cmpcards-sub {
		width: min(100%, 560px);
		font-size: 16px;
	}
	.pf-cmpcards-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: 48px;
	}
	.pf-block .pf-cmpcard {
		padding: 24px;
		border-radius: 8px;
	}
	.pf-block .pf-cmpcard-label {
		font-size: 16px;
	}
	.pf-block .pf-cmpcard-title {
		min-height: 0;
		margin-top: 20px;
		font-size: 26px;
		line-height: 1.25;
	}
	.pf-block .pf-cmpcard-logo {
		width: 150px;
	}
	.pf-block .pf-cmpcard-list {
		gap: 20px;
		margin: 20px 0 0;
		padding-bottom: 20px;
	}
	.pf-block .pf-cmpcard-row dt {
		gap: 10px;
		font-size: 15px;
	}
	.pf-block .pf-cmpcard-row dd {
		margin-top: 6px;
		font-size: 14px;
	}
	.pf-cmpcard-rate {
		width: 12px;
		height: 12px;
	}
	.pf-block .pf-cmpcard-summary {
		margin-top: 20px;
		font-size: 16px;
	}
	.pf-cmpcard--proof::after {
		left: -40%;
		top: 25%;
		width: 150%;
		height: auto;
		aspect-ratio: 1183 / 953;
	}
	.pf-block .pf-cmpcards-note {
		width: min(100%, 600px);
		margin-top: 40px;
		font-size: 16px;
	}
}
@media (max-width: 767px) {
	.pf-cmpcards-grid {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40px;
	}
	.pf-block .pf-cmpcards-note {
		text-align: left;
	}
}