/**
 * Solagrind - CSS custom del tema.
 *
 * Vive qui (e non piu' nel modulo custom_css_injector, disinstallato) per
 * non perdere le personalizzazioni ai prossimi aggiornamenti del tema
 * Belgrade. Vedi anche js/custom.js per lo sfondo delle slide in homepage,
 * la mappa Google e le micro-animazioni.
 *
 * Indice:
 *   1. Design tokens
 *   2. Base & tipografia
 *   3. Header / navigazione
 *   4. Slide homepage
 *   5. Sezioni di contenuto (page-section, card, liste, CTA)
 *   6. Mappa Google
 *   7. Footer
 *   8. Micro-animazioni
 *   9. Responsive
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--sg-green: #24954e;
	--sg-green-dark: #1c7a3f;
	--sg-green-darker: #145c2f;
	--sg-green-soft: rgba(36, 149, 78, 0.1);
	--sg-red: #e9002c;
	--sg-ink: #16211a;
	--sg-body: #5a655e;
	--sg-line: rgba(22, 33, 26, 0.09);
	--sg-surface: #ffffff;
	--sg-surface-alt: #f4f9f6;

	--sg-radius: 0.75rem;
	--sg-radius-lg: 1.25rem;

	--sg-shadow-sm: 0 2px 10px rgba(22, 33, 26, 0.05);
	--sg-shadow: 0 6px 24px rgba(22, 33, 26, 0.08);
	--sg-shadow-lg: 0 18px 44px rgba(22, 33, 26, 0.13);

	--sg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Il tema Belgrade colora i link con var(--beo-link-color) (e soprattutto
	   con la sua variante *-rgb: la regola "a" principale di Belgrade in
	   main.css e' "color: rgba(var(--beo-link-color-rgb), ...)", quindi e'
	   la versione rgb quella che conta davvero). Belgrade la definisce a
	   :root in piu' punti (main.css, color.css) sempre come colore/viola di
	   default del tema: sovrascrivendo qui ENTRAMBE le custom property
	   (hex e rgb) ogni link del sito eredita il verde del brand ovunque nel
	   markup di Belgrade, senza dover intervenire selettore per selettore. */
	--beo-link-color: var(--sg-green);
	--beo-link-color-rgb: 36, 149, 78;
	--beo-link-hover-color: var(--sg-green-dark);
	--beo-link-hover-color-rgb: 28, 122, 63;
}

/* ==========================================================================
   2. Base & tipografia
   ========================================================================== */
body {
	overflow-x: hidden;
	color: var(--sg-body);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
	color: var(--sg-ink);
	letter-spacing: -0.015em;
}
::selection {
	background: var(--sg-green);
	color: #fff;
}
a {
	transition: color 0.18s var(--sg-ease);
}

/* Il tema Belgrade applica .container-narrow (max-width 880px) all'article
   dei nodi in full view: su desktop lascia enormi vuoti laterali. Le pagine
   costruite con le nostre .page-section devono invece occupare tutta la
   larghezza del container della region. Doppia difesa: :has() per i browser
   moderni + classe aggiunta da js/custom.js. */
.node--view-mode-full.container-narrow:has(.page-section),
.node--view-mode-full.container-narrow.has-page-sections {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.underline::before {
	background-color: var(--sg-green);
}

/* ==========================================================================
   3. Header / navigazione
   ========================================================================== */
.region-header {
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 1020;
	transition: box-shadow 0.25s var(--sg-ease), padding 0.25s var(--sg-ease);
}
.region-header.is-stuck {
	box-shadow: var(--sg-shadow-sm);
}

/* Belgrade impone .region-top-bar { height: var(--beo-region-top-bar-height) }
   (main.css, un valore fisso pensato per il solo contenuto originale:
   icona menu + testo). Da quando .region-header (logo, ~70px) e' annidata
   dentro la top-bar, quell'altezza fissa e' troppo bassa: il contenuto
   trabocca oltre il bordo inferiore della barra invece di farla crescere.
   height:auto lascia che sia il contenuto a determinare l'altezza, su
   tutte le larghezze (il problema non riguarda solo il fixed desktop:
   l'altezza fissa di Belgrade clippa/trabocca comunque, indipendentemente
   dal valore di position). */
.region-top-bar {
	height: auto;
}

/* Header fisso in cima, su TUTTE le larghezze (prima solo da 992px in
   su: la stessa logica ora vale anche in mobile).
   position:sticky (sopra) in teoria basterebbe, ma su QUESTO sito non
   funziona: "body { overflow-x: hidden }" (sezione 2, per evitare lo
   scroll orizzontale) fa calcolare automaticamente overflow-y ad "auto",
   trasformando <body> in un proprio contenitore di scroll. La pagina pero'
   scrolla comunque tramite <html>, non tramite quell'"auto" mai davvero
   attivato su <body>: risultato, l'elemento sticky non si "aggancia" mai e
   sparisce scrollando (verificato: a 900px di scroll l'header e' del tutto
   fuori viewport). position:fixed non dipende da questo meccanismo, quindi
   e' la soluzione piu' robusta.
   Dopo la ristrutturazione DOM fatta in js/custom.js
   (solagrindMoveTopBarIntoHeader), .region-header non e' piu' una section
   sorella di .region-top-bar: e' un suo figlio, annidato nel flex della
   top-bar subito dopo .navigation-toggle. Serve quindi UN SOLO elemento
   fixed (.region-top-bar, che ora contiene tutto: icona menu, logo tramite
   .region-header, blocchi Social/Accedi) invece di due indipendenti.
   .region-header resta position:static e nel flusso normale del flex del
   genitore su ogni larghezza (annulla anche il position:sticky della
   regola base qui sopra, che su un discendente di un antenato gia' fixed
   non avrebbe comunque un contesto di scroll a cui agganciarsi). padding-top
   sul body compensa lo spazio che l'unico elemento fisso toglie al flusso
   normale: la custom property e' calcolata in JS (vedi js/custom.js,
   solagrindStickyHeader) perche' l'altezza reale dipende dal contenuto
   (lunghezza voci di menu, dimensione font, dimensione del logo che cambia
   fra i breakpoint) e non e' un valore fisso affidabile da scrivere qui a
   mano - la stessa property serve quindi identica su desktop e mobile. */
.region-top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	background: #fff;
}
.region-header {
	position: static;
}
body {
	padding-top: var(--sg-fixed-header-h, 6.75rem);
}
#block-belgrade-branding img,
#block-solagrind-branding img {
	width: 13rem;
	max-width: 100%;
	transition: width 0.25s var(--sg-ease);
}
.region-header.is-stuck #block-solagrind-branding img,
.region-header.is-stuck #block-belgrade-branding img {
	width: 10.5rem;
}

