/* Blok „Tabela porównawcza" */

.rb-compare {
	background: var(--rb-color-bg);
	padding-block: var(--rb-space-6) var(--rb-space-12);
}

.rb-compare__intro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rb-space-3);
	margin: 0 0 var(--rb-space-8);
	font-size: 1.125rem;   /* 18 px */
	font-weight: 700;
	color: var(--rb-color-heading);
	text-align: center;
}
.rb-compare__intro-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--rb-radius-full);
	background: var(--rb-color-accent);
	color: #fff;
}

/* Na wąskim ekranie tabela przewija się w poziomie zamiast łamać stronę. */
.rb-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.rb-compare__table {
	width: 100%;
	min-width: 720px;
	border-collapse: separate;
	border-spacing: 4px;
	font-size: 0.875rem;   /* 14 px */
	line-height: 1.45;
}

.rb-compare__table th,
.rb-compare__table td {
	padding: var(--rb-space-4) var(--rb-space-3);
	text-align: center;
	vertical-align: middle;
}

/* nagłówki kolumn i wierszy — granat */
.rb-compare__corner,
.rb-compare__col,
.rb-compare__label {
	background: var(--rb-navy-900);
	color: #fff;
	font-weight: 500;
	font-size: 0.9375rem;  /* 15 px */
}
.rb-compare__label { width: 15%; }
.rb-compare__col--featured { background: var(--rb-color-accent); }

/* komórki */
.rb-compare__cell { background: var(--rb-gray-100); color: var(--rb-gray-600); }
.rb-compare__cell--featured {
	background: var(--rb-orange-50);
	color: var(--rb-color-heading);
	font-weight: 600;
}

/* Pierwszy wiersz i pierwsza kolumna dostają zaokrąglone narożniki jak w projekcie. */
.rb-compare__corner { border-top-left-radius: var(--rb-radius-md); }
.rb-compare__table thead th:last-child { border-top-right-radius: var(--rb-radius-md); }
.rb-compare__table tbody tr:last-child th { border-bottom-left-radius: var(--rb-radius-md); }
.rb-compare__table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--rb-radius-md); }

@media (max-width: 900px) {
	.rb-compare { padding-block: var(--rb-space-4) var(--rb-space-8); }
	/* Nagłówek wiersza zostaje w kadrze przy przewijaniu w bok. */
	.rb-compare__label, .rb-compare__corner { position: sticky; left: 0; z-index: 1; }
}