/* ═══════════════════════════════════════════════════════════════
   Adattamenti CSS per blocchi Gutenberg nativi
   Il layout/i colori restano quelli degli altri fogli di stile
   (styles.css, media.css, ecc.) — qui si sistemano solo i punti in
   cui il markup generato dai blocchi nativi (Columns/Column,
   Image, Button, Group) è diverso dal markup originale del mockup
   (article, figure/figcaption, span, <a class="button">), più le
   correzioni necessarie per convivere col tema Botiga.
   ═══════════════════════════════════════════════════════════════ */

/* Nasconde i breadcrumb e il titolo di pagina che Botiga mostra
   sopra al contenuto (il mockup ha già il suo H1 nell'hero) */
.botiga-breadcrumb-trail,
.entry-header,
.page-header {
	display: none !important;
}

/* Le sezioni a piena larghezza (width:100vw) possono creare una
   larghezza di pagina leggermente maggiore dello schermo su mobile
   (100vw non tiene conto della barra di scorrimento), causando
   uno scorrimento orizzontale che disallinea i tocchi sul menu
   mobile del tema. Questa regola lo impedisce. */
html,
body {
	overflow-x: hidden !important;
}

/* Le sezioni del mockup sono pensate a piena larghezza (bordo a
   bordo), ma Botiga le contiene dentro il suo .container centrale:
   questa regola le fa "sfondare" fino al bordo della finestra,
   indipendentemente dalla larghezza massima del tema. */
.hero,
.image-story,
.intro,
.wp-block-columns.lab-gallery,
.method,
.sustainability,
.productions,
.manifesto,
.contact {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
}

/* Forza il layout a griglia sulle sezioni costruite con il blocco
   Columns, che di default usa un flex-box del core di WordPress */
.wp-block-columns.steps,
.wp-block-columns.product-grid,
.wp-block-columns.lab-gallery,
.wp-block-columns.sustainability-grid {
	display: grid !important;
}
.wp-block-columns.steps > .wp-block-column,
.wp-block-columns.product-grid > .wp-block-column,
.wp-block-columns.lab-gallery > .wp-block-column,
.wp-block-columns.sustainability-grid > .wp-block-column {
	margin: 0;
	width: auto !important;
	flex-basis: auto !important;
}

/* .steps — 4 colonne (metodo) */
.steps .wp-block-column {
	padding: 30px 28px 10px 0;
	border-right: 1px solid #49665d;
	margin-right: 28px;
}
.steps .wp-block-column:last-child {
	border: 0;
	margin-right: 0;
}
@media (max-width: 860px) {
	.wp-block-columns.steps {
		grid-template-columns: 1fr 1fr !important;
	}
	.steps .wp-block-column {
		border-right: 0;
		border-bottom: 1px solid #49665d;
		margin-right: 0;
		padding: 20px 0;
	}
	.steps .wp-block-column:last-child {
		border-bottom: 0;
	}
}
@media (max-width: 540px) {
	.wp-block-columns.steps {
		grid-template-columns: 1fr !important;
	}
}

/* .sustainability-grid — 4 colonne (sostenibilità) */
.sustainability-grid .wp-block-column {
	padding: 27px 28px 32px 0;
	border-bottom: 1px solid rgba(21, 52, 43, .25);
}
.sustainability-grid .wp-block-column:nth-child(odd) {
	border-right: 1px solid rgba(21, 52, 43, .25);
	padding-right: 30px;
}
.sustainability-grid .wp-block-column:nth-child(even) {
	padding-left: 30px;
}
@media (max-width: 560px) {
	.wp-block-columns.sustainability-grid {
		grid-template-columns: 1fr !important;
	}
	.sustainability-grid .wp-block-column:nth-child(odd) {
		border-right: 0;
		padding-right: 0;
	}
	.sustainability-grid .wp-block-column:nth-child(even) {
		padding-left: 0;
	}
}
.sustainability-grid .product-num,
.sustainability-grid p:first-child {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .15em;
	margin: 0;
}

/* .lab-gallery — 3 colonne con foto e didascalia (al posto di figure/figcaption) */
.lab-gallery .wp-block-image {
	margin: 0;
}
.lab-gallery .wp-block-column p {
	padding: 16px 2px 0;
	margin: 0;
	color: #b9c8c2;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.lab-gallery .wp-block-column:last-child {
	grid-column: auto;
}
@media (max-width: 860px) {
	.lab-gallery .wp-block-column:last-child {
		grid-column: 1 / -1;
	}
}

