/*
Theme Name: Monia
Theme URI: https://moniabakeoff.netsons.org/
Author: Fabio Zangrando
Description: Tema a blocchi per Monia De Carolis, pasticceria ad Ascoli Piceno. Composizione editoriale, grana di carta, dettagli in ottone e movimento guidato dallo scroll. Colori, caratteri e spaziature si modificano da Aspetto > Editor > Stili.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monia
Tags: block-theme, full-site-editing, food-and-drink, custom-colors
*/

/* ==========================================================================
   1. Fondamenta
   ========================================================================== */

:root {
	--ap-cur: 0;
	--oro: var(--wp--preset--color--ottone);
	--misura: 62ch;
}

* { box-sizing: border-box; }

/* Rete di sicurezza: nessuna immagine deve poter sbordare dal contenitore,
   qualunque cosa succeda alle regole piu' specifiche. */
img, picture, video { max-width: 100%; height: auto; }

body {
	background: var(--wp--preset--color--travertino);
	/* NIENTE overflow qui: qualunque valore diverso da visible su un antenato
	   disattiva position:sticky sulla testata. Il taglio orizzontale sta sul
	   contenuto, che e' l'unica cosa che puo' sbordare. */
}
.mdc-main,
.mdc-ap { overflow-x: clip; }

/* WordPress mette 1.5rem di stacco fra i blocchi di primo livello: fra
   testata e apertura diventa una striscia chiara indesiderata. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* --- La grana ------------------------------------------------------------
   Un velo di rumore fisso sopra tutta la pagina. E' quello che toglie al
   fondo l'aspetto di tinta digitale e gli da' quello di carta. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0.4;
	mix-blend-mode: multiply;
	background-repeat: repeat;
	background-size: 200px 200px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}

/* --- L'ottone si comporta da metallo -------------------------------------
   Non una tinta piatta: un riflesso che scorre lentamente, come la foglia
   d'oro sulle sue torte quando gira il piatto. */