/* Spazi e allineamento della barra (F1 = riga dentro .region-top-bar:
   icona menu, poi .region-header annidata, poi "Accedi"/Profilo utente;
   F2 = riga interna di .region-header: logo + nav desktop).
   .region-header di suo resta stretta attorno al proprio contenuto
   (flex di default: 0 1 auto), quindi il justify-content:space-between
   che il tema le da' internamente (F2) non ha spazio libero da
   distribuire: nav resta incollata al logo, e tutto lo spazio
   "vuoto" della barra finisce ammassato fra nav e "Accedi" invece di
   essere ripartito. flex:1 la fa crescere fino a occupare lo spazio
   libero di F1: cosi' la spaziatura si autoregola su ENTRAMBE le
   larghezze con un'unica regola:
     - desktop: logo a sinistra, nav spinta verso destra dallo stesso
       spazio ora disponibile, "Accedi" ancora piu' a destra;
     - mobile: la nav desktop e' vuota (c'e' l'offcanvas), quindi il
       solo logo - centrato dal justify-content:center che il tema
       applica di base a F2 - finisce visivamente in mezzo fra icona
       menu e "Accedi": il layout a tre zone gia' allineate in
       verticale (align-items:center su F1) richiesto per il mobile. */
.region-header {
	flex: 1 1 auto;
	min-width: 0;
}
.region-top-bar > .container-xl > .d-flex {
	gap: 1rem;
	padding-block: 0.35rem;
}
/* Il gap fra logo e nav va applicato SOLO quando la nav desktop e'
   davvero visibile (>=992px): su mobile quella nav resta nel DOM ma
   collassata a larghezza zero (l'offcanvas la sostituisce), e un gap
   "fantasma" verso un elemento invisibile sposterebbe comunque il
   centro del gruppo, disallineando il logo dal centro reale della
   barra (verificato: senza questo scoping il logo restava ~14px a
   sinistra del centro). */
@media (min-width: 992px) {
	.region-header .d-flex {
		gap: 1.75rem;
	}
}

/* "Accedi" (o "Profilo utente" + "Esci" da loggati): mai deve
   restringersi o andare a capo, un minimo di respiro dal gruppo
   logo+nav, e uno stile coerente col resto del sito invece del grigio
   anonimo di default. */
#block-solagrind-account-menu {
	flex-shrink: 0;
	margin-left: 0.25rem;
}
#block-solagrind-account-menu .nav-link {
	font-weight: 600;
	color: var(--sg-ink);
}
#block-solagrind-account-menu .nav-link:hover {
	color: var(--sg-green);
}

.main-nav__link--top-level {
	position: relative;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sg-ink) !important;
	text-decoration: none !important;
}
.main-nav__link--top-level::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.45rem;
	height: 2px;
	background: var(--sg-green);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s var(--sg-ease);
}
.main-nav__link--top-level:hover {
	color: var(--sg-green) !important;
}
.main-nav__link--top-level:hover::after,
.main-nav__link--active::after,
.is-active.main-nav__link--top-level::after {
	transform: scaleX(1);
}

/* Offcanvas (menu mobile) */
.offcanvas-header img {
    width: 80%;
}
/* Belgrade mette di default un grosso padding-top sul pannello
   dell'offcanvas (.region-navigation.offcanvas-start { padding-top:
   var(--beo-region-top-bar-height) }), pensato per il VECCHIO layout
   in cui il pannello doveva iniziare sotto una top-bar fissa separata.
   Con la ristrutturazione fatta in js/custom.js (tutto l'header vive
   ormai in un unico .offcanvas-header in cima al pannello stesso) quel
   preventivo di spazio e' rimasto ma non serve piu' a nulla: si sommava
   al padding del nostro .offcanvas-header creando un grande vuoto
   bianco prima della prima voce di menu. Azzerato. */
.region-navigation.offcanvas-start {
	padding-top: 0;
}

/* .offcanvas-header contiene DUE cose: un logo (di suo con src vuoto,
   il tema non e' configurato per usarlo li') e il bottone "X" per
   chiudere il menu. Il logo viene "riparato" via JS (vedi
   js/custom.js, solagrindOffcanvasLogo: copia l'src del logo vero
   usato in header) invece di restare nascosto, cosi' riempie lo
   spazio sopra la prima voce di menu invece di lasciarlo vuoto -
   ingrandito per essere ben leggibile. Il bottone "X" e' in
   position:absolute (non fa piu' parte della riga flex col logo):
   cosi' resta sempre ancorato all'angolo in alto a destra del pannello
   qualunque sia l'altezza del logo, invece di dipendere dall'
   allineamento verticale della riga. */
