/*	============================================================================
	Blocco "I Mille Sapori dell'Asia" (street-food asiatico) — CSS del blocco.
	Include Twig: custom/frontend/layout/html/common/blocco-mille-sapori.htm

	Fedele al CSS del sito React di produzione:
	- bh4l6.css  → layout sezione (heading group, cta row, cta button)
	- 1p61s.css  → singola card cucina (immagine + didascalia)
	- 1bw74.css  → meccanica marquee generica, GIA' coperta da .FdoMarquee/
	  .FdoMarqueeTrack/.FdoMarqueeGroup in global.css (non ridefinita qui).

	Usa solo i design token "Fdo" (:root in global.css, sezione "NUOVO DESIGN
	SYSTEM \"Fdo\""). Nessuna classe FdoSection/FdoHeading/FdoBtn/FdoMarquee
	viene ridefinita qui, solo le classi specifiche di questo blocco.
	============================================================================ */

/*	Padding verticale extra rispetto al default di .FdoSection (1:1 con
	._section_bh4l6_1 del sorgente) */
.FdoMilleSapori { padding-top: var(--space-9); }
@media (min-width: 1025px) { .FdoMilleSapori { padding-top: var(--space-10); } }

/*	Heading group (titolo + sottotitolo) — 1:1 con ._headingGroup_bh4l6_5 */
.FdoMilleSaporiHeadingGroup { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }

/*	Paragrafo descrittivo. Su mobile resta la colonna stretta del sorgente
	(._body_15o60_34._narrow_15o60_23); su desktop occupa il 65% della pagina — il max-width lo
	tiene comunque dentro il contenitore della sezione (--container-max: 1200px). */
.FdoMilleSaporiBody { max-width: 48ch; }
@media (min-width: 1025px) {
	.FdoMilleSaporiBody { width: 65vw; max-width: 100%; }
}

/*	----------------------------------------------------------------------
	Card cucina (figure immagine + nome) — 1:1 con 1p61s.css
	---------------------------------------------------------------------- */

.FdoMilleSaporiCard { flex-shrink: 0; width: 186px; margin: 0; background-color: #011d3d; }

.FdoMilleSaporiImage { display: block; width: 170px; height: 170px; margin: 8px 8px 0; border-radius: var(--radius); object-fit: cover; }

.FdoMilleSaporiCaption {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 8px;
	font-family: var(--font-display);
	font-size: var(--text-subtitle-size);
	line-height: var(--text-subtitle-line);
	font-weight: 400;
	text-align: center;
	color: #d89958;
	background: var(--gradient-heading);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*	----------------------------------------------------------------------
	CTA row — 1:1 con ._ctaRow_bh4l6_17/._cta_bh4l6_17/._ctaOutline_bh4l6_49
	(colonna full-width su mobile, riga auto-width da desktop; i colori/hover
	dei bottoni sono gia' gestiti da .FdoBtn/.FdoBtn--secondary/.FdoBtn--outline
	in global.css, qui solo il layout del contenitore + width dei bottoni)
	---------------------------------------------------------------------- */

.FdoMilleSaporiCtaRow { flex-direction: column; align-items: stretch; width: 100%; }
.FdoMilleSaporiCtaRow .FdoBtn { width: 100%; }

@media (min-width: 1025px) {
	.FdoMilleSaporiCtaRow { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; width: auto; }
	.FdoMilleSaporiCtaRow .FdoBtn { width: auto; }
}