/* Berlight Steps + Promo Banner */

.berlight-steps {
	display: flex;
	align-items: stretch;
	gap: 40px;
	flex-wrap: wrap;
}

.berlight-steps--steps-only .berlight-steps__col--steps,
.berlight-steps--banner-only .berlight-steps__col--banner {
	width: 100%;
}

.berlight-steps--both .berlight-steps__col--steps {
	flex: 1 1 560px;
	min-width: 300px;
}

.berlight-steps--both .berlight-steps__col--banner {
	flex: 1 1 320px;
	min-width: 260px;
}

.berlight-steps--banner-right .berlight-steps__col--steps  { order: 1; }
.berlight-steps--banner-right .berlight-steps__col--banner { order: 2; }
.berlight-steps--banner-left .berlight-steps__col--steps   { order: 2; }
.berlight-steps--banner-left .berlight-steps__col--banner  { order: 1; }

/* ---------- Header ---------- */
.berlight-steps__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.berlight-steps__eyebrow {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #e8646f;
}

.berlight-steps__heading {
	margin: 0;
	font-size: 30px;
	line-height: 1.3;
	font-weight: 700;
	color: #1a1a1a;
}

.berlight-steps__top-btn {
	flex: 0 0 auto;
	padding: 12px 26px;
	border-radius: 30px;
	border: 1.5px solid #e8646f;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #e8646f;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.berlight-steps__top-btn:hover {
	background: #e8646f;
	color: #ffffff;
}

/* ---------- Step row ---------- */
.berlight-step-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px var( --berlight-step-gap, 40px );
}

.berlight-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.berlight-step__circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 110px;
	margin-bottom: 18px;
	border-radius: 50%;
	border: 1.5px solid rgba(232, 100, 111, 0.35);
	background: rgba(232, 100, 111, 0.06);
	flex-shrink: 0;
}

.berlight-step__circle svg {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: #e8646f;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.berlight-step__title {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 700;
	color: #1a1a1a;
}

.berlight-step__desc {
	display: block;
	font-size: 13px;
	line-height: 1.6;
	color: #6b6b6b;
}

/* Connector.
   Drawn by each step's own ::after, anchored to that step's circle. Because
   the circle's height is a known variable, `top` can be computed exactly —
   no measuring, no JS, so it renders identically on the live page and inside
   the Elementor editor, and it cannot vanish if a script fails to run.
   JS is used only to hide the connector on a step that ends a wrapped row. */
.berlight-step {
	position: relative;
	flex: 1 1 130px;
	min-width: 110px;
	max-width: 180px;
}