.offcanvas-header {
	position: relative;
	padding: 1.25rem 4.25rem 1.1rem 1.25rem;
	border-bottom: 1px solid var(--sg-line);
}
.offcanvas-header .site-logo {
	display: block;
	line-height: 0;
}
.offcanvas-header .site-logo img {
	width: 11.5rem;
	max-width: 100%;
	height: auto;
}
/* Il bottone "X" di Bootstrap si appoggia alla custom property
   --bs-btn-close-bg per la sua icona (un SVG in data-URI): su questo
   tema quella variabile risulta VUOTA (verificato via getComputedStyle:
   background-image finiva a "none"), quindi il bottone era un'area
   cliccabile ma invisibile/senza alcun simbolo.
   Primo tentativo di fix: un carattere "×" via ::before - TROPPO POCO
   VISIBILE una volta verificato per davvero via screenshot (il glifo
   del font e' sottile, e lo sfondo chiaro scelto (--sg-surface-alt,
   quasi bianco) si confondeva col bianco del pannello). Soluzione
   definitiva: si ignora del tutto l'icona/il carattere e si disegna una
   "X" con due barre piene ruotate (::before/::after), spessore e
   colore controllati al 100% da qui - non dipende da nessun font ne'
   da nessuna variabile CSS del tema - dentro un cerchio con un bordo
   visibile (non solo uno sfondo chiaro) cosi' risalta anche su sfondo
   bianco. Ulteriormente ingrandita e resa piu' spessa su richiesta
   dell'utente. */
.offcanvas-header .btn-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	opacity: 1;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: 1.5px solid var(--sg-line);
	background-color: var(--sg-surface-alt);
	background-image: none;
	flex-shrink: 0;
	transition: background-color 0.2s var(--sg-ease), border-color 0.2s var(--sg-ease);
}
.offcanvas-header .btn-close::before,
.offcanvas-header .btn-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.5rem;
	height: 3px;
	background-color: var(--sg-ink);
	border-radius: 999px;
}
.offcanvas-header .btn-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.offcanvas-header .btn-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.offcanvas-header .btn-close:hover {
	background-color: var(--sg-green-soft);
	border-color: var(--sg-green);
}
.offcanvas-header .btn-close:hover::before,
.offcanvas-header .btn-close:hover::after {
	background-color: var(--sg-green);
}
.offcanvas.show:not(.hiding),
.region-navigation.offcanvas-start {
	background-color: #fff !important;
}
.offcanvas-body {
	color: var(--sg-ink);
}
.offcanvas-body .main-nav__link {
	font-size: 1.05rem;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}

/* ==========================================================================
   4. Slide homepage
   ========================================================================== */

/* Il campo immagine e il campo categoria vengono stampati da Drupal come
   testo semplice (path del file / etichetta) apposta, per essere letti e
   riapplicati come sfondo dal JS (vedi js/custom.js). Vanno quindi sempre
   nascosti a video. */
.tns-item .field--name-field-immagine-slide,
.tns-item .field--name-field-categoria-slide {
	display: none;
}
.slide-main-container-desktop {
	height: 35rem;
    /* "auto 100%" ancorato a destra: l'immagine resta nitida sulla meta'
       destra. Con il nuovo design la card di testo occupa solo lo spazio
       che le serve (non piu' un pannello al 75% di larghezza), cosi'
       l'immagine si vede per intero invece di essere in gran parte
       coperta. */
    background-size: auto 100%;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-color: #eef2f0;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: clamp(2rem, 5vw, 5rem);
    overflow: hidden;
}
/* Velo scuro sfumato da sinistra: rende leggibile la card anche sopra le
   zone piu' chiare della foto, senza bisogno di coprire l'immagine con un
   pannello a tinta unita come nella versione precedente. */
.slide-main-container-desktop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(8, 20, 13, 0.42) 0%, rgba(8, 20, 13, 0) 58%);
	pointer-events: none;
}
/* Color-grade verso il verde del brand.
   Le foto stock sono in toni freddi (blu/ciano) e stonano col resto del
   sito, tutto giocato su verde/rosso: qui non sostituiamo le immagini, le
   "tingiamo" con mix-blend-mode, la stessa tecnica che si usa in fase di
   grafica per uniformare foto di provenienza diversa sotto un'unica
   palette. "color" trasferisce tonalita' e saturazione dell'overlay
   mantenendo intatte luci e ombre originali della foto: il risultato
   resta leggibile e con profondita', non diventa un filtro piatto.
   Provato in pagina a diversi livelli di opacita': sotto 0.7 l'azzurro
   di partenza restava troppo presente e vanificava l'effetto; 0.92 e' il
   punto in cui il verde domina in modo netto senza risultare finto. */
.slide-main-container-desktop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(135deg, #1c5c38 0%, #145c2f 60%, #103d20 100%);
	opacity: 0.92;
	mix-blend-mode: color;
	pointer-events: none;
}

/* Card "vetro smerigliato": sostituisce il vecchio pannello verde a tutta
   altezza con taglio diagonale e sfumatura a scomparire. Si stacca
   dall'immagine con sfocatura + ombra morbida invece che con un bordo
   netto, e lascia intravedere la foto anche dietro al testo. */
.slide-slogan-container-desktop {
	position: relative;
	z-index: 1;
	width: auto;
	max-width: 34rem;
	background: linear-gradient(155deg, rgba(24, 68, 42, 0.78) 0%, rgba(13, 43, 27, 0.85) 100%);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 1.75rem;
	box-shadow: 0 24px 60px -14px rgba(6, 20, 12, 0.5), 0 2px 10px rgba(6, 20, 12, 0.16);
	padding: 3rem 3.25rem;
	color: #FFF;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* Piccolo accento cromatico in alto: unica eco del vecchio taglio
   diagonale, qui come dettaglio decorativo minimo invece che come forma
   dominante del pannello. */
.slide-slogan-container-desktop::before {
	content: "";
	display: block;
	width: 3.25rem;
	height: 0.28rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sg-green), var(--sg-red));
	margin-bottom: 1.5rem;
}
/* Il titolo della slide e' un <h2> dentro il div .slide-titolo: va colorato
   esplicitamente, altrimenti vince la regola generale su h1-h5 (colore ink)
   definita nella sezione tipografia. */