.mdc-oro,
.mdc-firma {
	background-image: linear-gradient(100deg,
		#8D6624 0%, #8D6624 30%,
		#C99A3A 44%, #EFD79B 50%, #C99A3A 56%,
		#8D6624 70%, #8D6624 100%);
	background-size: 300% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: mdc-lustro 9s ease-in-out 1.4s infinite;
}
/* Nel titolo di apertura la riga dorata ha gia' l'animazione d'ingresso:
   le due vanno dichiarate insieme, altrimenti la seconda cancella la prima. */
.mdc-ap__titolo .r.mdc-oro {
	animation:
		mdc-monta 0.72s cubic-bezier(0.22, 1, 0.36, 1) both,
		mdc-lustro 9s ease-in-out 1.4s infinite;
	animation-delay: calc(var(--i, 0) * 90ms + 120ms), 1.4s;
}
@keyframes mdc-lustro {
	0%, 62%  { background-position: 100% 0; }
	100%     { background-position: 0% 0; }
}

/* ==========================================================================
   2. Movimento
   ========================================================================== */

/* Comparsa allo scroll. Governata da IntersectionObserver invece che da
   animation-timeline: view() -- con sezioni piu' alte del viewport la fase
   "entry 100%" non si raggiunge mai e l'animazione resta congelata a meta'. */
.mdc-js [data-mdc-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.mdc-js [data-mdc-reveal].is-vista { opacity: 1; transform: none; }

.mdc-js .mdc-ritratto__img img,
.mdc-js .mdc-mosaico__img img {
	transform: scale(1.08);
	transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mdc-js .is-vista .mdc-ritratto__img img,
.mdc-js .mdc-ritratto__img.is-vista img,
.mdc-js .mdc-mosaico__img.is-vista img { transform: scale(1); }

/* Ingresso in pagina: gli elementi arrivano dal basso sfalsati, come si
   monta una torta a piani. Una volta sola, 600 ms in tutto. */
.mdc-ap__titolo .r,
.mdc-ap__riga,
.mdc-ap__vai {
	animation: mdc-monta 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
@keyframes mdc-monta {
	from { opacity: 0; transform: translateY(1.1em); }
	to   { opacity: 1; transform: none; }
}
.mdc-ap__media {
	animation: mdc-apre 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mdc-apre {
	from { opacity: 0; clip-path: inset(0 0 100% 0); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
	/* Si spengono gli SPOSTAMENTI, non le dissolvenze: la preferenza serve a
	   evitare nausea da movimento, non a rendere il sito immobile. */
	.mdc-js [data-mdc-reveal] { transform: none !important; }
	.mdc-slide.is-on img { animation: none !important; }
	.mdc-ap__titolo .r,
	.mdc-ap__riga,
	.mdc-ap__vai { animation-name: mdc-appare !important; }
	@keyframes mdc-appare { from { opacity: 0; } to { opacity: 1; } }
	.mdc-oro, .mdc-firma {
		background-image: none;
		-webkit-text-fill-color: var(--wp--preset--color--ottone);
	}
}

/* ==========================================================================
   3. Testata: marchio al centro, menu spezzato ai due lati
   ========================================================================== */

.mdc-sentinella {
	position: absolute;
	top: 0; left: 0;
	width: 1px; height: 120px;
	pointer-events: none;
	visibility: hidden;
}

/* Lo sticky sta sul contenitore del template part, non sulla testata: il suo
   genitore diretto e' alto quanto lei, e un elemento sticky puo' scorrere
   soltanto dentro il riquadro del proprio genitore. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.mdc-testata {
	position: relative;
	padding-block: 0.8rem;
	border-bottom: 1px solid var(--wp--preset--color--linea);
	transition: padding 0.55s cubic-bezier(0.33, 1, 0.68, 1),
	            box-shadow 0.55s ease;
}
/* Scendendo si accorcia e resta agganciata in alto: restano i link e il segno. */
.mdc-testata.is-ridotta {
	padding-block: 0.42rem;
	box-shadow: 0 8px 28px rgba(42, 33, 27, 0.07);
}
.mdc-testata.is-ridotta .mdc-emblema svg { height: 30px; }

/* Altezza esplicita misurata da JavaScript: una transizione su un valore
   noto e' molto piu' fluida di grid-template-rows o max-height, che
   ricalcolano il layout a ogni fotogramma. */
.mdc-marchio__testo {
	overflow: hidden;
	height: var(--mdc-marchio-h, auto);
	opacity: 1;
	transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.32s ease,
	            transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: height, opacity;
}
.mdc-testata.is-ridotta .mdc-marchio__testo {
	height: 0;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}
.mdc-testata__riga {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.mdc-marchio { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.mdc-marchio .wp-block-site-title {
	font-family: var(--wp--preset--font-family--testo) !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: opacity 0.3s ease, max-height 0.35s ease;
}
.mdc-emblema { display: block; line-height: 0; }
.mdc-emblema svg { height: 40px; width: auto; display: block; transition: height 0.55s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.4s ease; }
.mdc-emblema:hover svg { opacity: 0.72; }
.mdc-marchio .wp-block-site-title { line-height: 1.05; }
.mdc-marchio .wp-block-site-title a { text-decoration: none; white-space: nowrap; }
.mdc-marchio__desc {
	margin: 0;
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--neutro);
	transition: opacity 0.3s ease, max-height 0.35s ease;
}

.mdc-nav { font-size: 0.9rem; }
.mdc-nav .wp-block-navigation__container { gap: clamp(1.25rem, 2.6vw, 2.4rem); }
.mdc-nav a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	position: relative;
	padding-block: 3px;
	white-space: nowrap;
}
.mdc-nav a::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: right;
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.mdc-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Barra piena, non sovrapposta: sopra una fotografia con molti dettagli il
   testo sovrapposto resta sempre incerto da leggere. */
.mdc-testata {
	background: var(--wp--preset--color--carta);
}
.mdc-emblema { color: var(--wp--preset--color--tartufo); }

/* --- Menu a comparsa: blocco nativo di WordPress, non fatto a mano -------
   Gestisce da solo tasto, chiusura, trappola del focus, Esc e blocco dello
   scroll. Qui si veste soltanto. */
.mdc-testata .mdc-nav-mobile { display: none; }
.mdc-nav-mobile .wp-block-navigation__responsive-container-open,
.mdc-nav-mobile .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--tartufo);
	padding: 10px;
}
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--travertino);
	padding: clamp(4rem, 14vw, 6rem) 1.6rem 2rem;
	z-index: 100;
}
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close { max-width: 100%; }
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	/* fixed, non absolute: il riquadro delle voci e' centrato, quindi un
	   absolute ancorerebbe la X a meta' schermo invece che all'angolo. */
	position: fixed;
	top: 0.85rem;
	right: 0.85rem;
	width: 44px; height: 44px;
	z-index: 2;
}
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	margin-top: 0;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
}
/* Le voci al centro verticale: in cima lasciavano due terzi di vuoto. */
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
	align-items: center;
	justify-content: center;
}
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open a {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 9vw, 2.8rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: none;
	font-weight: 400;
	color: var(--wp--preset--color--tartufo);
	text-decoration: none;
}
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	/* Il blocco nasce in riga: nel pannello va impilato, altrimenti le voci
	   escono dallo schermo. */
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 0.2rem;
	width: 100%;
}
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open a {
	display: block;
	width: 100%;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linea);
}
.mdc-nav-mobile .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child a { border-bottom: 0; }



