NOTA: data-cta-location="home-hero" viene letto dal tracking di R3
(layb-tracking.js) per popolare il parametro cta_location
dell'evento cta_click. Va messo su OGNI pulsante.
------------------------------------------------------------------*/
/* Contenitore delle due CTA nell'hero: le affianca con uno spazio,
le centra e — grazie a flex-wrap — le manda una sotto l'altra
quando lo schermo e' troppo stretto per tenerle in riga. */
.layb-hero-cta {
display: flex;
flex-wrap: wrap; /* NOTA: su mobile i due pulsanti vanno a capo invece di stringersi fino a diventare illeggibili */
justify-content: center; /* centra il gruppo, coerente con il titolo/sottotitolo (text-align:center) */
gap: 16px; /* NOTA: spazio UNIFORME fra i pulsanti, anche quando vanno a capo (a differenza di margin) */
margin-top: 24px;
}
/* NOTA: In passato la CTA secondaria dell'hero era una variante "on-media"
bianca in outline. Ora la hero usa le varianti PIENE --white (Contattaci)
e --bluette (Scopri i servizi) definite in R1: staccano meglio sul blu e
non serve piu' un modificatore dedicato. Se un domani servisse una CTA
sopra una FOTO chiara, si puo' reintrodurre qui una variante apposta. */
/* Su schermi molto stretti (telefoni) le due CTA occupano tutta la
riga ciascuna: bersagli piu' comodi da toccare col dito. */
@media (max-width: 480px) {
.layb-hero-cta .layb-cta {
flex: 1 1 100%; /* NOTA: flex-basis 100% = ogni pulsante prende tutta la larghezza → si impilano */
}
}
/*==================================================================
D2 — Mappa sedi (Home): rifiniture per la posizione "above the fold"
====================================================================
Contesto: la sezione mappa e' un item "Content" del page builder con
due colonne Gutenberg — a sinistra lo SVG della cartina (snippet
Insert HTML Snippet, hotspot con popup), a destra la lista dei
pulsanti citta' (.et_pb_button, gia' blu brand: NON li ricoloriamo,
quello e' compito della regola globale di R5). Qui il CSS e'
volutamente MINIMO: colori e struttura restano invariati, si
sistemano solo scalatura, spaziatura e comportamento su mobile.
AGGANCIO: tutte le regole sono sotto #mappa-sedi, l'Element ID che
va assegnato all'item Content nel builder Goodlayers (in Goodlayers
gli item espongono un Element ID, non un campo classe). Lo stesso ID
e' l'aggancio dell'evento map_interaction in layb-tracking.js.
NOTA: Specificita': un ID (#mappa-sedi) vale 1,0,0 e batte comodamente
le regole a livello di classe del tema/Gutenberg, senza !important.
------------------------------------------------------------------*/
/* La cartina e' un SVG inline (classe .layb-map). Le diamo un TETTO in px:
le colonne mappa|lista vivono dentro uno snippet e WordPress NON carica il
CSS core dei blocchi che le affianca (restano impilate) -> senza tetto la
mappa riempirebbe tutta la larghezza della colonna e diventerebbe gigante
sui monitor larghi. width:100% + max-width la fa scalare fino a un massimo;
margin auto la centra. Uso .layb-map (non 'svg') per non colpire l'icona-
lente del campo ricerca, che e' un altro