/*
 * Home 2026 (tavola XD "Home") — sezione "I nostri prodotti" e ritocchi.
 * Markup: blocks/block-page/home-prodotti.php (repeater home_prodotti).
 * Misure dalla tavola (1920, contenuto ~1690 -> fattore ~0.67 sul container
 * 1140): foto prodotto scontornate con max-width per-figura (vedi sotto),
 * etichette Montserrat SemiBold uppercase. Enqueue in private.php. Solo
 * front-end. Ritocchi Federica 7-10 lug: proporzioni figure, lineetta
 * separatrice piu' lunga, nomi in SemiBold.
 */

.wbg-hp-card a {
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 0.5rem 0;
}

.wbg-hp-img {
	display: block;
	margin: 0 auto 1.5rem;
	width: 100%;
	max-width: none; /* la dimensione la regola la larghezza per-figura (sotto) */
	height: auto;
	object-fit: contain;
	transition: transform 0.25s ease;
}

.wbg-hp-card a:hover .wbg-hp-img {
	transform: translateY(-4px);
}

.wbg-hp-title {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.125rem;
	font-weight: 700; /* Bold (doc Federica 23/07: "aumentare il peso del font nei nomi dei box prodotti") */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #212529;
}

/* Proporzioni per-figura pixel-perfect sulla tavola XD "Home" (correzioni
 * Federica 7-13 lug). Ordine repeater fisso su Home IT (51) ed EN (54):
 * 1 Blocchi, 2 Materiali, 3 Cuscini a stampo, 4 Agglomerati.
 *
 * Le 4 foto (media 2736-2739) sono state RITAGLIATE al soggetto (rimosso il
 * margine trasparente: prima Blocchi riempiva solo ~70% del file), quindi ora
 * il soggetto riempie il frame e la larghezza CSS = direttamente il rapporto
 * XD. Figure ingrandite ("come da progetto"): Blocchi ≈ Cuscini i piu' grandi,
 * Materiali ~0.86, Agglomerati ~0.70. Ritaglio a filo -> baseline perfetta con
 * align-items-end. Larghezza in % della colonna -> tiene a ogni breakpoint. */
.wbg-hp-card--1 .wbg-hp-img { width: 84%; } /* Blocchi (il piu' grande, ma non deve svettare) */
.wbg-hp-card--2 .wbg-hp-img { width: 88%; } /* Materiali (doc Federica: "leggermente piu' grande", era 82%) */
.wbg-hp-card--3 .wbg-hp-img { width: 95%; } /* Cuscini a stampo */
.wbg-hp-card--4 .wbg-hp-img { width: 66%; } /* Agglomerati (il piu' piccolo) */

/* Lineetta separatrice della Home piu' lunga (correzione Federica 7 lug):
 * il core (core.css) la limita a width:60%; sulla sola Home la portiamo a
 * piena larghezza del contenuto (allineata alla riga dei prodotti). */
body.home .wp-block-separator.is-style-wide {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.wbg-hp-card a:hover .wbg-hp-title {
	color: #227c26;
}

@media (max-width: 991.98px) {
	.wbg-hp-img {
		height: auto;
		margin-bottom: 1rem;
	}

	.wbg-hp-card {
		margin-bottom: 1.6rem;
	}
}

/* Su telefono le 4 figure "I nostri prodotti" una sotto l'altra (doc Federica:
 * "devono essere una sotto l'altra, ora sono a due a due"). Il markup e'
 * .col-6 col-lg-3 (2 per riga fino a lg): sotto 768px le portiamo a piena
 * larghezza. Il cap va sul <a> (gia' block+centrato), NON sull'immagine: cosi'
 * le larghezze per-figura 84/88/95/66% restano proporzionate come su desktop. */
@media (max-width: 767.98px) {
	.wbg-hp-card {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 1rem;
	}
	.wbg-hp-card a {
		max-width: 320px;
		margin: 0 auto;
	}
}

/* Home: ridurre la distanza fra lo slider e il primo titolo, come nelle pagine
 * interne (doc Federica 23/07). Lo slider è .container-fluid.mb-3.mb-lg-6
 * (margin-bottom 6rem su desktop): lo portiamo a 1.5rem, così — sommato al
 * margin-top 2.5rem del primo titolo (restyle §20) — la distanza titolo↔slider
 * ≈ 4rem, come titolo↔hero nelle pagine interne. */
body.home .container-fluid.mb-lg-6 {
	margin-bottom: 1.5rem !important;
}

/* === Home: catalogo e blocchi in UNA sola fascia verde (doc Federica) ========
 * "togliere la fascia dal catalogo e spostare il blocco dentro la fascia verde
 * che sta sotto". Erano due fasce #e6f0e1 separate da una striscia bianca (i
 * 50px di margin-top di .discontinuous-blocks + i due tagli diagonali che si
 * "aprono"). Le fondiamo: il catalogo perde il taglio in basso, la fascia sotto
 * perde taglio superiore e gap -> un'unica fascia con diagonale solo in cima.
 * Scopato su body.home: .catalog e .discontinuous-blocks sono condivisi con le
 * pagine collezioni/tecnologia, che NON vanno toccate. */
body.home .catalog {
	clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); /* via il taglio in basso */
	padding-bottom: 3rem;
	margin-bottom: 0;
}
body.home .discontinuous-blocks {
	clip-path: none; /* niente secondo taglio: e' la stessa fascia */
	margin-top: 0;   /* era 50px di bianco */
	padding-top: 30px;
}