/* ==========================================================================
   4. Apertura a tutto schermo
   ========================================================================== */

.mdc-ap {
	position: relative;
	height: calc(100svh - var(--mdc-testata-h, 118px));
	min-height: 540px;
	max-height: 940px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--wp--preset--color--tartufo);
}

.mdc-ap .mdc-ap__scena.swiper { position: absolute; inset: 0; margin: 0; z-index: 1; }
.mdc-ap__scena .swiper-wrapper { height: 100%; }
.mdc-ap__scena .swiper-slide { overflow: hidden; height: 100%; }
.mdc-ap__scena picture { position: absolute; inset: 0; display: block; }
.mdc-ap__scena img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 38%;
	display: block;
	transform: scale(1.02);
}
/* Zoom lento sulla diapositiva attiva: la fotografia non sta mai ferma.
   Swiper toglie e rimette la classe, quindi l'animazione riparte da sola. */
.mdc-ap__scena .swiper-slide-active img { animation: mdc-zoom 9s ease-out forwards; }
@keyframes mdc-zoom {
	from { transform: scale(1.02); }
	to   { transform: scale(1.14); }
}

/* Velo scuro: senza, il testo bianco sparisce sulle zone chiare.
   Swiper assegna z-index 1 al proprio contenitore, quindi la scala va
   dichiarata per intero: scena 1, velo 2, testo 3, barre 4. */
.mdc-ap__velo {
	position: absolute; inset: 0;
	z-index: 2;
	/* Il carosello cambia foto: il velo deve reggere per tutte e quattro,
	   quindi e' un pannello a sinistra, non una correzione su misura. */
	background:
		linear-gradient(to right,
			rgba(18, 13, 9, 0.9) 0%,
			rgba(18, 13, 9, 0.84) 20%,
			rgba(18, 13, 9, 0.6) 38%,
			rgba(18, 13, 9, 0.24) 54%,
			rgba(18, 13, 9, 0) 70%),
		linear-gradient(to top, rgba(18, 13, 9, 0.7) 0%, rgba(18, 13, 9, 0.24) 26%, transparent 48%);
}

.mdc-ap__testo {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(2.2rem, 4.5vh, 3.4rem);
	color: var(--wp--preset--color--carta);
}

.mdc-ap__occhiello {
	display: flex; align-items: center; gap: 0.9rem;
	margin: 0 0 1.5rem;
	font-size: 0.7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.26em;
	color: rgba(251, 247, 240, 0.82);
}
.mdc-ap__occhiello i { width: 34px; height: 1px; background: var(--wp--preset--color--ottone-chiaro); display: block; }

.mdc-ap__titolo {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 7.4vw, 6.6rem);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.012em;
	margin: 0;
	max-width: 15ch;
	color: var(--wp--preset--color--carta);
	text-shadow: 0 2px 40px rgba(24, 18, 13, 0.45);
}
.mdc-ap__titolo .r { display: block; }

.mdc-ap__riga {
	max-width: 48ch;
	margin: 1.6rem 0 0;
	font-size: 1.1rem;
	line-height: 1.55;
	color: rgba(251, 247, 240, 0.9);
	text-shadow: 0 1px 20px rgba(24, 18, 13, 0.5);
}

