/*
 * Pros and cons. Figma 2048:47592 desktop (1020 table, 3 x 340 columns,
 * 64 header row, 65 rows), 2048:48642 mobile (525 table, 3 x 175, swipe).
 */

.pros-cons .section-head { margin-bottom: 24px; max-width: 653px; }
.pros-cons .section-head__text { font: var(--f-body-xs); }

.pros-cons__scroll {
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.pros-cons__scroll::-webkit-scrollbar { display: none; }
.pros-cons__scroll:focus-visible { outline-offset: 2px; }

.pros-cons__table {
	--row: 65px;
	--pad: 31px;
	--radius: var(--r-l);
	width: 100%;
	min-width: 525px;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	font: var(--f-body-s);
	text-align: left;
}

/* Header row: purple tab with the logo, "Others" label. */
.pros-cons__table thead th,
.pros-cons__table thead td {
	height: 64px;
	padding: 0 8px;
	vertical-align: middle;
	text-align: center;
}

.pros-cons__head--homz {
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--c-primary);
}

.pros-cons__head--others { font: var(--f-header-s); color: var(--c-text-dark); }

.pros-cons__logo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
}

.pros-cons__logo-mark { width: 24px; height: 24px; }
.pros-cons__logo-name { width: 86px; height: 24px; }

/* Body: white box with light rules, purple middle column. */
.pros-cons__table tbody th,
.pros-cons__table tbody td {
	height: var(--row);
	padding: 0 var(--pad);
	border-bottom: 1px solid var(--c-border-light);
	vertical-align: middle;
	background: var(--c-bg-white);
}

.pros-cons__table tbody tr:first-child > * { border-top: 1px solid var(--c-border-light); }
.pros-cons__table tbody tr > :first-child { border-left: 1px solid var(--c-border-light); }
.pros-cons__table tbody tr > :last-child { border-right: 1px solid var(--c-border-light); }
.pros-cons__table tbody tr:first-child > :first-child { border-top-left-radius: var(--radius); }
.pros-cons__table tbody tr:first-child > :last-child { border-top-right-radius: var(--radius); }
.pros-cons__table tbody tr:last-child > :first-child { border-bottom-left-radius: var(--radius); }
.pros-cons__table tbody tr:last-child > :last-child { border-bottom-right-radius: var(--radius); }

.pros-cons__criterion { font: var(--f-subtitle-l); color: var(--c-text-dark); }

.pros-cons__table tbody .pros-cons__homz {
	background: var(--c-primary);
	color: var(--c-text-white);
}

.pros-cons__others { color: var(--c-text-grey); }

@media (max-width: 767px) {
	/* Swipe: the table runs to the screen edge. */
	.pros-cons__scroll { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }

	.pros-cons__table {
		--pad: 15px;
		width: 525px;
		font: var(--f-body-xs);
	}

	.pros-cons__table thead th,
	.pros-cons__table thead td { height: 56px; }

	.pros-cons__head--others { font: var(--f-header-2xs); }
	.pros-cons__logo { gap: 4px; }
	.pros-cons__logo-mark { width: 16px; height: 16px; }
	.pros-cons__logo-name { width: 58px; height: 16px; }
	.pros-cons__criterion { font: var(--f-subtitle-m); }
}