/*	============================================================================
	Pagina "Ristoranti e Street Food" — CSS specifico di pagina.

	Ricostruito dal sito React di produzione (docs/dom/ristoranti-e-street-food.htm
	+ bundle .newlayout/assets/index-hyXwmGwt.css). Riusa il design system "Fdo" di
	global.css (.FdoSection / .FdoSectionInner / .FdoHeading / .FdoSectionSubtitle /
	.FdoSectionBody / .FdoBtn) e replica qui SOLO le classi non presenti in global.css.

	Moduli sorgente mappati (hash CSS React -> classi Fdo):
	- _header_13ujw   -> .FdoRistorantiHeader*   (header di pagina)
	- _section_1c7t1  -> .FdoRistorantiVideo*     (sezione video)
	- _wrapper_1d8v6  -> .FdoVideoWrapper/.FdoVideoIframe (stesso componente della home;
	                     replicato qui perche' home.css non e' caricato da questa pagina)
	- _grid_11q7j / _card_aqcra / _textClamped_qj8qr -> .FdoGusti*  (griglia gusti espandibile)
	- _section_uv9ia / _card_18szo -> .FdoShowCooking*  (lista show cooking)
	============================================================================ */


/*	============================== header di pagina ============================== */
/*	1:1 da _header_13ujw. Header testuale centrato (non un hero con sfondo). */

	.FdoRistorantiHeader { width: 100%; overflow-x: clip; padding: var(--space-8) var(--space-4) var(--space-7); }
	@media (min-width: 1025px) { .FdoRistorantiHeader { padding: var(--space-10) var(--space-6) var(--space-9); } }

	.FdoRistorantiHeaderInner { width: 100%; max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }

	.FdoRistorantiHeaderTitle { max-width: 20ch; }
	.FdoRistorantiHeaderSubtitle { margin: 0; max-width: 52ch; font-family: var(--font-display); font-size: clamp(20px, 3vw, var(--text-h3-size)); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); color: var(--color-h3); }
	.FdoRistorantiHeaderBody { margin: 0; max-width: 48ch; 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); }


/*	============================== sezione video ============================== */
/*	1:1 da _section_1c7t1 (contenitore) + _wrapper_1d8v6 (wrapper iframe 16:9). */

	.FdoRistorantiVideo { width: 100%; display: flex; justify-content: center; padding: 0 var(--space-4) var(--space-7); }
	@media (min-width: 1025px) { .FdoRistorantiVideo { padding: 0 var(--space-6) var(--space-9); } }

	.FdoVideoWrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background-color: #00000040; }
	.FdoVideoIframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }

	/*	_video_1c7t1_8: larghezza limitata a min(90vw, 100%) */
	.FdoRistorantiVideoFrame { width: min(90vw, 100%); border-radius: var(--radius); overflow: hidden; }