.mdc-ap__vai {
	display: inline-flex; align-items: center; gap: 0.85rem;
	margin-top: 2.1rem;
	font-size: 0.78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.18em;
	color: var(--wp--preset--color--carta);
	text-decoration: none;
}
.mdc-ap__vai span {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--wp--preset--color--ottone-chiaro);
}
.mdc-ap__vai svg { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.mdc-ap__vai:hover svg { transform: translateX(9px); }

/* Barre di avanzamento: sono i pallini di Swiper, rivestiti. */
.mdc-ap__barre {
	position: absolute; z-index: 4;
	left: 0; right: 0; bottom: 0;
	display: flex; gap: 3px;
	padding: 0 clamp(1.5rem, 5vw, 4rem);
	max-width: 1320px; margin-inline: auto;
}
.mdc-ap__barre .swiper-pagination-bullet {
	flex: 1;
	height: 2px;
	width: auto;
	margin: 0 !important;
	border-radius: 0;
	background: rgba(251, 247, 240, 0.26);
	opacity: 1;
	position: relative;
	overflow: hidden;
	transition: background-color 0.4s ease;
	cursor: pointer;
}
.mdc-ap__barre .swiper-pagination-bullet::after {
	content: ""; position: absolute; inset: 0;
	background: var(--wp--preset--color--ottone-chiaro);
	transform: scaleX(0); transform-origin: left;
}
.mdc-ap__barre .swiper-pagination-bullet-active::after {
	animation: mdc-barra var(--mdc-durata, 6s) linear forwards;
}
@keyframes mdc-barra { to { transform: scaleX(1); } }

.mdc-oltre {
	display: inline-flex; align-items: center; gap: 0.8rem;
	margin-top: 2.2rem;
	font-size: 0.78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.16em;
	color: var(--wp--preset--color--tartufo);
	text-decoration: none;
}
.mdc-oltre span {
	padding-bottom: 3px;
	border-bottom: 1px solid var(--wp--preset--color--ottone);
}
.mdc-oltre svg { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.mdc-oltre:hover svg { transform: translateX(9px); }

@media (max-width: 640px) {
	.mdc-ap { height: calc(88svh - var(--mdc-testata-h, 150px)); min-height: 460px; }
	.mdc-ap__titolo { font-size: clamp(2.6rem, 12vw, 3.6rem); }
}

/* ==========================================================================
   5. Indice dei corsi
   ========================================================================== */

.mdc-corsi {
	max-width: 1180px;
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem);
	scroll-margin-top: 2rem;
}
.mdc-testa { margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: var(--misura); }
.mdc-testa__h {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	font-weight: 400; line-height: 1; letter-spacing: -0.008em;
	margin: 0 0 0.7rem;
}
.mdc-testa__n { margin: 0; color: var(--wp--preset--color--neutro); max-width: 52ch; }

.mdc-indice { list-style: none; margin: 0; padding: 0; position: relative; }
.mdc-riga { border-top: 1px solid var(--wp--preset--color--linea); }
.mdc-riga:last-of-type { border-bottom: 1px solid var(--wp--preset--color--linea); }

.mdc-riga a {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) 13rem 5rem 6.5rem;
	align-items: baseline;
	gap: 1.5rem;
	padding: 1.65rem 0.25rem;
	text-decoration: none;
	color: inherit;
	transition: padding-left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
	            background-color 0.5s ease;
}
.mdc-riga a:hover { padding-left: 1.5rem; background: rgba(217, 205, 186, 0.16); }

