/* TS Comparison (1.9.0)
 * A real table: topic column + two compared columns, one of them highlighted (.--hl).
 * Stacked on small screens (class ts-cmp--stack-mobile / -tablet): each topic shows its texts one under
 * the other with the column name above each text (.ts-cmp__lbl); the column-name row is hidden.
 *   --ts-cmp-topic  topic column width (control: Topic column width)
 *   --ts-cmp-line   lines and border (control: Lines and border)
 *   --ts-cmp-pad    space inside each box (control: Space inside each box)
 */
.ts-cmp {
	overflow: hidden;
	border: 1px solid var(--ts-cmp-line, var(--ts-line));
	border-radius: 28px;
	background: var(--ts-cream);
}

.ts-w .ts-cmp__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: transparent;
}

.ts-cmp__col-topic {
	width: var(--ts-cmp-topic, 200px);
}

.ts-w .ts-cmp__table :where(th, td) {
	padding: var(--ts-cmp-pad, 18px 24px);
	border: 0;
	background: transparent;
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
}

/* Column names */
.ts-w .ts-cmp__table thead :where(th, td) {
	padding: var(--ts-cmp-pad, 20px 24px);
}

.ts-w.ts-cmp .ts-cmp__head {
	font-family: var(--ts-font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.ts-w.ts-cmp .ts-cmp__head--plain {
	background: rgba(56, 37, 32, .06);
	color: var(--ts-muted);
}

.ts-w.ts-cmp .ts-cmp__head--hl {
	background: var(--ts-terra);
	color: #fff;
}

/* Topics and texts */
.ts-w .ts-cmp__table tbody tr {
	border-top: 1px solid var(--ts-cmp-line, var(--ts-line));
}

.ts-w.ts-cmp .ts-cmp__topic {
	font-size: 14px;
	font-weight: 700;
	color: var(--ts-esp);
}

.ts-w.ts-cmp .ts-cmp__cell--plain {
	background: rgba(56, 37, 32, .025);
	color: var(--ts-muted-2);
}

.ts-w.ts-cmp .ts-cmp__cell--hl {
	background: rgba(243, 105, 42, .05);
	color: var(--ts-esp);
	font-weight: 600;
}

.ts-cmp__lbl {
	display: none;
}

/* Stacked */
@media (max-width: 1024px) {
	.ts-cmp--stack-tablet .ts-cmp__table,
	.ts-cmp--stack-tablet .ts-cmp__table :where(tbody, tr, th, td) {
		display: block;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.ts-cmp--stack-mobile .ts-cmp__table,
	.ts-cmp--stack-mobile .ts-cmp__table :where(tbody, tr, th, td) {
		display: block;
		width: 100%;
	}
}

/* The rules below apply only where the table is stacked (same two breakpoints). */
@media (max-width: 1024px) {
	.ts-cmp--stack-tablet thead,
	.ts-cmp--stack-tablet colgroup {
		display: none;
	}

	.ts-w.ts-cmp--stack-tablet .ts-cmp__table tbody tr {
		padding: 6px 0;
	}

	.ts-w.ts-cmp--stack-tablet .ts-cmp__table tbody :where(th, td) {
		padding: 8px 20px;
	}

	.ts-w.ts-cmp--stack-tablet .ts-cmp__topic {
		padding-top: 16px;
		font-size: 15px;
	}

	.ts-cmp--stack-tablet .ts-cmp__lbl {
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: .06em;
		text-transform: uppercase;
	}

	.ts-w.ts-cmp--stack-tablet .ts-cmp__cell--plain {
		background: none;
	}

	.ts-w.ts-cmp--stack-tablet .ts-cmp__table .ts-cmp__cell--hl {
		width: auto;
		margin: 0 12px 12px;
		padding: 10px 12px;
		border-radius: 12px;
	}
}

@media (max-width: 767px) {
	.ts-cmp--stack-mobile thead,
	.ts-cmp--stack-mobile colgroup {
		display: none;
	}

	.ts-w.ts-cmp--stack-mobile .ts-cmp__table tbody tr {
		padding: 6px 0;
	}

	.ts-w.ts-cmp--stack-mobile .ts-cmp__table tbody :where(th, td) {
		padding: 8px 20px;
	}

	.ts-w.ts-cmp--stack-mobile .ts-cmp__topic {
		padding-top: 16px;
		font-size: 15px;
	}

	.ts-cmp--stack-mobile .ts-cmp__lbl {
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: .06em;
		text-transform: uppercase;
	}

	.ts-w.ts-cmp--stack-mobile .ts-cmp__cell--plain {
		background: none;
	}

	.ts-w.ts-cmp--stack-mobile .ts-cmp__table .ts-cmp__cell--hl {
		width: auto;
		margin: 0 12px 12px;
		padding: 10px 12px;
		border-radius: 12px;
	}
}

.ts-cmp__cell--plain .ts-cmp__lbl {
	color: var(--ts-muted-2);
}

.ts-cmp__cell--hl .ts-cmp__lbl {
	color: var(--ts-terra-d);
}