@charset "utf-8";

/*
	Pagina "Corsi e Attività" (Fdo) — ricostruita dal bundle React di produzione
	(docs/dom/corsi-e-attivita.htm, CSS sorgente .newlayout/assets/index-hyXwmGwt.css).
	Solo stili SPECIFICI di questa pagina: i token/reset/componenti generici (Section,
	Heading, Button, Scroller, SectionBody) sono in global.css (sezione "NUOVO DESIGN
	SYSTEM Fdo"), header/footer in header.css/footer.css, il blocco Newsletter (riusato
	come include comune) ha CSS proprio (blocco-newsletter.css).
	Struttura HTML: custom/frontend/layout/html/corsi-e-attivita/corsi-e-attivita.htm

	Mappatura classi sorgente → Fdo:
	  _section_6te0o_5        → riuso .FdoSection (identico) + .FdoCorsiSection (collasso padding)
	  _sectionHero_6te0o_18   → .FdoCorsiHero
	  _subtitle_6te0o_86      → .FdoCorsiHeroSubtitle
	  _columns/_block_1478e_* → .FdoCorsiGrid / .FdoCorsiCard* (blocco condiviso con la home)
	  _sectionBody_6te0o_78   → .FdoCorsiAttivitaBody
	  _category_6te0o_94      → .FdoCorsiCategoria
	  _categoryTitle_6te0o_102→ .FdoCorsiCategoriaTitolo
	  _scroller_6te0o_112     → .FdoCorsiScroller (override di .FdoScroller)
	  _card/_activity_19v69_* → .FdoActivityCard (blocco condiviso con altre pagine)
	  _prereg_19v69_19        → .FdoActivityCard--prereg
	  _title/_cardText        → .FdoActivityTitle / .FdoActivityText
	  _sectionPetal_6te0o_*   → .FdoCorsiPetal / .FdoCorsiPetal--right
	  _preregGrid_6te0o_141   → .FdoPreregGrid
*/


/*	============================== collasso sezioni ============================== */

/*	Sezioni "6te0o" consecutive: la seconda azzera il padding-top (1:1 col sorgente
	._section_6te0o_5+._section_6te0o_5{padding-top:0}). Scoped a questa pagina via
	la classe .FdoCorsiSection, così non tocca .FdoSection delle altre pagine. */
	.FdoCorsiSection + .FdoCorsiSection { padding-top: 0; }


/*	============================== hero ============================== */

/*	Hero: riusa .FdoSection/.FdoSectionInner; qui solo lo sfondo (center bottom) e le
	misure del sottotitolo. Sfondo via --corsi-hero-bg-image inline nello style del
	<section> (repository/files/corsi-e-attivita-hero-sfondo.jpg). 1:1 _sectionHero_6te0o_18. */

	.FdoCorsiHero {
		background-image: var(--corsi-hero-bg-image);
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
	}

	.FdoCorsiHeroSubtitle {
		margin: 0;
		max-width: 72ch;
		font-size: var(--text-h3-size);
		line-height: var(--text-h3-line);
		font-weight: var(--text-h3-weight);
		color: var(--color-h3);
	}


/*	============================== card tipologia (hero) ============================== */

/*	Griglia delle 2 card "posti illimitati / posti limitati" — blocco CONDIVISO con
	la sezione "Corsi e Attività" della homepage (là in home.css come .FdoCorsi*).
	Ridefinito qui 1:1 dal sorgente 1478e (._columns/_block/_blockImage/_blockContent/
	_blockTitle). Candidato all'estrazione in un CSS comune (vedi report). */

	.FdoCorsiGrid {
		display: grid;
		gap: var(--space-5);
		width: 100%;
		min-width: 0;
		max-width: var(--container-max);
		margin-inline: auto;
		text-align: left;
	}

	@media (min-width: 1025px) {
		.FdoCorsiGrid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.FdoCorsiCard {
		display: flex;
		align-items: stretch;
		gap: var(--space-4);
		width: 100%;
		min-width: 0;
		max-width: 100%;
		padding: var(--space-2);
		border: 1px solid #000;
		border-radius: var(--radius);
		background-color: #ffffff0a;
	}

	.FdoCorsiCardImage {
		flex-shrink: 0;
		width: 220px;
		aspect-ratio: 220 / 275;
		height: auto;
		border-radius: var(--radius);
		object-fit: cover;
	}

	.FdoCorsiCardContent {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--space-3);
		min-width: 0;
		padding: 0;
		text-align: left;
	}

	.FdoCorsiCardTitle {
		font-family: var(--font-body);
		font-size: var(--text-subtitle-size);
		line-height: var(--text-subtitle-line);
		font-weight: var(--text-body-bold-weight);
		color: var(--color-h3);
		text-wrap: pretty;
	}

	@media (max-width: 640px) {
		.FdoCorsiCard {
			flex-direction: row;
			align-items: stretch;
		}
		.FdoCorsiCardImage {
			width: 112px;
			aspect-ratio: 220 / 275;
			align-self: stretch;
			object-fit: cover;
		}
		.FdoCorsiCardContent {
			justify-content: center;
		}
		.FdoCorsiCardTitle {
			font-size: var(--text-caption-size);
			line-height: var(--text-caption-line);
		}
	}


