/* ==========================================================================
   Home di Pasticceria Buzzi
   Solo le sezioni proprie della home. Colori, tipografia, bottoni, fregio e
   tessere prodotto vivono in base.css, condivisi con le altre pagine.
   ========================================================================== */

/* Apertura -------------------------------------------------------------- */

.buzzi-apertura {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(84vh, 760px);
	padding-block: 4rem;
	background-color: #201c15;
	background-size: cover;
	background-position: center;
}

.buzzi-apertura::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(26, 22, 16, 0.86) 0%,
		rgba(26, 22, 16, 0.68) 42%,
		rgba(26, 22, 16, 0.18) 78%,
		rgba(26, 22, 16, 0) 100%
	);
}

.buzzi-apertura__contenuto {
	position: relative;
	max-width: 38rem;
	margin-left: clamp(0rem, 12vw, 11rem);
	color: #fff;
}

.buzzi-apertura .buzzi-contenitore {
	position: relative;
	z-index: 1;
}

.buzzi-apertura .buzzi-occhiello {
	margin-bottom: var(--sp-3);
	font-size: 0.7rem;
	letter-spacing: 0.26em;
	color: rgba(255, 255, 255, 0.78);
}

.buzzi-apertura h1 {
	font-size: clamp(2.5rem, 5.2vw, 4.4rem);
	line-height: 1.08;
	color: #fff;
}

.buzzi-apertura__sottotitolo {
	margin: var(--sp-3) 0 0;
	max-width: 27rem;
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
}

.buzzi-apertura .buzzi-bottone {
	margin-top: var(--sp-4);
}

/* Sezione firma — Baci di Nus ------------------------------------------- */

/* Fondo bianco: stacca la sezione dalla carta crema della galleria che segue. */
.buzzi-firma {
	padding-block: var(--sp-6);
	background-color: #fff;
}

/* Colonne a larghezza dichiarata e gruppo centrato: con 1fr la colonna di
   testo si allargava a tutto lo spazio disponibile, spingendo testo e foto ai
   due bordi e lasciando un vuoto in mezzo. */
