/*	============================================================================
	Pagina "Aree Culturali" (/aree-culturali.htm) — SOLO stili specifici di questa
	pagina. I componenti generici del design system "Fdo" (reset, .FdoHeading,
	.FdoBtn, .FdoSection, ecc.) sono in custom/frontend/layout/css/global.css sotto
	lo scope .FdoPage. Qui sotto solo le classi proprie della pagina (prefisso Fdo),
	ricostruite fedelmente dai CSS-module del sito React di produzione:
	  _header_1wo56  -> .FdoAreaHeader*    (hero d'intestazione)
	  _section_105b1 -> .FdoAccesso*       ("Come vivere le esperienze")
	  _section_18ryl -> .FdoAree*          ("Esplora le Aree Culturali")
	  _block_pc2bu   -> .FdoAreaBlock*      (blocco singola area/paese)
	  _card_82w0q +
	  _textBlock_qj8qr -> .FdoEsp*          (card esperienza con testo espandibile)
	  _section_svtpf -> .FdoBanner*        (banner "Hai scoperto tradizioni?")
	  _section_ywbxz -> .FdoClosing*       (closing CTA finale)
	============================================================================ */


/*	----------------------------------------------------------------------------
	Hero d'intestazione (allineato a sinistra, sfondo desktop/mobile via variabili)
	---------------------------------------------------------------------------- */
	.FdoAreaHeader { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 95%; margin: 0 auto; overflow-x: clip; min-height: 100svh; padding: var(--space-8) var(--space-4) var(--space-7); background-image: var(--area-hero-bg-mobile); background-size: cover; background-position: center; background-repeat: no-repeat; }
	@media (min-width: 641px)  { .FdoAreaHeader { background-image: var(--area-hero-bg); } }
	@media (min-width: 1025px) { .FdoAreaHeader { justify-content: center; padding: var(--space-10) var(--space-6) var(--space-9); } }
	.FdoAreaHeaderInner { width: 100%; max-width: 707px; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); text-align: left; }
	.FdoAreaHeaderTitle { width: 100%; font-size: clamp(40px, 8vw, 80px); line-height: 1.1; text-align: left; text-wrap: pretty; }
	.FdoAreaHeaderPink { margin: 0; width: 100%; font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 400; text-align: left; color: var(--color-button-secondary-bg); }
	.FdoAreaHeaderBody { margin: 0; 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: #ffeaf3; }


/*	----------------------------------------------------------------------------
	Sezione "Come vivere le esperienze nelle Aree Culturali" (griglia 3 card)
	---------------------------------------------------------------------------- */
	.FdoAccesso { width: 100%; padding: var(--space-8) var(--space-4); background-color: var(--color-bg); }
	@media (min-width: 1025px) { .FdoAccesso { padding: var(--space-9) var(--space-6); } }
	.FdoAccessoInner { width: 100%; margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
	.FdoAccessoHeading { text-align: left; }
	.FdoAccessoIntro { margin: 0; max-width: 48ch; text-align: left; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-body); }
	.FdoAccessoGrid { display: grid; gap: var(--space-4); }
	@media (min-width: 1025px) { .FdoAccessoGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
	.FdoAccessoCard { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid #000; border-radius: 4px; min-height: 0; text-align: center; }
	@media (min-width: 1025px) { .FdoAccessoCard { gap: var(--space-2); } }
	.FdoAccessoIcon { width: 24px; height: 24px; flex-shrink: 0; }
	.FdoAccessoCardTitle { margin: 0; font-family: var(--font-body); font-size: var(--text-subtitle-size); line-height: var(--text-subtitle-line); font-weight: 700; color: var(--color-button-secondary-bg); }
	.FdoAccessoCardBody { margin: 0; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: #ffeaf3; }
	.FdoAccessoCardCta { 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-button-secondary-bg); text-decoration: underline; text-underline-offset: 3px; }


/*	----------------------------------------------------------------------------
	Sezione "Esplora le Aree Culturali del Festival" (decoro + elenco aree)
	---------------------------------------------------------------------------- */
	.FdoAree { width: 100%; padding: var(--space-8) var(--space-4) 104px; background-color: var(--color-bg); }
	@media (min-width: 1025px) { .FdoAree { padding: var(--space-9) var(--space-6) 104px; } }
	@media (max-width: 640px)  { .FdoAree { padding: var(--space-6) var(--space-4) 88px; } }
	.FdoAreeInner { width: 100%; margin: 0; display: flex; flex-direction: column; gap: var(--space-6); }
	.FdoAreeHeading { text-align: left; }
	.FdoAreeIntro { margin: 0; max-width: 48ch; text-align: left; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-body); }
	.FdoAreeDecor { display: flex; justify-content: center; width: 100%; }
	.FdoAreeList { display: flex; flex-direction: column; gap: var(--space-8); }


/*	----------------------------------------------------------------------------
	Blocco singola Area/Paese: immagine di testa + due colonne (info / esperienze)
	---------------------------------------------------------------------------- */
	.FdoAreaBlock { display: flex; flex-direction: column; gap: var(--space-5); scroll-margin-top: 80px; }
	/*	Foto d'intestazione dell'area: mini-collezione editabile (1 elemento). I due wrapper
		(contenitore collezione + item) sono blocchi a piena larghezza che NON alterano il layout:
		l'immagine mantiene le stesse dimensioni di prima (height 180/420, width 100%). */
	.FdoAreaBlockFoto { display: block; width: 100%; }
	.FdoAreaBlockFotoItem { display: block; width: 100%; margin: 0; }
	.FdoAreaBlockImage { display: block; width: 100%; max-width: 100%; height: 180px; margin-inline: auto; border-radius: 4px; object-fit: cover; object-position: center; }
	@media (min-width: 1025px) { .FdoAreaBlockImage { height: 420px; } }
	.FdoAreaBlockColumns { display: flex; flex-direction: column; gap: var(--space-5); }
	@media (min-width: 1025px) { .FdoAreaBlockColumns { flex-direction: row; align-items: flex-start; gap: var(--space-6); } }
	.FdoAreaBlockInfo { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
	@media (min-width: 1025px) { .FdoAreaBlockInfo { flex: 0 1 42%; } }
	.FdoAreaBlockTitle { font-size: clamp(32px, 5vw, var(--text-h2-size)); line-height: clamp(40px, 5vw, var(--text-h2-line)); text-align: left; }
	.FdoAreaBlockDesc { margin: 0; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-body); }
	.FdoAreaBlockExpCol { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
	@media (min-width: 1025px) { .FdoAreaBlockExpCol { flex: 1 1 58%; } }
	.FdoAreaBlockExpHeading { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: 400; color: var(--color-button-secondary-bg); }
	.FdoAreaBlockExpList { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
	@media (min-width: 1025px) { .FdoAreaBlockExpList { flex-direction: column; max-height: 660px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; padding-bottom: 0; } }


/*	----------------------------------------------------------------------------
	Card esperienza (testo troncato a 2 righe + toggle "mostra tutto")
	Stato espanso gestito da JS via classe .FdoEspCard--expanded.
	---------------------------------------------------------------------------- */
	.FdoEspCard { display: flex; flex-direction: column; gap: var(--space-3); width: min(280px, 85vw); flex: 0 0 auto; scroll-snap-align: start; padding: var(--space-3); border-radius: 4px; background-color: var(--color-card-activity); }
	@media (min-width: 1025px) { .FdoEspCard { flex-direction: row; align-items: stretch; width: 100%; gap: var(--space-3); scroll-snap-align: unset; } }
	.FdoEspImageWrap { width: 100%; padding: 10px; flex-shrink: 0; transition: height .2s ease; }
	@media (min-width: 1025px) { .FdoEspImageWrap { width: auto; flex-shrink: 0; } }
	.FdoEspImage { display: block; width: 100%; height: 108px; border-radius: 4px; object-fit: cover; transition: height .2s ease; }
	@media (min-width: 1025px) { .FdoEspImage { width: 191px; height: 128px; } }
	.FdoEspCard--expanded .FdoEspImage { height: 250px; }
	@media (min-width: 1025px) { .FdoEspCard--expanded .FdoEspImage { height: 270px; } }
	.FdoEspContent { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; position: relative; padding-bottom: var(--space-6); }
	@media (min-width: 1025px) { .FdoEspContent { flex: 1; padding-bottom: var(--space-7); } }
	.FdoEspTitle { margin: 0; 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); }
	.FdoEspTextBlock { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
	.FdoEspText { width: 100%; font-size: var(--text-body-size); line-height: var(--text-body-line); color: #ffcfe2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: calc(var(--text-body-line) * 2); overflow: hidden; }
	.FdoEspCard--expanded .FdoEspText { -webkit-line-clamp: unset; max-height: none; overflow: visible; }
	.FdoEspToggle { position: absolute; right: 0; bottom: 0; margin: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius); background-color: transparent; color: var(--color-button-secondary-bg); transition: background-color .15s ease; }
	.FdoEspToggle:hover { background-color: #ffaece26; }
	.FdoEspToggleIcon { transition: transform .2s ease; }
	.FdoEspCard--expanded .FdoEspToggleIcon { transform: rotate(180deg); }


/*	----------------------------------------------------------------------------
	Banner "Hai scoperto tradizioni e rituali?" (sfondo con overlay + CTA)
	---------------------------------------------------------------------------- */
	.FdoBanner { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1 / 1; min-height: 0; padding: var(--space-8) var(--space-4); background-image: var(--area-banner-bg); background-size: cover; background-position: right center; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
	.FdoBanner::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, #052e5ad1, #052e5a73 48%, #052e5a26); pointer-events: none; }
	@media (min-width: 1025px) { .FdoBanner { aspect-ratio: auto; min-height: min(75vh, 701px); padding: var(--space-9) var(--space-6); justify-content: flex-end; } }
	.FdoBannerInner { position: relative; z-index: 1; width: 100%; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); text-align: left; }
	.FdoBannerTitle { max-width: 14ch; font-size: clamp(32px, 5vw, var(--text-h2-size)); line-height: clamp(40px, 5vw, var(--text-h2-line)); white-space: pre-line; text-align: left; }
	.FdoBannerSubtitle { margin: 0; max-width: 36ch; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-body); }
	.FdoBannerCta { margin-top: var(--space-2); }


/*	----------------------------------------------------------------------------
	Closing CTA finale "Inizia il tuo viaggio tra le culture d'Oriente"
	---------------------------------------------------------------------------- */
	.FdoClosing { width: 100%; min-height: 100svh; padding: var(--space-8) var(--space-4); background-color: var(--color-bg); background-image: var(--area-closing-bg); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; }
	@media (min-width: 1025px) { .FdoClosing { min-height: min(75vh, 701px); padding: var(--space-9) var(--space-6); } }
	.FdoClosingInner { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
	.FdoClosingTitle { text-align: center; }
	.FdoClosingBody { margin: 0; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-body); }


/*	----------------------------------------------------------------------------
	Edit-mode (WYSIWYG). In modifica il testo delle esperienze NON va troncato (va
	visto tutto per editarlo) e la lista esperienze deve diventare un flusso verticale
	senza max-height/scroll interno, così ogni card è raggiungibile e la toolbar
	aggiungi/sposta/elimina resta comoda. Guardia .Fdo--editing (aggiunta da editor.js).
	---------------------------------------------------------------------------- */
	.Fdo--editing .FdoEspText { -webkit-line-clamp: unset; max-height: none; overflow: visible; }
	.Fdo--editing .FdoAreaBlockExpList { flex-direction: column; max-height: none; overflow: visible; scroll-snap-type: none; }