/*
 * Комплексний супровід.
 *
 * The tariff page used to carry its own <style> block inside the post content,
 * with the colours written out by hand — and one of them, #e30613, was the
 * brand red from before the contrast pass, so the page was quietly showing a
 * different red from the rest of the site. Everything here goes through the
 * tokens instead, which is also why it survives the next palette change.
 */

.sx-suprovid__grid {
	display: grid;
	/* minmax( 0, … ) rather than a bare 1fr: the auto floor is min-content, and
	   a long unbroken word in a card would otherwise widen the whole track. */
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 20px;
	margin: 0;
}

/*
 * Three across on a desktop, not two. The grid sits in an alignwide container,
 * so two columns made each card 650px wide and its text ran to something like
 * ninety characters a line — well past where the eye starts losing the return
 * sweep. Three brings the measure back to about fifty. Eight cards over three
 * columns leaves one empty cell in the last row, which is the cheaper problem.
 */
@media ( min-width: 1080px ) {
	.sx-suprovid__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.sx-suprovid__card {
	min-width: 0;
	padding: 26px 28px;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
}

.sx-suprovid__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	border-radius: var( --sx-radius-md );
	background: var( --sx-brand-50 );
	color: var( --sx-brand-text );
}

.sx-suprovid__icon svg {
	width: 22px;
	height: 22px;
}

.sx-suprovid__card h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.sx-suprovid__card p {
	margin: 0;
	color: var( --sx-text-muted );
	font-size: 0.95rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}

/* ---- З чого складається вартість ----
   Two numbered parts, and the numbers mean something: this is the pricing
   formula, package plus extras, not a decorative sequence. */

.sx-suprovid__parts {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 20px;
	margin: 0;
}

.sx-suprovid__part {
	min-width: 0;
	padding: 26px 28px;
	background: var( --sx-surface );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
}

.sx-suprovid__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var( --sx-brand );
	color: var( --sx-white );
	font-weight: 700;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

.sx-suprovid__part h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	line-height: 1.3;
}

.sx-suprovid__part p {
	margin: 0;
	color: var( --sx-text-muted );
	font-size: 0.95rem;
	line-height: 1.6;
}

/* The condition under the plans — quieter than body copy, but it has to be
   readable, so it keeps the muted token rather than dropping below it. */
.sx-suprovid__note {
	color: var( --sx-text-muted );
	font-size: 0.9rem;
}

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

	.sx-suprovid__card,
	.sx-suprovid__part {
		padding: 22px 20px;
	}
}