.mdc-riga__data {
	font-family: var(--wp--preset--font-family--display);
	display: flex; align-items: baseline; gap: 0.4rem;
	font-variant-numeric: tabular-nums;
}
.mdc-riga__data b { font-size: 2.5rem; font-weight: 400; line-height: 0.9; }
.mdc-riga__data i {
	font-family: var(--wp--preset--font-family--testo);
	font-style: normal; font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--wp--preset--color--neutro);
}
.mdc-riga__nome { font-size: 1.32rem; line-height: 1.2; font-weight: 500; }
.mdc-riga__meta {
	text-align: right;
	font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.11em;
	color: var(--wp--preset--color--neutro); white-space: nowrap;
}
.mdc-riga__prezzo {
	text-align: right;
	font-size: 1.12rem; font-weight: 700;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mdc-riga__posti {
	font-size: 0.78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em;
	text-align: right; color: var(--wp--preset--color--neutro);
	font-variant-numeric: tabular-nums;
}
.mdc-riga__posti.is-pochi { color: var(--wp--preset--color--lampone); }
.mdc-riga__posti.is-esaurito { color: #A79A88; text-decoration: line-through; }

/* L'anteprima esce da dietro il testo: strati, non una card. */
.mdc-anteprima {
	position: fixed;
	width: 230px; height: 288px;
	pointer-events: none;
	z-index: 40;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.9) rotate(-3deg);
	transition: opacity 0.36s ease, transform 0.56s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 26px 60px rgba(42, 33, 27, 0.28);
	overflow: hidden;
}
.mdc-anteprima.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.mdc-anteprima img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (hover: none), (max-width: 899px) { .mdc-anteprima { display: none; } }
@media (max-width: 899px) {
	.mdc-riga a {
		/* prezzo e posti hanno celle DISTINTE: prima condividevano la stessa
		   area di griglia e si stampavano uno sopra l'altro. */
		grid-template-columns: 4.2rem minmax(0, 1fr) auto;
		grid-template-areas:
			"data nome  nome"
			"data meta  meta"
			"data prezzo posti";
		gap: 0.25rem 0.9rem;
		padding-block: 1.25rem;
		align-items: baseline;
	}
	.mdc-riga__data { grid-area: data; }
	.mdc-riga__nome { grid-area: nome; font-size: 1.12rem; }
	.mdc-riga__meta { grid-area: meta; white-space: normal; text-align: left; }
	.mdc-riga__prezzo { grid-area: prezzo; text-align: left; margin-top: 0.35rem; }
	.mdc-riga__posti { grid-area: posti; justify-self: end; margin-top: 0.35rem; }
	.mdc-riga a:hover { padding-left: 0.25rem; }
}


/* ==========================================================================
   Lastra fotografica a tutta pagina
   ========================================================================== */

.mdc-lastra {
	position: relative;
	min-height: clamp(420px, 76svh, 800px);
	overflow: hidden;
	display: grid;
	align-items: end;
	margin-block: clamp(1.5rem, 4vw, 3rem);
}
.mdc-lastra__img {
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 128%;            /* margine verticale reale su cui scorrere */
}
.mdc-lastra__img img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
	display: block;
}
/* Niente velo sopra la fotografia: resta pulita. */
.mdc-lastra::after { content: none; }

/* Il testo sta su un pannello verde che sconfina sull'immagine: un elemento
   dichiarato, non un'ombra sfumata che sembra una macchia. */
.mdc-lastra__cita {
	position: relative;
	z-index: 2;
	margin: 0;
	border: 0;
	background: var(--wp--preset--color--anice);
	color: var(--wp--preset--color--carta);
	padding: clamp(1.75rem, 3.6vw, 2.9rem) clamp(1.6rem, 3.6vw, 3rem);
	width: min(560px, 82%);
	justify-self: start;
	margin-left: clamp(0px, 6vw, 90px);
	margin-bottom: clamp(-1.5rem, -3vw, -2.6rem);
	box-shadow: 0 26px 60px rgba(18, 13, 9, 0.3);
}
.mdc-lastra__cita p {
	max-width: none;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.65rem, 3.2vw, 2.6rem);
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--carta);
	text-shadow: none;
}
.mdc-lastra__cita::before {
	content: "";
	display: block;
	width: 42px; height: 1px;
	background: var(--wp--preset--color--ottone-chiaro);
	margin-bottom: 1.1rem;
}

@media (max-width: 860px) {
	.mdc-lastra__cita {
		width: calc(100% - 2.4rem);
		margin-left: 1.2rem;
		margin-bottom: -1.6rem;
	}
}

/* ==========================================================================
   6. Ritratto
   ========================================================================== */

.mdc-ritratto {
	max-width: 1180px;
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.25rem, 5vw, 3rem);
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.mdc-ritratto__img { position: relative; overflow: hidden; }
.mdc-ritratto .mdc-ritratto__img img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	object-position: center 16%;   /* inquadratura alta: la testa non si taglia */
}
.mdc-ritratto__testo h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 3.1rem);
	font-weight: 400; line-height: 1.02; letter-spacing: -0.008em;
	margin: 0 0 1.4rem;
	max-width: 18ch;
}
.mdc-ritratto__testo p { max-width: var(--misura); margin: 0 0 1.1rem; }
.mdc-grande {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
	line-height: 1.32;
	color: var(--wp--preset--color--tartufo);
	padding-left: 1.2rem;
	border-left: 1px solid var(--oro);
}
.mdc-firma {
	font-family: var(--wp--preset--font-family--mano);
	font-size: 2.5rem;
	line-height: 1;
	margin: 1.6rem 0 0 !important;
}

