/**
 * Matrix: from 768px `overflow-hidden rounded-xl border bg-card` around a
 * `text-sm` table, its head `bg-surface-cool` muted `px-5 py-3
 * font-semibold`, its rows `divide-y align-top`, cells `px-5 py-4`, the row
 * heading `font-medium`, dark red on hover. Below 768px `space-y-4` cards,
 * `rounded-xl border bg-card p-5`, the heading `font-bold`, the pairs `mt-3
 * space-y-2 text-sm`, the label `font-medium`; a cell of a column without
 * a heading a `text-sm` line under the heading. The links `mt-8`.
 */

.sba-c-matrix .sba-c-matrix-table {
	display: none;
	overflow: hidden;
	border: 1px solid var(--sba-border);
	border-radius: 12px;
	background-color: var(--sba-surface);
}

.sba-c-matrix table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
}

.sba-c-matrix thead {
	background-color: var(--sba-surface-cool);
}

.sba-c-matrix th,
.sba-c-matrix td {
	padding: 16px 20px;
	border: 0;
	background: none;
	vertical-align: top;
	text-align: left;
}

.sba-c-matrix thead th {
	padding-top: 12px;
	padding-bottom: 12px;
	color: var(--sba-slate);
	font-weight: 600;
}

.sba-c-matrix tbody tr + tr {
	border-top: 1px solid var(--sba-border);
}

.sba-c-matrix tbody th {
	color: var(--sba-charcoal);
	font-weight: 500;
}

.sba-c-matrix td {
	color: var(--sba-slate);
}

.sba-c-matrix th a,
.sba-c-matrix h3 a {
	color: inherit;
	text-decoration: none;
	transition: color var(--sba-duration-hover) ease;
}

.sba-c-matrix th a:hover,
.sba-c-matrix h3 a:hover {
	color: var(--sba-red-dark);
}

.sba-c-matrix .sba-c-matrix-cards {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-c-matrix .sba-c-section-header + .sba-c-matrix-table,
.sba-c-matrix .sba-c-section-header + .sba-c-matrix-table + .sba-c-matrix-cards {
	margin-top: 40px;
}

.sba-c-matrix .sba-c-matrix-cards li {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--sba-border);
	border-radius: 12px;
	background-color: var(--sba-surface);
}

.sba-c-matrix .sba-c-matrix-cards h3 {
	margin: 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 16px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 24px;
}

.sba-c-matrix .sba-c-matrix-card-line {
	margin: 4px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-matrix .sba-c-matrix-cards dl {
	display: grid;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 20px;
}

.sba-c-matrix .sba-c-matrix-cards dt {
	color: var(--sba-charcoal);
	font-weight: 500;
}

.sba-c-matrix .sba-c-matrix-cards dd {
	margin: 0;
	color: var(--sba-slate);
}

@media (min-width: 768px) {
	.sba-c-matrix .sba-c-matrix-table {
		display: block;
	}

	.sba-c-matrix .sba-c-matrix-cards {
		display: none;
	}
}