/* =========================================================
   Alperia Steps - Frontend Styles
   ========================================================= */

.alperia-steps-section {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
}

.alperia-steps-section * {
	box-sizing: border-box;
}

.alperia-steps-main-title {
	font-size: 36px;
	color: #00547A;
	font-weight: 500;
	text-align: center;
	line-height: 1.3;
	margin: 0 0 50px;
}

/* -------------------------
   Desktop / default: layout orizzontale
   ------------------------- */
.alperia-steps-wrapper {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
}

.alperia-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1 1 0;
	padding: 0 20px;
}

/* Linea che collega un cerchio al successivo.
   Parte dal centro del cerchio corrente e arriva esattamente
   al centro del cerchio successivo: non esiste quindi alcuna
   linea prima del primo cerchio ne' dopo l'ultimo. */
.alperia-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 23px; /* metà altezza del cerchio (46px / 2) */
	left: 50%;
	width: 100%;
	height: 2px;
	background-color: #2DA0BD;
	z-index: -1;
}

.alperia-step-bullet {
	width: 46px;
	height: 46px;
	min-width: 46px;
	min-height: 46px;
	border-radius: 50%;
	background-color: #2DA0BD;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 18px;
	/* Bordo bianco "finto": crea l'illusione che la linea si
	   interrompa dietro al cerchio, senza alterarne le dimensioni
	   ne' i calcoli di posizionamento (top: 23px, ecc.) */
	box-shadow: 0 0 0 4px #fff;
}

.alperia-step-content {
	max-width: 260px;
}

.alperia-step-title {
	font-size: 17px;
	font-weight: 700;
	color: #00547A;
	margin: 0 0 10px;
	line-height: 1.4;
}

.alperia-step-description {
	font-size: 14px;
	color: #4a4a4a;
	line-height: 1.5;
	margin: 0;
}

.alperia-step-description a {
	color: #2DA0BD;
	text-decoration: underline;
}

/* -------------------------
   Mobile: layout verticale e centrato
   Titolo/descrizione a destra della linea
   ------------------------- */
@media (max-width: 1024px) {

	.alperia-steps-main-title {
		font-size: 28px;
		margin-bottom: 35px;
	}

	.alperia-steps-wrapper {
		flex-direction: column;
		align-items: center;
		max-width: 420px;
		margin: 0 auto;
	}

	.alperia-step {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		width: 100%;
		padding: 0 0 32px 0;
	}

	.alperia-step:last-child {
		padding-bottom: 0;
	}

	/* Stessa logica del desktop, ma in verticale: la linea va dal
	   centro di questo cerchio al centro del cerchio successivo,
	   quindi non compare mai dopo l'ultimo cerchio. */
	.alperia-step:not(:last-child)::after {
		top: 23px;
		left: 23px;
		width: 2px;
		height: 100%;
	}

	.alperia-step-bullet {
		margin-bottom: 0;
		margin-right: 20px;
	}

	.alperia-step-content {
		max-width: none;
		padding-top: 6px;
	}
}