/* ==========================================================================
   Pagina Corsi
   ========================================================================== */

.corsi-hero {
	position: relative;
	overflow: hidden;
	background: var(--pit-navy);
	color: #fff;
	padding: 130px 0 48px;
}
.corsi-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.corsi-hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(20, 33, 47, 0.55); }
.corsi-hero__content { position: relative; z-index: 1; }
.corsi-hero__breadcrumb { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; opacity: 0.85; }
.corsi-hero__title {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.1;
	text-transform: uppercase;
}


/* Toolbar: ricerca + filtri */
.corsi-toolbar {
	padding: 32px 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-bottom: 1px solid #e5e5e5;
}
.corsi-toolbar__chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
	display: inline-flex;
	align-items: center;
	height: 45px;
	padding: 10px 20px;
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	border: 1px solid var(--pit-navy);
	background: none;
	color: var(--pit-navy);
	cursor: pointer;
}
.chip.is-active { background: var(--pit-navy); color: #fff; border-color: var(--pit-navy); }

.corsi-toolbar__fields { display: flex; flex-wrap: wrap; gap: 24px; }
.corsi-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 48px;
	min-width: 200px;
	border-bottom: 1px solid var(--pit-navy);
	font-size: 15px;
	color: var(--pit-navy);
	background: none;
	border-top: none;
	border-left: none;
	border-right: none;
}
.corsi-field__chevron { font-size: 14px; transform: rotate(90deg); }
/* niente contorno blu del browser sul campo attivo: resta solo la linea sotto */
.corsi-field:focus,
.corsi-field:focus-visible,
.corsi-field input:focus,
.corsi-field input:focus-visible,
.corsi-field select:focus,
.corsi-field--select:focus,
.corsi-field--select:focus-visible { outline: none; box-shadow: none; }
.corsi-field:focus-visible,
.corsi-field--select:focus-visible { border-bottom-width: 2px; }

.corsi-field--select {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2314212f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 20px;
}


