@charset "utf-8";

/*
	Pagina "Programma generale" (ricostruita da zero dal bundle React di produzione,
	docs/dom/programma-generale.htm). Solo stili SPECIFICI di questa pagina: i token/
	reset/componenti generici (Section, Heading, Button, Marquee, Scroller) sono in
	global.css (sezione "NUOVO DESIGN SYSTEM Fdo"); header/footer negli include comuni;
	i blocchi ripetuti Street Food (Mille Sapori) e Newsletter hanno CSS proprio
	(blocco-mille-sapori.css / blocco-newsletter.css, inclusi dal template).
	Struttura HTML: custom/frontend/layout/html/programma-generale/programma-generale.htm

	Prefisso classi "FdoPg" per non collidere con le classi della homepage (home.css).
	Fedele ai CSS sorgente in .newlayout/assets/index-hyXwmGwt.css: _header_fy6hp
	(header), _bar_gw18o (barra sticky), _grid_11q7j / _decor_11q7j (griglia + decoro),
	_card_aqcra + _textBlock/_toggle_qj8qr (card espandibili), _block_1478e (corsi).
*/


/*	============================== header (hero di pagina) ============================== */

/*	---------------------------------------------------------------------- */
/*	Componente "FdoPgHeader" — apertura di pagina (immagine full-bleed + titolo
/*	gradient + sottotitolo). Titolo con .FdoHeading/--h1/--gradient del design
/*	system; qui solo layout/sfondo. Fedele a _header_fy6hp_1 / _inner_fy6hp_18.
/*	Sfondo: --header-bg-image impostata inline nello style="" del <section>.
/*	---------------------------------------------------------------------- */

	.FdoPgHeader {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		width: 95%;
		margin: 0 auto;
		overflow-x: clip;
		min-height: 90svh;
		padding: var(--space-8) var(--space-4) var(--space-7);
		background-image: var(--header-bg-image);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.FdoPgHeaderInner {
		width: 100%;
		max-width: 532px;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		text-align: left;
		transform: translateY(-8%);
	}

	.FdoPgHeaderTitle {
		width: 100%;
		font-size: clamp(40px, 8vw, 80px);
		line-height: 1.1;
		text-align: left;
		text-wrap: pretty;
	}

	.FdoPgHeaderSubtitle {
		width: 100%;
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		line-height: var(--text-body-line);
		font-weight: var(--text-body-weight);
		color: #ffcfe2;
		text-align: left;
	}

	@media (min-width: 1025px) {
		.FdoPgHeader {
			min-height: 90svh;
			padding: var(--space-10) var(--space-6) var(--space-9);
		}
		.FdoPgHeaderInner {
			transform: none;
		}
	}


/*	============================== barra sticky di navigazione ============================== */

/*	---------------------------------------------------------------------- */
/*	Componente "FdoPgNav" — barra a 3 celle sticky sotto l'header, che scorre
/*	alle sezioni (Spettacoli / Aree culturali / Street food). Fedele a
/*	_bar_gw18o_1 (variante _tall + inline --sticky-bar-height:120px). Lo scroll
/*	alla sezione e' gestito da uno script inline nel template (data-scroll-to).
/*	---------------------------------------------------------------------- */

	.FdoPgNav {
		--sticky-bar-gutter: var(--space-4);
		--sticky-cell-max-width: 215px;
		--sticky-cell-max-height: 88px;
		position: sticky;
		top: 80px;
		z-index: 90;
		box-sizing: border-box;
		width: min(876px, calc(100% - (2 * var(--sticky-bar-gutter))));
		max-width: 876px;
		height: 120px;
		max-height: 120px;
		margin-inline: auto;
		margin-block: var(--space-4);
		border-radius: 8px;
		background: var(--gradient-section-sticky);
		overflow: hidden;
	}

	.FdoPgNavInner {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		max-width: 876px;
		height: 100%;
		margin-inline: auto;
		min-width: 0;
	}

	.FdoPgNavCellWrap {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 1 0;
		min-width: 0;
		height: 100%;
		position: relative;
	}

	.FdoPgNavSeparator {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: min(var(--sticky-cell-max-height), 70%);
		background-color: #000;
		pointer-events: none;
	}

	.FdoPgNavCell {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		box-sizing: border-box;
		width: 100%;
		max-width: var(--sticky-cell-max-width);
		height: min(100%, var(--sticky-cell-max-height));
		max-height: var(--sticky-cell-max-height);
		padding: 0 var(--space-2);
		border: 0;
		background: transparent;
		cursor: pointer;
		color: var(--color-body);
		font-family: var(--font-body);
		font-size: clamp(.6875rem, 2.6vw, var(--text-caption-size));
		line-height: 1.25;
		font-weight: var(--text-body-weight);
		text-align: center;
		transition: color .15s ease;
	}
	.FdoPgNavCell:hover {
		color: var(--color-h3);
	}

	.FdoPgNavIcon {
		display: block;
		width: clamp(18px, 5vw, 24px);
		height: clamp(18px, 5vw, 24px);
		flex-shrink: 0;
		object-fit: contain;
	}

	.FdoPgNavLabel {
		display: block;
		max-width: 100%;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	@media (min-width: 1025px) {
		.FdoPgNav {
			--sticky-bar-gutter: var(--space-6);
		}
	}


/*	============================== griglia attivita' + decoro ============================== */

/*	---------------------------------------------------------------------- */
/*	Griglia delle card di attivita' (spettacoli-palchi, aree-culturali) e decoro
/*	SVG in cima alla sezione spettacoli. Fedele a _grid_11q7j_20 / _decor_11q7j_1:
/*	1 colonna su mobile, 3 colonne (flex-wrap, terzi) da 641px in su.
/*	---------------------------------------------------------------------- */

	.FdoPgDecor {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.FdoPgGrid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-2);
		width: 100%;
	}

	@media (min-width: 641px) {
		.FdoPgGrid {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--space-2);
		}
		.FdoPgGrid > * {
			flex: 0 0 calc((100% - var(--space-2) * 2) / 3);
			min-width: 0;
			max-width: calc((100% - var(--space-2) * 2) / 3);
		}
	}


