/* Blok 5: Vergelijkingstabel. Alleen presets uit theme.json. */

.ps-compare .ps-compare__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: var(--wp--preset--spacing--56) var(--wp--preset--spacing--72);
	align-items: start;
}

/* De tabelkaart is altijd wit, ook op een donkere sectie. */
.ps-section .ps-compare__card {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--large);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.ps-compare .ps-compare__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
}
.ps-compare .ps-compare__table th,
.ps-compare .ps-compare__table td {
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--12);
	border: 0;
	text-align: center;
	vertical-align: middle;
}
.ps-compare .ps-compare__table th:first-child,
.ps-compare .ps-compare__table td:first-child { padding-left: var(--wp--preset--spacing--24); text-align: left; }
.ps-compare .ps-compare__table th:last-child,
.ps-compare .ps-compare__table td:last-child { padding-right: var(--wp--preset--spacing--24); }
.ps-compare .ps-compare__table thead th:not(:first-child),
.ps-compare .ps-compare__table td { width: 92px; }
.ps-compare .ps-compare__table thead th:last-child,
.ps-compare .ps-compare__table td:last-child { width: calc(92px + var(--wp--preset--spacing--12)); }

.ps-compare .ps-compare__table thead th {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}
.ps-compare .ps-compare__table tbody tr { border-top: 1px solid var(--wp--preset--color--line-soft); }
.ps-compare .ps-compare__table tbody tr:first-child { border-top: 0; }
.ps-compare .ps-compare__table tbody th { font-weight: 400; }

.ps-compare .ps-compare__title { display: block; font-size: var(--wp--preset--font-size--medium-small); font-weight: 600; line-height: 1.35; color: var(--wp--preset--color--navy); }
.ps-compare .ps-compare__sub { display: block; margin-top: 3px; font-size: var(--wp--preset--font-size--small); line-height: 1.45; color: var(--wp--preset--color--slate); }

.ps-compare .ps-compare__status {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}
.ps-compare__status--yes { color: var(--wp--preset--color--teal-ink); }
.ps-compare__status--partly { color: var(--wp--preset--color--sev-medium-text); }
.ps-compare__status--no { color: var(--wp--preset--color--sev-high-text); }

.ps-compare .ps-compare__stat {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--24);
	border-top: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--teal-tint);
}
.ps-compare .ps-compare__stat-value { font-size: var(--wp--preset--font-size--stat); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--wp--preset--color--navy); }
.ps-compare .ps-compare__stat-text { flex: 1; min-width: 200px; font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--wp--preset--color--navy); }

@media (max-width: 480px) {
	.ps-compare .ps-compare__table thead th:not(:first-child),
	.ps-compare .ps-compare__table td { width: 76px; }
	.ps-compare .ps-compare__table thead th:last-child,
	.ps-compare .ps-compare__table td:last-child { width: 92px; padding-right: var(--wp--preset--spacing--12); }
	.ps-compare .ps-compare__table th,
	.ps-compare .ps-compare__table td { padding-inline: var(--wp--preset--spacing--8); }
	.ps-compare .ps-compare__table thead th { letter-spacing: 0.04em; }
	.ps-compare .ps-compare__table th:first-child,
	.ps-compare .ps-compare__table td:first-child { padding-left: var(--wp--preset--spacing--16); }
}