/* Sezione categoria */
.corsi-category { padding: 48px 0; }
.corsi-category__heading { margin-bottom: 32px; }
.corsi-category.is-hidden-by-filter { display: none; }
.corsi-cards > [hidden] { display: none; }
.corsi-category__empty { font-size: 15px; color: #767676; padding: 24px 0; }


.corsi-cards { display: flex; flex-direction: column; gap: 16px; }
/* le frecce del carosello servono solo da 768px in su */
.corsi-carousel__arrow { display: none; }
/* i pallini invece solo sotto i 768 (su desktop ci sono le frecce) */
.corsi-dots { display: none; }
/* il bottone Filtro serve solo su mobile: su desktop le tendine sono sempre in vista */
.corsi-filtro { display: none; }


/* ==========================================================================
   Scheda corso (uguale su desktop e mobile) - Figma "Frame 291" / "Frame 230"
   ========================================================================== */
/* --- Scheda corso (uguale per full course e modulo) --- */
/* Le schede corso hanno due immagini e due icone (desktop/mobile) ereditate dalla home:
   qui il file e lo stesso, quindi si usa sempre la versione desktop a ogni larghezza. */
.corsi-cards img.course-card__bg-desktop { display: block; }
.corsi-cards img.course-card__bg-mobile { display: none; }
.corsi-cards .course-card__icon.course-card__icon--desktop { display: block; }
.corsi-cards .course-card__icon.course-card__icon--mobile { display: none; }

/* le schede filtrate via JS restano nascoste anche con le regole qui sotto */
.corsi-cards > [hidden] { display: none; }
.corsi-cards .module-card[hidden],
.corsi-cards .course-card[hidden] { display: none; }
.corsi-cards .module-card,
.corsi-cards .course-card {
	width: 341.2px;
	height: 444.4px;
	border-radius: 9.88px;
	border: 1.07px solid #D4D4D4;
	overflow: hidden;
	display: block;
	position: relative;
}
/* Riposo: scheda bianca (Figma "Frame 291"). Hover: scheda scura (Figma "Frame 230").
   Il gradiente sta su uno strato dietro al contenuto e si dissolve: un colore e un
   gradiente non si possono sfumare l'uno nell'altro, con l'opacita invece si. */
.corsi-cards .module-card,
.corsi-cards .course-card { background: #fff; color: var(--pit-navy); transition: color 0.3s ease; }
.corsi-cards .module-card::before,
.corsi-cards .course-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: linear-gradient(334deg, #731B1B 0%, #2E0C2F 54.8%, #171717 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.corsi-cards .module-card:hover::before,
.corsi-cards .course-card:hover::before,
.corsi-cards .module-card.is-corrente::before,
.corsi-cards .course-card.is-corrente::before { opacity: 1; }
.corsi-cards .module-card:hover,
.corsi-cards .course-card:hover,
.corsi-cards .module-card.is-corrente,
.corsi-cards .course-card.is-corrente { color: #fff; }

/* Il Full Course e' la scheda in evidenza: sta sempre col fondo scuro,
   i moduli restano chiari e diventano scuri solo al passaggio del mouse. */
.corsi-cards .course-card::before { opacity: 1; }
.corsi-cards .course-card { color: #fff; }
/* e con lo sfondo scuro cambiano anche le targhette e il tasto, come succede
   agli altri passandoci sopra */
.corsi-cards .course-card .tag--solid { background: var(--pit-navy); color: #fff; }
.corsi-cards .course-card .course-card__footer .btn { background: #fff; color: var(--pit-navy); }
.corsi-cards .course-card .course-card__footer .btn::after {
	background-color: var(--pit-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.6 14.6'%3E%3Cpath d='M4.2 10.4 10.4 4.2M5.4 4.2h5v5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.corsi-cards .module-card__media,
.corsi-cards .course-card__media { z-index: 1; }
.corsi-cards .module-card__media,
.corsi-cards .course-card__media {
	position: relative;
	height: 206.5px;
	border-radius: 0;
}
.corsi-cards .module-card__media img,
.corsi-cards .course-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.corsi-cards img.course-card__bg-mobile, .corsi-cards .course-card__icon--mobile { display: none; }
/* taglio angolato in fondo alla foto (Figma "Vector 2"): la foto viene ritagliata
   e sotto si vede lo sfondo della scheda, bianco a riposo e gradiente in hover.
   Cosi non c'e nessun rettangolo di colore piatto sopra al gradiente. */
.corsi-cards .module-card__media,
.corsi-cards .course-card__media {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 240.5px 100%, 218.9px 189.4px, 0 189.4px);
}
.corsi-cards .module-card__tags,
.corsi-cards .course-card__tags {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: 6.5px;
	padding: 15.8px 0 0 19.7px;
}
.corsi-cards .tag {
	display: inline-flex;
	align-items: center;
	height: 21.9px;
	padding: 0 7.9px;
	border-radius: 39.5px;
	font-size: 10px;
	line-height: 13.7px;
	letter-spacing: 1.3px;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
}
.corsi-cards .tag--solid,
.corsi-cards .tag--light { background: #fff; color: var(--pit-navy); border: 0; height: 20.2px; transition: background 0.3s ease, color 0.3s ease; }
.corsi-cards .module-card:hover .tag--light,
.corsi-cards .course-card:hover .tag--solid,
.corsi-cards .module-card.is-corrente .tag--light,
.corsi-cards .course-card.is-corrente .tag--solid { background: var(--pit-navy); color: #fff; }
.corsi-cards .tag--outline { background: none; color: #fff; border: 0.4px solid #fff; }

.corsi-cards .module-card__body,
.corsi-cards .course-card__body {
	position: relative;
	z-index: 2;
	padding: 0 19.7px;
	border: 0;
	display: block;
}
/* la fascia della home non serve qui: nella pagina Corsi la disegna il media */
.corsi-cards .course-card::after { content: none; }
.corsi-cards .course-card__icon.course-card__icon--mobile { display: none; }
.corsi-cards .module-card__icon,
.corsi-cards .course-card__icon {
	height: 25.8px;
	width: 40.2px;
	margin: 0 0 9.9px;
	display: block;
	background: currentColor;
	transition: background-color 0.3s ease;
	-webkit-mask: var(--pit-icon) left center / contain no-repeat;
	mask: var(--pit-icon) left center / contain no-repeat;
}
.corsi-cards .module-card__body h3,
.corsi-cards .course-card__body h3 { font-size: 20px; line-height: 19.4px; margin: 0; }
.corsi-cards .module-card__body p,
.corsi-cards .course-card__body p { font-size: 14px; line-height: 19.1px; width: auto; margin: 10.5px 0 0; }
/* 06/11/2026, richiesta del cliente: la descrizione usa tutta la larghezza della scheda
   (prima 227.4px dal Figma, andava a capo e lasciava vuoto a destra) */
/* La riga "Ore / Moduli" stava a un'altezza fissa: con le descrizioni lunghe il
   testo ci finiva sopra. Ora segue il paragrafo, che tiene comunque l'altezza di
   tre righe: le schede corte restano identiche al Figma, le lunghe scalano giu'. */
.corsi-cards .module-card__body p,
.corsi-cards .course-card__body p { min-height: 57.3px; }
.corsi-cards .module-card__meta,
.corsi-cards .course-card__meta {
	position: static;
	margin-top: 2.3px;
	left: auto;
	top: auto;
	display: flex;
	gap: 0;
	font-size: 14px;
	line-height: 19.1px;
	font-weight: 700;
	margin: 0;
}
/* La colonnina delle ore era larga fissa: in inglese "40 / 60 Hours" e' piu' lungo
   e andava a capo finendo sopra al prezzo. Ora la larghezza e' un minimo, e le due
   voci non si spezzano mai: in italiano resta tutto identico al Figma. */
.corsi-cards .module-card__meta,
.corsi-cards .course-card__meta { white-space: nowrap; }
/* stacco dalla descrizione: con tre righe altrimenti le ore le stanno attaccate */
.corsi-cards .module-card__meta,
.corsi-cards .course-card__meta { margin-top: 14px; }
.corsi-cards .module-card__meta span:first-child,
.corsi-cards .course-card__meta span:first-child { min-width: 90.3px; padding-right: 10px; }

.corsi-cards .module-card__footer,
.corsi-cards .course-card__footer {
	position: absolute;
	left: 0;
	right: 0;
	top: 389.1px;
	height: 50.9px;
	padding: 0 19.7px;
	border: 0;
	border-top: 0.49px solid #CBCBCB;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* il prezzo e' scritto uguale su tutte le schede: sui moduli usava il font
   del testo normale invece di quello dei titoli */
.corsi-cards .module-card__price,
.corsi-cards .course-card__price {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	line-height: 25.1px;
}
.corsi-cards .module-card__footer .btn,
.corsi-cards .course-card__footer .btn {
	height: 29.3px;
	min-height: 0;
	padding: 0 2.5px 0 10.7px;
	gap: 8.5px;
	border-radius: 65px;
	font-size: 10px;
	line-height: 13.7px;
	letter-spacing: 1.4px;
	font-weight: 700;
}
.corsi-cards .module-card__footer .btn,
.corsi-cards .course-card__footer .btn { background: var(--pit-navy); color: #fff; transition: background 0.3s ease, color 0.3s ease; }
.corsi-cards .module-card:hover .module-card__footer .btn,
.corsi-cards .course-card:hover .course-card__footer .btn,
.corsi-cards .module-card.is-corrente .module-card__footer .btn,
.corsi-cards .course-card.is-corrente .course-card__footer .btn { background: #fff; color: var(--pit-navy); }
.corsi-cards .module-card__footer .btn img,
.corsi-cards .course-card__footer .btn img { display: none; }
.corsi-cards .module-card__footer .btn::after,
.corsi-cards .course-card__footer .btn::after {
	content: "";
	width: 24.2px;
	height: 24.2px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.6 14.6'%3E%3Cpath d='M4.2 10.4 10.4 4.2M5.4 4.2h5v5' stroke='%2314212F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14.6px 14.6px no-repeat;
	transition: background-color 0.3s ease;
}
.corsi-cards .module-card:hover .module-card__footer .btn::after,
.corsi-cards .course-card:hover .course-card__footer .btn::after,
.corsi-cards .module-card.is-corrente .module-card__footer .btn::after,
.corsi-cards .course-card.is-corrente .course-card__footer .btn::after {
	background-color: var(--pit-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.6 14.6'%3E%3Cpath d='M4.2 10.4 10.4 4.2M5.4 4.2h5v5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   DESKTOP - grafica Figma "Corsi" (frame 1728px, nodo 232-2792)
   ========================================================================== */
@media (min-width: 768px) {

	/* --- Footer: qui non c'e il banner che sborda dentro al nero,
	   quindi lo stacco in alto e 96 invece di 307 (Figma: nero da 3219 a 3716) --- */
	.corsi-page ~ .site-footer { padding-top: 96px; }

	/* --- Hero: stesso componente delle altre pagine, solo piu in alto --- */
	/* bordo basso a gradino come nel Figma ("Vector 3"): a sinistra scende fino a 651,
	   a destra si ferma a 593,9 con la diagonale in mezzo */
	.corsi-page .pagehero__bg--mobile { display: none; }
	/* 06/11/2026, richiesta del cliente: parte alta scura come in Chi siamo (stesso velo).
	   Lo sfondo nuovo e' il file originale: niente schiarimento del 45% di style.css. */
	.corsi-page .pagehero__bg--desktop { filter: none; }
	.corsi-page .pagehero__bg--desktop::after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: 345px; background: linear-gradient(180deg, rgba(8, 10, 18, 0.95) 0%, rgba(8, 10, 18, 0.76) 40%, rgba(8, 10, 18, 0.33) 75%, rgba(8, 10, 18, 0) 100%); }
	.corsi-page .pagehero {
		padding-top: 376px;
		clip-path: polygon(0 0, 100% 0, 100% 593.9px, 51.27% 593.9px, 46.76% 100%, 0 100%);
	}

	/* --- Barra filtri (chip a sinistra, ricerca e select a destra) --- */
	.corsi-toolbar {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0;
		padding: 65px 0 76px;
		border-bottom: 0.66px solid #858585;
	}
	.corsi-toolbar__chips { gap: 15px; margin-top: 7px; margin-left: 3px; }
	.corsi-toolbar .chip {
		height: 45px;
		padding: 0 20px;
		font-size: 14px;
		line-height: 19.1px;
		letter-spacing: 1.96px;
		border-radius: 100px;
	}
	.corsi-toolbar__fields { gap: 33px; align-items: flex-start; }
	.corsi-field {
		height: 48px;
		min-width: 0;
		font-size: 16px;
		line-height: 21.9px;
		border-bottom: 1px solid #000;
		padding: 0;
		gap: 0;
	}
	.corsi-field--select {
		padding-right: 0;
		background-size: 24px 9px;
		background-position: right center;
	}
	.corsi-field input, .corsi-field input::placeholder { font-size: 16px; line-height: 21.9px; color: #000; }
	.corsi-toolbar__fields > :nth-child(1) { width: 350px; }
	.corsi-toolbar__fields > :nth-child(2) { width: 181px; }
	.corsi-toolbar__fields > :nth-child(3) { width: 113px; }

	/* --- Sezione categoria --- */
	.corsi-category { padding: 72px 0 0; }
	.corsi-category .eyebrow { font-size: 24px; line-height: 32.8px; letter-spacing: 3.12px; margin-bottom: 5px; }
	.corsi-category .heading-xl { font-size: 64px; line-height: 67px; }
	.corsi-category__heading { margin-bottom: 57px; }
	.corsi-category:last-of-type { padding-bottom: 84.6px; }
	/* la seconda categoria ha la fascia grigia dietro */
	.corsi-category--alt {
		background: #EDF2F7;
		padding-top: 85px;
		padding-bottom: 114.6px;
		margin-top: 114.8px;
	}
	.corsi-category--alt + .corsi-category { padding-top: 85px; }

	/* --- Carosello schede --- */
	.corsi-carousel { position: relative; }
	.corsi-cards {
		display: flex;
		flex-direction: row;
		gap: 23.4px;
		overflow-x: auto;
		scroll-behavior: smooth;
		scrollbar-width: none;
		/* lo scorrimento si ferma sempre su una scheda intera */
		scroll-snap-type: x mandatory;
	}
	.corsi-cards > * { scroll-snap-align: start; }
	.corsi-cards::-webkit-scrollbar { display: none; }
	.corsi-cards > * { flex: 0 0 341.2px; }
	/* frecce: cerchio vuoto con bordo navy e chevron navy (Figma "Group 60") */
	.corsi-carousel__arrow {
		position: absolute;
		top: 205px;
		width: 46.1px;
		height: 46.8px;
		border-radius: 50%;
		border: 0.75px solid var(--pit-navy);
		background: none;
		color: var(--pit-navy);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 2;
	}
	/* stessa icona del Figma (chevron 9,13 x 5,13) ruotata dai due lati */
	.corsi-carousel__arrow svg { width: 9.131px; height: 5.131px; display: block; }
	.corsi-carousel__arrow--prev svg { transform: rotate(90deg); }
	.corsi-carousel__arrow--next svg { transform: rotate(-90deg); }
	.corsi-carousel__arrow--prev { left: -97px; }
	.corsi-carousel__arrow--next { right: -108.1px; }
	.corsi-category--alt .corsi-carousel__arrow { background: none; }

}

/* ==========================================================================
   MOBILE - grafica Figma "Corsi - mobile v1" (frame 440px, nodo 232-4266)
   ========================================================================== */
@media (max-width: 767px) {

	/* --- Hero --- */
	.corsi-page .pagehero {
		min-height: 483px;
		padding: 363px 0 0;
		background: none;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 29px), 80.64% calc(100% - 29px), calc(80.64% - 36.7px) 100%, 0 100%);
	}
	/* su mobile la foto e quella piena (senza lo scalino gia ritagliato dentro
	   all'immagine): lo scalino lo disegna il clip-path qui sopra */
	.corsi-page .pagehero__bg--desktop { display: none; }
	.corsi-page .pagehero__bg--mobile { display: block; background-size: cover; background-position: center; }
	.corsi-page .pagehero__bg::after { background: rgba(0, 0, 0, 0.38); }
	.corsi-page .pagehero::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 98px;
		z-index: 1;
		background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(64,64,64,0.75) 25%, rgba(128,128,128,0.5) 50%, rgba(191,191,191,0.25) 75%, rgba(255,255,255,0) 100%);
		mix-blend-mode: multiply;
	}
	.corsi-page .pagehero__breadcrumb { display: none; }
	.corsi-page .pagehero__title { font-size: 42px; line-height: 45.7px; }

	/* --- Barra filtri --- */
	.corsi-toolbar {
		display: block;
		padding: 51px 0 51px;
		border: 0;
		border-bottom: 0.62px solid #858585;
	}
	.corsi-toolbar__chips {
		display: flex;
		flex-wrap: nowrap;
		/* le 5 pillole devono entrare tutte: spazi e imbottitura ridotti quel
		   tanto che basta perche "in arrivo" non venga tagliata */
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.corsi-toolbar__chips::-webkit-scrollbar { display: none; }
	.corsi-toolbar .chip {
		flex: 0 0 auto;
		height: 20.6px;
		padding: 0 6.6px;
		font-size: 8.4px;
		line-height: 11.5px;
		letter-spacing: 1.18px;
		border-radius: 45.7px;
		border-width: 0.46px;
	}
	.corsi-toolbar__fields {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0;
		margin-top: 23.4px;
	}
	.corsi-toolbar__fields .corsi-field {
		height: 30px;
		font-size: 10px;
		line-height: 13.7px;
		border-bottom: 0.62px solid #000;
		padding: 0;
	}
	/* il campo ricerca si allarga fino al bottone Filtro */
	.corsi-toolbar__fields > .corsi-field:first-child { flex: 1 1 auto; width: auto; min-width: 0; margin-right: 18px; }
	.corsi-toolbar__fields .corsi-field input,
	.corsi-toolbar__fields .corsi-field input::placeholder { font-size: 10px; line-height: 13.7px; }
	/* le due tendine stanno dentro al pannello che apre il bottone "Filtro" */
	.corsi-toolbar__fields .corsi-field--select {
		display: none;
		width: 100%;
		margin-top: 26px;
		height: 40px;
		background-size: 16px 6px;
	}
	/* con il pannello aperto la barra respira di piu prima della linea */
	.corsi-toolbar.is-filtri-aperti { padding-bottom: 62px; }
	.corsi-toolbar.is-filtri-aperti .corsi-field--select { display: block; }
	.corsi-filtro {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.4px;
		width: 24px;
		height: 30px;
		/* 12px piu in basso del campo ricerca, spostato senza allargare la riga
		   (altrimenti scenderebbe anche la linea sotto alla barra) */
		position: relative;
		top: 9px;
		margin: 3px 10px 0 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--pit-navy);
		font-family: inherit;
		font-size: 10px;
		line-height: 13.7px;
		cursor: pointer;
	}
	.corsi-filtro__lines { display: block; width: 23px; height: 14.6px; position: relative; }
	.corsi-filtro__lines::before,
	.corsi-filtro__lines::after,
	.corsi-filtro__lines span {
		content: "";
		position: absolute;
		left: 0;
		width: 23px;
		height: 0.6px;
		background: var(--pit-navy);
	}
	.corsi-filtro__lines::before { top: 0; }
	.corsi-filtro__lines span { top: 7px; }
	.corsi-filtro__lines::after { top: 14px; }

	/* --- Sezione categoria --- */
	.corsi-category { padding: 44px 0 0; }
	.corsi-category .eyebrow { font-size: 12px; line-height: 16.4px; letter-spacing: 1.56px; margin-bottom: 7.1px; }
	.corsi-category .heading-xl { font-size: 32px; line-height: 33.5px; }
	.corsi-category__heading { margin-bottom: 41.5px; }
	.corsi-category--alt {
		background: #EDF2F7;
		margin-top: 47.5px;
		padding: 51px 0 47.5px;
	}
	.corsi-category--alt + .corsi-category { padding-top: 50px; }
	.corsi-category:last-of-type { padding-bottom: 49.5px; }

	/* --- Carosello a tutta larghezza, scheda centrale in mezzo --- */
	.corsi-carousel { margin: 0 -38px; }
	.corsi-cards {
		flex-direction: row;
		gap: 23.4px;
		/* spazio sopra e sotto per l'alone della scheda corrente: il contenitore
		   scorre in orizzontale e taglierebbe l'ombra. I margini negativi
		   riportano la riga esattamente dove stava. */
		padding: 45px 49.6px;
		margin: -45px 0;
		overflow-x: auto;
		scroll-behavior: smooth;
		scrollbar-width: none;
	}
	.corsi-cards::-webkit-scrollbar { display: none; }
	.corsi-cards > * { flex: 0 0 341.2px; scroll-snap-align: center; }
	/* la scheda al centro e quella "corrente": scura, con l'alone rosa del Figma */
	.corsi-cards .module-card.is-corrente,
	.corsi-cards .course-card.is-corrente { box-shadow: 0 0 40.4px #D84D94; }
	.corsi-cards { scroll-snap-type: x mandatory; }
	.corsi-category__empty { padding: 0 38px; }

	/* --- Pallini --- */
	.corsi-dots {
		display: flex;
		justify-content: center;
		gap: 4.3px;
		margin-top: 42px;
	}
	.corsi-dots button {
		width: 10.5px;
		height: 10.5px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(20, 33, 47, 0.3);
		cursor: pointer;
	}
	.corsi-dots button.is-active { background: var(--pit-navy); }

	/* --- Footer: senza banner sopra, lo stacco e 77 --- */
	.corsi-page ~ .site-footer { padding-top: 77px; }
}

/* ==========================================================================
   Quante schede si vedono per volta: 4 sul desktop, 3 sul tablet, 1 sul telefono
   (richiesta di Francesco). Le misure sono quelle del progetto a 1728: la
   pagina viene poi rimpicciolita in blocco, quindi qui si ragiona sempre su
   quella base. Traccia larga 1436, spazio fra le schede 23,4.
   ========================================================================== */

/* tablet: tre schede che riempiono la riga, quindi piu' larghe */
@media (min-width: 768px) and (max-width: 1199px) {
	.corsi-cards > * { flex: 0 0 calc((100% - 46.8px) / 3); }
}

/* Finche' un'area ha meno schede dei posti disponibili, quelle che ci sono
   stanno in mezzo: cosi' la riga non sembra tagliata a destra. Quando le
   schede riempiono la riga (o la superano) torna tutto allineato a sinistra. */
@media (min-width: 768px) {
	.corsi-carousel.is-fermo .corsi-cards { justify-content: center; }
}

/* le frecce e i pallini spariscono quando non c'e' niente da scorrere */
.corsi-carousel.is-fermo .corsi-carousel__arrow { display: none !important; }
.corsi-dots.is-fermo { display: none !important; }

/* ==========================================================================
   Box "In arrivo" - riempie la fila quando un'area ha meno di 4 schede
   ========================================================================== */
.corsi-cards .module-card--soon {
	background: #fff;
	border-style: dashed;
	border-color: #C8C8C8;
	opacity: 0.7;
	pointer-events: none;
	cursor: default;
}
/* niente fondo scuro in hover: la scheda non e' cliccabile */
.corsi-cards .module-card--soon::before { content: none; }
/* il velo va sullo sfondo del riquadro, non sul contenitore: se no si
   scolorirebbero anche le targhette che stanno dentro */
.corsi-cards .module-card--soon .module-card__media { background: none; }
.corsi-cards .module-card--soon .module-card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(334deg, #731B1B 0%, #2E0C2F 54.8%, #171717 100%);
	opacity: 0.3;
}
/* sul velo chiaro le targhette bianche sparirebbero: qui vanno scure */
.corsi-cards .module-card--soon .tag--light { background: #E9E9E9; color: var(--pit-navy); }
.corsi-cards .module-card--soon .tag--outline { border-color: var(--pit-navy); color: var(--pit-navy); }
.corsi-cards .module-card--soon .module-card__body h3,
.corsi-cards .module-card--soon .module-card__body p { color: var(--pit-navy); }
.corsi-cards .module-card--soon .module-card__footer { justify-content: flex-start; }
.corsi-cards .module-card--soon .module-card__soon {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	line-height: 25.1px;
	color: var(--pit-navy);
}
/* il segnaposto non ha l'icona: recupero lo spazio per allineare il titolo agli altri */
.corsi-cards .module-card--soon .module-card__body { padding-top: 35.7px; }
/* su mobile la scheda al centro diventa scura e si illumina: il segnaposto no */
.corsi-cards .module-card--soon.is-corrente { color: var(--pit-navy); box-shadow: none; }

/* 10/11/2026: le schede avevano altezza fissa e il piede (prezzo/bottone) a 389px:
   con i titoli lunghi (3-4 righe) il testo finiva sopra al prezzo. Ora la scheda
   cresce col contenuto (min 444px) e il piede resta in fondo; le schede di una
   stessa riga restano tutte alte uguali. */
.corsi-cards .module-card,
.corsi-cards .course-card { height: auto; min-height: 444.4px; display: flex; flex-direction: column; }
.corsi-cards .module-card__media,
.corsi-cards .course-card__media { flex: 0 0 auto; }
.corsi-cards .module-card__body,
.corsi-cards .course-card__body { flex: 0 0 auto; padding-bottom: 16px; }
.corsi-cards .module-card__footer,
.corsi-cards .course-card__footer { position: relative; top: auto; margin-top: auto; flex: 0 0 50.9px; z-index: 2; }