/**
 * Comparison-page-specific pieces: comparison table, pros/cons columns.
 * Shares the article hero/layout/TOC/prose styling in guide.css.
 */

.compare-table-wrap {
	overflow-x: auto;
	margin-block: var(--space-5);
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
}

.compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.compare-table th,
.compare-table td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	white-space: nowrap;
}

.compare-table thead th {
	background: var(--color-bg-light);
	font-family: var(--font-heading);
}

.compare-table tbody tr:last-child td {
	border-bottom: 0;
}

.compare-table__feature {
	font-weight: 600;
	white-space: normal;
}

.pros-cons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-block: var(--space-5);
}

@media (min-width: 640px) {
	.pros-cons { grid-template-columns: 1fr 1fr; }
}

.pros-cons__col {
	background: var(--color-bg-light);
	border-radius: var(--radius);
	padding: var(--space-5);
}

.pros-cons__title {
	font-size: 1.05rem;
	margin-bottom: var(--space-3);
}

.pros-cons__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.pros-cons__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: 0.9rem;
}

.pros-cons__list .kabomal-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}

.pros-cons__list--pros .kabomal-icon { color: var(--color-secondary); }
.pros-cons__list--cons .kabomal-icon { color: var(--color-danger); }

/* Rating stars (Reviews) */
.rating-stars {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-block: var(--space-3);
}

.rating-stars__star {
	color: var(--color-border);
	font-size: 1.25rem;
	line-height: 1;
}

.rating-stars__star.is-filled {
	color: var(--color-accent);
}

.rating-stars__value {
	margin-left: var(--space-2);
	font-weight: 700;
	font-size: 0.9rem;
	color: #6B7280;
}