/**
 * Enrolment Steps widget.
 */

/* Elementor sizes a widget in a row container to its content, which left the
   list 40px short of the section on a phone and pinned it to the left edge. */
.elementor-widget-fc_enrolment_steps {
	width: 100%;
}

.fc-steps {
	--fc-steps-teal: #0d8a91;
	--fc-steps-teal-dark: #0a5f66;
	--fc-steps-teal-light: #3fb3ba;
	--fc-steps-ink: #0b2b33;
	--fc-steps-track: #e2e8f0;
	--fc-steps-icon: 72px;
	--fc-steps-columns: 8;
	position: relative;
}

/* Connector track — sits behind the icons, centred on them. */
.fc-steps__track,
.fc-steps__progress {
	position: absolute;
	top: calc( var( --fc-steps-icon ) / 2 - 2px );
	left: calc( 50% / var( --fc-steps-columns ) );
	height: 4px;
	border-radius: 999px;
	display: none;
}

.fc-steps__track {
	right: calc( 50% / var( --fc-steps-columns ) );
	background: var( --fc-steps-track );
}

.fc-steps__progress {
	width: 0;
	background: linear-gradient( to right, var( --fc-steps-teal-light ), var( --fc-steps-teal ), var( --fc-steps-teal-dark ) );
	transition: width 1700ms ease-out;
}

.fc-steps.is-visible .fc-steps__progress {
	width: calc( 100% - ( 100% / var( --fc-steps-columns ) ) );
}

.fc-steps__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 1, minmax( 0, 1fr ) );
	gap: 40px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.fc-steps__icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --fc-steps-icon );
	height: var( --fc-steps-icon );
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .05 );
	box-shadow: 0 0 0 4px #fff, 0 1px 2px rgba( 0, 0, 0, .05 );
	background: var( --fc-steps-teal );
	color: #fff;
	transform: rotate( -8deg ) scale( .8 );
	opacity: 0;
	transition: transform 500ms ease, opacity 500ms ease;
}

.fc-steps__item:nth-child( even ) .fc-steps__icon {
	background: var( --fc-steps-teal-dark );
}

.fc-steps.is-visible .fc-steps__icon {
	transform: rotate( 0 ) scale( 1 );
	opacity: 1;
}

.fc-steps__icon svg {
	width: 32px;
	height: 32px;
	fill: currentColor;
}

.fc-steps__icon i {
	font-size: 28px;
	line-height: 1;
}

.fc-steps__num {
	position: absolute;
	top: -8px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var( --fc-steps-ink );
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	box-shadow: 0 0 0 2px #fff;
}

.fc-steps__body {
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 700ms ease, transform 700ms ease;
}

.fc-steps.is-visible .fc-steps__body {
	opacity: 1;
	transform: none;
}

.fc-steps__label {
	display: block;
	margin-top: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --fc-steps-teal );
}

.fc-steps__title {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var( --fc-steps-ink );
}

.fc-steps__text {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.65;
	color: #475569;
}

/* Below the boxed desktop container (1140px) the section runs edge to edge: its
   Elementor container has no side padding, so the icon boxes sat hard against
   the screen and their white ring was cut off. 16px matches the other sections
   on the page; above 1023px the boxed width supplies the gutter already. */
@media ( max-width: 1023px ) {
	.fc-steps {
		padding-inline: 16px;
	}
}

/* Phones: centred cards stacked one per row ran to eight screens of scroll and
   squeezed each caption into a 200px column. A left-aligned timeline — icon,
   then text, joined by a rail — reads as a sequence and halves the height. */
@media ( max-width: 639px ) {
	.fc-steps__list {
		gap: 20px;
	}

	.fc-steps__item {
		position: relative;
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		text-align: start;
		/* ponytail: declared on the item, not on .fc-steps, on purpose. The
		   widget's "Icon box size" control writes --fc-steps-icon onto
		   {{WRAPPER}} .fc-steps, which outranks anything we can say about
		   .fc-steps here - so mobile kept rendering 72px desktop icons. A
		   declaration on the element beats an inherited one whatever the
		   specificity. Cost: the control's mobile value no longer reaches the
		   timeline; move this back up and raise the selector if that is wanted. */
		--fc-steps-icon: 56px;
	}

	.fc-steps__item:not( :last-child )::before {
		position: absolute;
		top: calc( var( --fc-steps-icon ) + 6px );
		bottom: -26px;
		left: calc( var( --fc-steps-icon ) / 2 - 1px );
		width: 2px;
		border-radius: 999px;
		background: var( --fc-steps-track );
		content: "";
	}

	.fc-steps__icon {
		flex: 0 0 auto;
		border-radius: 14px;
	}

	.fc-steps__icon svg {
		width: 26px;
		height: 26px;
	}

	.fc-steps__body {
		flex: 1;
		min-width: 0;
		padding-top: 2px;
	}

	.fc-steps__label {
		margin-top: 0;
	}

	.fc-steps__title {
		font-size: 15px;
	}

	.fc-steps__text {
		font-size: 13px;
	}
}

@media ( min-width: 640px ) {
	.fc-steps__list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1024px ) {
	.fc-steps__list {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1280px ) {
	.fc-steps__list {
		grid-template-columns: repeat( var( --fc-steps-columns ), minmax( 0, 1fr ) );
	}

	.fc-steps__track,
	.fc-steps__progress {
		display: block;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fc-steps__icon,
	.fc-steps__body,
	.fc-steps__progress {
		transition: none;
	}
}