/*
 * Підбір програмних продуктів.
 *
 * The page is a decision aid, so the three questions are the page: numbered,
 * each with the answers it accepts. Everything else supports them.
 */

.sx-pick__title {
	margin: 0;
	font-size: var( --sx-title-page );
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.sx-pick__lead {
	margin: 14px 0 0;
	max-width: 68ch;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var( --sx-text-secondary );
}

.sx-pick__h2 {
	margin: var( --wp--preset--spacing--60 ) 0 var( --wp--preset--spacing--20 );
	font-size: var( --sx-title-section );
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.sx-pick__note {
	margin: 0 0 var( --wp--preset--spacing--30 );
	max-width: 68ch;
	color: var( --sx-text-secondary );
	line-height: 1.6;
}

/* ---- Ціна помилки ---- */

.sx-pick__warn {
	margin-top: var( --wp--preset--spacing--50 );
	padding: 22px 28px;
	background: var( --sx-brand-50 );
	border-radius: var( --sx-radius-lg );
	border-left: 3px solid var( --sx-brand );
}

.sx-pick__warn p {
	margin: 0;
	max-width: 68ch;
	line-height: 1.6;
	font-weight: 500;
}

/* ---- Три питання ---- */

.sx-pick__questions {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 18px;
}

.sx-pick__q {
	padding: 26px 30px;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
}

.sx-pick__q-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.sx-pick__q-num {
	font-family: var( --wp--preset--font-family--manrope, inherit );
	font-size: 1.1rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var( --sx-brand-200 );
}

.sx-pick__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var( --sx-radius-md );
	background: var( --sx-brand-50 );
	color: var( --sx-brand-text );
}

.sx-pick__icon svg {
	width: 21px;
	height: 21px;
}

.sx-pick__q-head h3 {
	margin: 0;
	min-width: 0;
	font-size: 1.15rem;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.sx-pick__q-text {
	margin: 0 0 14px;
	max-width: 72ch;
	color: var( --sx-text-secondary );
	line-height: 1.6;
}

/* The answers a question accepts — a menu to pick from, not prose. */
.sx-pick__options {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.sx-pick__options li {
	position: relative;
	padding: 10px 16px 10px 34px;
	background: var( --sx-surface );
	border-radius: var( --sx-radius-md );
	font-size: 0.95rem;
	line-height: 1.45;
	overflow-wrap: break-word;
}

.sx-pick__options li::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 1.05em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 2px solid var( --sx-brand-200 );
}

/* ---- Базова / ПРОФ ----
   A table, because each row is one capability asked of both versions. Scrolls
   inside its own box so the page body never moves sideways. */

.sx-pick__table-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	/*
	 * The frame and the clipping belong to the same element, so the corners
	 * actually cut the table.
	 *
	 * contain: paint is what makes the page honest. Without it the browser
	 * still counts the table's full 530px in every ancestor's scrollWidth even
	 * though it is clipped and the page does not scroll — the document reported
	 * 135px of overflow that no one could ever reach. This says the box paints
	 * nothing outside itself, and the count stops.
	 */
	contain: paint;
}

.sx-pick__table {
	width: 100%;
	border-collapse: collapse;
}

.sx-pick__table th,
.sx-pick__table td {
	padding: 13px 18px;
	border-bottom: 1px solid var( --sx-border );
	text-align: left;
	vertical-align: top;
	line-height: 1.45;
}

.sx-pick__table thead th {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --sx-text-muted );
	background: var( --sx-surface );
	white-space: nowrap;
}

.sx-pick__table tbody th {
	font-weight: 500;
}

.sx-pick__table tbody tr:last-child th,
.sx-pick__table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * The Базова column wraps. It used to be nowrap, which forced the table
 * 530px wide and put a scrollbar under it on every phone — for the sake of
 * two phrases that fit perfectly well on two lines.
 */
.sx-pick__no {
	color: var( --sx-text-muted );
	font-size: 0.9rem;
}

/* Only the ✓ column is fixed: it holds one character and should not take
   space from the two columns that hold sentences. */
.sx-pick__table thead th:last-child,
.sx-pick__yes {
	width: 1%;
	white-space: nowrap;
	text-align: center;
}

.sx-pick__yes {
	color: var( --sx-brand );
	font-weight: 700;
}

/* The generous half of the answer, so it does not read as small print. */
.sx-pick__verdict {
	margin: var( --wp--preset--spacing--30 ) 0 0;
	padding: 20px 26px;
	max-width: 72ch;
	background: var( --sx-brand-50 );
	border-radius: var( --sx-radius-lg );
	font-weight: 500;
	line-height: 1.6;
}

/* ---- Що входить ---- */

.sx-pick__included {
	margin: 0 0 var( --wp--preset--spacing--30 );
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 14px;
	counter-reset: sx-inc;
}

.sx-pick__included li {
	counter-increment: sx-inc;
	min-width: 0;
	padding: 20px 22px;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	line-height: 1.5;
	overflow-wrap: break-word;
}

.sx-pick__included li::before {
	content: counter( sx-inc, decimal-leading-zero );
	display: block;
	margin-bottom: 8px;
	font-family: var( --wp--preset--font-family--manrope, inherit );
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var( --sx-brand-200 );
}

/* ---- Коли замало ---- */

.sx-pick__limit {
	margin-top: var( --wp--preset--spacing--50 );
	padding: 26px 32px;
	background: var( --sx-surface );
	border-radius: var( --sx-radius-lg );
	border-left: 3px solid var( --sx-brand );
}

.sx-pick__limit .sx-pick__h2 {
	margin-top: 0;
}

.sx-pick__limit p {
	margin: 0 0 12px;
	max-width: 68ch;
	color: var( --sx-text-secondary );
	line-height: 1.6;
}

.sx-pick__limit-link {
	margin: 16px 0 0 !important;
}

.sx-pick__limit-link a {
	color: var( --sx-brand-text );
	font-weight: 600;
}

@media ( max-width: 780px ) {
	.sx-pick__included {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sx-pick__q,
	.sx-pick__warn,
	.sx-pick__limit,
	.sx-pick__verdict {
		padding: 22px 20px;
	}

	.sx-pick__q-head {
		flex-wrap: wrap;
		gap: 10px;
	}

	.sx-pick__table th,
	.sx-pick__table td {
		padding: 12px 14px;
	}

}

/* At 320px the cell padding alone took three cells' worth of the row and the
   table wanted 31px it did not have. Nothing is cut — the cells sit closer. */
@media ( max-width: 400px ) {
	.sx-pick__table th,
	.sx-pick__table td {
		padding: 11px 9px;
	}

	.sx-pick__table thead th {
		font-size: 0.7rem;
		letter-spacing: 0.03em;
	}
}