/*	============================== card attivita' espandibile ============================== */

/*	---------------------------------------------------------------------- */
/*	Card di attivita' con immagine quadrata, titolo, testo troncato a 2 righe e
/*	bottone toggle in basso a destra che espande/richiude il testo (JS nel
/*	template). Fedele a _card_aqcra_1 (+ _cardWithBg / _cardBordered),
/*	_textBlock_qj8qr_1, _textClamped_qj8qr_9, _bottomRightToggle_aqcra_98,
/*	_doubleArrow_qj8qr_49 (freccia doppia ruotata a 45deg, 225deg da espansa).
/*	---------------------------------------------------------------------- */

	.FdoPgCard {
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		gap: var(--space-4);
		border-radius: var(--radius);
		text-align: left;
	}
	.FdoPgCard--bg {
		background-color: #011d3c;
		padding: 8px 8px 40px;
	}
	.FdoPgCard--bordered {
		border: 1px solid #000;
		padding: 8px 8px 40px;
	}

	.FdoPgCardImageFrame {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: var(--radius);
		overflow: hidden;
		flex-shrink: 0;
	}
	.FdoPgCardImage {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.FdoPgCardBody {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: var(--space-1);
		min-width: 0;
		min-height: 0;
		padding: 0;
	}

	.FdoPgCardTitle {
		font-family: var(--font-body);
		font-size: 16px;
		line-height: 24px;
		font-weight: 600;
		color: var(--color-h3);
		text-align: left;
	}

	.FdoPgCardTextArea {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-top: auto;
	}

	.FdoPgCardTextBlock {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
	}

	.FdoPgCardText {
		width: 100%;
		font-size: var(--text-body-size);
		line-height: var(--text-body-line);
		color: var(--color-body);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.FdoPgCard--expanded .FdoPgCardText {
		-webkit-line-clamp: unset;
		overflow: visible;
	}
	/* In edit-mode il testo delle card NON va troncato: va visto tutto per modificarlo. */
	.Fdo--editing .FdoPgCardText {
		-webkit-line-clamp: unset;
		overflow: visible;
	}

	.FdoPgCardToggle {
		position: absolute;
		right: 8px;
		bottom: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: none;
		border-radius: var(--radius);
		background: none;
		color: var(--color-h3);
		transition: color .15s ease;
	}
	.FdoPgCardToggle:hover {
		color: var(--color-pink-soft);
	}

	.FdoPgCardArrow {
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.FdoPgCard--expanded .FdoPgCardArrow {
		transform: rotate(225deg);
	}


/*	============================== blocco corsi/attivita' ============================== */

/*	---------------------------------------------------------------------- */
/*	Blocco "Workshop, attivita' e corsi gratuiti" — 2 riquadri (posti illimitati /
/*	posti limitati) affiancati su desktop, impilati su mobile, con immagine a
/*	sinistra e testo a destra. Fedele a _columns_1478e_1 / _block_1478e_11 /
/*	_blockImage_1478e_24 / _blockContent_1478e_33 / _blockTitle_1478e_45. Titolo/
/*	paragrafi di sezione con .FdoHeading e .FdoSectionBody del design system.
/*	NB: componente analogo (ma non identico: qui CTA singola, li' doppia) al
/*	blocco "Corsi" della homepage (home.css, .FdoCorsi*) — candidato a common.
/*	---------------------------------------------------------------------- */

	.FdoPgCorsiColumns {
		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) {
		.FdoPgCorsiColumns {
			grid-template-columns: repeat(2, 1fr);
		}
	}

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

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

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

	.FdoPgCorsiTitle {
		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) {
		.FdoPgCorsiImage {
			width: 112px;
		}
		.FdoPgCorsiTitle {
			font-size: var(--text-caption-size);
			line-height: var(--text-caption-line);
		}
	}