/*
 * SOLO cio' che appartiene davvero alla home.
 *
 * 21.09.2026 — fino a oggi questo foglio era una COPIA di base.css (326 regole
 * su 332 identiche, contenuto compreso), ricaricata DOPO main.css e header.css.
 * Effetto: sulla home vincevano i valori vecchi di base.css invece di quelli
 * dei fogli nuovi, e nessuno lo sapeva. Una correzione fatta in base.css o in
 * main.css poteva non vedersi sulla home (e' successo con la barra in alto), e
 * alleggerire questo foglio senza saperlo rimpiccioliva il titolo dell'apertura.
 *
 * Adesso le regole comuni stanno SOLO in base.css. Qui sotto restano due cose:
 *   1. le regole che esistono solo per la home;
 *   2. le CINQUE proprieta' che la home prendeva davvero dalla copia — cioe' i
 *      punti in cui base.css e main.css dicono cose diverse. Sono scritte una
 *      per una, con il valore che la home ha sempre avuto, cosi' l'aspetto
 *      resta identico (verificato con le misure: apertura 585/604px, prodotti
 *      834/1287px, sistemi 643/950px, desktop/telefono — uguali a prima).
 *
 * Se un giorno si vuole che la home usi le stesse dimensioni delle altre
 * pagine, basta cancellare il blocco 2: e' una scelta di design, non un bug.
 */

/* ---- 1. regole solo della home ------------------------------------------ */

/* V3: la tazza e il prodotto restano insieme in entrambi i tagli. */
.hero-photo img{object-position:50% 50%}

@media (min-width: 601px) and (max-width: 850px) {
	.hero{grid-template-columns:1fr}
	.hero-copy{padding:40px 32px;justify-self:start}
	.hero-description{max-width:540px}
	.hero-photo{min-height:0;height:340px}
}

/* ---- 2. cio' che la home prendeva dalla copia di base.css --------------- */
/* main.css imposta su h1/h2/a le variabili del sistema di design (--cb-h1,
   --cb-h2, --cb-brand). La home e' stata approvata con i valori di base.css,
   piu' grandi: titolo 57,6px su desktop invece di 40px. Qui si conservano. */
h1{font-size:clamp(44px,4.5vw,68px)}
h2{font-size:clamp(32px,3.1vw,46px);font-family:var(--display);color:var(--blue)}
a{color:inherit}
/* le tre taglie dell'H1 di base.css, per larghezza: senza queste due righe la
   riga qui sopra vincerebbe anche sul telefono e il titolo dell'apertura
   passerebbe da 41px a 44px. Sono gli stessi valori di base.css, replicati. */
@media(max-width:850px){h1{font-size:44px}}
@media(max-width:600px){h1{font-size:clamp(40px,10.5vw,58px)}}

/* NON replicato apposta: base.css a 600px mette «.product-grid{gap:30px 14px}».
   main.css disegna le schede con righe condivise (row-gap:0 + margin-bottom
   30px fra una riga e l'altra): la copia vecchia ci rimetteva sopra il gap e
   sulla home le righe di schede erano a 60px, il doppio, per sbaglio.
   Adesso sono a 30px come sul resto del sito. */