/*	============================== elenco attività per categoria ============================== */

/*	Contenitore verticale delle categorie (1:1 _sectionBody_6te0o_78) */
	.FdoCorsiAttivitaBody {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		width: 100%;
		min-width: 0;
	}

/*	Singola categoria: titolo + scroller (1:1 _category_6te0o_94) */
	.FdoCorsiCategoria {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		width: 100%;
		min-width: 0;
	}

/*	Titolo di categoria allineato a sinistra (1:1 _categoryTitle_6te0o_102) */
	.FdoCorsiCategoriaTitolo {
		width: 100%;
		font-family: var(--font-display);
		font-size: var(--text-h3-size);
		line-height: var(--text-h3-line);
		font-weight: var(--text-h3-weight);
		color: var(--color-h3);
		text-align: left;
	}

/*	Override dello scroller condiviso: card allineate a sinistra invece che centrate
	(1:1 _scroller_6te0o_112{justify-content:flex-start}). La meccanica (overflow, snap,
	scrollbar) resta quella di .FdoScroller/.FdoScrollerTrack in global.css. */
	.FdoCorsiScroller {
		justify-content: flex-start;
	}


/*	============================== activity card ============================== */

/*	Card attività (icona + titolo + testo). Blocco CONDIVISO con altre pagine del
	nuovo layout (programma, area culturale) — candidato a CSS comune (vedi report).
	1:1 dal sorgente 19v69 (._card_19v69_1 + ._activity_19v69_13). */

	.FdoActivityCard {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		width: 342px;
		min-width: 0;
		min-height: 332px;
		padding: var(--space-5);
		border-radius: var(--radius);
		background-color: var(--color-card-activity);
		text-align: left;
	}

	.FdoActivityIcon {
		flex-shrink: 0;
		width: 24px;
		height: 24px;
	}

	.FdoActivityTitle {
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		line-height: var(--text-body-line);
		font-weight: var(--text-body-bold-weight);
		color: var(--color-h3);
		text-wrap: pretty;
	}

/*	.FdoActivityBody (03/08/2026): corpo testuale della card prereg come UNICO campo HTML
	(data-edit-html + data-edit-html-block) che contiene più <p>. Prima i paragrafi erano figli
	diretti della card e la spaziatura la dava il suo `flex + gap`: adesso sono figli del
	contenitore, quindi il gap va replicato qui — con lo stesso valore, così la resa non cambia.
	I <p> dentro condividono la regola di .FdoActivityText (selettore aggiunto sotto). */
	.FdoActivityBody {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		width: 100%;
		min-width: 0;
	}

	.FdoActivityText,
	.FdoActivityBody p {
		margin: 0;
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		line-height: var(--text-body-line);
		font-weight: var(--text-body-weight);
		color: var(--color-body);
		text-wrap: pretty;
	}


/*	============================== come pre-registrarsi ============================== */

/*	Sezione con decoro sakura d'angolo (1:1 _sectionPetal_6te0o_13 / _sectionPetalRight_6te0o_43).
	Diverso dalla .FdoSection standard: overflow visibile per far uscire il ramo dall'angolo.
	Decoro via --corsi-petal-image inline nello style del <section>. */

	.FdoCorsiPetal {
		z-index: 0;
		overflow: visible;
	}

	.FdoCorsiPetal:before {
		content: "";
		position: absolute;
		z-index: -1;
		width: 50%;
		aspect-ratio: 1;
		background-image: var(--corsi-petal-image);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center bottom;
		pointer-events: none;
	}

	.FdoCorsiPetal--right:before {
		right: -8rem;
		bottom: -10rem;
	}

	.FdoCorsiPetal .FdoSectionInner {
		position: relative;
		z-index: 1;
	}

	@media (max-width: 1024px) {
		.FdoCorsiPetal:before {
			opacity: .5;
		}
	}

/*	Griglia delle 2 card di pre-registrazione (1:1 _preregGrid_6te0o_141) */
	.FdoPreregGrid {
		display: grid;
		gap: var(--space-5);
		width: 100%;
		min-width: 0;
		justify-items: center;
	}

	@media (min-width: 1025px) {
		.FdoPreregGrid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

/*	Variante "prereg" della activity card: più larga e alta, sfondo dedicato
	(1:1 _prereg_19v69_19) + icona più grande (1:1 _iconPrereg_19v69_31) */
	.FdoActivityCard--prereg {
		width: min(560px, 100%);
		min-height: 600px;
		background-color: var(--color-card-prereg);
	}

	.FdoActivityIcon--prereg {
		width: 40px;
		height: 40px;
	}