/*
 * Як проходить впровадження.
 *
 * A numbered spine down the left, because here the numbers are not decoration:
 * the stages happen in this order and each one needs the one before it.
 */

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

.sx-steps__lead {
	margin: 0 0 1.75rem;
	max-width: 66ch;
	color: var( --sx-text-muted );
}

/* ---- Скільки коштує ----
   Set apart on the surface grey: it answers the question the visitor arrived
   with, before the page starts explaining anything. */

.sx-steps__note {
	padding: 26px 32px;
	background: var( --sx-surface );
	border-radius: var( --sx-radius-lg );
	border-left: 3px solid var( --sx-brand );
}

.sx-steps__note .sx-steps__h2 {
	margin-top: 0;
}

.sx-steps__note p {
	margin: 0 0 0.9rem;
	max-width: 68ch;
	color: var( --sx-text-secondary );
}

.sx-steps__note p:last-child {
	margin-bottom: 0;
}

/* ---- Етапи ---- */

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

.sx-steps__item {
	display: grid;
	grid-template-columns: 56px minmax( 0, 1fr );
	gap: 0 20px;
	padding: 24px 26px 24px 20px;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
}

.sx-steps__num {
	font-family: var( --wp--preset--font-family--manrope, inherit );
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	/* Quiet: it marks position in a sequence, it is not the headline. */
	color: var( --sx-brand-200 );
}

.sx-steps__body {
	min-width: 0;
}

.sx-steps__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 1.15rem;
	line-height: 1.25;
}

/* Only the first stage has a real figure behind it, so only the first stage
   wears one. An empty badge on the other seven would invite the reader to
   assume durations nobody has given. */
.sx-steps__time {
	padding: 3px 10px;
	border-radius: 999px;
	background: var( --sx-brand-50 );
	color: var( --sx-brand-text );
	font-family: var( --f-body, inherit );
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.sx-steps__text {
	margin: 0;
	color: var( --sx-text-secondary );
	overflow-wrap: break-word;
}

.sx-steps__meta {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px 28px;
	margin: 16px 0 0;
}

.sx-steps__meta > div {
	min-width: 0;
	padding-top: 12px;
	border-top: 1px solid var( --sx-border );
}

.sx-steps__meta dt {
	margin-bottom: 4px;
	font-family: var( --wp--preset--font-family--manrope, inherit );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --sx-text-muted );
}

.sx-steps__meta dd {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var( --sx-text-secondary );
	overflow-wrap: break-word;
}

/* ---- Кейси ----
   The cards themselves are the site's own (.sx-case, projects.css); only
   the grid they sit in belongs to this page. */

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

@media ( max-width: 900px ) {
	.sx-steps__cases {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

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

@media ( max-width: 700px ) {
	.sx-steps__note {
		padding: 22px 20px;
	}

	.sx-steps__item {
		grid-template-columns: minmax( 0, 1fr );
		gap: 6px;
		padding: 20px;
	}

	.sx-steps__meta {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ---- Вхід зі сторінки послуги ----
   The process page is out of the menu on purpose, so this is its way in: a
   wide, plain row at the end of the service page rather than a link in a
   paragraph nobody reaches. */

.sx-steps-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: var( --wp--preset--spacing--50 );
	padding: 22px 26px;
	background: var( --sx-surface );
	border: 1px solid var( --sx-border );
	border-left: 3px solid var( --sx-brand );
	border-radius: var( --sx-radius-lg );
	color: inherit;
	text-decoration: none;
	transition:
		border-color var( --sx-transition-base ) var( --sx-ease ),
		background-color var( --sx-transition-base ) var( --sx-ease );
}

@media ( hover: hover ) {
	.sx-steps-link:hover {
		background: var( --sx-white );
		border-color: var( --sx-border-strong );
		border-left-color: var( --sx-brand );
	}
}

.sx-steps-link__text {
	min-width: 0;
}

.sx-steps-link__title {
	display: block;
	font-family: var( --wp--preset--font-family--manrope, inherit );
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

.sx-steps-link__note {
	display: block;
	margin-top: 4px;
	color: var( --sx-text-muted );
	font-size: 0.92rem;
	line-height: 1.55;
}

.sx-steps-link__arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var( --sx-brand );
	color: var( --sx-white );
	font-size: 1.2rem;
	transition: transform var( --sx-transition-base ) var( --sx-ease );
}

@media ( hover: hover ) {
	.sx-steps-link:hover .sx-steps-link__arrow {
		transform: translateX( 3px );
	}
}

@media ( max-width: 600px ) {
	.sx-steps-link {
		padding: 18px 20px;
	}
}

/* ---- Два випадки: типовий проєкт і складний ----
   Side by side, because the point is that they are different answers to the
   same question — one under the other reads as a sequence. */

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

.sx-steps__answer {
	min-width: 0;
	padding: 22px 24px;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
}

.sx-steps__answer-kicker {
	margin: 0 0 4px !important;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --sx-text-muted );
}

.sx-steps__answer-lead {
	margin: 0 0 10px !important;
	font-family: var( --wp--preset--font-family--manrope, inherit );
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var( --sx-brand-text );
}

.sx-steps__answer p:last-child {
	margin: 0 !important;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var( --sx-text-secondary );
}

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

	.sx-steps__answer {
		padding: 20px;
	}
}

/* ---- Заголовок сторінки й для кого ----
   Both came in when the service page and the stages page became one. */

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

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

/* Chips, not cards: six single words carry no description, and six cards for
   six words would be six boxes of white space. */
.sx-steps__audience {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var( --wp--preset--spacing--50 );
	padding: 0;
	list-style: none;
}

.sx-steps__audience li {
	padding: 9px 18px;
	background: var( --sx-surface );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-pill, 999px );
	font-weight: 600;
	font-size: 0.95rem;
}

/* Cleared for the sticky header, so /#etapy lands below it. */
#etapy {
	scroll-margin-top: calc( 24px + var( --sx-sticky-top, 0px ) );
}