.berlight-step::after {
	content: "";
	position: absolute;
	/* Centre of the circle: half its height. Everything above the circle
	   is nothing, so this is exact at any circle size. */
	top: calc( var( --berlight-circle-size, 110px ) / 2 );
	/* Run from this circle's edge to the next circle's edge.
	   50% is this step's centre; the next step's centre is exactly one step
	   width plus one column gap further on, so offsetting by the circle's
	   radius at each end lands on the circle edges — at any step width. */
	left: calc( 50% + var( --berlight-circle-size, 110px ) / 2 + 12px );
	/* The extra arrow-size term stops the dashes short of the arrowhead
	   instead of running underneath it. */
	right: calc(
		-50% - var( --berlight-step-gap, 40px )
		+ var( --berlight-circle-size, 110px ) / 2
		+ 12px + var( --berlight-arrow-size, 9px )
	);
	height: var( --berlight-arrow-thickness, 2px );
	transform: translateY( -50% );
	background-image: repeating-linear-gradient(
		to right,
		var( --berlight-arrow-color, #e8646f ) 0,
		var( --berlight-arrow-color, #e8646f ) 7px,
		transparent 7px,
		transparent 13px
	);
	pointer-events: none;
}

/* Arrowhead at the end of each connector. */
.berlight-step::before {
	content: "";
	position: absolute;
	top: calc( var( --berlight-circle-size, 110px ) / 2 );
	right: calc( -50% - var( --berlight-step-gap, 40px ) + var( --berlight-circle-size, 110px ) / 2 + 12px );
	width: var( --berlight-arrow-size, 9px );
	height: var( --berlight-arrow-size, 9px );
	border-top: var( --berlight-arrow-thickness, 2px ) solid var( --berlight-arrow-color, #e8646f );
	border-right: var( --berlight-arrow-thickness, 2px ) solid var( --berlight-arrow-color, #e8646f );
	transform: translate( 50%, -50% ) rotate( 45deg );
	border-radius: 2px;
	pointer-events: none;
	z-index: 1;
}

/* The last step has nothing to point at. JS adds this class to any step that
   ends a wrapped row; the :last-child rule alone covers the common case and
   works even with JS disabled. */
.berlight-step:last-child::after,
.berlight-step:last-child::before,
.berlight-step.is-row-end::after,
.berlight-step.is-row-end::before,
.berlight-step-row[data-connector="none"] .berlight-step::after,
.berlight-step-row[data-connector="none"] .berlight-step::before {
	content: none;
}

.berlight-step-row[data-connector="solid"] .berlight-step::after {
	background-image: none;
	background-color: var( --berlight-arrow-color, #e8646f );
}

/* Step number badge on the circle. */
.berlight-step__num {
	position: absolute;
	top: 2px;
	right: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: var( --berlight-num-bg, #e8646f );
	color: var( --berlight-num-color, #ffffff );
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

.berlight-banner {
	position: relative;
	width: 100%;
	min-height: 320px;
	border-radius: 16px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: #e8646f;
}

.berlight-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(100deg, #e8646f 0%, #e8646f 45%, transparent 85%);
}

.berlight-banner__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 100%;
	max-width: 62%;
	padding: 36px;
	gap: 20px;
}

.berlight-banner__text {
	margin: 0;
	font-size: 22px;
	line-height: 1.4;
	font-weight: 600;
	color: #ffffff;
}

.berlight-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border-radius: 8px;
	background: #a5293c;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.berlight-banner__btn:hover {
	transform: translateY(-2px);
	opacity: 0.92;
}

@media (max-width: 767px) {
	.berlight-steps__heading {
		font-size: 24px;
	}

	/* Four steps cannot fit across a phone, so they become a 2x2 grid.
	   A grid also keeps the columns equal, which flex-wrap does not: with
	   wrapping, a leftover step would sit alone and centred on its own row. */
	.berlight-step-row {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		/* 1fr rows: without this, a row whose text runs to three lines is
		   taller than a two-line row, so cards across the grid stay ragged
		   even though each row is internally even. */
		grid-auto-rows: 1fr;
		gap: 12px;
		justify-content: stretch;
		/* The desktop rule is flex-start, which lets each card stop at its own
		   text height and makes neighbours ragged. Stretch gives every card in
		   a row the height of the tallest one. */
		align-items: stretch;
	}

	/* Steps sit on separate rows here, so there is no left-to-right flow
	   for a connector to follow. */
	.berlight-step::after,
	.berlight-step::before {
		content: none;
	}

	/* Each step becomes a rounded card. With the connectors gone, the card
	   edge is what groups an icon with its own text, and the number badge
	   keeps the sequence readable. */
	.berlight-step {
		max-width: none;
		min-width: 0;
		height: 100%;
		box-sizing: border-box;
		padding: 22px 12px 18px;
		border: 1px solid var( --berlight-card-border, rgba(232, 100, 111, 0.22) );
		border-radius: var( --berlight-card-radius, 16px );
		background: var( --berlight-card-bg, transparent );
	}

	.berlight-step__circle {
		margin-bottom: 12px;
	}

	.berlight-step__num {
		top: -4px;
		right: -4px;
		min-width: 22px;
		height: 22px;
		font-size: 11px;
	}

	.berlight-banner__content {
		max-width: 100%;
		background: rgba(0, 0, 0, 0.15);
	}
}