.buzzi-firma__griglia {
	display: grid;
	grid-template-columns: minmax(0, 30rem) minmax(0, 24rem);
	justify-content: center;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.buzzi-firma__testo p:not(.buzzi-occhiello):not(.buzzi-firma__prezzo) {
	margin: var(--sp-3) 0 0;
	max-width: 30rem;
	font-size: 1.02rem;
	font-weight: 300;
	line-height: 1.75;
	color: #4a4442;
}

.buzzi-firma__prezzo {
	margin: var(--sp-4) 0 0;
	font-size: 0.95rem;
	font-weight: 300;
	color: var(--buzzi-grigio);
}

.buzzi-firma__prezzo .amount {
	font-family: var(--buzzi-titolo);
	font-size: 1.5rem;
	color: var(--buzzi-inchiostro);
}

.buzzi-firma .buzzi-bottone {
	margin-top: var(--sp-3);
}

.buzzi-firma__foto {
	margin: 0;
}

.buzzi-firma__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.buzzi-firma .buzzi-occhiello {
	margin-bottom: var(--sp-3);
}

/* Storia ----------------------------------------------------------------- */

.buzzi-storia {
	background-color: var(--buzzi-marchio);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2752%27%20height%3D%2752%27%20viewBox%3D%270%200%2052%2052%27%3E%3Ccircle%20cx%3D%2713.00%27%20cy%3D%278.90%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2716.55%27%20cy%3D%2710.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2716.55%27%20cy%3D%2715.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2713.00%27%20cy%3D%2717.10%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%279.45%27%20cy%3D%2715.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%279.45%27%20cy%3D%2710.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2713%27%20cy%3D%2713%27%20r%3D%272.0%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.077%29%27%2F%3E%3Ccircle%20cx%3D%2739.00%27%20cy%3D%2734.90%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2742.55%27%20cy%3D%2736.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2742.55%27%20cy%3D%2741.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2739.00%27%20cy%3D%2743.10%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2735.45%27%20cy%3D%2741.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2735.45%27%20cy%3D%2736.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2739%27%20cy%3D%2739%27%20r%3D%272.0%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.077%29%27%2F%3E%3Ccircle%20cx%3D%2739%27%20cy%3D%2713%27%20r%3D%271.2%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.065%29%27%2F%3E%3Ccircle%20cx%3D%2713%27%20cy%3D%2739%27%20r%3D%271.2%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.065%29%27%2F%3E%3C%2Fsvg%3E");
	background-size: 52px 52px;
	color: #fff;
}

.buzzi-storia__griglia {
	padding-block: clamp(4rem, 8vw, 7rem);
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.buzzi-storia .buzzi-occhiello {
	color: rgba(255, 255, 255, 0.72);
}

.buzzi-storia h2 {
	color: #fff;
}

.buzzi-storia__testo p:not(.buzzi-occhiello) {
	margin: 1.5rem auto 0;
	max-width: 36rem;
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.92);
}

.buzzi-storia .buzzi-bottone {
	margin-top: 2.2rem;
}

/* Ambienti ---------------------------------------------------------------- */

/* Il laboratorio -------------------------------------------------------------
   Sezione chiesta da Giulia: far vedere come si lavora.

   Due parti con due ruoli diversi:
   - l'intestazione sta sul fondo della pagina, **senza fondale proprio**, e usa
     esattamente gli stessi stili delle altre sezioni. Nessuna forzatura su
     dimensione o colore: "Dietro il banco" e "La nostra storia" devono essere
     la stessa cosa, e lo sono solo se nessuno dei due viene ritoccato.
   - il mosaico e' una fascia verde con la trama del marchio. Il verde si vede
     **fra una fotografia e l'altra**: sono le fughe della griglia a farlo
     comparire, quindi la trama non sta dietro un'immagine ma le tiene insieme.

   Le fotografie sono quasi tutte verticali 2:3 e vivono in celle 4:5. Sono
   nove: la guida occupa due colonne per due righe (quattro celle) piu' otto
   celle piccole, dodici in tutto. Dodici si divide esattamente per sei, per
   quattro e per tre — cioe' la griglia tassella senza buchi a tutte e tre le
   larghezze previste, senza dover spostare nessuna fotografia.
   ========================================================================== */

.buzzi-laboratorio {
	padding-block: var(--sp-6) 0;
}

/* Lo stacco verso la sezione seguente non serve dichiararlo: sotto c'e'
   `.buzzi-ambienti__testata`, che ha gia' il proprio `padding-block` in cima. */

.buzzi-laboratorio__testata {
	max-width: 46rem;
	margin-inline: auto;
	padding-bottom: clamp(2rem, 4vw, 3.2rem);
	text-align: center;
}

/* Attenzione al selettore: l'occhiello E' un <p>, quindi `.…__testata p` lo
   colpisce e vince su `.buzzi-occhiello` per specificita' (0,2,1 contro 0,1,0).
   Senza :not() "Dietro il banco" usciva a 16px in peso 300 invece che a 11px
   in peso 700, cioe' diverso da "La nostra storia" pur avendo la stessa classe. */
.buzzi-laboratorio__testata p:not(.buzzi-occhiello) {
	margin: var(--sp-3) auto 0;
	max-width: 40rem;
	font-size: 1.02rem;
	font-weight: 300;
	line-height: 1.78;
	color: #4a4442;
}

/* Mosaico ------------------------------------------------------------------ */

.buzzi-laboratorio__mosaico {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	/* Le fughe restano fra una fotografia e l'altra — il mosaico deve essere
	   fitto — ma NON c'e' cornice: `padding: 0` fa arrivare le fotografie dei
	   bordi a toccare i lati dello schermo. E' l'unica griglia della pagina a
	   tutta larghezza: la vetrina dei prodotti tiene i suoi dieci pixel, qui
	   lo stacco lo danno le fotografie stesse. */
	gap: var(--gutter-griglia);
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--buzzi-carta);
}

.buzzi-laboratorio__scatto {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--buzzi-fondo-foto);
}

/* La cella guida e' una fotografia orizzontale e occupa meta' della griglia:
   quattro colonne per due righe, cioe' otto celle delle sedici totali.

   Il rapporto lo dichiara lei, e non 'auto': a poche colonne occupa da sola le
   righe che attraversa, e senza nessuna cella piccola a dare loro un'altezza
   quelle righe collassano a zero e la fotografia sparisce. 8/5 e' la forma che
   quattro colonne per due righe di celle 4:5 producono da sole — con le fughe
   lo scarto e' sotto il punto percentuale — quindi il valore dichiarato e
   quello calcolato dalla griglia coincidono e non si contendono lo spazio. */
.buzzi-laboratorio__scatto--grande {
	grid-column: span 4;
	grid-row: span 2;
	aspect-ratio: 8 / 5;
}

