/*
 * tnk/comparison-table — side-by-side spec matrix wrapping core/table.
 * Enqueued sitewide from tnk-patterns-styles.php (≤30 lines; conditional
 * has_block check would require parsing every post's content on every
 * request, which costs more than the asset itself).
 *
 * Mobile (<600px) reflows each <tr> into a stacked block; the column
 * <thead> is positioned off-screen since pure CSS can't inject per-cell
 * data-labels. Authors keep the row label (first <td>) — the per-column
 * context is dropped on small screens.
 */
.tnk-comparison-table table { width: 100%; border-collapse: collapse; }
.tnk-comparison-table thead th { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast-soft); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wp--preset--font-size--small); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); text-align: left; border-bottom: 1px solid var(--wp--preset--color--border); }
.tnk-comparison-table tbody td { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--border); }
.tnk-comparison-table tbody td:first-child { color: var(--wp--preset--color--contrast-soft); font-weight: 500; }

@media (max-width: 600px) {
	.tnk-comparison-table table,
	.tnk-comparison-table thead,
	.tnk-comparison-table tbody,
	.tnk-comparison-table tr,
	.tnk-comparison-table td,
	.tnk-comparison-table th { display: block; }
	.tnk-comparison-table thead { position: absolute; top: -9999px; left: -9999px; }
	.tnk-comparison-table tr { border-bottom: 1px solid var(--wp--preset--color--border); padding: var(--wp--preset--spacing--40) 0; }
	.tnk-comparison-table tbody td { padding: var(--wp--preset--spacing--20) 0; border: none; }
	.tnk-comparison-table tbody td:first-child { font-weight: 500; }
}