/* ==========================================================================
   FWPN Block: Process Steps (BEM: block-process-steps)
   ========================================================================== */

.block-process-steps {
	position: relative;
	width: 100%;
	padding: 96px 32px;
	background-color: transparent;
	overflow: hidden;
}

/* --- Decorative rectangles (ozdobniki) --- */

.block-process-steps::before,
.block-process-steps::after {
	content: "";
	position: absolute;
	width: 247px;
	height: 176px;
	border-radius: 40px;
}

/* Red rectangle on right side */
.block-process-steps::before {
	top: 48px;
	right: -123px;
	background-color: var(--color-cta, #a41419);
}

/* Purple rectangle on left side */
.block-process-steps::after {
	bottom: 48px;
	left: -123px;
	background-color: var(--color-accent-dark, #4833a6);
}

.block-process-steps__container {
	max-width: 1920px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

/* --- Section title --- */

.block-process-steps__title {
	font-family: var(--font-family, "IBM Plex Sans", sans-serif);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black, #000);
	text-align: center;
	margin: 0;
}

/* --- Grid with timeline --- */

.block-process-steps__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	max-width: 900px;
	width: 100%;
}

/* Timeline (vertical dashed line) */
.block-process-steps__grid::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 12px;
	bottom: 12px;
	width: 4px;
	transform: translateX(-50%);
	background-image: repeating-linear-gradient(
		to bottom,
		var(--color-accent, #7666bc) 0,
		var(--color-accent, #7666bc) 8px,
		transparent 8px,
		transparent 16px
	);
}

/* --- Step item --- */

.block-process-steps__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	grid-row: var(--step-row);
}

/* Zigzag positioning via CSS Grid */
.block-process-steps__step--left {
	grid-column: 1;
	justify-content: flex-end;
	padding-right: 40px;
}

.block-process-steps__step--right {
	grid-column: 2;
	justify-content: flex-start;
	padding-left: 40px;
}

/* --- Dot --- */

.block-process-steps__dot {
	position: absolute;
	top: 0;
	width: 24px;
	height: 24px;
	z-index: 1;
}

.block-process-steps__step--left .block-process-steps__dot {
	right: -12px;
}

.block-process-steps__step--right .block-process-steps__dot {
	left: -12px;
}

.block-process-steps__dot-icon {
	width: 24px;
	height: 24px;
	color: var(--color-primary-dark, #1a0090);
}

/* --- Card --- */

.block-process-steps__card {
	background-color: var(--navy-50);
	padding: 24px 16px;
	min-height: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	max-width: 400px;
}

/* Border-radius based on position */
.block-process-steps__step--left .block-process-steps__card {
	border-radius: 40px 40px 40px 12px;
}

.block-process-steps__step--right .block-process-steps__card {
	border-radius: 12px 40px 40px 40px;
}

/* --- Number --- */

.block-process-steps__number {
	font-family: var(--font-family, "IBM Plex Sans", sans-serif);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary-dark, #1a0090);
}

/* --- Step title --- */

.block-process-steps__step-title {
	font-family: var(--font-family, "IBM Plex Sans", sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-primary-dark, #1a0090);
	text-align: center;
	margin: 0;
}

/* --- Step link --- */

.block-process-steps__step-link {
	color: inherit;
	text-decoration: none;
}

.block-process-steps__step-link:hover {
	text-decoration: underline;
}

/* --- Description --- */

.block-process-steps__description {
	font-family: var(--font-family, "IBM Plex Sans", sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-black, #000);
	text-align: center;
	margin: 0;
}

/* --- CTA Button --- */

.block-process-steps__cta {
	margin-top: 32px;
}

.block-process-steps__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 356px;
	padding: 12px 24px;
	background-color: var(--color-cta, #be161d);
	color: var(--neutral-white);
	font-family: var(--font-family, "IBM Plex Sans", sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	border-radius: var(--corner-s, 12px);
	transition: background-color 0.2s ease;
}

.block-process-steps__button:hover {
	background-color: var(--color-cta-hover);
}

/* --- Placeholder --- */

.block-process-steps--placeholder {
	min-height: 200px;
}

.block-process-steps__placeholder-text {
	font-family: var(--font-family, "IBM Plex Sans", sans-serif);
	font-size: 16px;
	color: var(--neutral-500);
	text-align: center;
	padding: 48px;
}

/* ==========================================================================
   Responsive: mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
	.block-process-steps {
		padding: 48px 16px;
	}

	/* Hide decorative rectangles on mobile */
	.block-process-steps::before,
	.block-process-steps::after {
		display: none;
	}

	.block-process-steps__container {
		gap: 16px;
	}

	.block-process-steps__title {
		font-size: 24px;
	}

	/* Switch to single column layout */
	.block-process-steps__grid {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding-left: 28px;
	}

	/* Timeline on the left */
	.block-process-steps__grid::before {
		left: 9px;
		top: 12px;
		bottom: 12px;
		transform: none;
	}

	/* Reset positioning */
	.block-process-steps__step--left,
	.block-process-steps__step--right {
		padding-left: 0;
		padding-right: 0;
		justify-content: flex-start;
	}

	/* Dot on the left */
	.block-process-steps__step--left .block-process-steps__dot,
	.block-process-steps__step--right .block-process-steps__dot {
		left: -28px;
		right: auto;
	}

	/* Uniform border-radius on mobile */
	.block-process-steps__step--left .block-process-steps__card,
	.block-process-steps__step--right .block-process-steps__card {
		border-radius: 12px 24px 24px 24px;
		padding: 16px 12px;
		min-height: 160px;
		max-width: none;
	}

	.block-process-steps__number {
		font-size: 40px;
	}

	.block-process-steps__step-title,
	.block-process-steps__description {
		font-size: 16px;
	}

	.block-process-steps__button {
		width: 100%;
		min-width: unset;
		padding: 12px 16px;
		font-size: 18px;
	}
}