.slide-slogan-container-desktop .slide-titolo,
.slide-slogan-container-desktop .slide-titolo h2 {
	font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    text-align: left;
}
.field--name-field-testo-slide {
	font-size: 1.15rem;
    font-weight: 400;
    margin-top: 0.85rem;
    font-style: normal;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.55;
    text-align: left;
}
.slide-main-container-desktop .link-to-service {
	margin-top: 1.75rem;
	border: none;
	border-radius: 999px;
	background: #fff;
	transition: transform 0.22s var(--sg-ease), box-shadow 0.22s var(--sg-ease);
}
.slide-main-container-desktop .link-to-service a {
	color: var(--sg-green-darker);
    padding: 0.7rem 1.6rem;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}
.slide-main-container-desktop .link-to-service:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(6, 20, 12, 0.3);
    background-color: #fff;
}
.slide-main-container-desktop .link-to-service a:hover {
    color: var(--sg-green);
}

/* Controlli carosello.
   ATTENZIONE alla specificita': modules/contrib/tiny_slider/css/tiny_slider.css
   viene caricato DOPO questo foglio di stile e usa selettori come
   ".tns-outer .tns-controls [aria-controls]". A parita' di specificita'
   vincerebbe lui, quindi qui aggiungiamo il tag (button/div) per salire di
   un gradino invece di ricorrere a !important. */
.tns-outer {
	position: relative;
}
.tns-outer div.tns-controls {
	position: absolute;
	bottom: 1.75rem;
	right: 2rem;
	z-index: 5;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0;
}
.tns-outer .tns-controls button[aria-controls] {
	background: rgba(255, 255, 255, 0.16);
	color: #FFF;
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 1rem;
	backdrop-filter: blur(4px);
	transition: background 0.2s var(--sg-ease), color 0.2s var(--sg-ease);
}
.tns-outer .tns-controls button[aria-controls]:hover {
	background: #fff;
	color: var(--sg-green);
}
.tns-outer div.tns-nav {
	position: absolute;
	bottom: 1.6rem;
	left: 5rem;
	z-index: 5;
	display: flex;
	gap: 0.55rem;
	margin: 0;
}
.tns-outer .tns-nav button[aria-controls] {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	border: none;
	padding: 0;
	margin: 0;
	background: rgba(255, 255, 255, 0.5);
	transition: background 0.2s var(--sg-ease), width 0.25s var(--sg-ease);
}
.tns-outer .tns-nav button[aria-controls].tns-nav-active {
	background: #fff;
	width: 1.7rem;
	border-radius: 1rem;
}

/* ==========================================================================
   5. Sezioni di contenuto
   ========================================================================== */
.page-section {
	padding: 2rem 0;
	position: relative;
}
.page-section:first-child {
	padding-top: 3.5rem;
}
.page-section.bg-brand-light {
	background: var(--sg-surface-alt);
	border-radius: var(--sg-radius-lg);
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	margin: 1.5rem 0;
}
.section-eyebrow {
	display: inline-block;
	color: var(--sg-red);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.78rem;
	margin-bottom: 0.85rem;
	display: none;
}
.section-title {
	font-size: clamp(1.8rem, 2.6vw, 2.5rem);
	font-weight: 800;
	color: var(--sg-ink);
	margin-bottom: 1rem;
	line-height: 1.15;
}
.section-lead {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--sg-body);
	max-width: 42rem;
	text-align: center !important;
}
.section-lead.mx-auto {
	margin-left: auto;
	margin-right: auto;
}
.page-section p {
	line-height: 1.75;
}

/* Bottoni */
.btn-brand,
.btn-brand-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.9rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none !important;
	border: 2px solid var(--sg-green);
	transition: background 0.22s var(--sg-ease), color 0.22s var(--sg-ease),
	            transform 0.22s var(--sg-ease), box-shadow 0.22s var(--sg-ease);
}
.btn-brand {
	background: var(--sg-green);
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(36, 149, 78, 0.28);
}
.btn-brand:hover {
	background: var(--sg-green-dark);
	border-color: var(--sg-green-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(36, 149, 78, 0.34);
	color: #fff !important;
}
.btn-brand-outline {
	background: transparent;
	color: var(--sg-green) !important;
}
.btn-brand-outline:hover {
	background: var(--sg-green);
	color: #fff !important;
	transform: translateY(-2px);
}

/* Card settori */
.settore-card {
	background: var(--sg-surface);
	border-radius: var(--sg-radius);
	padding: 2.5rem 1.6rem;
	height: 100%;
	box-shadow: var(--sg-shadow-sm);
	border: 1px solid var(--sg-line);
	transition: transform 0.28s var(--sg-ease), box-shadow 0.28s var(--sg-ease),
	            border-color 0.28s var(--sg-ease);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.settore-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sg-green), var(--sg-red));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s var(--sg-ease);
}
.settore-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--sg-shadow-lg);
	border-color: transparent;
}
.settore-card:hover::before {
	transform: scaleX(1);
}
.settore-card .settore-icon {
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 1.1rem;
	background: var(--sg-green-soft);
	color: var(--sg-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.35rem;
	font-size: 1.45rem;
	transition: background 0.28s var(--sg-ease), color 0.28s var(--sg-ease),
	            transform 0.28s var(--sg-ease);
}
.settore-card:hover .settore-icon {
	background: var(--sg-green);
	color: #fff;
	transform: scale(1.06) rotate(-4deg);
}
.settore-card h3 {
	font-size: 1.12rem !important;
	font-weight: 700 !important;
	margin-bottom: 0.6rem !important;
}
.settore-card h3 a {
	color: var(--sg-ink) !important;
}
.settore-card p {
	color: var(--sg-body);
	font-size: 0.95rem;
	line-height: 1.65;
	margin-bottom: 0;
}

/* Bottone "vedi scheda" dentro le card .settore-card (sia in homepage sia
   nella vista /settori): il solo titolo linkato non era abbastanza
   riconoscibile come elemento cliccabile, quindi ogni card ora ha anche
   una pillola esplicita, in linea con lo stile di .btn-brand-outline ma
   dimensionata per stare dentro la card. */
.settore-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.35rem;
	padding: 0.6rem 1.35rem;
	border-radius: 999px;
	border: 2px solid var(--sg-green);
	color: var(--sg-green) !important;
	font-weight: 700;
	font-size: 0.86rem;
	text-decoration: none !important;
	background: transparent;
	transition: background 0.22s var(--sg-ease), color 0.22s var(--sg-ease),
	            transform 0.22s var(--sg-ease), gap 0.22s var(--sg-ease);
}
.settore-card-cta:hover {
	background: var(--sg-green);
	color: #fff !important;
	transform: translateY(-2px);
	gap: 0.75rem;
}

