/*
 * Menu Piatti - Tavola Calda, scorrimento orizzontale (.pz-tavola-calda-*, .pz-dish-*)
 * Scroller nativo con scroll-snap: funziona su touch/swipe senza JS; i due
 * bottoni prev/next (pz-tavola-calda.js) sono un aiuto extra per desktop/mouse.
 */

.pz-tavola-calda {
	padding: var(--pz-section-padding-top) 0 var(--pz-section-padding-bottom);
	background-color: var(--pz-color-cream-bg);
	overflow: hidden;
}

/* max-width = container + 2*padding (invece del semplice --pz-container-max-width):
 * le altre sezioni applicano il padding-x alla sezione ESTERNA (zero qui,
 * per lasciare lo scroller a piena larghezza) e poi centrano un contenitore
 * da 1100px senza padding proprio; qui il padding e' invece dentro
 * .pz-tavola-calda__intro stesso, quindi per ottenere lo STESSO inset
 * finale del titolo bisogna allargare il box di 2*padding e lasciare che
 * il padding "mangi" quello spazio extra, anziche' sommarsi al centraggio. */
.pz-tavola-calda__intro {
	max-width: calc(var(--pz-container-max-width) + 2 * var(--pz-section-padding-x));
	margin: 0 auto;
	padding: 0 var(--pz-section-padding-x);
}

.pz-tavola-calda__title {
	margin: 0 0 32px;
	padding-left: 0;
	width: calc(100% - 330px);
	font-size: clamp(2.07rem, 4.6vw, 2.99rem);
	font-weight: 800;
	color: var(--pz-color-dark);
	text-align: left;
	font-family: var(--pz-font-title);
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.pz-tavola-calda__title {
		padding-left: 0;
		width: auto;
	}
}

.pz-tavola-calda__scroller {
	display: flex;
	gap: var(--pz-piatti-card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 12px 40px 24px var(--pz-section-padding-x);
	margin: 0 auto;
	max-width: var(--pz-container-max-width);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.pz-tavola-calda__scroller::-webkit-scrollbar {
	height: 6px;
}

.pz-tavola-calda__scroller::-webkit-scrollbar-thumb {
	background-color: rgba(var(--pz-color-accent-rgb), 0.35);
	border-radius: 999px;
}

.pz-dish-card {
	position: relative;
	flex: 0 0 auto;
	width: min(300px, 80vw);
	scroll-snap-align: start;
	background-color: var(--pz-color-accent);
	border-radius: 24px;
	padding: 24px 149px 24px 22px;
	color: var(--pz-color-cream);
	overflow-wrap: normal;
}

/* Selettore .pz-dish-card .pz-dish-card__name (2 classi) invece del solo
 * .pz-dish-card__name (1 classe): la tipografia di base di Kadence per
 * .single-content h1..h6 (h3 qui) ha specificita' (0,1,1) e sovrascriveva
 * margin-bottom (era sempre 0.5em/8.4px a runtime, MAI i 18px scritti in
 * origine qui sotto - un bug preesistente, mai notato perche' la distanza
 * effettiva includeva comunque l'etichetta "Ingredienti" sottostante).
 * Valore ora impostato a 32.32px = la distanza REALMENTE visibile finora
 * (8.4px buggy + 17.92px di line-height dell'etichetta + 6px di margin
 * dell'etichetta), non i 18px "originali" mai realmente applicati - cosi'
 * la distanza visibile titolo->ingredienti resta quella attuale anche
 * dopo aver rimosso l'etichetta. */
.pz-dish-card .pz-dish-card__name {
	display: inline-block;
	margin: 0 0 32.32px;
	padding: 6px 18px;
	border-radius: 999px;
	background-color: var(--pz-color-cream);
	color: var(--pz-color-dish-name);
	font-size: 1.05rem;
	font-weight: 800;
	white-space: nowrap;
}

.pz-dish-card__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--pz-color-cream);
}

.pz-dish-card__image {
	position: absolute;
	top: 50%;
	right: -38px;
	transform: translateY(-50%);
	width: 177px;
	height: 177px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	filter: drop-shadow(0 12px 26px rgba(var(--pz-color-dark-rgb), 0.4));
}

.pz-tavola-calda__nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

.pz-tavola-calda__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--pz-color-accent);
	background-color: transparent;
	color: var(--pz-color-accent);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pz-tavola-calda__btn:hover,
.pz-tavola-calda__btn:focus-visible {
	background-color: var(--pz-color-accent);
	color: var(--pz-color-white);
}

@media (max-width: 600px) {
	.pz-dish-card {
		width: 84vw;
		padding: 22px 134px 22px 20px;
	}

	.pz-dish-card__image {
		width: 156px;
		height: 156px;
		right: -32px;
	}
}