/*
 * proof/compare-table. Figma "Leistungsseiten" comparison 3174:911, see
 * sites/proof/design/leistung-spec.md §4: label 96 below the logo row, the
 * shared head (sub 591, black 50%), then the white card 56 below the sub:
 * p 20, header row 101, rows 70, columns 402 / 566 / 400 / 400. The
 * highlighted column is blue with 1px #306BD3 cell borders and a lifted
 * shadow; the halftone texture lies over the page grey at 2%.
 */

/* visible: the lift's shadow falls below the card, past the section end. */
.pf-block.pf-ctable {
	padding-top: calc(96 * var(--pf-u));
	overflow: visible;
}
/* Halftone 1983 x 1276 from the label rule, x -32 (as a background, so it
   doesn't widen the page). */
.pf-ctable::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(126 * var(--pf-u));
	height: calc(1276 * var(--pf-u));
	background: url("../../assets/img/dither.png") calc(-32 * var(--pf-u)) 0 / calc(1983 * var(--pf-u)) 100% no-repeat;
	opacity: 0.02;
	pointer-events: none;
}
.pf-ctable > * {
	position: relative;
}
/* 591 in Figma; Chrome's Geist runs narrower. */
.pf-block.pf-ctable .pf-sub {
	width: min(100%, calc(582 * var(--pf-u)));
	letter-spacing: -0.04em;
	color: rgba(0, 0, 0, 0.5);
}

.pf-block .pf-ctable-card {
	margin-top: calc(56 * var(--pf-u));
	padding: calc(20 * var(--pf-u));
	border-radius: calc(8 * var(--pf-u));
	background: #fff;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.06);
}
.pf-ctable-scroll {
	position: relative;
}
/* The Proof column's shadow (Figma: a hidden rectangle behind the cells). */
.pf-ctable-lift {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--pf-ct-left, 402) * var(--pf-u));
	width: calc(566 * var(--pf-u));
	border-radius: calc(8 * var(--pf-u));
	background: #d9d9d9;
	box-shadow:
		5px 8px 21px rgba(0, 33, 87, 0.15),
		19px 33px 38px rgba(0, 33, 87, 0.13),
		43px 74px 52px rgba(0, 33, 87, 0.08),
		77px 132px 61px rgba(0, 33, 87, 0.02);
}

.pf-block .pf-ctable-table {
	position: relative;
	width: 100%;
	margin: 0;
	table-layout: fixed;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: calc(14 * var(--pf-t));
	line-height: calc(18 * var(--pf-t));
	color: #000;
}
.pf-ctable-col-label {
	width: calc(402 * var(--pf-u));
}
.pf-ctable-table col.is-hl {
	width: calc(566 * var(--pf-u));
}
.pf-ctable-table thead tr {
	height: calc(101 * var(--pf-u));
}
.pf-ctable-table tbody tr {
	height: calc(70 * var(--pf-u));
}
.pf-block .pf-ctable-table :is(th, td) {
	padding: 0 calc(20 * var(--pf-u)) 0 calc(40 * var(--pf-u));
	border: 0;
	border-bottom: 1px solid #e5e5e5;
	background: none;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}
.pf-block .pf-ctable-table tbody tr:last-child > * {
	border-bottom: 0;
}
/* Criteria: 20 inside, 500. The column after the highlighted one: 60. */
.pf-block .pf-ctable-table :is(th[scope="row"], .pf-ctable-corner) {
	padding-left: calc(20 * var(--pf-u));
	font-weight: 500;
	color: #0e1410;
}
.pf-block .pf-ctable-table .is-hl + :is(td, th) {
	padding-left: calc(60 * var(--pf-u));
}

/* Column heads: title 700 20 caps (cap-trimmed 14), 4, sub 12 at 45%;
   content top at 37. */
.pf-block .pf-ctable-table .pf-ctable-head {
	padding-top: calc(33 * var(--pf-u));
	vertical-align: top;
}
.pf-ctable-title,
.pf-ctable-sub {
	display: block;
}
.pf-ctable-title {
	font-weight: 700;
	font-size: calc(20 * var(--pf-t));
	line-height: calc(20 * var(--pf-t));
	text-transform: uppercase;
	color: #0e1410;
}
.pf-ctable-sub {
	margin-top: calc(3 * var(--pf-u));
	font-size: calc(12 * var(--pf-t));
	line-height: calc(14 * var(--pf-t));
	color: rgba(0, 0, 0, 0.45);
}

/* Cells: icon 25, 8, text (centred on each other); the note 4 below that
   line, from the icon's left edge (Figma's warn cell), so it wraps. */
