` del mockup; in Elementor lo
fa uno pseudo-elemento della sezione, così non serve un widget vuoto in pagina.
Senza, il testo bianco finisce su un cielo chiaro e non si legge. */
.gg-home .e-hero,
.gg-home .e-strategia{position:relative;isolation:isolate;overflow:hidden}
.gg-home .e-strategia::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
/* Nella Strategia la fotografia è lo sfondo della sezione, quindi un velo sulla
sezione basta. Nella copertina no: la fotografia è un widget dentro il
contenitore, che sta a z-index 2 — un velo sulla sezione finirebbe *sotto* la
foto. Va quindi appeso allo strato delle fotografie, dove copre le slide e
resta sotto al testo. */
.gg-home .e-hero .campo.campo::after{content:"";position:absolute;inset:0;z-index:2;
pointer-events:none;background:linear-gradient(to top,rgba(14,22,28,.9) 0%,
rgba(14,22,28,.66) 26%,rgba(14,22,28,.18) 58%,rgba(14,22,28,0) 84%)}
.gg-home .e-strategia::after{background:linear-gradient(120deg,rgba(2,80,90,.96) 0%,
rgba(2,80,90,.93) 60%,rgba(2,80,90,.9) 100%)}
.gg-home .e-strategia > .e-con-inner{position:relative;z-index:2;color:#CFE3E5}
.gg-home .e-strategia h2,
.gg-home .e-strategia .elementor-heading-title{color:#fff}
/* ============================================================
CORREZIONI DOPO LA PRIMA LETTURA A VIDEO (22/09)
Quasi tutte hanno la stessa causa: nel mockup la misura stava sul tag
(`b`, `a`, `h3`), in Elementor la nostra classe sta sull'involucro del widget
e dentro c'è l'elemento vero, che altrimenti prende le misure del kit.
============================================================ */
/* Copertina: il contenuto va in basso, come nella proposta. Il contenitore
«boxed» è alto quanto la sezione, quindi il testo va spinto in fondo. */
.gg-home .e-hero > .e-con-inner{justify-content:flex-end}
/* Barra gialla: le misure sull'elemento dentro il widget */
.gg-home .e-bando .stato .elementor-heading-title{font-size:12px;letter-spacing:.14em}
.gg-home .e-bando .nome .elementor-heading-title{font-size:17.5px;line-height:1.3}
.gg-home .e-bando .quando .elementor-heading-title{font-size:17px;font-weight:400;line-height:1.3}
.gg-home .e-bando .quando .elementor-heading-title b{font-family:var(--font-d);font-size:17px;font-weight:700}
.gg-home .e-bando .vai .elementor-heading-title{font-size:17px;letter-spacing:.07em}
/* Notizie: il pulsante «tutte le notizie» a destra del titolo */
.gg-home .e-news .testa{align-items:baseline}
.gg-home .e-news .testa .vai{margin-left:auto}
/* Notizie: le due misure di titolo, che il kit riportava entrambe a 28 px */
.gg-home .e-news .titolo .elementor-heading-title{font-size:17px;line-height:1.34;font-weight:600}
.gg-home .e-news .e-loop-item:first-of-type .titolo .elementor-heading-title{font-size:23px;
line-height:1.2;max-width:26ch}
/* e un po' d'aria fra foto, categorie e titolo nella notizia in evidenza */
.gg-home .e-news .e-loop-item:first-of-type .testo{display:grid;gap:10px;padding-top:4px}
.gg-home .e-news .e-loop-item:not(:first-of-type) .testo{display:grid;gap:6px;align-content:start}
.gg-home .e-news .n-notizia{align-items:start}
/* I link testuali sono widget titolo: da blocco a riga, se no il sottolineato
arriva in fondo alla colonna invece di fermarsi sotto le parole */
.gg-home .vai .elementor-heading-title,
.gg-home .vai-scuro .elementor-heading-title,
.gg-home .storia .elementor-heading-title{display:inline-block}
.gg-home .vai,
.gg-home .vai-scuro,
.gg-home .storia{width:fit-content}
/* Chi siamo: le immagini del collage non si vedevano. L'involucro del widget è
`position:relative`, quindi l'immagine assoluta si misurava su un'altezza zero. */
.gg-home .e-collage .grande > .elementor-widget,
.gg-home .e-collage .piccola > .elementor-widget{position:absolute;inset:0}
.gg-home .e-collage .grande .elementor-widget-container,
.gg-home .e-collage .piccola .elementor-widget-container{height:100%}
/* Chi siamo: più aria fra la colonna di testo e il collage, e sotto il testo */
.gg-home .e-ident .griglia{gap:clamp(48px,7vw,96px)}
.gg-home .e-ident .griglia > .e-con:first-child{display:grid;gap:18px;align-content:start}
.gg-home .e-ident .incisione{margin-top:26px}
/* Copertina a tre fotografie (widget Slides).
Due cose da sapere. La prima: il widget sta dentro il contenitore «boxed», che è
largo 1320, mentre la fotografia deve arrivare ai bordi — quindi lo strato si
àncora al centro e si allarga alla finestra (`.e-hero` ha `overflow:hidden`, non
sborda). La seconda: fra il widget e la slide ci sono quattro involucri, e basta
che uno non erediti l'altezza perché tutto collassi a zero. `.elementor-swiper` è
quello che mi era sfuggito. */
/* `.campo.campo` non è un refuso: Elementor difende il `max-width:100%` dei widget
con `.e-con.e-con > .e-con-inner > .elementor-widget`, che pesa quattro classi.
Ripetere la classe porta questa regola a cinque e la fa vincere. */
.gg-home .e-hero .campo.campo{position:absolute;top:0;bottom:0;left:50%;right:auto;width:100vw;
max-width:none;transform:translateX(-50%);z-index:0;padding:0;margin:0}
.gg-home .e-hero .campo .elementor-widget-container,
.gg-home .e-hero .campo .elementor-swiper,
.gg-home .e-hero .campo .elementor-slides-wrapper,
.gg-home .e-hero .campo .elementor-slides,
.gg-home .e-hero .campo .elementor-main-swiper,
.gg-home .e-hero .campo .swiper,
.gg-home .e-hero .campo .swiper-wrapper,
.gg-home .e-hero .campo .swiper-slide,
.gg-home .e-hero .campo .elementor-repeater-item-,
.gg-home .e-hero .campo .swiper-slide-bg{height:100%}
.gg-home .e-hero .campo .swiper-slide-bg{background-position:50% 44%;background-size:cover}
/* Il nome del luogo: è il Titolo della slide, vestito come la targhetta `.ph` del
mockup — in alto a sinistra, sopra il velo. Descrizione e pulsante restano spenti:
il testo della copertina è quello sotto, scritto a widget. */
.gg-home .e-hero .campo .swiper-slide-inner{display:block;position:absolute;inset:0;
padding:0;margin:0;background:none}
.gg-home .e-hero .campo .swiper-slide-contents{position:absolute;top:18px;left:20px;
width:auto;max-width:none;z-index:4;text-align:left}
.gg-home .e-hero .campo .elementor-slide-heading{margin:0;font-family:var(--font-b);
font-size:11px;font-weight:400;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;
background:rgba(14,22,28,.55);color:#fff;padding:4px 9px;display:inline-block}
.gg-home .e-hero .campo .elementor-slide-description,
.gg-home .e-hero .campo .elementor-slide-button{display:none}
@media (max-width:980px){
.gg-home .e-hero .campo .swiper-slide-contents{top:14px;left:14px}
}
.gg-home .e-hero .campo .elementor-swiper-button{z-index:3;width:44px;height:44px;border-radius:0;
color:#fff;background:rgba(14,22,28,.55);display:grid;place-items:center;font-size:18px;
top:16px;bottom:auto;transform:none}
.gg-home .e-hero .campo .elementor-swiper-button:hover{background:rgba(14,22,28,.85)}
.gg-home .e-hero .campo .elementor-swiper-button-prev{left:auto;right:72px}
.gg-home .e-hero .campo .elementor-swiper-button-next{right:20px}
@media (max-width:980px){
.gg-home .e-hero .campo .elementor-swiper-button{top:auto;bottom:16px}
}
/* Testo e cifre stanno sopra le foto e coprivano tutto lo slider: sul telefono il dito
toccava sempre loro, mai la foto, e anche le frecce restavano sotto il riquadro delle
cifre. I contenitori lasciano passare i tocchi; link e pulsanti li riprendono */
.gg-home .e-hero :is(.testo,.e-voci){pointer-events:none}
.gg-home .e-hero :is(.testo,.e-voci) :is(a,button,input,select,textarea,summary,[tabindex]){pointer-events:auto}
/* Copertina sul telefono (29/10). Le tre cifre in colonna occupavano metà della
copertina e, col padding a sinistra della seconda e della terza, non stavano in
asse con la prima. Ora restano in riga anche qui: cifra sopra, etichetta sotto,
centrate, e la copertina si accorcia di conseguenza. Etichetta del luogo e frecce
salgono in alto, in una fascia libera: in basso le frecce coprivano la terza cifra,
e in alto a sinistra l'occhiello copriva il nome del luogo. */
@media (max-width:980px){
.gg-home .e-hero > .e-con-inner{padding-top:60px}
.gg-home .e-hero .testo{align-items:center;text-align:center;padding-bottom:22px}
.gg-home .e-hero h1{margin-inline:auto}
.gg-home .e-hero .occhiello{justify-content:center}
.gg-home .e-azioni{justify-content:center}
.gg-home .e-hero .campo .swiper-slide-contents{top:16px;left:14px}
.gg-home .e-hero .campo .elementor-swiper-button{top:10px;bottom:auto;width:38px;height:38px;font-size:15px}
.gg-home .e-hero .campo .elementor-swiper-button-prev{right:56px}
.gg-home .e-hero .campo .elementor-swiper-button-next{right:14px}
.gg-home .e-voci div{flex-direction:column;align-items:center;gap:6px;text-align:center;
padding:14px 6px 16px}
.gg-home .e-voci div:first-child{padding-left:6px}
/* `.e-voci div` prende anche l'involucro interno del widget: senza questo il padding
si raddoppia e ogni cifra si alza di trenta pixel */
.gg-home .e-voci .elementor-widget-container{padding:0;border:0}
/* il titolo ha 80 px di margine sotto, messi dal pannello per lo schermo grande:
sul telefono aprivano un vuoto fra il titolo e i pulsanti */
.gg-home .e-hero .testo .elementor-widget-heading > .elementor-widget-container{margin-bottom:0}
.gg-home .e-hero .testo h1{margin-bottom:22px}
}
/* Pausa delle foto (home.js la crea solo sul telefono, dove le foto girano da sole):
stessa scatola delle frecce, a sinistra della precedente. Icona come la pausa
della barra dell'avviso: due barre, fermo = triangolo «riprendi». */
.gg-home .e-hero .gg-pausa-foto{position:absolute;z-index:3;top:10px;right:98px;width:38px;height:38px;
display:grid;place-items:center;padding:0;border:0;border-radius:0;color:#fff;
background:rgba(14,22,28,.55);cursor:pointer}
.gg-home .e-hero .gg-pausa-foto::before{content:"";width:12px;height:12px;
background:linear-gradient(90deg,currentColor 35%,transparent 35% 65%,currentColor 65%)}
.gg-home .e-hero .gg-pausa-foto.fermo::before{background:currentColor;clip-path:polygon(15% 0,100% 50%,15% 100%)}
.gg-home .e-hero .gg-pausa-foto:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:981px){.gg-home .e-hero .gg-pausa-foto{display:none}}
@media (max-width:600px){
.gg-home .e-hero h1{font-size:28px}
.gg-home .e-hero .occhiello{margin-bottom:12px}
.gg-home .e-hero .occhiello .elementor-heading-title{font-size:11px;padding:6px 10px}
.gg-home .e-azioni{flex-wrap:nowrap;gap:8px;padding-inline:0}
.gg-home .e-azioni > .elementor-widget{flex:1 1 0;min-width:0}
.gg-home .e-azioni .elementor-button{display:block;width:100%;font-size:14px;letter-spacing:.03em;
padding:12px 8px;white-space:nowrap}
.gg-home .e-voci{padding-inline:0}
.gg-home .e-voci b{font-size:26px}
.gg-home .e-voci div,
.gg-home .e-voci div:first-child{padding-inline:3px}
.gg-home .e-voci span{font-size:10px;letter-spacing:.02em}
}
/* La parola in filigrana vive dentro un widget HTML, ed Elementor dà a ogni widget
`position:relative`: la parola si ancorava al widget — una scatola alta zero messa
dove capita nel flusso — invece che alla sezione. Il widget che la contiene torna
statico e smette di occupare spazio, così l'ancora ridiventa la sezione. */
.gg-home .elementor-widget:has(> .elementor-widget-container > .fantasma){position:static;
height:0;margin:0;padding:0}
/* ============================================================
SECONDA LETTURA A VIDEO (22/09) — sezioni dalla Strategia in giù
Stessa storia delle altre: le regole del mockup colpivano tag e `
` che qui
non ci sono più, e la disposizione a griglia finiva sull'elemento sbagliato,
perché fra la scheda e il testo c'è l'involucro del widget.
============================================================ */
/* Chi siamo — i riquadri dei numeri erano quadrati: il contenitore portava i 10 px
di padding del kit, che stringevano la colonna e mandavano a capo l'etichetta. */
.gg-home .e-numeri{padding:0}
.gg-home .e-numeri > .elementor-widget{width:100%}
/* Strategia — testo e link. Il colore chiaro stava sul contenitore, ma il widget
di testo ha una regola propria dal kit e vinceva: restava grigio su fondo scuro. */
.gg-home .e-strategia .elementor-widget-text-editor,
.gg-home .e-strategia .elementor-widget-text-editor p{color:#CFE3E5}
.gg-home .e-strategia .storia .elementor-heading-title{color:var(--sole);
border-bottom:2px solid var(--sole);padding-bottom:2px}
/* Strategia — le tre schede documento: contorno, fondo, e le quattro parti al
posto giusto (icona | titolo+riga | scarica). */
.gg-home .e-strategia .scarica{gap:12px;padding:0}
.gg-home .e-strategia .scheda{display:grid;grid-template-columns:auto 1fr auto;gap:2px 16px;
align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
padding:17px 20px}
.gg-home .e-strategia .scheda > .elementor-widget-html{grid-column:1;grid-row:1/3;
display:grid;place-items:center}
.gg-home .e-strategia .scheda svg{width:26px;height:26px;display:block;fill:none;
stroke:var(--sole);stroke-width:1.5}
.gg-home .e-strategia .scheda > .elementor-widget-heading:not(.vai){grid-column:2;grid-row:1}
.gg-home .e-strategia .scheda > .elementor-widget-text-editor{grid-column:2;grid-row:2}
.gg-home .e-strategia .scheda > .vai{grid-column:3;grid-row:1/3}
.gg-home .e-strategia .scheda .elementor-heading-title{font-family:var(--font-d);font-size:18px;
font-weight:500;line-height:1.25;color:#fff}
.gg-home .e-strategia .scheda .vai .elementor-heading-title{font-size:12.5px;font-weight:600;
letter-spacing:.11em;text-transform:uppercase;color:var(--sole)}
.gg-home .e-strategia .scheda small{font-size:17px;color:#CFE3E5}
/* Progetti — le tre schede: la disposizione a due colonne era scritta per `h3`,
`p` e `.vai`, che qui stanno dentro tre involucri. Va data agli involucri. */
.gg-home .e-ssl .scheda > .elementor-widget-heading:not(.vai){grid-column:1;grid-row:1}
.gg-home .e-ssl .scheda > .elementor-widget-text-editor{grid-column:1;grid-row:2}
.gg-home .e-ssl .scheda > .vai{grid-column:2;grid-row:1/3;align-self:center}
.gg-home .e-ssl .scheda .elementor-heading-title{font-family:var(--font-d);font-size:15px;
font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.gg-home .e-ssl .scheda .vai .elementor-heading-title{font-size:12.5px;letter-spacing:.1em;
color:var(--terra-d);border-bottom:2px solid currentColor;padding-bottom:2px}
/* facciamo futuro — la frase era grigia su fondo scuro: stesso caso della Strategia. */
.gg-home .e-fascia .elementor-widget-text-editor,
.gg-home .e-fascia .elementor-widget-text-editor p{color:#fff;font-family:var(--font-d);
font-size:clamp(19px,2.3vw,28px);font-weight:200;line-height:1.28;max-width:26ch;margin:0}
.gg-home .e-fascia .eyebrow .elementor-heading-title{color:var(--sole)}
/* Ritocchi di Marco (22/09), ristretti alla sezione: il contenitore del widget a
metà altezza centra il segno dentro il cerchio. La stessa riga scritta sul
selettore di Elementor (`.e-con > .e-con-inner > .elementor-widget > …`) varrebbe
per ogni widget del sito. */
/* Il box «Hai bisogno di aiuto?»: quattro widget in una griglia a due colonne, senza
posizione esplicita il testo finiva sotto l'icona. */
/* Social: la testa della sezione aveva le regole solo dentro `.e-news`. */
.gg-home .e-social .testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 20px;
margin-bottom:30px}
.gg-home .e-social .testa .elementor-heading-title{font-family:var(--font-d);
font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em}
.gg-home .e-social .testa .vai{margin-left:auto}
.gg-home .e-social .testa .vai .elementor-heading-title{font-size:13px;font-weight:600;
letter-spacing:.11em;text-transform:uppercase;color:var(--mare-d);
border-bottom:2px solid var(--mare-d);padding-bottom:2px}
/* Social — feed Facebook (Smash Balloon) dentro il box. Il plugin scrive le sue
regole con #cff: qui l'id è ripetuto con una classe in più per pareggiare il
peso. Le schede in rilievo del plugin diventano righe piatte, come i box vicini. */
.gg-home .canale .feed{padding:15px;flex:1}
.gg-home .canale .feed #cff .cff-header,
.gg-home .canale .feed #cff .cff-share-container,
.gg-home .canale .feed #cff .cff-dot{display:none}
.gg-home .canale .feed #cff .cff-posts-wrap{padding:0}
.gg-home .canale .feed #cff .cff-item.cff-box{background:none;box-shadow:none;margin:0;
padding:0 0 14px;border-bottom:1px solid var(--linea)}
.gg-home .canale .feed #cff .cff-item.cff-box + .cff-item.cff-box{padding-top:14px}
.gg-home .canale .feed #cff .cff-item.cff-box:last-child{border-bottom:0;padding-bottom:0}
.gg-home .canale .feed #cff .cff-text{font-size:17px;line-height:1.55;color:var(--ink-2)}
.gg-home .canale .feed #cff .cff-text a{color:var(--ink)}
.gg-home .canale .feed #cff .cff-media-link{font-size:13px;color:var(--ink-2)}
.gg-home .canale .feed #cff .cff-post-links{font-family:var(--font-d);font-size:12.5px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase}
.gg-home .canale .feed #cff .cff-post-links a{color:var(--mare-d)}
/* Social — YouTube dal feed RSS ([gg-youtube] in functions.php). Stesse classi del
mockup (.foto, .play, .corpo): qui solo ciò che il link e l'elenco aggiungono. */
.gg-home .gg-youtube{display:flex;flex-direction:column;height:100%}
/* hqdefault è 4:3 con le bande nere dentro: tagliato a 16:9 le bande spariscono */
.gg-home .gg-youtube a.foto{display:block;aspect-ratio:16/9}
/* il contenitore di Elementor porta 10px di padding suo: i box del mockup non ne hanno */
.gg-home .canale.e-con{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px}
.gg-home .gg-youtube .corpo a{color:var(--ink);text-decoration:none}
.gg-home .gg-youtube .corpo a:hover b,.gg-home .gg-youtube .altri a:hover{text-decoration:underline}
.gg-home .gg-youtube .data{display:block;margin-top:6px;font-size:13px;color:var(--ink-2)}
.gg-home .gg-youtube .altri{list-style:none;margin:0;padding:0 15px 15px;font-size:17px}
.gg-home .gg-youtube .altri li{padding-top:11px;border-top:1px solid var(--linea)}
.gg-home .gg-youtube .altri li + li{margin-top:11px}
.gg-home .gg-youtube .altri a{color:var(--ink);text-decoration:none}
.gg-home .gg-youtube .altri .data{margin-top:3px}
/* Notizie senza immagine in evidenza: Elementor non stampa il widget e il riquadro
resta vuoto. Lo riempiono l'incisione del promontorio e il nome del GAL su sabbia.
Testo terra scura su sabbia: 4,92:1. Il corpo segue la larghezza del riquadro
(unità cqw), così vale per la miniatura e per la notizia grande. */
.gg-home .e-news .img:not(:has(img)){container-type:inline-size;
background:var(--sabbia) url(../img/incisione.svg) center 32% / 62% auto no-repeat}
.gg-home .e-news .img:not(:has(img))::after{content:"GAL Gargano" / "";position:absolute;
left:0;right:0;bottom:9%;text-align:center;font-family:var(--font-d);font-weight:600;
font-size:max(10px,4.4cqw);letter-spacing:.08em;text-transform:uppercase;color:var(--terra-x)}
/* Barra dell'avviso da [gg-avviso]: il widget Shortcode è un solo figlio della riga,
quindi la riga flessibile la rifà il contenitore dello shortcode. Le parti interne
(.stato, b, .conto, .vai) usano le regole del mockup più su. */
.gg-home .e-bando .elementor-widget-shortcode{flex:1 1 100%}
/* Una riga sola, tutto centrato in verticale: il nome del bando si accorcia coi puntini
(il nome intero resta nel testo per i lettori di schermo e nel title al passaggio).
Sotto i 600 px le parti vanno a capo, ma il nome resta su una riga. */
.gg-home .e-bando .gg-avviso{display:flex;flex-wrap:nowrap;gap:8px 20px;align-items:center}
.gg-home .e-bando .gg-avviso > *{flex:none;white-space:nowrap}
.gg-home .e-bando .gg-avviso > b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.gg-home .e-bando .gg-avviso{flex-wrap:wrap}.gg-home .e-bando .gg-avviso > b{flex-basis:100%}}
.gg-home .e-bando .gg-avviso a{color:var(--ink);text-decoration:none}
/* nessun avviso aperto: la fascia gialla non resta vuota, sparisce */
.gg-home .e-bando:not(:has(.gg-avviso)){display:none}
/* Più bandi: impilati nella stessa cella, così la fascia ha l'altezza del più lungo e
non salta; home.js accende la classe .su su quello visibile. */
.gg-home .e-bando .gg-avvisi{display:flex;align-items:center;gap:8px 20px}
.gg-home .e-bando .gg-avvisi .giro{display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-width:0}
.gg-home .e-bando .gg-avvisi.gira .gg-avviso{grid-area:1/1;opacity:0;visibility:hidden;
transition:opacity .6s,visibility 0s .6s}
.gg-home .e-bando .gg-avvisi.gira .gg-avviso.su{opacity:1;visibility:visible;transition:opacity .6s}
/* Pausa: solo l'icona (il nome è in aria-label), così non ruba spazio al testo.
Due barre disegnate col fondo; fermo = triangolo «riprendi». */
.gg-home .e-bando .pausa{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;
border:1px solid currentColor;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.gg-home .e-bando .pausa::before{content:"";width:10px;height:10px;
background:linear-gradient(90deg,currentColor 35%,transparent 35% 65%,currentColor 65%)}
.gg-home .e-bando .pausa.fermo::before{background:currentColor;clip-path:polygon(15% 0,100% 50%,15% 100%)}
.gg-home .e-bando .pausa:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.gg-home .e-bando .gg-avvisi.gira .gg-avviso{transition:none}}
/* Barra gialla sul telefono (29/10): centrata come la copertina sopra. Il nome del
bando torna su due righe al massimo, invece dei puntini dopo poche parole; «Leggi il
bando» diventa un pulsante scuro, un bersaglio da dito. Con più bandi la pausa va
sotto, centrata. */
@media (max-width:600px){
.gg-home .e-bando .gg-avviso{flex-direction:column;align-items:center;gap:8px;text-align:center;
padding-block:6px}
.gg-home .e-bando .gg-avviso > *{white-space:normal}
.gg-home .e-bando .gg-avviso > b{flex-basis:auto;font-size:16px;line-height:1.3;max-width:30ch;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.gg-home .e-bando .stato{font-size:11px;padding:3px 8px}
.gg-home .e-bando .conto{font-size:14.5px}
.gg-home .e-bando .conto b{font-size:14.5px}
.gg-home .e-bando .gg-avviso .vai{margin:4px 0 0;padding:10px 20px;border:0;font-size:12.5px;
background:var(--ink);color:#fff}
.gg-home .e-bando .gg-avviso .vai:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.gg-home .e-bando .gg-avvisi{flex-direction:column}
.gg-home .e-bando .gg-avvisi .giro{width:100%}
/* in dissolvenza la cella è alta quanto il bando più lungo: il pulsante va in fondo,
o con un nome di una riga sola salirebbe e cambierebbe posto a ogni giro */
.gg-home .e-bando .gg-avvisi .gg-avviso .vai{margin-top:auto}
}
/* Notizie sul telefono (29/10, variante B scelta da Marco fra tre): meno vuoto sopra,
20 px dai bordi, filtri in una griglia 2×2 (prima «Mondo GAL» restava solo a capo).
Stesso schema del desktop: la prima notizia è una scheda grande, le altre schede
compatte con la miniatura a sinistra. Ogni notizia ha contorno e fondo suoi, così
si vede dove finisce una e comincia l'altra. */
@media (max-width:600px){
.gg-home .e-news.e-news{padding:36px 20px 44px}
.gg-home .e-news .testa.testa{flex-direction:column;align-items:center;text-align:center;gap:8px;
margin-bottom:18px}
.gg-home .e-news .testa .vai{margin-left:0}
.gg-home .e-news .filtri .e-filter-item{justify-content:center}
.gg-home .e-news .filtri{margin:0 0 22px}
/* da margine a margine come le notizie sotto. Tre cose lo impedivano: il widget è un
contenitore flessibile e stringeva il suo involucro al contenuto; Elementor dà ai
pulsanti `max-width:calc(100% - 24px)`; e il box non contava padding e bordo */
.gg-home .e-news .filtri > .elementor-widget-container{flex:1 1 100%}
.gg-home .e-news .filtri .e-filter{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.gg-home .e-news .filtri .e-filter-item.e-filter-item{width:100%;max-width:none;box-sizing:border-box;
padding:10px 8px;text-align:center}
.gg-home .e-news .elementor-loop-container.elementor-loop-container{gap:10px}
.gg-home .e-news .e-loop-item.e-loop-item .n-notizia{background:#fff;border:1px solid var(--linea)}
.gg-home .e-news .e-loop-item.e-loop-item .titolo .elementor-heading-title{max-width:none}
.gg-home .e-news .e-loop-item:first-of-type .n-notizia{display:block;padding:0}
.gg-home .e-news .e-loop-item:first-of-type .img{aspect-ratio:16/9;margin:0}
.gg-home .e-news .e-loop-item:first-of-type .testo{padding:14px 16px 18px}
.gg-home .e-news .e-loop-item:first-of-type .titolo .elementor-heading-title{font-size:20px;line-height:1.25}
.gg-home .e-news .e-loop-item:not(:first-of-type) .n-notizia{display:grid;
grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px;align-items:start}
.gg-home .e-news .e-loop-item:not(:first-of-type) .img{aspect-ratio:1/1;margin:0}
.gg-home .e-news .e-loop-item:not(:first-of-type) .titolo .elementor-heading-title{font-size:15.5px;
line-height:1.3}
}
/* Progetti — la leggenda sotto la mappa è il contenitore `.legenda` (Testo + Titolo):
le regole di `figcaption` del mockup non la toccano, e le voci restavano attaccate. */
.gg-home .e-mappa .legenda{align-items:center;gap:8px 20px;padding:13px 16px 14px;
border-top:1px solid var(--linea);font-size:13px;color:var(--ink-2)}
.gg-home .e-mappa .legenda .elementor-widget-text-editor{flex:1 1 auto}
.gg-home .e-mappa .legenda .elementor-widget-text-editor .elementor-widget-container{display:flex;flex-wrap:wrap;gap:8px 20px}
.gg-home .e-mappa .legenda b{font-weight:400}
/* l'editor visuale avvolge il testo in : il margine lo alzava rispetto al link */
.gg-home .e-mappa .legenda p{margin:0}
.gg-home .e-mappa .legenda .vai{margin-left:auto}
.gg-home .e-mappa .legenda .vai .elementor-heading-title{font-family:var(--font-d);font-size:12.5px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--mare-d);border-bottom:2px solid currentColor;padding-bottom:2px}
.gg-home .e-mappa .legenda .vai a{color:inherit}
/* Bandi — [gg-bandi] (inc/bandi.php), al posto di «Come si presenta una domanda».
A sinistra gli aperti a fisarmonica (: uno aperto alla volta, senza JS),
a destra gli ultimi chiusi. Fondo cielo, il colore di Bandi nel menu. */
.gg-home .e-bandi{padding-block:78px;background:var(--gg-sky-pale)}
.gg-home .e-bandi:not(:has(.due)){display:none}
.gg-home .e-bandi .elementor-widget-shortcode{width:100%}
.gg-home .e-bandi .testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 20px;margin-bottom:30px}
.gg-home .e-bandi .testa h2{font-size:clamp(24px,3vw,32px);font-weight:600;color:var(--gg-sky-deep)}
.gg-home .e-bandi .testa .vai,
.gg-home .e-bandi .tutti{font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.11em;
text-transform:uppercase;color:var(--gg-sky-deep)}
.gg-home .e-bandi .testa .vai{margin-left:auto;border-bottom:2px solid var(--gg-sky-deep)}
.gg-home .e-bandi .tutti{display:inline-block;margin-top:16px}
.gg-home .e-bandi .due{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:start}
.gg-home .e-bandi .due.solo{grid-template-columns:minmax(0,1fr);max-width:760px}
.gg-home .e-bandi .colonna h3{margin-bottom:14px;font-size:12.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gg-sky-deep)}
.gg-home .e-bandi .stato{display:inline-block;font-family:var(--font-d);font-size:12px;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;padding:4px 9px;line-height:1.3;white-space:nowrap}
.gg-home .e-bandi .stato.aperto{background:var(--sole);color:var(--ink)}
.gg-home .e-bandi .stato.chiuso{background:var(--gg-earth-pale);color:var(--terra-x)}
.gg-home .e-bandi .data{font-size:14.5px;color:var(--ink-2);white-space:nowrap}
.gg-home .e-bandi .titolo{font-family:var(--font-d);font-weight:600;line-height:1.3;color:var(--ink)}
.gg-home .e-bandi .vuoto{margin:0;padding:22px 26px;background:var(--bianco);color:var(--ink-2)}
/* aperti */
.gg-home .e-bandi .fisa{background:var(--bianco);border-top:4px solid var(--sole)}
.gg-home .e-bandi .fisa details{border-bottom:1px solid var(--linea)}
.gg-home .e-bandi .fisa details:last-child{border-bottom:0}
.gg-home .e-bandi .fisa summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto 18px;gap:14px;
align-items:center;padding:18px 26px;cursor:pointer;list-style:none}
.gg-home .e-bandi .fisa summary::-webkit-details-marker{display:none}
.gg-home .e-bandi .fisa summary::after{content:"";grid-column:4;width:9px;height:9px;justify-self:center;
margin-top:-4px;border:solid var(--gg-sky-deep);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.gg-home .e-bandi .fisa details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.gg-home .e-bandi .fisa summary:focus-visible{outline:3px solid var(--gg-sky-deep);outline-offset:-3px}
.gg-home .e-bandi .fisa summary .titolo{font-size:17.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-home .e-bandi .fisa summary:hover .titolo{color:var(--gg-sky-deep)}
.gg-home .e-bandi .fisa details[open] summary{padding-top:24px}
.gg-home .e-bandi .fisa details[open] summary .titolo{font-size:clamp(21px,2vw,25px);white-space:normal}
.gg-home .e-bandi .fisa details[open] summary .data{display:none}
.gg-home .e-bandi .pannello{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px 24px;padding:0 26px 26px}
.gg-home .e-bandi .pannello:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.gg-home .e-bandi .pannello .dati{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.gg-home .e-bandi .pannello .meta{display:flex;flex-wrap:wrap;gap:6px}
.gg-home .e-bandi .gg-intervento{font-family:var(--font-d);font-size:13px;color:var(--gg-sky-deep);
border:1px solid currentColor;padding:2px 8px}
.gg-home .e-bandi .gg-intervento:hover,
.gg-home .e-bandi .gg-intervento:focus-visible{background:var(--gg-sky-deep);color:var(--bianco)}
.gg-home .e-bandi .cifre{display:flex;flex-wrap:wrap;gap:12px 30px;font-size:14.5px;color:var(--ink-2)}
.gg-home .e-bandi .cifre b{display:block;font-family:var(--font-d);font-size:22px;color:var(--ink);white-space:nowrap}
.gg-home .e-bandi .leggi{font-family:var(--font-d);font-size:13.5px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;background:var(--gg-sky-deep);color:var(--bianco);padding:12px 18px}
.gg-home .e-bandi .leggi:hover,
.gg-home .e-bandi .leggi:focus-visible{background:var(--ink)}
.gg-home .e-bandi .pannello img{width:100%;height:auto;align-self:start}
/* chiusi */
.gg-home .e-bandi .elenco{border-top:1px solid color-mix(in srgb,var(--gg-sky-deep) 22%,transparent)}
.gg-home .e-bandi .riga{display:block;padding:16px 0;
border-bottom:1px solid color-mix(in srgb,var(--gg-sky-deep) 22%,transparent)}
.gg-home .e-bandi .riga .meta{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.gg-home .e-bandi .riga .titolo{display:block;font-size:17.5px}
.gg-home .e-bandi .riga:hover .titolo{color:var(--gg-sky-deep)}
.gg-home .e-bandi a:focus-visible{outline:3px solid var(--gg-sky-deep);outline-offset:2px}
@media (max-width:980px){.gg-home .e-bandi .due{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
.gg-home .e-bandi .fisa summary{grid-template-columns:auto minmax(0,1fr) 18px;padding-inline:20px}
.gg-home .e-bandi .fisa summary::after{grid-column:3;grid-row:1}
.gg-home .e-bandi .fisa summary .data{display:none}
.gg-home .e-bandi .fisa summary .titolo{grid-column:1/3;white-space:normal}
.gg-home .e-bandi .pannello{grid-template-columns:minmax(0,1fr);padding:0 20px 22px}
.gg-home .e-bandi .pannello img{order:-1}
}
@media (prefers-reduced-motion:reduce){.gg-home .e-bandi .fisa summary::after{transition:none}}
/* Le quattro tessere sul telefono (29/10, variante A scelta da Marco fra tre): due per
riga invece di quattro fasce da 320 px una sotto l'altra. Da 1280 a ~420 px, e le
quattro strade del sito si vedono tutte in un colpo, come sul desktop. Il filetto
bianco di 2 px le separa; testi e segno ridotti alla tessera più stretta. */
@media (max-width:600px){
.gg-home .e-quattro.e-quattro{grid-template-columns:1fr 1fr;gap:2px;background:#fff}
.gg-home .e-quattro .e-tessera{min-height:210px;padding:16px 14px 18px}
.gg-home .e-quattro .e-tessera h3,
.gg-home .e-quattro .e-tessera .elementor-heading-title{font-size:18px;line-height:1.2}
.gg-home .e-quattro .e-tessera p{font-size:13.5px;line-height:1.35;margin-top:6px}
.gg-home .e-quattro .e-tessera .vai{margin-top:10px}
.gg-home .e-quattro .e-tessera .vai .elementor-heading-title{font-size:11.5px}
.gg-home .e-quattro .e-tessera .segno{width:96px;height:96px;right:-14px;top:-12px}
}
/* Chi siamo sul telefono (29/10): troppo bianco intorno. Tre padding annidati
(sezione, griglia, colonna) portavano il testo a 44 px dal bordo: ora 20, come le
altre sezioni. Il titolo aveva un'interlinea fissa di 49 px messa dal pannello per
lo schermo grande (`post-814.css`, pesa quattro classi: la regola qui ne ha una in
più). Le tre cifre stavano assolute sopra la foto e uscivano dal collage: ora sono in
riga sotto la foto, come quelle della copertina; il nome del luogo resta sulla foto. */
@media (max-width:600px){
.gg-home .e-ident.e-ident{padding:36px 0 44px}
.gg-home .e-ident .griglia.griglia{gap:28px;padding:0 20px}
.gg-home .e-ident .griglia > .e-con{padding:0}
.gg-home .e-ident .griglia > .e-con:first-child{gap:14px}
.gg-home .e-ident .elementor-widget-heading h2.elementor-heading-title{font-size:24px;line-height:1.2}
.gg-home .e-ident p{margin-bottom:0}
.gg-home .e-ident .incisione{width:120px;margin-top:2px}
.gg-home .e-collage.e-collage{display:grid;padding:0}
.gg-home .e-collage .grande{grid-area:1/1;padding:0}
.gg-home .e-collage .luogo{grid-area:1/1;position:relative;right:auto;bottom:auto;align-self:end;
justify-self:end;margin:0}
.gg-home .e-numeri.e-numeri{grid-area:2/1;position:static;width:auto;display:grid;
grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.gg-home .e-numeri div{padding:8px 10px}
.gg-home .e-numeri b{font-size:24px}
/* la prima cifra nel widget è scritta `15comuni…
`, le altre con lo `` */
.gg-home .e-numeri span,
.gg-home .e-numeri p{font-size:12px;line-height:1.3;color:var(--ink-2);margin:3px 0 0}
.gg-home .e-numeri p b{margin-bottom:3px}
/* centrata, come copertina e barra gialla (Marco, 29/10) */
.gg-home .e-ident .griglia > .e-con:first-child{justify-items:center;text-align:center}
.gg-home .e-ident .elementor-widget-heading h2.elementor-heading-title,
.gg-home .e-ident p,
.gg-home .e-ident .incisione{margin-inline:auto}
.gg-home .e-numeri div{text-align:center}
}
/* Strategia sul telefono (29/10): stesso vuoto di Chi siamo (testo a 44 px dal bordo,
ora 20) e testo centrato come le altre sezioni. Le schede dei documenti tenevano
icona | testo | pulsante su tre colonne e il titolo andava a capo a ogni parola:
ora icona e titolo in alto, descrizione sotto, «Scarica» a tutta larghezza in fondo. */
@media (max-width:600px){
.gg-home .e-strategia.e-strategia{padding:0}
.gg-home .e-strategia .wrap.wrap{padding:36px 20px 44px}
.gg-home .e-strategia .wrap > .e-con{padding:0}
.gg-home .e-strategia .wrap > .e-con:first-child{align-items:center;text-align:center}
.gg-home .e-strategia .elementor-widget-heading:not(.storia):not(.eyebrow) .elementor-heading-title{
margin-bottom:10px}
.gg-home .e-strategia .storia{margin-top:14px}
.gg-home .e-strategia .scarica{gap:10px;margin-top:8px}
.gg-home .e-strategia .scheda.scheda{grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:16px}
.gg-home .e-strategia .scheda > .elementor-widget-html{grid-row:1/3;align-self:start;padding-top:2px}
.gg-home .e-strategia .scheda > .vai{grid-column:1/-1;grid-row:3;margin-top:10px;width:auto}
.gg-home .e-strategia .scheda > .vai .elementor-heading-title{display:block;text-align:center}
.gg-home .e-strategia .scheda small{font-size:15px}
}
/* Progetti sul telefono (29/10): 20 px dai bordi invece di 44, meno vuoto sopra,
intestazione centrata come le altre sezioni. Le schede restano allineate a sinistra:
hanno il filetto colorato su quel lato (confermato da Marco il 27/10). */
@media (max-width:600px){
.gg-home .e-ssl.e-ssl{padding:36px 0 44px}
.gg-home .e-ssl .griglia.griglia{gap:24px;padding:0 20px}
.gg-home .e-ssl .griglia > .e-con{padding:0}
.gg-home .e-ssl .griglia > .e-con:first-child{align-items:center;text-align:center}
.gg-home .e-ssl .intro{margin-bottom:18px}
.gg-home .e-ssl .schede{width:100%;text-align:left;gap:10px}
}
/* «Facciamo futuro» sul telefono (29/10). Il nome del luogo finiva sopra la frase:
sul telefono non c'è (Marco). Testo centrato, 20 px dai bordi, pulsante su una riga. */
@media (max-width:600px){
.gg-home .e-fascia .detto.detto{padding:44px 20px 40px}
.gg-home .e-fascia .detto > .e-con{padding:0;align-items:center;text-align:center}
.gg-home .e-fascia .ph{display:none}
.gg-home .e-fascia .detto p{margin-inline:auto}
.gg-home .e-fascia .azione{justify-items:center;margin-top:18px}
.gg-home .e-fascia .azione .elementor-button{font-size:15px;padding:13px 18px;white-space:nowrap}
/* Il velo sta sul blocco del testo: col padding del riquadro restava una cornice di foto
scoperta ai lati. E sfuma verso destra, giusto per il testo a sinistra del desktop:
col testo centrato qui è uniforme. */
.gg-home .e-fascia .quadro.quadro{padding:0}
.gg-home .e-fascia .detto.detto{background:rgba(58,49,38,.8)}
}
/* Social, intestazione dei canali (29/10, tutte le larghezze). La riga flessibile stava
sull'involucro del widget, ma icona e nome sono dentro l'involucro interno — e in
Facebook e YouTube anche dentro un ``, in Instagram no: l'icona finiva sopra il
nome. Si rende flessibile la riga vera, in entrambi i casi. */
.gg-home .canale .intestazione .elementor-widget-container,
.gg-home .canale .intestazione p{display:flex;align-items:center;gap:10px;margin:0;width:100%}
.gg-home .canale .intestazione .elementor-widget-container > p{flex:1}
/* Social sul telefono: 20 px dai bordi, meno vuoto sopra, titolo e «Seguici» centrati
uno sotto l'altro invece del link spinto a destra sotto il titolo. */
@media (max-width:600px){
.gg-home .e-social.e-social{padding:36px 0 44px}
.gg-home .e-social .wrap.wrap{padding:0 20px}
.gg-home .e-social .testa.testa{padding:0;flex-direction:column;align-items:center;text-align:center;
gap:8px;margin-bottom:18px}
.gg-home .e-social .testa .vai{margin-left:0}
.gg-home .e-social .canali.canali{padding:0;gap:14px}
}
/* Newsletter sul telefono: meno vuoto sopra e sotto (il modulo è in style.css) */
@media (max-width:600px){
.gg-home .e-chiusa.e-chiusa{padding:36px 20px 40px}
.gg-home .e-chiusa .nota{margin-top:14px}
}
/* Bandi sul telefono (29/10): meno vuoto sopra, come le notizie. «Aperti» e «Chiusi di
recente» diventano testate di gruppo (pallino del colore della pillola + filetto),
e i chiusi stanno in un riquadro bianco come la fisarmonica degli aperti. Con i soli
aperti la testata sparisce alla vista: ripeteva la pillola «Aperto» qui sotto, e
restava lì da sola. Ai lettori di schermo resta, perché dà nome al gruppo. */
@media (max-width:600px){
.gg-home .e-bandi.e-bandi{padding-block:36px 44px}
.gg-home .e-bandi .wrap{padding-inline:20px}
.gg-home .e-bandi .testa{margin-bottom:18px}
.gg-home .e-bandi .due{gap:28px}
.gg-home .e-bandi .colonna h3{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gg-home .e-bandi .colonna h3::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;
background:var(--sole)}
.gg-home .e-bandi .colonna + .colonna h3::before{background:var(--terra-x)}
.gg-home .e-bandi .colonna h3::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25}
.gg-home .e-bandi .due.solo .colonna h3{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap}
.gg-home .e-bandi .elenco{background:var(--bianco);border-top:4px solid var(--terra-x)}
.gg-home .e-bandi .riga{padding:14px 20px;border-bottom:1px solid var(--linea)}
.gg-home .e-bandi .riga:last-child{border-bottom:0}
.gg-home .e-bandi .riga .titolo{font-size:16px}
.gg-home .e-bandi .tutti{margin-top:12px}
/* Più bandi aperti: quelli chiusi a fisarmonica tenevano solo pillola e titolo, senza
scadenza. La data torna sotto il titolo; nel bando aperto resta nascosta, perché
la ripetono le cifre del pannello. */
.gg-home .e-bandi .fisa details:not([open]) summary .data{display:block;grid-column:1/3;margin-top:-6px;
font-size:13.5px}
}
/* Progetti — la mappa dei progetti ([gg-mappa-progetti], mappa.css) al posto di MapPress:
a tutta larghezza nel riquadro bianco, senza un secondo bordo. */
.gg-home .e-mappa .elementor-widget-shortcode{width:100%}
.gg-home .e-mappa .gg-mappa-progetti{margin:0}
.gg-home .e-mappa .gg-mappa-tela{border:0}
/* Notizie: tutta la scheda porta all'articolo con un solo link, quello del titolo, allargato
alla scheda (l'immagine non è più un link: senza testo era muto per gli screen reader,
WCAG 2.4.4). Categoria e data restano link propri, sopra lo strato del titolo */
.gg-home .e-news .n-notizia{position:relative}
.gg-home .e-news .n-notizia :is(.img,.testo,.titolo,.elementor-widget-theme-post-featured-image){position:static}
.gg-home .e-news .n-notizia .titolo a::after{content:"";position:absolute;inset:0;z-index:1}
.gg-home .e-news .n-notizia .meta{z-index:2}
.gg-home .e-news .n-notizia:hover .titolo a{color:var(--mare-d)}