/**
 * ZeltaCode Bottleneck
 *
 * Every value a control writes is a custom property set on the element the
 * control targets; this file only reads them. That is deliberate. Elementor's
 * own control CSS is unscoped and outranks a plugin media query, so a property
 * written here and also written by a control would be unfixable at breakpoints.
 * Anything that needs to change per breakpoint is a breakpoint default on the
 * control instead — the two exceptions below only flip layout properties that
 * no control touches.
 */

.zcbn {
	position: relative;
	box-sizing: border-box;
}

.zcbn *,
.zcbn *::before,
.zcbn *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Intro -- */

.zcbn__intro {
	display: block;
	max-width: 100%;
}

.zcbn__eyebrow {
	display: block;
	margin: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}

.zcbn__heading {
	display: block;
	margin: 0;
	padding: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- Stage -- */

.zcbn__stage {
	display: flex;
	align-items: flex-end;
	gap: var(--zcbn-stage-gap, 22px);
	max-width: 100%;
}

/**
 * flex-grow is the group's card count, set inline by the renderer. With both
 * groups on flex-basis 0 that makes every card the same width regardless of
 * how the steps are split between them.
 */
.zcbn__group {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: var(--zcbn-grow, 1) 1 0;
	min-width: 0;
}

.zcbn__group-label {
	display: block;
	margin: 0;
	overflow-wrap: break-word;
}

.zcbn__cards {
	display: grid;
	grid-template-columns: repeat(var(--zcbn-cols, var(--zcbn-count, 1)), minmax(0, 1fr));
	gap: var(--zcbn-card-gap, 10px);
	min-width: 0;
}

/* ---------------------------------------------------------------- Cards -- */

.zcbn__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: 0;
	overflow: hidden;
}

/**
 * The accent sits on a pseudo-element rather than border-top, so switching it
 * off or changing its thickness cannot shift the card's height by a pixel.
 */
.zcbn__card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--zcbn-accent-h, 2px);
	background-color: var(--zcbn-accent-c, transparent);
	pointer-events: none;
}

.zcbn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex: 0 0 auto;
}

.zcbn__icon i {
	font-size: inherit;
	line-height: 1;
}

.zcbn__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

.zcbn__label {
	display: block;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* -------------------------------------------------------------- Summary -- */

.zcbn__foot {
	display: grid;
	grid-template-columns: minmax(0, var(--zcbn-lead-w, 31%)) minmax(0, 1fr);
	gap: var(--zcbn-foot-gap, 40px);
	align-items: start;
	max-width: 100%;
}

.zcbn__lead,
.zcbn__body {
	min-width: 0;
	overflow-wrap: break-word;
}

.zcbn__lead > *:first-child,
.zcbn__body > *:first-child {
	margin-top: 0;
}

.zcbn__lead > *:last-child,
.zcbn__body > *:last-child {
	margin-bottom: 0;
}

.zcbn__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------- Stacking --- */

@media (max-width: 1024px) {

	.zcbn-stack-tablet .zcbn__stage {
		flex-direction: column;
		align-items: stretch;
	}

	.zcbn-stack-tablet .zcbn__group {
		flex: 0 0 auto;
	}

	.zcbn-stack-tablet .zcbn__foot {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {

	.zcbn-stack-mobile .zcbn__stage {
		flex-direction: column;
		align-items: stretch;
	}

	.zcbn-stack-mobile .zcbn__group {
		flex: 0 0 auto;
	}

	.zcbn-stack-mobile .zcbn__foot {
		grid-template-columns: minmax(0, 1fr);
	}
}