/* ---- Vista "Settori" (/settori) --------------------------------------
   La vista e' un "Elenco non formattato" di campi con "Classe della riga"
   impostata a settore-card (Formato > Impostazioni nella UI di Views).
   Ogni riga produce:
     .settore-card.views-row
       > .views-field-field-logo-settore  (immagine, linkata al nodo)
       > .views-field-title               (span > a)
       > .views-field-field-descrizione-ant-settore (p)
   Se in futuro si aggiungono campi alla vista, ricordarsi che qui lo stile
   si aggancia a queste classi generate da Views. */
.view-settori .view-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
	gap: 1.75rem;
}
.view-settori .settore-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	text-align: left;
	margin-top: 2rem;
}
.view-settori .views-field-field-logo-settore {
	background: var(--sg-surface-alt);
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.view-settori .views-field-field-logo-settore .field-content,
.view-settori .views-field-field-logo-settore a {
	display: block;
	width: 100%;
	height: 100%;
}
.view-settori .views-field-field-logo-settore img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--sg-ease);
}
.view-settori .settore-card:hover .views-field-field-logo-settore img {
	transform: scale(1.05);
}
/* Nessun logo caricato: al posto del box grigio una fascia col verde brand.
   La classe .is-empty la mette js/custom.js, perche' Views stampa comunque
   il wrapper con dentro un .field-content vuoto (quindi :empty non basta). */
.view-settori .views-field-field-logo-settore.is-empty {
	background: linear-gradient(120deg, var(--sg-green) 0%, var(--sg-green-darker) 100%);
	aspect-ratio: 16 / 6;
	position: relative;
}
.view-settori .views-field-field-logo-settore.is-empty::after {
	content: "";
	position: absolute;
	right: -2.5rem;
	bottom: -4rem;
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.09);
}
.view-settori .views-field-title {
	padding: 1.5rem 1.5rem 0;
}
.view-settori .views-field-title a {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--sg-ink);
	text-decoration: none;
	line-height: 1.3;
	display: block;
}
.view-settori .settore-card:hover .views-field-title a {
	color: var(--sg-green);
}
.view-settori .views-field-field-descrizione-ant-settore {
	padding: 0.6rem 1.5rem 1.75rem;
	color: var(--sg-body);
	font-size: 0.95rem;
	line-height: 1.65;
	flex: 1 1 auto;
}
.view-settori .views-field-field-descrizione-ant-settore p:last-child {
	margin-bottom: 0;
}
/* Campo Views "Link a Contenuto" (id: view_node): il wrapper generato
   automaticamente da Views e' .views-field-view-node (l'underscore
   dell'id campo diventa trattino nella classe CSS). Il link dentro
   riceve qui lo stesso stile a pillola di .settore-card-cta. */
.view-settori .views-field-view-node {
	padding: 0 1.5rem 1.75rem;
	margin-top: -0.5rem;
}
.view-settori .views-field-view-node a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.35rem;
	border-radius: 999px;
	border: 2px solid var(--sg-green);
	color: var(--sg-green) !important;
	font-weight: 700;
	font-size: 0.86rem;
	text-decoration: none !important;
	background: transparent;
	transition: background 0.22s var(--sg-ease), color 0.22s var(--sg-ease),
	            transform 0.22s var(--sg-ease), gap 0.22s var(--sg-ease);
}
.view-settori .views-field-view-node a:hover {
	background: var(--sg-green);
	color: #fff !important;
	transform: translateY(-2px);
	gap: 0.75rem;
}
/* Messaggio quando la vista non ha risultati */
.view-settori .view-empty {
	background: var(--sg-surface-alt);
	border-radius: var(--sg-radius);
	padding: 2.5rem;
	text-align: center;
	color: var(--sg-body);
}

/* ---- Pagina singola di un settore ------------------------------------ */
.node--type-settori .field--name-field-logo-settore img {
	width: 100%;
	max-height: 22rem;
	object-fit: cover;
	border-radius: var(--sg-radius-lg);
	margin-bottom: 2rem;
}
.node--type-settori .field--name-field-descrizione-ant-settore {
	font-size: 1.15rem;
	line-height: 1.75;
	color: var(--sg-ink);
	font-weight: 500;
	margin-bottom: 1.5rem;
	padding-left: 1.1rem;
	border-left: 3px solid var(--sg-green);
}
.node--type-settori .field--name-field-descrizione-settore {
	line-height: 1.8;
}
.node--type-settori .field--name-field-categoria-settore {
	display: inline-block;
	background: var(--sg-green-soft);
	color: var(--sg-green);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	margin-bottom: 1.25rem;
}
.node--type-settori .field--name-field-categoria-settore a {
	color: inherit;
	text-decoration: none;
}

/* ---- Breadcrumb -------------------------------------------------------
   Rimosso su richiesta: la navigazione del sito e' piatta (Home, Settori,
   Chi Siamo) e il breadcrumb aggiungeva solo un "Home" isolato sotto
   l'header. Nascosto via CSS ma tenuto nel DOM per gli screen reader. */
.region-breadcrumb,
nav[aria-labelledby="system-breadcrumb"],
.breadcrumb {
	display: none !important;
}