/* Su schermi larghi il testo sale sopra la fotografia. */
@media (min-width: 1000px) {
	/* La fotografia esce dal bordo sinistro della finestra, il testo le sale
	   sopra: e' la sovrapposizione a dare profondita', non l'ombra. */
	.mdc-ritratto { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
	.mdc-ritratto__img {
		margin-left: calc(50% - 50vw);
		width: calc(100% + 50vw - 50%);
	}
	.mdc-ritratto__testo {
		margin-left: -14%;
		position: relative;
		z-index: 2;
		background: var(--wp--preset--color--travertino);
		padding: clamp(2rem, 3.5vw, 3.2rem) 0 clamp(2rem, 3.5vw, 3.2rem) clamp(2rem, 3.5vw, 3.2rem);
	}
}
@media (max-width: 899px) {
	.mdc-ritratto { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. Mosaico delle ricette
   ========================================================================== */

.mdc-ricette .mdc-testa { margin-bottom: 0; }
.mdc-ricette .mdc-testa { margin-bottom: 0; }
.mdc-ricette { padding-block: clamp(3rem, 6vw, 5rem); }

.mdc-mosaico {
	list-style: none;
	margin: clamp(2rem, 4vw, 3.5rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	align-items: start;
}
.mdc-mosaico > li { margin: 0; }

/* Ritmo volutamente irregolare: larghezze, altezze e sfalsamenti diversi,
   cosi' la griglia non si legge come una griglia. */
.mdc-mosaico > li:nth-child(1)  { grid-column: span 7; }
.mdc-mosaico > li:nth-child(2)  { grid-column: span 5; margin-top: clamp(2rem, 6vw, 5rem); }
.mdc-mosaico > li:nth-child(3)  { grid-column: span 4; }
.mdc-mosaico > li:nth-child(4)  { grid-column: span 5; margin-top: clamp(1rem, 3vw, 2.5rem); }
.mdc-mosaico > li:nth-child(5)  { grid-column: span 3; margin-top: clamp(2.5rem, 7vw, 6rem); }
.mdc-mosaico > li:nth-child(6)  { grid-column: span 5; }
.mdc-mosaico > li:nth-child(7)  { grid-column: span 3; margin-top: clamp(1rem, 3vw, 2rem); }
.mdc-mosaico > li:nth-child(8)  { grid-column: span 4; margin-top: clamp(2rem, 5vw, 4rem); }

.mdc-mosaico__img { margin: 0 !important; overflow: hidden; display: block; }
.mdc-mosaico__img img {
	width: 100%; display: block;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Il mosaico reagisce al gesto, non allo scroll: si muove quello che scegli
   di guardare, non tutto quello che passa. */
@media (hover: hover) {
	.mdc-mosaico > li:hover .mdc-mosaico__img img { transform: scale(1.045); }
}
.mdc-mosaico > li:nth-child(1) .mdc-mosaico__img img { aspect-ratio: 16 / 11; object-fit: cover; }
.mdc-mosaico > li:nth-child(2) .mdc-mosaico__img img,
.mdc-mosaico > li:nth-child(6) .mdc-mosaico__img img { aspect-ratio: 4 / 5; object-fit: cover; }
.mdc-mosaico > li:nth-child(3) .mdc-mosaico__img img,
.mdc-mosaico > li:nth-child(5) .mdc-mosaico__img img,
.mdc-mosaico > li:nth-child(7) .mdc-mosaico__img img { aspect-ratio: 1; object-fit: cover; }
.mdc-mosaico > li:nth-child(4) .mdc-mosaico__img img,
.mdc-mosaico > li:nth-child(8) .mdc-mosaico__img img { aspect-ratio: 5 / 4; object-fit: cover; }

.mdc-mosaico__t {
	margin: 0.9rem 0 0 !important;
	font-size: 1.08rem !important;
	line-height: 1.25;
}
.mdc-mosaico__t a { text-decoration: none; }
.mdc-mosaico__t a:hover { color: var(--wp--preset--color--ottone); }

@media (max-width: 860px) {
	/* Anche stretto il mosaico resta irregolare: due colonne, ma proporzioni
	   e sfalsamenti diversi. Due colonne dritte sono una tabella. */
	.mdc-mosaico { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
	.mdc-mosaico > li:nth-child(n) { grid-column: span 1; margin-top: 0; }
	.mdc-mosaico > li:nth-child(1) { grid-column: span 2; }
	.mdc-mosaico > li:nth-child(6) { grid-column: span 2; }
	.mdc-mosaico > li:nth-child(3),
	.mdc-mosaico > li:nth-child(7) { margin-top: 2.2rem; }
	.mdc-mosaico > li:nth-child(5) { margin-top: -1.4rem; }
	.mdc-mosaico > li .mdc-mosaico__img img { aspect-ratio: 1 !important; }
	.mdc-mosaico > li:nth-child(1) .mdc-mosaico__img img,
	.mdc-mosaico > li:nth-child(6) .mdc-mosaico__img img { aspect-ratio: 16 / 10 !important; }
	.mdc-mosaico > li:nth-child(2) .mdc-mosaico__img img,
	.mdc-mosaico > li:nth-child(8) .mdc-mosaico__img img { aspect-ratio: 4 / 5 !important; }
	.mdc-mosaico__t { font-size: 0.95rem !important; }

	/* Ritratto: la fotografia esce dai bordi dello schermo invece di stare
	   in un riquadro centrato, che sembra una testimonianza. */
	.mdc-ritratto { padding-inline: 0; gap: 1.6rem; }
	.mdc-ritratto__img { margin-inline: 0; }
	/* Quadrata e inquadrata in alto: il 4:3 le tagliava la testa. */
	.mdc-ritratto .mdc-ritratto__img img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		object-position: center 16%;
	}
	.mdc-ritratto__testo { padding-inline: 1.4rem; }

	.mdc-lastra { height: clamp(360px, 62svh, 520px); margin-block: 0; }
	.mdc-lastra__cita p {
	text-shadow: 0 2px 26px rgba(14,10,6,.75), 0 0 60px rgba(14,10,6,.5); font-size: clamp(1.6rem, 7.6vw, 2.4rem); max-width: 12em; }
}

/* ==========================================================================
   8. Chiusura
   ========================================================================== */

.mdc-chiusura {
	background: var(--wp--preset--color--anice);
	color: var(--wp--preset--color--travertino);
	padding: clamp(4rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 3rem);
	text-align: center;
	position: relative;
}
.mdc-chiusura__in { max-width: 640px; margin-inline: auto; }
.mdc-chiusura h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 400; line-height: 1.04; letter-spacing: -0.008em;
	margin: 0 0 1.2rem; color: var(--wp--preset--color--carta);
}
.mdc-chiusura p { color: #BDB0A0; margin: 0 auto 2.2rem; max-width: 46ch; }
.mdc-bottone {
	display: inline-block;
	background: var(--wp--preset--color--ottone-chiaro);
	color: #20180A;
	padding: 1rem 2.4rem;
	font-size: 0.8rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.14em;
	text-decoration: none;
	transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mdc-bottone:hover { background: var(--wp--preset--color--carta); transform: translateY(-2px); }

/* ==========================================================================
   9. Pie di pagina e resto del sito
   ========================================================================== */

.mdc-pie { padding-block: clamp(2.5rem, 5vw, 4rem); }
.mdc-pie__nome { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; margin-bottom: 0.5rem; }
.mdc-pie h5 { color: var(--wp--preset--color--ottone-chiaro); margin-bottom: 0.75rem; }
.mdc-pie p, .mdc-pie__lista { font-size: 0.9rem; }
.mdc-pie__lista { list-style: none; padding: 0; }
.mdc-pie__lista li { margin-bottom: 0.4rem; }
.mdc-pie__riga { margin-block: 2rem; border-color: rgba(245, 239, 230, 0.2); }
.mdc-pie__nota { font-size: 0.8rem; color: #A9998A; margin: 0; }
.mdc-pie a { color: var(--wp--preset--color--travertino); text-decoration: none; }
.mdc-pie a:hover { color: var(--wp--preset--color--ottone-chiaro); text-decoration: underline; }
.mdc-pie__lista a { border-bottom: 1px solid transparent; }
.mdc-pie__lista a:hover { border-bottom-color: var(--wp--preset--color--ottone-chiaro); }
.mdc-pie__nota a { color: #C3B5A4; }

.mdc-main { padding-block: clamp(3rem, 7vw, 5rem); }
.mdc-main--home { padding: 0; }
.mdc-intestazione-archivio { margin-bottom: 3rem; }
.mdc-articolo__testa > * { margin-block: 0.4rem; }
.mdc-data { font-size: 0.85rem; color: var(--wp--preset--color--neutro); }
.mdc-paginazione { margin-top: 3rem; font-size: 0.9rem; }
.mdc-404 { text-align: center; padding-block: 6rem; }
.mdc-griglia { gap: 2rem 1.5rem; }
.mdc-scheda__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mdc-scheda__titolo { margin-top: 0.8rem !important; line-height: 1.25; }
.mdc-scheda__titolo a, .mdc-mosaico__t a { text-decoration: none; }

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--oro);
	outline-offset: 3px;
}
.wp-block-image img, .wp-block-post-featured-image img { border-radius: 0; }
.mdc-cifre, table { font-variant-numeric: tabular-nums; }
.wp-block-table { overflow-x: auto; }

/* =======================================================================
   Schermi stretti: la testata deve costare poco spazio verticale.
   ======================================================================= */
@media (max-width: 860px) {
	.mdc-testata { padding-block: 0.55rem; }
	.mdc-testata__riga {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 0;
		padding-inline: 3.5rem;   /* lascia posto al tasto a sinistra */
	}
	.mdc-nav--sx, .mdc-nav--dx { display: none; }
	.mdc-testata .mdc-nav-mobile {
		display: flex;
		align-items: center;
		position: absolute;
		left: clamp(0.5rem, 2vw, 1rem);
		top: 0;
		bottom: 0;
		z-index: 4;
		/* NIENTE transform qui: un transform su un antenato rende
		   position:fixed relativo a lui, e il pannello a schermo intero
		   si aprirebbe dentro il riquadro del tasto. */
	}

	.mdc-marchio { gap: 0.1rem; }
	.mdc-emblema svg { height: 30px; }
	.mdc-marchio .wp-block-site-title { font-size: 0.62rem !important; letter-spacing: 0.08em; }
	.mdc-marchio__desc { display: none; }

	/* Accorciata: resta il solo segno, testata a poco piu' di 40 px. */
	.mdc-testata.is-ridotta { padding-block: 0.4rem; }
	.mdc-testata.is-ridotta .mdc-emblema svg { height: 24px; }

	/* selettore piu' specifico: .mdc-ap__occhiello i vince su .mdc-solo-largo */
	.mdc-ap__occhiello .mdc-solo-largo,
	.mdc-ap__occhiello i.mdc-solo-largo { display: none; }
	.mdc-ap__occhiello {
		gap: 0;
		font-size: 0.6rem;
		letter-spacing: 0.11em;
		margin-bottom: 0.9rem;
		color: var(--wp--preset--color--neutro);
	}

	/* Su schermo stretto il testo resta SOPRA la fotografia: separarli fa
	   volantino. La leggibilita' la garantisce un velo piu' deciso, tarato
	   per il verticale. */
	.mdc-ap {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: stretch;
		height: calc(100svh - var(--mdc-testata-h, 110px));
		min-height: 460px;
		max-height: none;
	}
	.mdc-ap .mdc-ap__scena.swiper {
		position: absolute;
		inset: 0;
		height: auto;
	}
	.mdc-ap__scena .swiper-wrapper,
	.mdc-ap__scena .swiper-slide { height: 100%; }
	.mdc-ap__scena img { object-position: center 32%; }

	.mdc-ap__velo {
		display: block;
		background:
			linear-gradient(to top,
				rgba(16, 12, 8, 0.94) 0%,
				rgba(16, 12, 8, 0.88) 26%,
				rgba(16, 12, 8, 0.62) 46%,
				rgba(16, 12, 8, 0.24) 64%,
				rgba(16, 12, 8, 0.05) 80%,
				rgba(16, 12, 8, 0.25) 100%);
	}

	.mdc-ap__testo {
		position: relative;
		background: none;
		padding: 0 1.4rem 2.4rem;
		color: var(--wp--preset--color--carta);
	}
	.mdc-ap__occhiello { color: rgba(251, 247, 240, 0.8); }
	.mdc-ap__titolo {
		font-size: clamp(2.4rem, 11vw, 3.2rem);
		color: var(--wp--preset--color--carta);
		max-width: none;
		text-shadow: 0 2px 30px rgba(16, 12, 8, 0.6);
	}
	.mdc-ap__riga {
		font-size: 1rem;
		line-height: 1.5;
		max-width: 38ch;
		margin-top: 0.9rem;
		color: rgba(251, 247, 240, 0.92);
		text-shadow: 0 1px 18px rgba(16, 12, 8, 0.7);
	}
	.mdc-ap__vai { margin-top: 1.5rem; color: var(--wp--preset--color--carta); }
	.mdc-ap__vai span { border-bottom-color: var(--wp--preset--color--ottone-chiaro); }
	.mdc-ap__barre { padding-inline: 1.4rem; bottom: 0; top: auto; transform: none; }
}