/**
 * Секция «Як замовити» #getting-started — две колонки + таймлайн (2026-10-29).
 * Разметка: template-parts/blocks/steps.php. Макет: reports/new-design-tasks/steps-task (StepsTwoCol / StepsTimelineMobile).
 * Анимация: JS (assets/js/wa-steps.js) ставит .wa-steps--anim → узлы серые, линии пустые; при появлении .is-visible → загораются по очереди.
 * Без JS / prefers-reduced-motion класса нет → сразу финальный вид.
 */

.wa-steps {
	--wa-st-ink: #14233a;
	--wa-st-muted: #4b5563;
	--wa-st-blue: #1a72a8;
	--wa-st-green: #7dc91b;
	--wa-st-head: Montserrat, Arial, sans-serif;
	padding: 80px 0;
	background: #f5f8fb;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2433;
}
.wa-steps *,
.wa-steps *::before,
.wa-steps *::after { box-sizing: border-box; }

.wa-steps__wrap {
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 440px minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

/* ---------- левая колонка (липкая) ---------- */
.wa-steps__aside {
	position: sticky;
	top: calc(var(--wa-adminbar, 0px) + var(--wa-hdr-h-sticky, 64px) + 24px);
}
.wa-steps__eyebrow {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: #eaf4fa;
	color: #1a5f8c;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}
.wa-steps .wa-steps__title {
	margin: 18px 0 0;
	padding: 0;
	width: auto;
	font-family: var(--wa-st-head);
	font-weight: 700;
	font-size: 38px;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--wa-st-ink);
	text-align: left;
	text-transform: none;
}
.wa-steps__lead {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wa-st-muted);
}
.wa-steps .wa-steps__cta {
	margin-top: 28px;
	height: 54px;
	padding: 0 24px;
	border: 0;
	border-radius: 14px;
	background: var(--wa-st-green);
	color: #0e2a06;
	font-family: var(--wa-st-head);
	font-weight: 700;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(125, 201, 27, .3);
	transition: background .2s;
}
.wa-steps .wa-steps__cta:hover { background: #6fb915; }
.wa-steps__cta:focus-visible,
.wa-steps__btn:focus-visible { outline: 2px solid var(--wa-st-blue); outline-offset: 2px; }
.wa-steps__note {
	margin: 18px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wa-st-muted);
}
.wa-steps__note .wa-icon { flex: none; color: var(--wa-st-blue); }

/* ---------- таймлайн ---------- */
.wa-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wa-steps__item {
	position: relative;
	margin: 0;
	padding: 0 0 16px 80px;
	list-style: none;
}
.wa-steps__item:last-child { padding-bottom: 0; }
.wa-steps__item::before,
.wa-steps__item::marker { content: none; }