/* .image-caption — due paragrafi al posto di span + p */
.image-caption p:first-child {
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.image-caption p:last-child {
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

/* .product — numero in alto (span→p) sopra l'illustrazione */
.product .product-num {
	position: relative;
	z-index: 1;
	font-size: 11px;
	margin: 0;
}

/* Pulsanti — il blocco Button mette la classe sul wrapper, non sul link.
   !important perché il tema Botiga carica il suo CSS dopo il nostro
   e altrimenti vincerebbe lui a parità di specificità. */
.wp-block-button.primary .wp-block-button__link,
.wp-block-button.pale .wp-block-button__link {
	display: inline-block;
	padding: 16px 23px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 0 !important;
	text-decoration: none;
}
.wp-block-button.primary .wp-block-button__link {
	background: var(--forest) !important;
	color: #fff !important;
}
.wp-block-button.pale .wp-block-button__link {
	background: var(--accent) !important;
	color: var(--deep) !important;
	margin-top: 25px;
}
.wp-block-buttons {
	margin: 0;
}

/* Link "testo" (Parliamo del tuo progetto / Ottieni indicazioni) */
.text-link {
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}
.text-link span {
	margin-left: 8px;
}
.contact-actions .directions {
	display: inline-block;
	margin-top: 25px;
	font-size: 13px;
	font-weight: 600;
	border-bottom: 1px solid rgba(255, 255, 255, .55);
	padding-bottom: 4px;
}

/* Il blocco Group di "actions" e "contact-actions" deve restare in riga */
.actions,
.contact-actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 46px;
}

/* .contact address ricreato con un paragrafo */
.contact .contact-address {
	font-style: normal;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 24px;
	color: #d5dfda;
}

/* Rimuove margini extra che WordPress aggiunge di default ai blocchi
   dentro sezioni che già gestiscono lo spazio con la propria griglia */
.hero-copy > *,
.intro > div > *,
.sustainability-content > *,
.contact > div > * {
	margin-block-start: 0;
}

/* ───────────────────────────────────────────────────────────────
   Colori dei titoli — con !important perché il tema Botiga carica
   il suo CSS dopo il nostro e altrimenti li sovrascriverebbe.
   ─────────────────────────────────────────────────────────────── */

/* "Una filiera che conosciamo passo dopo passo." + i 4 titoli
   Coltiviamo/Trasformiamo/Formuliamo/Controlliamo → bianco
   (tutta la sezione "metodo" ha sfondo scuro) */
.method .wp-block-heading {
	color: #fff !important;
}

/* "Risorse del territorio. Responsabilità concreta." → verde scuro */
.sustainability-content .wp-block-heading {
	color: var(--ink) !important;
}

/* La citazione del manifesto → verde scuro */
.manifesto .quote {
	color: var(--ink) !important;
}

/* "Coltiviamo anche nuove collaborazioni." → bianco
   (la sezione "contatti" ha sfondo verde forest) */
.contact .wp-block-heading {
	color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────
   Footer del tema Botiga — ricolorato come il resto della pagina
   (verde scuro, testo chiaro). Il footer di Botiga è diviso in più
   righe (sopra/centrale/sotto) che possono avere un colore proprio
   impostato dal Personalizzatore: le ricoloriamo tutte, non solo
   il contenitore esterno, altrimenti una riga può restare bianca.
   ─────────────────────────────────────────────────────────────── */
.bhfb-footer,
.bhfb-footer .bhfb-row-wrapper,
.bhfb-footer .bhfb-above_footer_row,
.bhfb-footer .bhfb-main_footer_row,
.bhfb-footer .bhfb-below_footer_row {
	background: #091f19 !important;
	color: #d5dfda !important;
}
.bhfb-footer a {
	color: #fff !important;
}

/* Il link "Modifica" sotto al contenuto è visibile solo a te da
   amministratrice (già hai la modifica nella barra in alto): lo
   nascondiamo perché con lo sfondo scuro risultava illeggibile. */
.entry-footer {
	display: none !important;
}

/* Rimuove lo spazio vuoto (colore di sfondo del tema) tra la fine
   del contenuto e l'inizio del footer — su più livelli di
   contenitore, perché Botiga aggiunge padding in punti diversi
   a seconda della versione/impostazioni */
article,
.entry-content,
#primary,
.site-main,
.row.main-row,
.container.content-wrapper {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* ───────────────────────────────────────────────────────────────
   Foto di sfondo dell'hero — ora un vero blocco Immagine (cliccabile
   e sostituibile dall'editor), posizionata dietro al velo scuro e
   alle card decorative invece che come CSS background fisso.
   ─────────────────────────────────────────────────────────────── */
.hero-visual-bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.hero-visual-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-visual-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(rgba(8, 35, 27, .18), rgba(8, 35, 27, .66));
}
/* le card e il sigillo hanno già position relative/absolute e
   z-index nel foglio di stile principale (styles.css), quindi
   restano sopra sia alla foto che al velo scuro */

/* ───────────────────────────────────────────────────────────────
   Alcuni temi (Botiga incluso) impongono regole tipo img{height:auto}
   con !important per la responsività: questo vince sulle altezze
   fisse del design originale (che non avevano !important), facendo
   "sforare" le foto sopra didascalie e testi. Le ripristiniamo qui
   con !important così tornano contenute nella loro cornice.
   ─────────────────────────────────────────────────────────────── */
.lab-gallery .wp-block-image,
.image-main,
.hero-visual-bg,
.sustainability-image .wp-block-image {
	overflow: hidden !important;
}
.lab-gallery .wp-block-column {
	overflow: hidden;
}
.lab-gallery .wp-block-image img {
	width: 100% !important;
	height: 510px !important;
	object-fit: cover !important;
}
.image-main img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
.hero-visual-bg img,
.sustainability-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
.product-illustration img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}
.intro-image {
	overflow: hidden !important;
	margin-top: 70px;
}
.intro-image img {
	width: 100% !important;
	height: 520px !important;
	object-fit: cover !important;
}
@media (max-width: 860px) {
	.lab-gallery .wp-block-image img {
		height: 420px !important;
	}
}
@media (max-width: 540px) {
	.lab-gallery .wp-block-image img {
		height: 360px !important;
	}
	.intro-image img {
		height: 360px !important;
	}
}

/* ───────────────────────────────────────────────────────────────
   Sfondo del menu principale (header) uguale al panna chiaro del
   resto della pagina. Copro più selettori possibili perché non ho
   modo di verificare il nome esatto usato da Botiga: se nessuno
   corrisponde, mandami l'HTML e correggo il selettore giusto.
   ─────────────────────────────────────────────────────────────── */
#masthead,
.site-header,
.botiga-header,
.botiga-header-wrapper,
.botiga-header-main,
.botiga-header-builder-group {
	background: #f5f3ec !important;
}