/* La foto sta fuori dal flusso: altrimenti la cella guida si fa dare l'altezza
   dall'immagine a grandezza naturale e sfora sotto le celle accanto. */
.buzzi-laboratorio__scatto picture {
	position: absolute;
	inset: 0;
	display: block;
}

.buzzi-laboratorio__scatto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soggetti alti nell'inquadratura: senza questo il ritaglio 4:5 taglia i volti. */
.buzzi-laboratorio__scatto--fuoco-alto img {
	object-position: center 22%;
}

.buzzi-laboratorio__scatto:hover img {
	transform: scale(1.04);
}

/* Adattamenti --------------------------------------------------------------- */

/* Sotto i 1100px le otto colonne darebbero celle da centoventi pixel: si
   scende a quattro, e la guida prende tutta la larghezza restando 4x2. */
@media (max-width: 1100px) {
	.buzzi-laboratorio__mosaico {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.buzzi-laboratorio__mosaico {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Su telefono la guida resta orizzontale ma occupa una riga sola: con due
	   righe diventerebbe una fascia alta mezzo schermo. */
	.buzzi-laboratorio__scatto--grande {
		grid-row: span 1;
		grid-column: span 2;
	}

	/* Su telefono il testo e' centrato in tutte le sezioni della pagina —
	   firma, intestazioni, storia, reparti, chiusura. Il laboratorio faceva
	   eccezione e non c'era motivo: l'intestazione torna centrata come le
	   altre. (L'apertura resta a sinistra: li' il testo sta sopra una
	   fotografia insieme al bottone, ed e' una scelta a se'.) */
	.buzzi-ambiente {
		text-align: center;
	}

	.buzzi-ambiente__link {
		align-self: center;
	}

	.buzzi-ambiente__giorni {
		text-align: center;
	}
}

/* Ambienti ---------------------------------------------------------------- */

.buzzi-ambienti {
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.buzzi-ambienti__griglia {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.buzzi-ambiente__foto {
	display: block;
	overflow: hidden;
	background-color: var(--buzzi-fondo-foto);
}

.buzzi-ambiente__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.buzzi-ambiente:hover .buzzi-ambiente__foto img {
	transform: scale(1.035);
}

/* I giorni di apertura: i tre reparti non aprono negli stessi, ed e' la prima
   cosa che si vuole sapere. Gli orari completi restano su Contatti. */
/* "Scopri di piu'" era nel sito originale sotto ogni reparto: torna, e porta
   al blocco corrispondente della pagina dei reparti. */
.buzzi-ambiente__link {
	align-self: flex-start;
	margin-top: var(--sp-3);
}

.buzzi-ambiente__giorni {
	display: block;
	margin-top: var(--sp-3);
	padding-top: var(--sp-2);
	border-top: 1px solid rgba(31, 31, 31, 0.12);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--buzzi-inchiostro);
}

.buzzi-ambiente p {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--buzzi-grigio);
}

/* Chiusura ---------------------------------------------------------------- */

.buzzi-chiusura {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	text-align: center;
}

.buzzi-chiusura p {
	margin: 1rem auto 2.2rem;
	max-width: 34rem;
	font-size: 1.02rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--buzzi-grigio);
}

/* Adattamenti ------------------------------------------------------------- */

@media (max-width: 980px) {
	/* Su schermi stretti le due colonne si impilano: prima la foto, poi il
	   testo. Impilate perdono pero' l'equilibrio che avevano affiancate: la
	   foto, ristretta a 26rem, restava attaccata al bordo sinistro mentre il
	   testo correva per tutta la larghezza. Alle misure intermedie (700-980px)
	   la sezione sembrava rotta. Da qui in giu' tutto si legge sull'asse
	   centrale. */
	.buzzi-firma__griglia {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-4);
		justify-items: center;
	}

	.buzzi-firma__testo {
		max-width: 32rem;
		text-align: center;
	}

	/* Il tetto di 30rem serviva a tenere corta la riga accanto alla foto. Qui
	   il blocco e' gia' limitato a 32rem: un secondo tetto, con margine
	   sinistro a zero, riporterebbe il paragrafo a sinistra dentro un testo
	   centrato. */
	.buzzi-firma__testo p:not(.buzzi-occhiello):not(.buzzi-firma__prezzo) {
		max-width: none;
	}

	.buzzi-firma__foto {
		order: -1;
		width: 100%;
		max-width: 26rem;
	}

	.buzzi-ambienti__griglia {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.4rem;
	}
}

