/*
 * Componente: elenco di fasi numerate.
 *
 * Verticale = programma del corso, con riquadro icona e righe separate da
 * hairline. Orizzontale = «Come funziona», con numerale grande in outline.
 */

.sh-program-steps__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sh-step;
}

.sh-program-steps__item {
	display: flex;
	gap: var(--sh-space-sm);
	min-width: 0;
}

.sh-program-steps__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	border: 1px solid var(--sh-line);
	color: var(--sh-red);
}

.sh-program-steps__body {
	min-width: 0;
}

.sh-program-steps__title {
	margin-block: 0 var(--sh-space-3xs);
}

.sh-program-steps__text {
	margin-block: 0;
	color: var(--sh-muted);
}

/* ==== Verticale ==== */

.sh-program-steps--vertical .sh-program-steps__item {
	align-items: flex-start;
	padding-block: var(--sh-space-md);
}

.sh-program-steps--vertical .sh-program-steps__item + .sh-program-steps__item {
	border-block-start: 1px solid var(--sh-line);
}

.sh-program-steps--vertical .sh-program-steps__number {
	display: none;
}

/* ==== Orizzontale ==== */

.sh-program-steps--horizontal .sh-program-steps__list {
	display: grid;
	gap: var(--sh-space-lg);
}

@media (min-width: 768px) {
	.sh-program-steps--horizontal .sh-program-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sh-program-steps--horizontal.sh-program-steps--cols-3 .sh-program-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sh-program-steps--horizontal.sh-program-steps--cols-4 .sh-program-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sh-program-steps--horizontal .sh-program-steps__item {
	align-items: flex-start;
}

/* Dimensione e famiglia dalla classe .sh-t-stat generata dai token. */
.sh-program-steps--horizontal .sh-program-steps__number {
	flex: none;
	color: var(--sh-red);
}

.sh-program-steps--horizontal .sh-program-steps__icon {
	width: auto;
	height: auto;
	border: 0;
}

.sh-program-steps--horizontal .sh-program-steps__inline-number {
	display: none;
}

/* Da desktop, come nelle bande: su tablet le fasi vanno a capo a due a due. */
@media (min-width: 1024px) {
	.sh-program-steps--horizontal .sh-program-steps__item + .sh-program-steps__item {
		padding-inline-start: var(--sh-space-md);
		border-inline-start: 1px solid var(--sh-line);
	}
}

/* ==== Riquadro «ideale per» ==== */

.sh-program-steps__highlight {
	display: flex;
	gap: var(--sh-space-sm);
	margin-block-start: var(--sh-space-md);
	padding: var(--sh-space-md);
	border: 1px solid var(--sh-line);
}