@charset "utf-8";

/*
	Pagina "Info e contatti" (ricostruita dal bundle React di produzione,
	docs/dom/info-e-contatti.htm). Solo stili SPECIFICI di questa pagina: i
	token/reset/componenti generici (Section, Heading, Button) sono in
	global.css (sezione "NUOVO DESIGN SYSTEM Fdo"), header/footer in
	header.css/footer.css, il blocco newsletter ha CSS proprio
	(blocco-newsletter.css). Struttura HTML:
	custom/frontend/layout/html/info-e-contatti/info-e-contatti.htm

	Mappatura classi sorgente -> Fdo:
	_section_1pjlq_5      -> riuso .FdoSection + .FdoInfoSection (collasso padding)
	_sectionHeading_..24  -> .FdoInfoHeading
	_narrowColumn_..29    -> .FdoNarrowColumn
	_bar_gw18o_1 (sticky) -> .FdoInfoNav*
	_contact*_1pjlq       -> .FdoContact*
	_ticket*_1pjlq        -> .FdoTicket* / .FdoNote*
	_body/_faqAnswer      -> .FdoInfoBody / .FdoFaqAnswer
	_accordion_1lfgh      -> .FdoAccordion*
*/


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

/*	Le sezioni di contenuto stampate una sotto l'altra collassano il padding
	superiore tra loro (fedele a "._section_1pjlq_5 + ._section_1pjlq_5"): la
	barra di navigazione sticky tra hero e contatti interrompe l'adiacenza,
	quindi i contatti mantengono il padding pieno. */
	.FdoInfoSection + .FdoInfoSection { padding-top: 0; }

	.FdoInfoHeading { width: 100%; text-align: center; }


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

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

	.FdoInfoNavInner {
		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;
	}

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

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

	.FdoInfoNavCell {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		box-sizing: border-box;
		width: 100%;
		max-width: 215px;
		height: min(100%, 52px);
		max-height: 52px;
		padding: 0 var(--space-2);
		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;
	}

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

	@media (min-width: 641px) {
		.FdoInfoNav { width: min(876px, calc(100% - (2 * var(--space-6)))); }
	}


/*	============================== contatti ============================== */

	.FdoContactBlocks {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-6);
		width: 100%;
		margin-top: var(--space-3);
	}

	.FdoContactRow {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-5);
		width: 100%;
	}

	.FdoContactBlock {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		box-sizing: border-box;
		text-align: center;
		background-color: var(--color-card-prereg);
		border-radius: var(--radius);
	}

	.FdoContactBlockFramed {
		width: 80%;
		min-height: 320px;
		padding: var(--space-7) var(--space-5);
		background-image: var(--contact-deco-image);
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.FdoContactBlockEspositori {
		width: 90%;
		padding: var(--space-7) var(--space-5);
	}

	.FdoContactTitle {
		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: center;
	}

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

	.FdoContactLink {
		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-body);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.FdoContactText {
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		line-height: var(--text-body-line);
		color: var(--color-body);
		text-align: center;
		max-width: 36ch;
	}


/*	=================== colonna stretta (testo a sx) =================== */

	.FdoNarrowColumn {
		width: 80%;
		max-width: 100%;
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-5);
		text-align: left;
	}


/*	=================== tipologie e prezzi biglietti =================== */

	.FdoTicketList {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		width: 100%;
	}

	.FdoTicketItem {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		box-sizing: border-box;
		width: 100%;
		padding: 24px;
		border: 1px solid #000;
		text-align: left;
	}

	.FdoTicketTitle {
		font-family: var(--font-body);
		font-size: 16px;
		line-height: 20px;
		font-weight: 700;
		color: #ffbed8;
		text-align: left;
	}

	.FdoTicketBody {
		font-family: var(--font-body);
		font-size: 16px;
		line-height: 20px;
		font-weight: 400;
		color: #ffeaf3;
		text-align: left;
	}

	.FdoTicketNotes {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
		width: 100%;
		text-align: center;
	}

	.FdoNote {
		font-family: var(--font-body);
		font-size: 16px;
		line-height: 24px;
		text-align: center;
		width: 100%;
	}

	.FdoNoteHours { font-weight: 700; color: #ffbed8; }
	.FdoNoteDisclaimer { font-weight: 400; color: #ffeaf3; }


/*	=================== testo "come acquistare" / risposte FAQ =================== */

	.FdoInfoBody,
	.FdoFaqAnswer {
		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-align: left;
	}


/*	============================== domande frequenti ============================== */

	.FdoAccordion {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.FdoAccordionItem { border-bottom: 1px solid rgba(255, 234, 243, .2); }

	.FdoAccordionHeading { margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; }

	.FdoAccordionTrigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		width: 100%;
		padding: var(--space-4) 0;
		font-family: var(--font-body);
		font-size: var(--text-subtitle-size);
		line-height: var(--text-subtitle-line);
		font-weight: var(--text-button-weight);
		color: var(--color-body);
		text-align: left;
	}

	.FdoAccordionTrigger:hover { opacity: .9; }

	.FdoAccordionChevron { flex-shrink: 0; transition: transform .2s ease; }
	.FdoAccordionChevron--open { transform: rotate(180deg); }

	.FdoAccordionPanelInner {
		padding-bottom: var(--space-5);
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		line-height: var(--text-body-line);
		color: var(--color-body);
		opacity: .95;
	}

	.FdoAccordionPanelInner p + p { margin-top: var(--space-3); }


/*	============================== desktop ============================== */

	@media (min-width: 1025px) {
		.FdoNarrowColumn { width: 70%; }

		.FdoContactRow {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: stretch;
			gap: var(--space-5);
		}

		.FdoContactBlockFramed {
			width: 557px;
			height: 620px;
			min-height: 620px;
			padding: var(--space-8) var(--space-6);
		}

		.FdoContactBlockEspositori {
			width: 90%;
			max-width: 1140px;
		}
	}