/**
 * Process Steps — expanding columns.
 *
 * Brand colours: ink #1E1F1E · slate #454645 · brand #119100 ·
 *                sky #35AFC9 · cloud #F3EFE3
 */

.nops-ps {
	position: relative;
	width: 100%;
	background: #1e1f1e; /* darker */
	color: #f3efe3; /* cloud */
	padding: 98px 0;
}

.nops-ps-heading {
	margin: 0 0 56px;
	font-weight: 400;
	line-height: 1.1;
	color: #f3efe3;
	font-size: clamp(2rem, 2.6vw, 50px); /* 50px */
}

/* ---- Columns ---- */
.nops-ps-cols {
	display: flex;
	align-items: stretch;
}

.nops-ps-col {
	position: relative;
	flex: 1 1 0;              /* collapsed columns share the remaining space */
	min-width: 0;
	padding: 0 30px;         /* 30px left/right */
	border-left: 1px solid #35afc9; /* 1px blue border to the left */
	cursor: pointer;
	transition: flex-basis 0.45s ease, flex-grow 0.45s ease, opacity 0.3s ease;
}

/* Active column takes 40%; the rest share the other 60%. flex-basis keeps
   the active one at 40% regardless of how many steps there are. */
.nops-ps-col.is-active {
	flex: 0 0 40%;
}

/* Hover fallback (no JS). */
.nops-ps-cols:hover .nops-ps-col:hover {
	flex: 0 0 40%;
}

.nops-ps-cols:hover .nops-ps-col:not(:hover) {
	flex: 1 1 0;
}

/* Number + title */
.nops-ps-num {
	display: block;
	font-weight: 400;
	line-height: 1;
	font-size: clamp(2rem, 2.6vw, 50px); /* 50px */
	color: #f3efe3;
}

.nops-ps-title {
	margin: 7px 0 0; /* 7px below the number */
	font-weight: 400;
	line-height: 1.2;
	font-size: clamp(1.5rem, 1.56vw, 30px); /* 30px */
	color: #f3efe3;
	white-space: nowrap;
}

/* Collapsed columns: 60% opacity, number + title only. */
.nops-ps-col:not(.is-active) .nops-ps-num,
.nops-ps-col:not(.is-active) .nops-ps-title {
	opacity: 0.6;
}

/* ---- Detail (shown only when active) ---- */
.nops-ps-detail {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.nops-ps-col.is-active .nops-ps-detail {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease 0.1s;
}

.nops-ps-text {
	margin-top: 29px; /* 29px below title */
	font-size: clamp(1rem, 1.04vw, 20px); /* 20px */
	letter-spacing: 0.015em;
	line-height: 28px;
	color: #f3efe3;
}

.nops-ps-text p {
	margin: 0;
}

.nops-ps-image {
	display: block;
	width: 100%;      /* full width of the column */
	height: 280px;    /* fixed height */
	margin-top: 24px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #3a3b3a;
}

.nops-ps-cta {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-top: 54px; /* 54px below the picture */
	padding: 14px 24px;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 1px solid #35afc9;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nops-ps-cta,
.nops-ps-cta:link,
.nops-ps-cta:visited,
.nops-ps-cta:focus {
	color: #ffffff;
}

.nops-ps-cta:hover {
	background: #35afc9;
	color: #ffffff;
}

.nops-ps-arrow {
	display: block;
	flex: 0 0 auto;
}

/* ---- Below 1500px: static 2×2 grid, all detail visible (no expand). ---- */
@media (max-width: 1499px) {
	.nops-ps-cols {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 48px 0;
	}

	.nops-ps-col,
	.nops-ps-col:hover,
	.nops-ps-cols:hover .nops-ps-col:hover,
	.nops-ps-cols:hover .nops-ps-col:not(:hover) {
		flex: none;
		width: auto;
		padding: 0 30px;
		border-left: 1px solid #35afc9;
		cursor: default;
		transition: none; /* no animation / movement on hover */
	}

	/* No hover/active behaviour here — every column shows in full. Match the
	   specificity of the collapsed rule so nothing stays dimmed. */
	.nops-ps-col:not(.is-active) .nops-ps-num,
	.nops-ps-col:not(.is-active) .nops-ps-title,
	.nops-ps-col .nops-ps-num,
	.nops-ps-col .nops-ps-title {
		opacity: 1;
	}

	.nops-ps-col .nops-ps-detail,
	.nops-ps-col.is-active .nops-ps-detail {
		opacity: 1 !important;
		visibility: visible !important;
		transition: none !important;
	}

	.nops-ps-title {
		white-space: normal;
	}
}

/* ---- Below 1024px: single column stack, no hover behaviour. ---- */
@media (max-width: 1024px) {
	.nops-ps-cols {
		grid-template-columns: 1fr;
		gap: 48px 0;
	}

	.nops-ps-col,
	.nops-ps-col:hover,
	.nops-ps-cols:hover .nops-ps-col:hover,
	.nops-ps-cols:hover .nops-ps-col:not(:hover) {
		flex: none;
		width: auto;
		padding: 32px 30px;
		cursor: default;
		transition: none;
	}
}