/* Comparison Table - a column of row labels and two options. Phones: one card per row. */

.comparison-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	font-size: var(--text-size-100);
	line-height: 1.7;
	/* follows the table's shape, so the empty corner casts no shadow */
	filter: drop-shadow(0 2.625rem 2.5rem color-mix(in srgb, var(--wp--preset--color--wpbf-palette-color-4) 16%, transparent));
}

.comparison-table :is(th, td) {
	padding: 1.5rem;
	border: 0;
	border-top: 1px solid var(--border-hairline);
	border-left: 1px solid var(--border-hairline);
	background: var(--wp--preset--color--wpbf-palette-color-2);
	color: var(--wp--preset--color--wpbf-palette-color-1);
	text-align: center;
	vertical-align: middle;
}
.comparison-table tbody :is(th, td):last-child {
	border-right: 1px solid var(--border-hairline);
}
.comparison-table tbody tr:last-child :is(th, td) {
	border-bottom: 1px solid var(--border-hairline);
}

/* Option headings */
.comparison-table thead th {
	padding-block: 1.75rem;
	border: 0;
	background: var(--gradient-accent);
	color: var(--wp--preset--color--wpbf-palette-color-2);
	font-family: var(--font-head);
	font-size: var(--text-size-300);
	font-weight: 600;
	line-height: 1.4;
}
.comparison-table thead th:nth-child(2) {
	border-top-left-radius: var(--border-radius);
}
.comparison-table thead th:last-child {
	border-top-right-radius: var(--border-radius);
	color: var(--wp--preset--color--wpbf-palette-color-5);
}
.comparison-table thead th.comparison-table-corner {
	background: transparent;
}

/* Row labels - gradient text */
.comparison-table tbody th {
	font-family: var(--font-head);
	font-weight: 600;
}
.comparison-table tbody th span {
	color: var(--wp--preset--color--wpbf-palette-color-3);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.comparison-table tbody th span {
		background: var(--gradient-accent);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}
.comparison-table tbody tr:first-child th {
	border-top-left-radius: var(--border-radius);
}
.comparison-table tbody tr:last-child th {
	border-bottom-left-radius: var(--border-radius);
}
.comparison-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--border-radius);
}

/* Phones: each row is a card - the label as its heading, each value under its option name */
@media screen and (max-width: 768px) {
	.comparison-table,
	.comparison-table :is(tbody, tr, th, td) {
		display: block;
		width: 100%;
	}
	.comparison-table {
		filter: none;
	}
	.comparison-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.comparison-table tbody tr {
		overflow: hidden;
		border-radius: var(--border-radius);
		box-shadow: var(--shadow-card);
	}
	.comparison-table tbody tr + tr {
		margin-top: var(--gap-grid);
	}
	.comparison-table tbody tr :is(th, td) {
		border-radius: 0;
		border-top: 0;
	}
	.comparison-table tbody th {
		border: 0;
		background: var(--gradient-accent);
	}
	.comparison-table tbody th span {
		background: none;
		color: var(--wp--preset--color--wpbf-palette-color-2);
	}
	.comparison-table tbody td {
		border: 1px solid var(--border-hairline);
		border-top: 0;
		text-align: left;
	}
	.comparison-table tbody td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.25rem;
		font-family: var(--font-head);
		font-size: var(--text-size-90);
		font-weight: 600;
		color: var(--wp--preset--color--wpbf-palette-color-6);
	}
}