/* ---- Marchi trattati --------------------------------------------------
   Vista "Marchi": tessere con il logo del marchio. Finche' i loghi non
   sono caricati la tessera mostra il nome come wordmark, cosi' il muro
   marchi e' gia' presentabile. Il markup e':
     .marchio-tile.views-row
       > .views-field-field-logo-marchio (immagine)
       > .views-field-title              (nome) */
/* Colonne fisse invece di auto-fill: 6 su desktop, 3 su tablet, 2 su
   smartphone (richiesto esplicitamente, al posto del ripiego automatico
   in base allo spazio disponibile). Breakpoint coerenti col resto del
   tema (767.98 / 991.98, sezione 9). */
.view-marchi .view-content {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
}
@media (max-width: 991.98px) {
	.view-marchi .view-content {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 767.98px) {
	.view-marchi .view-content {
		grid-template-columns: repeat(2, 1fr);
	}
}
.marchio-tile {
	position: relative;
	background: #fff;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	min-height: 6.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.1rem 0.9rem;
	text-align: center;
	transition: transform 0.22s var(--sg-ease), box-shadow 0.22s var(--sg-ease),
	            border-color 0.22s var(--sg-ease);
}
.marchio-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--sg-shadow);
	border-color: transparent;
}
.marchio-tile .views-field-field-logo-marchio img {
	max-width: 100%;
	max-height: 3.25rem;
	width: auto;
	height: auto;
	object-fit: contain;
	/* I loghi arrivano da fonti diverse: la desaturazione a riposo li rende
	   visivamente omogenei, il colore torna al passaggio del mouse. */
	filter: grayscale(100%);
	opacity: 0.75;
	transition: filter 0.25s var(--sg-ease), opacity 0.25s var(--sg-ease);
}
.marchio-tile:hover .views-field-field-logo-marchio img {
	filter: none;
	opacity: 1;
}
.marchio-tile .views-field-title {
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	color: var(--sg-ink);
	line-height: 1.25;
}
/* Quando il logo c'e', il nome del marchio non serve piu' a video (il
   logo parla da se'): il testo resta comunque nel markup per i lettori
   di schermo, invece di sparire con display:none, dato che l'alt
   dell'immagine non e' garantito identico in ogni caso. */
.marchio-tile.has-logo .views-field-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* Titoli dei gruppi (raggruppamento per categoria).
   Views li stampa come <h3> nudi, fratelli delle righe dentro
   .view-content: siccome .view-content e' una griglia, l'h3 verrebbe
   trattato come una cella. grid-column 1/-1 gli fa occupare tutta la riga. */
.view-marchi .view-content > h3 {
	grid-column: 1 / -1;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--sg-ink);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin: 2rem 0 0.35rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--sg-green);
}
.view-marchi .view-content > h3:first-child {
	margin-top: 0;
}

/* Striscia marchi in homepage / pagine settore */
#block-solagrind-views-block-marchi-block-2 h2 {
	font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
}

.marchi-strip {
	padding: 3.5rem 0;
}
.marchi-strip .section-title {
	font-size: 1.6rem;
}

/* Hero pagina interna */
.page-hero {
	background: linear-gradient(120deg, var(--sg-green) 0%, var(--sg-green-darker) 100%);
	color: #fff;
	padding: 4.5rem 3rem;
	border-radius: var(--sg-radius-lg);
	position: relative;
	overflow: hidden;
	margin-top: 1.5rem;
}
.page-hero::after {
	content: "";
	position: absolute;
	right: -6rem;
	top: -6rem;
	width: 22rem;
	height: 22rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
}
.page-hero > * {
	position: relative;
	z-index: 1;
}
.page-hero .section-eyebrow {
	color: #ffd9e0;
}
.page-hero h1,
.page-hero h2 {
	font-weight: 800 !important;
	font-size: clamp(2rem, 3.4vw, 2.9rem) !important;
	margin-bottom: 1rem !important;
	color: #fff !important;
	line-height: 1.12 !important;
}
.page-hero .lead,
.page-hero p {
	font-size: 1.2rem;
	opacity: 0.94;
	max-width: 42rem;
	margin-bottom: 0;
}

/* Liste "punti di forza" */
.feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--sg-line);
	line-height: 1.7;
}
.feature-list li:last-child {
	border-bottom: none;
}
/* Il badge dell'icona: si applica sia allo <span class="feature-icon">
   scritto a mano, sia alla <i> "nuda" che resta dopo un round-trip in
   CKEditor5 (il plugin ckeditor5_icons scarta lo span che avvolge
   l'icona, quindi non possiamo contare sul wrapper). */
.feature-list .feature-icon,
.feature-list li > i[class*="fa-"] {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.7rem;
	background: var(--sg-green);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(36, 149, 78, 0.3);
}
.feature-list strong {
	color: var(--sg-ink);
	font-weight: 700;
}

/* Statistiche */
.stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2.75rem;
	margin: 1.75rem 0 0;
}
.stat-item .stat-number {
	font-size: 3rem;
	font-weight: 800;
	color: var(--sg-green);
	line-height: 1;
	letter-spacing: -0.03em;
}
.stat-item .stat-label {
	color: var(--sg-body);
	font-size: 0.88rem;
	margin-top: 0.5rem;
	max-width: 11rem;
	line-height: 1.45;
}

