/*
 * acf/howto - пошаговые инструкции.
 * Шаг делаем карточкой с акцентным номером-бейджем и кадром справа.
 */

main .howto {
	display: grid;
	gap: 14px;
}

main .howto__item {
	align-items: center;
	background: var(--gs-surface);
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
	gap: 24px;
	padding: 20px 22px;
	transition: border-color .25s var(--gs-ease), box-shadow .25s var(--gs-ease);
}

main .howto__item:hover {
	border-color: var(--gs-line-strong);
	box-shadow: var(--gs-shadow);
}

main .howto__content {
	position: relative;
}

/* Шаги без кадра (касса, кабинет) в шахматной раскладке остаются на 50%: чётные
   уезжают в правую половину, слева зияет пустая плита. Отдаём им всю ширину. */
main .howto__item:not(:has(.howto__image)) .howto__content,
main .howto_staggered .howto__item:not(:has(.howto__image)) .howto__content {
	width: 100%;
}

main .howto__counter {
	align-items: center;
	background: var(--gs-accent);
	border-radius: var(--gs-radius-sm);
	color: var(--gs-accent-ink);
	display: inline-flex;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	height: 28px;
	justify-content: center;
	margin-bottom: 10px;
	min-width: 28px;
	padding: 0 8px;
}

main .howto__title {
	color: var(--gs-text);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 8px;
}

main .howto__text {
	color: var(--gs-body);
}

/* Кадры шагов бывают вертикальными (модалки) - без потолка по высоте карточка
   вырастает до 600px под две строки текста. */
main .howto__image img {
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
	display: block;
	margin: 0 auto;
	max-height: 380px;
	max-width: 100%;
	width: auto;
}

main .howto__button {
	margin-top: 14px;
}