/*
 * LSQ Pipeline Steps — CRM for Culinary Schools landing page (Figma node 3:28)
 * https://www.figma.com/design/9mKhq8AVhxx58wzLdv4bBr/CRM-for-Culinary-Schools-%E2%80%94-Landing-Page?node-id=3-28
 *
 * Horizontal pipeline of cards (1-3 by default) separated by arrow connectors.
 * All selectors are scoped under .lsq-pipeline-steps to avoid bleeding into
 * other Enfold elements.
 */

.lsq-pipeline-steps {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lsq-pipeline-steps__inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: 100%;
}

/* ------- Card ------- */
.lsq-pipeline-steps__step {
	flex: 1 1 0;
	min-width: 0;
	background: #ffffff;
	border: 1px solid #e6e2df;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 8px 24px rgba(13, 3, 0, 0.08);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	overflow: hidden;
}

/* ------- Top row: step pill + icon square ------- */
.lsq-pipeline-steps__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.lsq-pipeline-steps__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--lsq-pipe-pill, #003fbd);
	color: #ffffff;
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	white-space: nowrap;
}

.lsq-pipeline-steps__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--lsq-pipe-icon-bg, #d6e6ff);
	color: var(--lsq-pipe-icon-color, #003fbd);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lsq-pipeline-steps__icon svg {
	width: 28px;
	height: 28px;
	stroke: currentColor;
	display: block;
}

/* ------- Title ------- */
.lsq-pipeline-steps .lsq-pipeline-steps__title {
	margin: 0;
	padding: 0;
	color: #0d0300;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.14px;
}

/* ------- Description ------- */
.lsq-pipeline-steps .lsq-pipeline-steps__desc {
	margin: 0;
	padding: 0;
	color: #4b423a;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
}

/* ------- Tags ------- */
.lsq-pipeline-steps__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

.lsq-pipeline-steps__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	border-radius: 999px;
	background: #f8f6f5;
	border: 1px solid #e6e2df;
	color: #4b423a;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
}

/* ------- Connector arrow between cards ------- */
.lsq-pipeline-steps__connector {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	flex-shrink: 0;
	align-self: stretch;
	color: #ffffff;
}

.lsq-pipeline-steps__connector svg {
	width: 32px;
	height: 32px;
	stroke: currentColor;
	display: block;
}

/* ------- Color variants for each step ------- */
.lsq-pipeline-steps__step--blue {
	--lsq-pipe-pill: #003fbd;
	--lsq-pipe-icon-bg: #d6e6ff;
	--lsq-pipe-icon-color: #003fbd;
}

.lsq-pipeline-steps__step--amber {
	--lsq-pipe-pill: #f59e0b;
	--lsq-pipe-icon-bg: #fef3c7;
	--lsq-pipe-icon-color: #b45309;
}

.lsq-pipeline-steps__step--green {
	--lsq-pipe-pill: #027a48;
	--lsq-pipe-icon-bg: #ecfdf3;
	--lsq-pipe-icon-color: #027a48;
}

.lsq-pipeline-steps__step--slate {
	--lsq-pipe-pill: #475569;
	--lsq-pipe-icon-bg: #e2e8f0;
	--lsq-pipe-icon-color: #475569;
}

.lsq-pipeline-steps__step--purple {
	--lsq-pipe-pill: #6d28d9;
	--lsq-pipe-icon-bg: #ede9fe;
	--lsq-pipe-icon-color: #6d28d9;
}

/* ------- Connector arrow color: inherit from parent text color
   so it can be overridden via the section's text color. Default white
   matches the dark navy background used in the Figma. ------- */
.lsq-pipeline-steps--arrow-dark .lsq-pipeline-steps__connector {
	color: #0d0300;
}

/* ------- Responsive ------- */

/* Tablet: keep horizontal but tighten paddings */
@media (max-width: 1100px) {
	.lsq-pipeline-steps__step {
		padding: 22px;
	}
	.lsq-pipeline-steps .lsq-pipeline-steps__title {
		font-size: 24px;
	}
	.lsq-pipeline-steps__connector {
		width: 36px;
	}
	.lsq-pipeline-steps__connector svg {
		width: 24px;
		height: 24px;
	}
}

/* Mobile: stack the cards vertically and rotate the arrow connector
   so the visual flow still reads top-to-bottom. */
@media (max-width: 768px) {
	.lsq-pipeline-steps__inner {
		flex-direction: column;
		gap: 0;
	}
	.lsq-pipeline-steps__step {
		width: 100%;
		overflow: unset;
	}
	.lsq-pipeline-steps__connector {
		width: 100%;
		height: 48px;
		align-self: center;
		padding: 8px 0;
	}
	.lsq-pipeline-steps__connector svg {
		transform: rotate(90deg);
	}
}