/* Riquadro CTA finale */
.contact-callout {
	background: linear-gradient(125deg, var(--sg-ink) 0%, #0d1611 100%);
	color: #fff;
	border-radius: var(--sg-radius-lg);
	padding: 3.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.75rem;
	position: relative;
	overflow: hidden;
}
.contact-callout::after {
	content: "";
	position: absolute;
	left: -4rem;
	bottom: -8rem;
	width: 20rem;
	height: 20rem;
	border-radius: 50%;
	background: rgba(36, 149, 78, 0.22);
}
.contact-callout > * {
	position: relative;
	z-index: 1;
}
.contact-callout h2 {
	font-size: 1.8rem;
	font-weight: 800;
	margin-bottom: 0.45rem;
	color: #fff !important;
}
.contact-callout p {
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 0;
}

/* ==========================================================================
   6. Mappa Google
   ========================================================================== */
.map-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 0;
	border-radius: var(--sg-radius-lg);
	overflow: hidden;
	box-shadow: var(--sg-shadow);
	border: 1px solid var(--sg-line);
	background: #fff;
}
.map-embed {
	min-height: 26rem;
	height: 100%;
	width: 100%;
	background: #e6ece8;
}
/* Stato di fallback: se il JS della mappa non parte, il box non resta vuoto */
.map-embed:empty::before {
	content: "Caricamento mappa…";
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 26rem;
	color: var(--sg-body);
	font-size: 0.9rem;
}
.map-aside {
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.35rem;
}
.map-aside h3 {
	font-size: 1.3rem;
	font-weight: 800;
	margin-bottom: 0;
}
/* Griglia invece di flex: CKEditor5 puo' spezzare un <br> in piu' <span>
   fratelli, che in flex row finirebbero affiancati. Con la griglia ogni
   elemento dopo l'icona va a capo nella colonna del testo. */
.map-info {
	display: grid;
	grid-template-columns: 1.15rem minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: start;
	font-size: 0.95rem;
	line-height: 1.6;
}
.map-info i {
	grid-column: 1;
	grid-row: 1;
	color: var(--sg-green);
	margin-top: 0.25rem;
	text-align: center;
}
.map-info > :not(i) {
	grid-column: 2;
}
.map-info a {
	color: var(--sg-ink);
	text-decoration: none;
	font-weight: 600;
}
.map-info a:hover {
	color: var(--sg-green);
}
/* Info window di Google Maps */
.sg-map-iw {
	font-family: inherit;
	padding: 0.15rem 0.25rem;
	line-height: 1.5;
}
.sg-map-iw strong {
	color: var(--sg-ink);
	display: block;
	margin-bottom: 0.2rem;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.region-footer {
	margin-bottom: 0;
	padding-bottom: 0 !important;
	padding-top: 3rem;
	background: var(--sg-surface-alt);
	border-top: 3px solid var(--sg-green);
	margin-top: 4rem;
	font-size: 0.95rem;
}
.region-footer .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: row;
	align-content: center;
	gap: 2rem 1rem;
}
.region-footer .row .block {
	width: 30%;
	flex: 1 1 18rem;
}
.region-footer p {
	line-height: 1.75;
	margin-bottom: 0.6rem;
}
.region-footer a {
	color: var(--sg-ink);
	text-decoration: none;
}
.region-footer a:hover {
	color: var(--sg-green);
	text-decoration: underline;
}
.region-footer img {
	margin-bottom: 1rem;
}

/* ==========================================================================
   8. Micro-animazioni
   ========================================================================== */
/* Le regole di partenza si attivano SOLO quando il JS ha confermato di poter
   gestire l'animazione (classe su <html>): senza JS il contenuto resta
   sempre pienamente visibile. */
.js-reveal-ready .reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s var(--sg-ease), transform 0.6s var(--sg-ease);
	will-change: opacity, transform;
}
.js-reveal-ready .reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js-reveal-ready .reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	* {
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
	.slide-main-container-desktop {
		padding-left: 2.5rem;
	}
	.slide-slogan-container-desktop {
		max-width: 26rem;
		padding: 2.5rem 2.25rem;
	}
	.slide-slogan-container-desktop .slide-titolo {
		font-size: 2.15rem;
	}
	.field--name-field-testo-slide {
		font-size: 1.05rem;
	}

	/* BUG trovato verificando la resa su tablet (1024px): Belgrade
	   nasconde .main-nav (la nav orizzontale desktop, dentro
	   .region-header) sotto i 1199.98px, MA la nostra icona menu usa la
	   utility Bootstrap .d-lg-none, che la nasconde gia' a 992px. Fra
	   992px e 1199.98px (tablet in orizzontale, laptop piccoli) NESSUNA
	   delle due era visibile: il sito restava senza alcun modo di
	   navigare in quella fascia. L'icona menu viene qui ri-mostrata
	   (stesso display:block della sua resa naturale sotto i 992px,
	   !important necessario per pareggiare ".d-lg-none { display:none
	   !important }") per coprire l'intera fascia che Belgrade lascia
	   scoperta, aprendo lo stesso menu offcanvas usato in mobile. */
	.region-top-bar .navigation-toggle {
		display: block !important;
	}

	/* Le regole sotto (sfondo top-bar, dimensione icona, stile "Accedi")
	   erano scoperte solo fino a 991.98px: estese fin qui perche' ora
	   l'icona menu (e quindi l'intero pattern "header compatto stile
	   mobile") resta in uso fino a 1199.98px, non solo sotto i 992px. */
	.region-top-bar {
		background: #fff;
	}
	/* Belgrade ha gia' una regola ".region-top-bar .navigation-toggle svg"
	   (main.css, dentro @media max-width:575.98px) che scende a 1.5rem: a
	   parita' di origine (tema) vince per specificita' (3 classi contro le
	   2 di ".navigation-toggle svg"), quindi replichiamo lo stesso
	   selettore per pareggiarla e vincere per ordine di caricamento (il
	   nostro sub-tema si carica dopo). */
	.region-top-bar .navigation-toggle svg,
	.navigation-toggle svg {
		width: 2.5rem;
		height: 2.5rem;
	}
	.region-top-bar .nav-link {
		font-size: 1.05rem;
		font-weight: 600;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	/* La barretta verde sotto le voci del menu (.main-nav__link--top-level
	   ::after, sezione 3) e' pensata per la nav orizzontale desktop: e'
	   inset di 0.75rem da ENTRAMBI i lati del link, quindi risulta corta
	   e centrata sotto il testo. Nel pannello offcanvas (elenco verticale
	   a sinistra) sembra scollegata dalla parola invece di sottolinearla
	   - e il pannello ha SEMPRE lo stesso layout verticale stretto,
	   qualunque sia la larghezza della pagina che lo apre (era gia' cosi'
	   fra 992px e 1199.98px anche prima di riportare visibile l'icona
	   menu in quella fascia, solo che nessuno poteva aprirlo per notare
	   l'incoerenza). Riportata a filo del bordo sinistro del testo
	   (left:0), larga quanto prima (~2.25rem) invece che simmetrica sui
	   due lati. */
	.offcanvas-body .main-nav__link--top-level::after {
		left: 0;
		right: auto;
		width: 2.25rem;
	}
}

/* Il widget Facebook incorporato nel blocco "Footer Socials" (un
   <iframe> del page plugin di Facebook) ha una larghezza fissa di
   340px scritta nell'URL stesso dell'embed (non modificabile da qui
   senza toccare il contenuto del blocco). Nelle larghezze in cui la
   colonna del footer che lo contiene e' piu' stretta di 340px
   (verificato: succede gia' a 1024px, dove le colonne del footer sono
   circa 30% ciascuna) l'iframe sporgeva creando scroll orizzontale su
   tutta la pagina. max-width:100% lo lascia libero di restringersi
   insieme alla sua colonna. */
#block-solagrind-footersocials iframe {
	max-width: 100%;
}