.wa-steps__track,
.wa-steps__fill {
	position: absolute;
	left: 25px;
	top: 56px;
	bottom: 4px;
	width: 2px;
}
.wa-steps__track { background: #dbe5ee; }
.wa-steps__fill {
	background: linear-gradient(180deg, #1a72a8, #5fae0e);
	transform-origin: top center;
}

.wa-steps__node {
	position: absolute;
	left: 0;
	top: 18px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wa-st-head);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	/* финальное (активное) состояние — по умолчанию */
	background: var(--wa-st-blue);
	border: 2px solid var(--wa-st-blue);
	color: #fff;
	box-shadow: 0 0 0 6px rgba(26, 114, 168, .12);
}
.wa-steps__item:last-child .wa-steps__node {
	background: var(--wa-st-green);
	border-color: var(--wa-st-green);
	color: #0e2a06;
	box-shadow: 0 0 0 6px rgba(125, 201, 27, .18);
}

.wa-steps__card {
	background: #fff;
	border: 1px solid #e3e9ef;
	border-radius: 18px;
	padding: 22px 26px;
	transition: border-color .25s, box-shadow .25s;
}
@media (hover: hover) {
	.wa-steps__card:hover { border-color: #cfe1ee; box-shadow: 0 12px 30px rgba(15, 23, 42, .07); }
}
.wa-steps .wa-steps__name {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--wa-st-head);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	color: var(--wa-st-ink);
	text-transform: none;
}
.wa-steps__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wa-st-muted);
}
.wa-steps__text p,
.wa-steps__text ul,
.wa-steps__text ol { margin: 0 0 8px; }
.wa-steps__text > :last-child { margin-bottom: 0; }
.wa-steps__text ul,
.wa-steps__text ol { padding-left: 20px; }
.wa-steps__text span { font: inherit; color: inherit; }
.wa-steps__text a { color: var(--wa-st-blue); font-weight: 600; text-decoration: none; }
.wa-steps__text a:hover { color: #125a85; text-decoration: underline; }

/* кнопки первого шага */
.wa-steps__actions {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.wa-steps .wa-steps__btn {
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: filter .2s, border-color .2s, background .2s;
}
.wa-steps .wa-steps__btn--tg { background: #229ed9; color: #fff; }
.wa-steps .wa-steps__btn--vb { background: #6f4ec1; color: #fff; }
.wa-steps .wa-steps__btn--phone { background: #fff; border: 1px solid #d5dde6; color: #1d2433; }
.wa-steps .wa-steps__btn--phone .wa-icon { color: var(--wa-st-blue); }
.wa-steps .wa-steps__btn--lead { background: #eef8e2; color: #3f7a0a; }
.wa-steps .wa-steps__btn:hover { text-decoration: none; }
.wa-steps .wa-steps__btn--tg:hover,
.wa-steps .wa-steps__btn--vb:hover { color: #fff; filter: brightness(1.08); }
.wa-steps .wa-steps__btn--phone:hover { color: #1d2433; border-color: #b8c6d3; }
.wa-steps .wa-steps__btn--lead:hover { color: #3f7a0a; background: #e2f2cf; }
.wa-steps__btn-short { display: none; }

/* ---------- анимация (только с классом от JS) ---------- */
.wa-steps--anim .wa-steps__node {
	background: #fff;
	border-color: #cfdde8;
	color: #5b6472;
	box-shadow: none;
}
.wa-steps--anim .wa-steps__fill { transform: scaleY(0); }

.wa-steps--anim.is-visible .wa-steps__node { animation: waStOn .3s ease-out forwards; }
.wa-steps--anim.is-visible .wa-steps__item:last-child .wa-steps__node { animation-name: waStOnGreen; }
.wa-steps--anim.is-visible .wa-steps__fill { animation: waStFill .5s ease-out forwards; }

@keyframes waStOn {
	to { background: #1a72a8; border-color: #1a72a8; color: #fff; box-shadow: 0 0 0 6px rgba(26, 114, 168, .12); }
}
@keyframes waStOnGreen {
	to { background: #7dc91b; border-color: #7dc91b; color: #0e2a06; box-shadow: 0 0 0 6px rgba(125, 201, 27, .18); }
}
@keyframes waStFill { to { transform: scaleY(1); } }

/* задержки: узлы .3 / .95 / 1.45 / 1.95 / 2.45 / 2.95…, линии .5 / 1 / 1.5 / 2 / 2.5… (шаг .5s) */
.wa-steps--anim .wa-steps__item:nth-child(1) .wa-steps__node { animation-delay: .3s; }
.wa-steps--anim .wa-steps__item:nth-child(2) .wa-steps__node { animation-delay: .95s; }
.wa-steps--anim .wa-steps__item:nth-child(3) .wa-steps__node { animation-delay: 1.45s; }
.wa-steps--anim .wa-steps__item:nth-child(4) .wa-steps__node { animation-delay: 1.95s; }
.wa-steps--anim .wa-steps__item:nth-child(5) .wa-steps__node { animation-delay: 2.45s; }
.wa-steps--anim .wa-steps__item:nth-child(6) .wa-steps__node { animation-delay: 2.95s; }
.wa-steps--anim .wa-steps__item:nth-child(7) .wa-steps__node { animation-delay: 3.45s; }
.wa-steps--anim .wa-steps__item:nth-child(8) .wa-steps__node { animation-delay: 3.95s; }
.wa-steps--anim .wa-steps__item:nth-child(1) .wa-steps__fill { animation-delay: .5s; }
.wa-steps--anim .wa-steps__item:nth-child(2) .wa-steps__fill { animation-delay: 1s; }
.wa-steps--anim .wa-steps__item:nth-child(3) .wa-steps__fill { animation-delay: 1.5s; }
.wa-steps--anim .wa-steps__item:nth-child(4) .wa-steps__fill { animation-delay: 2s; }
.wa-steps--anim .wa-steps__item:nth-child(5) .wa-steps__fill { animation-delay: 2.5s; }
.wa-steps--anim .wa-steps__item:nth-child(6) .wa-steps__fill { animation-delay: 3s; }
.wa-steps--anim .wa-steps__item:nth-child(7) .wa-steps__fill { animation-delay: 3.5s; }

/* ---------- ширина: 1400 + поля 20px ниже 1440 ---------- */
@media (max-width: 1439px) {
	.wa-steps__wrap { width: calc(100% - 40px); }
}
@media (max-width: 1199px) {
	.wa-steps__wrap { grid-template-columns: 380px minmax(0, 1fr); gap: 48px; }
	.wa-steps .wa-steps__title { font-size: 34px; }
}

/* ---------- мобилка/планшет ≤1023: колонка сверху (не липкая), таймлайн как в StepsTimelineMobile ---------- */
@media (max-width: 1023px) {
	.wa-steps { padding: 48px 0; }
	.wa-steps__wrap {
		width: calc(100% - 32px);
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.wa-steps__aside { position: static; }
	.wa-steps .wa-steps__title { font-size: 27px; line-height: 1.2; }
	.wa-steps__lead { font-size: 15px; line-height: 1.5; }
	.wa-steps .wa-steps__cta { width: 100%; }

	.wa-steps__item { padding-left: 62px; }
	.wa-steps__track,
	.wa-steps__fill { left: 21px; top: 52px; }
	.wa-steps__node { top: 14px; width: 44px; height: 44px; font-size: 17px; box-shadow: 0 0 0 5px rgba(26, 114, 168, .12); }
	.wa-steps__item:last-child .wa-steps__node { box-shadow: 0 0 0 5px rgba(125, 201, 27, .18); }
	.wa-steps__card { padding: 18px; border-radius: 16px; }
	.wa-steps .wa-steps__name { font-size: 17px; }

	.wa-steps__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wa-steps .wa-steps__btn { height: 42px; min-width: 0; padding: 0 10px; border-radius: 12px; }
	.wa-steps__btn-full { display: none; }
	.wa-steps__btn-short { display: inline; }
}
@media (max-width: 374px) {
	.wa-steps__item { padding-left: 56px; }
	.wa-steps .wa-steps__btn { font-size: 13px; gap: 5px; padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-steps__card { transition: none; }
}