.pf-ctable-cell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: calc(8 * var(--pf-u));
}
.pf-block .pf-ctable-icon {
	flex: none;
	width: calc(25 * var(--pf-u));
	height: calc(25 * var(--pf-u));
}
/* Basis 0: a long text wraps beside the icon instead of below it. */
.pf-ctable-val {
	flex: 1 1 0;
	min-width: 0;
}
.pf-ctable-note {
	flex: 0 0 100%;
	margin-top: calc(4 * var(--pf-u));
	font-size: calc(12 * var(--pf-t));
	line-height: calc(15 * var(--pf-t));
	color: rgba(0, 0, 0, 0.45);
}
/* Below an icon row the design has the note 2 lower (6 under the icon). */
.pf-ctable-icon ~ .pf-ctable-note {
	margin-top: calc(6 * var(--pf-u));
}

/* Highlighted column: blue cells, each with a 1px #306BD3 border. */
.pf-block .pf-ctable-table .is-hl {
	border-bottom: 0;
	background: var(--pf-blue);
	box-shadow: inset 0 0 0 1px #306bd3;
	font-weight: 600;
	color: #fff;
}
.pf-block .pf-ctable-table tbody tr:last-child .is-hl {
	border-radius: 0 0 calc(8 * var(--pf-u)) calc(8 * var(--pf-u));
	box-shadow: none;
}
.is-hl .pf-ctable-note {
	font-weight: 400;
	font-size: calc(11 * var(--pf-t));
	letter-spacing: 0.03em;
	color: #9db9e9;
}
/* Head: #0F5DE4 with the clipped brand shape top right and the white
   Proof logo (140.8 wide at 41 / 37). */
.pf-block .pf-ctable-table .pf-ctable-head.is-hl {
	position: relative;
	padding: 0;
	border-radius: calc(8 * var(--pf-u)) calc(8 * var(--pf-u)) 0 0;
	background: #0f5de4 url("../../assets/img/compare-head-shape.svg") no-repeat right top / calc(217 * var(--pf-u)) calc(101 * var(--pf-u));
}
.pf-ctable-logo {
	position: absolute;
	left: calc(41 * var(--pf-u));
	top: calc(37 * var(--pf-u));
	width: calc(140.8 * var(--pf-u));
	height: calc(26.9 * var(--pf-u));
	background: #fff;
	-webkit-mask: url("../../assets/img/logo.svg") no-repeat center / contain;
	mask: url("../../assets/img/logo.svg") no-repeat center / contain;
}

/* Below desktop: the table scrolls sideways, the criteria stay put; no
   lift shadow. */
@media (max-width: 1024px) {
	.pf-block.pf-ctable {
		padding-top: 64px;
	}
	.pf-block.pf-ctable .pf-sub {
		width: min(100%, 560px);
	}
	.pf-block .pf-ctable-card {
		margin-top: 40px;
		padding: 12px;
		border-radius: 8px;
	}
	.pf-ctable-scroll {
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}
	.pf-ctable-lift {
		display: none;
	}
	.pf-block .pf-ctable-table {
		min-width: 900px;
		font-size: 14px;
		line-height: 18px;
	}
	.pf-ctable-col-label {
		width: 200px;
	}
	.pf-ctable-table col.is-hl {
		width: 280px;
	}
	.pf-ctable-table thead tr {
		height: 80px;
	}
	.pf-ctable-table tbody tr {
		height: 64px;
	}
	.pf-block .pf-ctable-table :is(th, td) {
		padding: 12px 16px 12px 20px;
	}
	.pf-block .pf-ctable-table .is-hl + :is(td, th) {
		padding-left: 24px;
	}
	.pf-block .pf-ctable-table :is(th[scope="row"], .pf-ctable-corner) {
		position: sticky;
		left: 0;
		z-index: 1;
		padding-left: 8px;
		background: #fff;
	}
	.pf-block .pf-ctable-table .pf-ctable-head {
		padding-top: 24px;
	}
	.pf-ctable-title {
		font-size: 18px;
		line-height: 18px;
	}
	.pf-ctable-sub {
		margin-top: 4px;
		font-size: 12px;
		line-height: 14px;
	}
	.pf-ctable-cell {
		column-gap: 8px;
	}
	.pf-block .pf-ctable-icon {
		width: 22px;
		height: 22px;
	}
	.pf-ctable-note,
	.pf-ctable-icon ~ .pf-ctable-note {
		margin-top: 4px;
		font-size: 12px;
		line-height: 15px;
	}
	.pf-block .pf-ctable-table tbody tr:last-child .is-hl {
		border-radius: 0 0 8px 8px;
	}
	.is-hl .pf-ctable-note {
		font-size: 11px;
	}
	.pf-block .pf-ctable-table .pf-ctable-head.is-hl {
		border-radius: 8px 8px 0 0;
		background-size: 172px 80px;
	}
	.pf-ctable-logo {
		left: 20px;
		top: 29px;
		width: 116px;
		height: 22px;
	}
}
@media (max-width: 767px) {
	.pf-block .pf-ctable-table {
		min-width: 760px;
		font-size: 13px;
	}
	.pf-ctable-col-label {
		width: 140px;
	}
	.pf-ctable-table col.is-hl {
		width: 240px;
	}
	.pf-ctable-title {
		font-size: 16px;
	}
}