@media (max-width: 680px) {
	.buzzi-apertura {
		min-height: 74vh;
		align-items: flex-end;
		padding-bottom: 3rem;
	}

	.buzzi-apertura::before {
		background: linear-gradient(
			180deg,
			rgba(26, 8, 12, 0.28) 0%,
			rgba(26, 8, 12, 0.55) 52%,
			rgba(26, 8, 12, 0.86) 100%
		);
	}

	.buzzi-fregio {
	height: 26px;
	background-color: var(--buzzi-marchio);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2752%27%20height%3D%2752%27%20viewBox%3D%270%200%2052%2052%27%3E%3Ccircle%20cx%3D%2713.00%27%20cy%3D%278.90%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2716.55%27%20cy%3D%2710.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2716.55%27%20cy%3D%2715.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2713.00%27%20cy%3D%2717.10%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%279.45%27%20cy%3D%2715.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%279.45%27%20cy%3D%2710.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2713%27%20cy%3D%2713%27%20r%3D%272.0%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.077%29%27%2F%3E%3Ccircle%20cx%3D%2739.00%27%20cy%3D%2734.90%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2742.55%27%20cy%3D%2736.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2742.55%27%20cy%3D%2741.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2739.00%27%20cy%3D%2743.10%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2735.45%27%20cy%3D%2741.05%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2735.45%27%20cy%3D%2736.95%27%20r%3D%272.5%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.055%29%27%2F%3E%3Ccircle%20cx%3D%2739%27%20cy%3D%2739%27%20r%3D%272.0%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.077%29%27%2F%3E%3Ccircle%20cx%3D%2739%27%20cy%3D%2713%27%20r%3D%271.2%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.065%29%27%2F%3E%3Ccircle%20cx%3D%2713%27%20cy%3D%2739%27%20r%3D%271.2%27%20fill%3D%27rgba%28255%2C255%2C255%2C0.065%29%27%2F%3E%3C%2Fsvg%3E");
	background-size: 52px 52px;
	background-repeat: repeat;
}

	.buzzi-galleria__griglia {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		padding-inline: 8px;
	}

	.buzzi-tessera--grande {
		grid-column: span 2;
		grid-row: span 1;
	}

	.buzzi-ambienti__griglia {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Testata della sezione locale: il testo introduce i tre ambienti, quindi sta
   al centro e non usa l'impaginazione titolo-a-sinistra delle altre sezioni. */
.buzzi-ambienti__testata {
	max-width: 40rem;
	margin: 0 auto;
	padding-block: var(--sp-6) var(--sp-4);
	text-align: center;
}

.buzzi-ambienti__sommario {
	margin: var(--sp-3) 0 0;
	font-size: 1.02rem;
	font-weight: 300;
	line-height: 1.75;
	color: var(--buzzi-grigio);
}

/* Sezione locale: etichetta, testo e indirizzo ----------------------------- */

/* La nota torna a fare da occhiello sopra il titolo, come nel sito originale
   ("Una dolce merenda" sopra "CAFFETTERIA"). Prima stava in fondo, accanto ai
   giorni: due etichette maiuscole una sull'altra si somigliavano troppo e non
   si capiva quale fosse informazione e quale invito. */
.buzzi-ambiente__nota {
	display: block;
	margin-top: var(--sp-3);
	margin-bottom: var(--sp-1);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--buzzi-marchio);
}

/* La tessera e' una colonna: cosi' i giorni si allineano in fondo su tutte e
   tre anche quando i testi hanno lunghezze diverse. */
.buzzi-ambiente {
	display: flex;
	flex-direction: column;
}

.buzzi-ambiente p {
	flex: 1 0 auto;
}

.buzzi-ambiente h3 {
	margin: 1.2rem 0 0.4rem;
	font-size: 1.4rem;
}

.buzzi-ambienti__indirizzo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--sp-3);
	margin: var(--sp-5) 0 0;
	padding-top: var(--sp-4);
	border-top: 1px solid rgba(31, 31, 31, 0.1);
	font-size: 0.98rem;
	font-weight: 300;
	color: var(--buzzi-grigio);
}

@media (max-width: 680px) {
	.buzzi-apertura__contenuto {
		margin-left: 0;
	}
}

/* Nota: le tracce mobile usano minmax(0, 1fr) e non 1fr. Una traccia 1fr ha
   come dimensione minima il contenuto: un'immagine con larghezza intrinseca di
   1024px allarga la colonna oltre lo schermo e fa traboccare la pagina. */