/*	============================== gusti orientali ============================== */
/*	Griglia di card espandibili. Sezione = .FdoSection del design system; qui solo
	l'inner a piena larghezza (_inner_11q7j), la griglia (_grid_11q7j) e le card
	(_card_aqcra + testo clampabile _textClamped_qj8qr). */

	.FdoGustiInner { max-width: none; margin: 0; width: 100%; }

	/*	Mobile: 1 colonna. Da 641px: 3 per riga (flex wrap). 1:1 da _grid_11q7j_20 */
	.FdoGustiGrid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); width: 100%; }
	@media (min-width: 641px) {
		.FdoGustiGrid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
		.FdoGustiGrid > * { flex: 0 0 calc((100% - var(--space-2) * 2) / 3); min-width: 0; max-width: calc((100% - var(--space-2) * 2) / 3); }
	}

	.FdoGustiCard { 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; background-color: #011d3c; padding: 8px 8px 40px; }

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

	.FdoGustiCardBody { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; min-height: 0; padding: 0; }
	/*	Titolo della card (es. "Tè Marocchino"): +0.3rem sul 16px del design originale, richiesta del
		03/08/2026 — a root 16px fa 20,8px. Il line-height resta 24px (rapporto 1,15): il titolo non è
		clampato, quindi non si taglia nulla; se un domani lo si vuole più arioso, va alzato anche quello. */
	.FdoGustiCardTitle { margin: 0; font-family: var(--font-body); font-size: calc(16px + 0.3rem); line-height: 24px; font-weight: 600; text-align: left; color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

	.FdoGustiCardTextArea { display: flex; flex: 1; flex-direction: column; margin-top: auto; }
	.FdoGustiCardTextBlock { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

	/*	Testo clampato a 3 righe; l'espansione (JS) toglie il clamp via .FdoGustiCard--expanded */
	.FdoGustiCardText { width: 100%; margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 400; text-align: left; color: #ffeaf3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: calc(24px * 3); overflow: hidden; }
	.FdoGustiCard--expanded .FdoGustiCardText { -webkit-line-clamp: unset; max-height: none; overflow: visible; }
	/* In edit-mode il testo delle card gusti NON va troncato: va visto tutto per modificarlo. */
	.Fdo--editing .FdoGustiCardText { -webkit-line-clamp: unset; max-height: none; overflow: visible; }

	/*	Toggle "doppia freccia" in basso a destra (1:1 da _bottomRightToggle_aqcra_98) */
	.FdoGustiCardToggle { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: none; background: none; color: var(--color-h3); cursor: pointer; }
	.FdoGustiCardArrow { transform: rotate(45deg); transition: transform .2s ease; }
	.FdoGustiCard--expanded .FdoGustiCardArrow { transform: rotate(225deg); }


/*	============================== show cooking ============================== */
/*	Fascia header con sfondo (_headerBand_uv9ia) + lista di card immagine/testo
	affiancate ad alternanza (_card_18szo / _columnsReversed), separate da un
	decoro SVG (_separator_uv9ia). */

	.FdoShowCooking { width: 100%; overflow-x: clip; }

	.FdoShowCookingHeaderBand { width: 100%; padding: var(--space-8) var(--space-4) var(--space-7); background-image: var(--section-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; }
	@media (min-width: 1025px) { .FdoShowCookingHeaderBand { padding: var(--space-10) var(--space-6) var(--space-9); } }
	.FdoShowCookingHeaderInner { width: 100%; max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }

	.FdoShowCookingContent { width: 100%; padding: var(--space-7) var(--space-4); }
	@media (min-width: 1025px) { .FdoShowCookingContent { padding: var(--space-9) var(--space-6); } }

	.FdoShowCookingSeparator { display: block; width: 100%; height: auto; }

	.FdoShowCookingList { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; min-width: 0; }
	.FdoShowCookingItem { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; }

	.FdoShowCookingCard { width: 100%; min-width: 0; }
	.FdoShowCookingColumns { display: grid; gap: var(--space-6); align-items: center; width: 100%; min-width: 0; }
	@media (min-width: 1025px) {
		.FdoShowCookingColumns { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
		.FdoShowCookingColumns--reversed .FdoShowCookingImageCol { order: 2; }
		.FdoShowCookingColumns--reversed .FdoShowCookingCardContent { order: 1; }
		.FdoShowCookingImage { margin: 0; }
	}
	@media (max-width: 1024px) { .FdoShowCookingImageCol { order: -1; } }

	.FdoShowCookingImageCol { min-width: 0; width: 100%; }
	.FdoShowCookingImage { display: block; width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 3 / 4; height: auto; border-radius: var(--radius); object-fit: cover; background-color: #0003; }

	.FdoShowCookingCardContent { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; text-align: left; }
	.FdoShowCookingCardTitle { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 4vw, var(--text-h3-size)); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-wrap: balance; }
	.FdoShowCookingCardText { 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: #ffcfe2; }
	.FdoShowCookingActions { margin-top: var(--space-2); }