/**
 * Numbered steps.
 *
 * brand.css .steps / .step.
 */

.nysf-steps {
	--nysf-steps-per-row: 3;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nysf-step {
	position: relative;
	text-align: center;
	padding: 0 12px;
}

.nysf-step__num {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--nysf-light);
	border: 2px solid var(--nysf-gold);
	color: var(--nysf-navy);
	font-family: var(--nysf-display);
	font-weight: 700;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	transition: 0.25s;
}

.nysf-step:hover .nysf-step__num {
	background: var(--nysf-gold);
}

.nysf-step__title {
	font-family: var(--nysf-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--nysf-navy);
	margin: 0 0 8px;
}

.nysf-step__text {
	color: var(--nysf-ink-soft);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
}

/*
 * The connector between steps.
 *
 * brand.css uses `assets/images/arrow.svg`, a hand-drawn gold brush arrow.
 * This was drawing a straight line and chevron in CSS instead, on the
 * reasoning that it saved a request and could inherit the gold. It does
 * neither usefully, and it is simply a different mark: the design's arrow is
 * sketched, not geometric. The real asset ships with the theme.
 *
 * Hidden on the last item of each row so no arrow points into empty space,
 * keyed off the class the widget writes rather than a custom property, which
 * Elementor puts in a stylesheet where an attribute selector cannot see it.
 */
.nysf-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 21px;
	right: -36px;
	width: 48px;
	height: 26px;
	background: url('../../img/arrow.svg') center/contain no-repeat;
}

.nysf-steps--cols-2 .nysf-step:nth-child(2n)::after,
.nysf-steps--cols-3 .nysf-step:nth-child(3n)::after,
.nysf-steps--cols-4 .nysf-step:nth-child(4n)::after {
	display: none;
}

@media (max-width: 980px) {
	.nysf-steps {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Two columns now, so the row ends move. Reinstate the arrows the
	   three-column rule hid, then hide every second one instead. */
	.nysf-step:not(:last-child)::after {
		display: block;
	}

	.nysf-step:nth-child(2n)::after {
		display: none;
	}
}

@media (max-width: 620px) {
	.nysf-steps {
		grid-template-columns: 1fr !important;
	}

	/* Stacked, the horizontal connector points the wrong way. */
	.nysf-step::after {
		display: none;
	}
}

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