@media (max-width: 991.98px) {
	.map-panel {
		grid-template-columns: 1fr;
	}
	.map-embed {
		min-height: 20rem;
	}
}

@media (max-width: 767.98px) {
	.page-section {
		padding: 3rem 0;
	}
	.page-section.bg-brand-light {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.page-hero {
		padding: 2.75rem 1.5rem;
	}
	.contact-callout {
		padding: 2rem 1.5rem;
		text-align: center;
		justify-content: center;
	}
	.stat-row {
		gap: 1.75rem;
	}
	.stat-item .stat-number {
		font-size: 2.4rem;
	}
	.map-aside {
		padding: 1.75rem;
	}
	/* Su mobile la card si ancora in basso, a tutta larghezza, con angoli
	   arrotondati solo in alto: pattern comune nelle hero delle app,
	   coerente col resto del design ma piu' semplice del vetro
	   smerigliato (piu' pesante da rendere bene su schermi piccoli). */
	.slide-main-container-desktop {
		height: 28rem;
		padding-left: 0;
		align-items: flex-end;
	}
	.slide-main-container-desktop::before {
		background: linear-gradient(180deg, rgba(8, 20, 13, 0) 25%, rgba(8, 20, 13, 0.78) 100%);
	}
	.slide-slogan-container-desktop {
		width: 100%;
		max-width: none;
		/* Padding in basso aumentato apposta (era 2.25rem): i controlli del
		   carosello (frecce a 0.9rem dal fondo, alte 2.4rem, e pallini a
		   1.5rem dal fondo) occupano una fascia fra 28px e 74px dal bordo
		   inferiore della slide. Con 2.25rem il testo ci finiva dentro in
		   pieno (verificato: ~38px di sovrapposizione reale col testo).
		   5.5rem lascia margine libero sopra quella fascia. */
		padding: 2rem 1.5rem 5.5rem;
		border-radius: 1.5rem 1.5rem 0 0;
		border-width: 1px 0 0 0;
		background: linear-gradient(160deg, rgba(22, 62, 39, 0.94) 0%, rgba(12, 38, 24, 0.96) 100%);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		/* Centrato in mobile per coerenza coi titoli/testi del resto del
		   sito in questa modalita' (vedi anche sezione 9 piu' sotto):
		   sovrascrive align-items:flex-start e i text-align:left della
		   sezione 4, pensati solo per il layout desktop a due meta'. */
		align-items: center;
		text-align: center;
	}
	.slide-slogan-container-desktop::before {
		margin-bottom: 1rem;
	}
	.slide-slogan-container-desktop .slide-titolo,
	.slide-slogan-container-desktop .slide-titolo h2 {
		font-size: 1.85rem;
		text-align: center;
	}
	.field--name-field-testo-slide {
		font-size: 1rem;
		text-align: center;
	}
	.tns-outer .tns-nav {
		left: 1.5rem;
		bottom: 1.5rem;
	}
	.tns-outer .tns-controls {
		right: 1rem;
		bottom: 0.9rem;
	}
	.tns-outer .tns-controls [aria-controls] {
		width: 2.4rem;
		height: 2.4rem;
	}

	/* Coerenza fra titoli e testi del corpo in mobile: tutto centrato dove
	   ha senso (.section-lead lo era gia', qui allineiamo anche titoli ed
	   hero, altrimenti restavano a sinistra mentre il resto della pagina
	   in questa modalita' e' centrato). */
	.section-title,
	.page-hero h1,
	.page-hero h2,
	.page-hero p,
	.page-hero .lead {
		text-align: center;
	}
}

@media (max-width: 576px) {
	body {
		padding-right: 0 !important;
		width: 100vw;
	}
	#block-belgrade-bottomsite {
		padding: 0;
		width: 100%;
	}
	#block-belgrade-bottomsite p {
		padding-top: 1rem;
		font-size: 1.1rem;
		padding-bottom: 3rem;
	}
	.region-under-bottom,
	.region-under-bottom .row {
		width: 100vw;
	}
	.region-under-bottom .row {
		margin: 0;
	}
	.region-top-bar {
		padding-bottom: 0 !important;
	}
	.region-footer .row .block {
		width: 100%;
	}
	/* Il logo era sceso a 10rem qui (piu' piccolo del 13rem di base) proprio
	   nella fascia mobile dove invece deve leggersi bene accanto a icona
	   menu e "Accedi" ingranditi poco sopra: alzato a 11.5rem, resta ben
	   dentro i 375px di un iPhone SE (nessun overflow verificato). */
	#block-belgrade-branding img,
	#block-solagrind-branding img {
		width: 11.5rem;
	}
}