/* ============================================================================
   HOME — stili della landing page (versione GUTENBERG)
   ============================================================================
   Caricato SOLO sulla home, da php/ggwd-portfolio.php.
   (Se la home è costruita con Elementor, al suo posto viene caricato home-elementor.css.)
   Il CSS di header e footer (su tutte le pagine) è in globale.css.

   COME È ORGANIZZATO
     1. Variabili                  colori e larghezza colonna: si cambiano qui, una volta sola
     2. Elementi riusati           titolo di sezione, paragrafo, icona rossa
     3. Sezioni (desktop)          Hero · Servizi · Portfolio · Galleria · Metodo · Team · Contatti
     4. Modale "Grazie"            finestra che compare dopo l'invio del modulo
     5. Telefono                   tutto ciò che cambia sotto i 782 px (@media in fondo)
     6. Movimento ridotto          disattiva le animazioni per chi lo chiede al sistema

   COME LEGGERE LE MISURE
     • "min(9.27vw, 178px)" = cresce con la larghezza dello schermo (vw = 1% della larghezza) ma
       non supera mai 178 px, che è il valore a 1920 px di larghezza (quello del file di design).
       Per cambiarla modifica entrambi i numeri: px = vw × 19,2.
     • Sotto i 782 px (telefono) le misure sono in vw rispetto a una larghezza di 393 px: px = vw × 3,93.
     • "!important" è presente solo dove serve a battere gli stili che Gutenberg scrive direttamente
       nei blocchi (Cover, Colonne, Pulsanti): non toglierlo.

   COME CAMBIARE LE COSE PIÙ COMUNI
     • Rosso del sito ............... riga "--wp--preset--color--custom-uno" qui sotto (blocco body)
     • Grigi, nero di fondo ......... blocco "Variabili" qui sotto
     • Dimensione dei titoli ........ cerca ".ggwd-titolo-sezione", ".ggwd-hero-titolo", ".ggwd-card-titolo"
     • Spazi tra le sezioni ......... padding-top / padding-bottom di ".ggwd-servizi", ".ggwd-portfolio", ecc.
     • Colonne del portfolio ........ ".ggwd-portfolio-grid" (grid-template-columns, column-gap, row-gap)
   ============================================================================ */


/* ============================================================================
   1. VARIABILI
   ============================================================================ */
:root {
  --ggwd-sfondo: #111;                /* nero di fondo del sito */
  --ggwd-grigio-testo: #a1a1a1;       /* paragrafi, contatore della galleria, linee tratteggiate su telefono */
  --ggwd-grigio-luogo: #757575;       /* località sotto al titolo di ogni card del portfolio */
  --ggwd-grigio-linee: #707070;       /* bordi di filtri, campi del modulo, pulsanti della galleria */
  --ggwd-grigio-scuro: #5e5e5e;       /* etichette del modulo (desktop) e pallini inattivi del carosello */
  --ggwd-grigio-label-mobile: #8e8e8e;/* etichette del modulo su telefono */
  --ggwd-colonna: 1400px;             /* larghezza massima della colonna dei contenuti */
  /* freccia rossa del pulsante SCOPRI: è l'immagine freccia.png incorporata nel CSS, quindi non
     c'è nessun file da caricare. Per cambiarla incolla un altro url("data:image/png;base64,...") */
  --ggwd-freccia: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAYCAYAAADKx8xXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAIhJREFUeAHtjrENwkAMRZ9NQeswQSrqrMAkZBQ2QEwAmzBCoOGAJbgJMFdwUjruSqI8yZK/5KdvBsxuNMMD21KBLpGzQPdGTjWyCn7IoVYmYH2g8Tyz/HeylMrp9Jiz4r1ShLajEFPb9acSWO1Gr76eWDdLE5ES6nj73eMC36yJF0q5Y/vSpswHRCylyjkNjWcAAAAASUVORK5CYII=");
}

/* Il rosso del design è #e30613 (il sito prima usava #d70011). Vale solo per la home.
   Per cambiarlo su tutto il sito: Aspetto > Editor > Stili > Colori > "Uno", poi cancella questa riga. */
body {
  --wp--preset--color--custom-uno: #e30613;
  background: var(--ggwd-sfondo);
}


/* ============================================================================
   2. ELEMENTI RIUSATI IN PIÙ SEZIONI
   ============================================================================ */

/* Titolo rosso di sezione: "Servizi", "Portfolio", "Metodo", "Team", "Contattaci" */
.ggwd-titolo-sezione { font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: 0; margin: 0; }

/* Paragrafo grigio (descrizioni dei servizi, intro del portfolio, testo del Metodo, bio, ecc.) */
.ggwd-testo { font-size: 18px; line-height: 1.4; font-weight: 400; color: var(--ggwd-grigio-testo); margin: 0 0 20px; }

/* Icona rossa a forma di arco (è lo shortcode [ggwd_icona] del file PHP). 24 px; il colore
   è quello del testo: si cambia con la proprietà "color". */
.ggwd-icona { display: block; margin: 0; width: 24px; height: 24px; color: var(--wp--preset--color--custom-uno); }
.ggwd-icona svg { display: block; width: 100%; height: 100%; }
.ggwd-icona a,
.ggwd-icona .ggwd-icona-svg { display: block; color: inherit; }

/* Sezioni a tutta larghezza: stesso margine laterale del resto del sito.
   Il valore viene dal tema (4vw su desktop, 20 px su telefono: vedi globale.css). */
.ggwd-hero,
.ggwd-servizi,
.ggwd-portfolio,
.ggwd-metodo,
.ggwd-team-titolo,
.ggwd-contatti {
  padding-left: var(--wp--style--root--padding-left, 4vw);
  padding-right: var(--wp--style--root--padding-right, 4vw);
}

/* Dentro i blocchi Cover (Hero e Metodo) il contenuto va a tutta larghezza.
   Il Cover ha già il suo margine laterale (regola qui sopra); WordPress però lo aggiunge una seconda volta
   al contenitore interno (classe "has-global-padding"), e i testi finivano a 40 px dal bordo invece di 20
   (su telefono) e non si allineavano alle altre sezioni. Quindi qui il padding del contenitore interno è azzerato. */
.ggwd-hero .wp-block-cover__inner-container,
.ggwd-metodo .wp-block-cover__inner-container {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ...e i paragrafi "stretti" restano allineati a sinistra sulla colonna dei contenuti
   (WordPress, di suo, li centrerebbe nella pagina). */
.ggwd-portfolio > .ggwd-portfolio-intro,
.ggwd-metodo .wp-block-cover__inner-container > .ggwd-testo,
.ggwd-metodo .wp-block-cover__inner-container > .ggwd-icona,
.ggwd-hero .wp-block-cover__inner-container > .ggwd-hero-claim {
  margin-left: max(0px, calc((100% - var(--ggwd-colonna)) / 2)) !important;
  margin-right: auto !important;
}


/* ============================================================================
   3. SEZIONI (DESKTOP)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   HERO — foto grande con titolo, sottotitolo, claim e pulsante SCOPRI
   --------------------------------------------------------------------------- */
.ggwd-hero-wrap { position: relative; background: var(--ggwd-sfondo); }
.ggwd-hero-img-mobile { display: none; } /* foto per telefono: compare solo nel blocco @media in fondo */
.ggwd-hero {
  position: relative;
  z-index: 1;
  min-height: min(100.2vw, 1924px) !important; /* altezza della hero */
  padding-top: 0 !important;
  padding-bottom: min(13.1vw, 252px) !important; /* spazio tra "SCOPRI" e il bordo inferiore */
  background: transparent !important;
}
/* Sfumatura nera in basso sulla foto: parte trasparente al 29,6% dell'altezza e arriva a nero in fondo */
.ggwd-hero .wp-block-cover__background {
  inset: 29.6% 0 0 0 !important;
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(126, 153, 161, 0) 0%, var(--ggwd-sfondo) 100%) !important;
}
.ggwd-hero-titolo { font-size: clamp(44px, 7.6vw, 146px); font-weight: 200; line-height: .81; text-transform: uppercase; margin: 0; color: #fff; }
.ggwd-hero-sub { font-size: clamp(20px, 2.92vw, 56px); font-weight: 800; line-height: .85; margin: 0; } /* il rosso arriva dalla classe del blocco */
.ggwd-hero-claim { font-size: clamp(15px, 1.3vw, 25px); font-weight: 400; line-height: 1.3; color: #e0e0e0; margin: 0 0 2.5vw; }

/* Pulsante SCOPRI: il tema aggiunge di suo un'icona (un triangolo) prima del testo; la nascondo e
   al suo posto metto la freccia rossa del design (variabile --ggwd-freccia). */
.ggwd-hero .pulsante-freccia { display: none; }
.ggwd-hero .wp-block-button__link { display: inline-flex; align-items: center; font-size: clamp(15px, 1vw, 19px); }
.ggwd-hero .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-right: 10px; /* distanza tra freccia e scritta */
  background: var(--ggwd-freccia) no-repeat center / contain;
}

/* ---------------------------------------------------------------------------
   SERVIZI — tre colonne con titolo, descrizione e icona
   --------------------------------------------------------------------------- */
.ggwd-servizi { padding-top: min(9.27vw, 178px); padding-bottom: min(15.5vw, 298px); }
.ggwd-servizi-cols { margin-top: min(4.06vw, 78px) !important; gap: 0 min(5.3vw, 102px); } /* margin-top: spazio sotto il titolo "Servizi"; gap: tra le colonne */
.ggwd-servizio-titolo { font-size: 30px; font-weight: 400; line-height: 1.1; margin: 0; color: #fff; }
.ggwd-servizi-cols .ggwd-testo { max-width: 410px; margin-top: 0; }
.ggwd-dots { display: none; } /* pallini del carosello: servono solo su telefono (vedi in fondo) */

/* ---------------------------------------------------------------------------
   PORTFOLIO — introduzione, filtri, griglia di progetti, "Carica altri progetti"
   --------------------------------------------------------------------------- */
.ggwd-portfolio { padding-bottom: min(1.8vw, 35px); }
.ggwd-portfolio-intro { max-width: 700px; margin: 0; }

/* Filtri (TUTTI / PROGETTAZIONE / DIREZIONE LAVORI / RISANAMENTO).
   Sono pulsanti Gutenberg con la classe "ggwd-filtro--NOME": il JavaScript legge NOME e mostra
   solo i progetti di quel tipo. Il filtro selezionato ha anche la classe "is-attivo". */
.ggwd-filtri { display: flex; flex-wrap: wrap; gap: 10px !important; margin: min(5.1vw, 98px) 0 min(3vw, 58px); }
.ggwd-filtri .ggwd-filtro .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 34px;
  padding: 0 22px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid var(--ggwd-grigio-linee);
  border-radius: 3px;
  transition: background-color .2s, border-color .2s;
}
.ggwd-filtri .ggwd-filtro .wp-block-button__link:hover { border-color: var(--wp--preset--color--custom-uno); gap: 0; }
.ggwd-filtri .ggwd-filtro.is-attivo .wp-block-button__link {
  background: var(--wp--preset--color--custom-uno) !important;
  border-color: var(--wp--preset--color--custom-uno);
}

/* Griglia dei progetti: 3 Query Loop (uno per tipo di progetto) che confluiscono in un'unica griglia */
.ggwd-portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 57px; row-gap: 109px; }
.ggwd-portfolio-grid .wp-block-query,
.ggwd-portfolio-grid .wp-block-post-template { display: contents; }
.ggwd-portfolio-grid .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.ggwd-portfolio-grid li.wp-block-post { margin: 0; min-width: 0; }
.ggwd-portfolio-grid li[hidden],
.ggwd-piu[hidden] { display: none !important; } /* progetti nascosti dal filtro / dal "Carica altri" */

/* Card di un progetto: foto, anno (rosso), titolo (bianco), località (grigio) */
.ggwd-card-img { margin: 0; overflow: hidden; border-radius: 10px; }
.ggwd-card-img img { display: block; width: 100%; aspect-ratio: 429 / 423 !important; object-fit: cover; border-radius: 10px; transition: transform .5s ease; }
/* progetto senza foto: riquadro grigio scuro, per non rompere la griglia */
.ggwd-portfolio-grid li.wp-block-post:not(:has(.ggwd-card-img))::before { content: ""; display: block; aspect-ratio: 429 / 423; border-radius: 10px; background: #1c1c1c; }
.ggwd-card-anno { font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--wp--preset--color--custom-uno); margin: 40px 0 8px; } /* 40px = spazio tra foto e anno */
.ggwd-card-titolo { font-size: 39px; font-weight: 800; line-height: .77; text-transform: uppercase; margin: 0; color: #fff; }
.ggwd-card-luogo { font-size: 19px; font-weight: 300; color: var(--ggwd-grigio-luogo); margin: 8px 0 0; } /* 8px = distanza dal titolo */

/* Card cliccabile (apre la galleria): classe aggiunta dal JavaScript ai progetti con foto */
.ggwd-apribile { cursor: pointer; }
.ggwd-apribile:hover .ggwd-card-img img { transform: scale(1.04); }
.ggwd-apribile:focus-visible { outline: 2px solid var(--wp--preset--color--custom-uno); outline-offset: 8px; border-radius: 10px; }

/* Pulsante rosso "Carica altri progetti" */
.ggwd-piu { display: flex; justify-content: center; margin-top: min(8.6vw, 165px); }
.ggwd-piu .wp-block-button__link {
  justify-content: center;
  text-align: center;
  text-transform: none; /* il tema mette in maiuscolo tutti i pulsanti: questo resta "Sentence case" come nel design */
  width: 207px;
  height: 48px;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff !important;
  background: var(--wp--preset--color--custom-uno) !important;
  border: 0;
  border-radius: 3px;
  transition: opacity .2s;
}
.ggwd-piu .wp-block-button__link:hover { opacity: .85; }

/* ---------------------------------------------------------------------------
   GALLERIA IN SOVRIMPRESSIONE — si apre cliccando la foto di un progetto
   Il contenuto è creato dal JavaScript (js/portfolio.js): qui c'è solo lo stile.
   --------------------------------------------------------------------------- */
html.ggwd-gal-aperta { overflow: hidden; } /* blocca lo scroll della pagina sotto */
.ggwd-gal,
.ggwd-gal * { box-sizing: border-box; }
.ggwd-gal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* sopra l'header del tema */
  display: flex;
  flex-direction: column;
  background: var(--ggwd-sfondo);
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.ggwd-gal.is-aperta { opacity: 1; visibility: visible; transition: opacity .3s ease; }

/* barra in alto: tipo + titolo del progetto, e pulsante di chiusura */
.ggwd-gal__barra { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 28px min(4vw, 77px) 0; }
.ggwd-gal__info { display: flex; flex-direction: column; gap: 6px; color: #fff; }
.ggwd-gal__tipo { font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--wp--preset--color--custom-uno); }
.ggwd-gal__titolo { font-size: clamp(26px, 2.6vw, 39px); font-weight: 800; line-height: .95; text-transform: uppercase; }
.ggwd-gal button { font: inherit; cursor: pointer; }
.ggwd-gal button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ggwd-gal__chiudi {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 40px;
  font-weight: 200;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 1px solid var(--ggwd-grigio-linee);
  border-radius: 50%;
  transition: background-color .2s, border-color .2s;
}
.ggwd-gal__chiudi:hover { background: var(--wp--preset--color--custom-uno); border-color: var(--wp--preset--color--custom-uno); }

/* foto (slider Swiper) */
.ggwd-gal__swiper { flex: 1; min-height: 0; width: 100%; margin-top: 20px; padding-bottom: 64px; }
.ggwd-gal .swiper-slide { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 min(9vw, 173px); }
.ggwd-gal .swiper-slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }

/* frecce precedente / successiva e contatore "2 / 5" */
.ggwd-gal__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  color: #fff;
  background: rgba(17, 17, 17, .6);
  border: 1px solid var(--ggwd-grigio-linee);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background-color .2s, border-color .2s;
}
.ggwd-gal__nav:hover { background: var(--wp--preset--color--custom-uno); border-color: var(--wp--preset--color--custom-uno); }
.ggwd-gal__prec { left: min(2vw, 38px); }
.ggwd-gal__succ { right: min(2vw, 38px); }
.ggwd-gal__conteggio { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 16px; letter-spacing: .1em; color: var(--ggwd-grigio-testo); pointer-events: none; }
/* progetto con una sola foto: niente frecce né contatore */
.ggwd-gal--singola .ggwd-gal__nav,
.ggwd-gal--singola .ggwd-gal__conteggio { display: none; }

/* ---------------------------------------------------------------------------
   METODO — ritratto scuro a destra, testo a sinistra
   --------------------------------------------------------------------------- */
.ggwd-metodo-wrap { position: relative; background: var(--ggwd-sfondo); }
.ggwd-metodo-img-mobile { display: none; } /* ritratto per telefono: vedi @media in fondo */
.ggwd-metodo {
  position: relative;
  z-index: 1;
  min-height: min(79.64vw, 1529px) !important; /* altezza della sezione */
  align-items: flex-start !important;
  padding-top: min(32.03vw, 615px) !important;  /* spazio sopra al titolo "Metodo" */
  padding-bottom: 0 !important;
  background: transparent !important;
}
.ggwd-metodo .wp-block-cover__image-background { object-position: 50% 0; }
.ggwd-metodo .ggwd-titolo-sezione { margin-bottom: 58px; } /* spazio tra "Metodo" e "IL SIGNIFICATO..." */
.ggwd-metodo-titolo { font-size: clamp(50px, 3.9vw, 75px); font-weight: 200; line-height: .81; text-transform: uppercase; margin: 0; color: #fff; }
.ggwd-metodo .ggwd-testo { max-width: 700px; margin: 0 0 28px; }

/* ---------------------------------------------------------------------------
   TEAM — foto di Sofia e Paolo con i nomi sovrapposti, poi le due bio
   --------------------------------------------------------------------------- */
.ggwd-team-titolo { position: relative; z-index: 2; padding-top: 0; padding-bottom: 16px; } /* z-index: il titolo sta sopra alla foto */
.ggwd-team-foto { position: relative; margin: 0; }
.ggwd-team-foto figure { margin: 0; }
.ggwd-team-foto img { display: block; width: 100%; height: auto; }
/* nomi sulla foto: posizionati in % rispetto alla foto, quindi seguono le due persone */
.ggwd-team-nome { position: absolute; top: 55.1%; }
.ggwd-team-nome--sx { right: 71.1%; text-align: right; } /* Sofia */
.ggwd-team-nome--dx { left: 66.9%; }                     /* Paolo */
.ggwd-team-nome p { margin: 0; font-weight: 300; color: #fff; }
.ggwd-team-nome .ggwd-nome { font-size: clamp(16px, 2.34vw, 45px); line-height: .9; }
.ggwd-team-nome .ggwd-ruolo { font-size: clamp(9px, 1.3vw, 25px); line-height: 1.2; }
/* bio sotto la foto: due colonne, Sofia a sinistra (testo a destra), Paolo a destra */
.ggwd-team-bio { display: grid; grid-template-columns: repeat(2, minmax(0, 399px)); justify-content: center; column-gap: 108px; padding: min(5.6vw, 108px) 12px min(5.55vw, 107px) 0; }
.ggwd-bio-sx { text-align: right; }
.ggwd-bio-sx .ggwd-icona { margin-left: auto; }
.ggwd-bio-nome { font-size: 30px; font-weight: 400; line-height: 1.1; margin: 0 0 4px; color: #fff; }
.ggwd-bio-ruolo { font-size: 20px; font-weight: 300; line-height: 1.2; margin: 0 0 2px; } /* il rosso arriva dalla classe del blocco */

/* ---------------------------------------------------------------------------
   CONTATTI — titolo, testo e modulo Formidable (id=1)
   Il modulo è creato dal plugin: qui si cambia solo l'aspetto (classi "frm_...").
   --------------------------------------------------------------------------- */
.ggwd-contatti { padding-top: min(9.7vw, 186px); padding-bottom: min(10vw, 192px); text-align: center; }
.ggwd-contatti .ggwd-titolo-sezione { margin-bottom: 8px; }
.ggwd-contatti .ggwd-testo { max-width: 400px; margin: 0 auto min(6vw, 120px); } /* l'ultimo valore è lo spazio tra il testo e il primo campo */
.ggwd-contatti .frm_forms { max-width: 684px !important; margin: 0 auto; text-align: left; }
.ggwd-contatti .frm_primary_label { font-size: 19px; font-weight: 400; text-transform: uppercase; color: var(--ggwd-grigio-scuro); }

/* campi: sfondo trasparente (quindi neri), testo bianco, solo la riga sotto; diventa rossa quando ci scrivi */
.ggwd-contatti .frm_forms input[type=text],
.ggwd-contatti .frm_forms input[type=email],
.ggwd-contatti .frm_forms input[type=tel],
.ggwd-contatti .frm_forms textarea {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-bottom: 1px dotted var(--ggwd-grigio-linee) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  font-size: 19px;
  transition: border-color .2s;
}
.ggwd-contatti .frm_forms input[type=text]:focus,
.ggwd-contatti .frm_forms input[type=email]:focus,
.ggwd-contatti .frm_forms input[type=tel]:focus,
.ggwd-contatti .frm_forms textarea:focus {
  border-bottom: 1px solid var(--wp--preset--color--custom-uno) !important;
  outline: none;
}
/* ritmo verticale del modulo: ogni campo 66 px, il messaggio più alto, la privacy staccata, il pulsante sotto */
.ggwd-contatti .frm_forms .frm_submit { text-align: center; }
.ggwd-contatti .frm_forms .frm_form_field:not(.frm_hidden) { min-height: 66px; margin: 0 !important; }
.ggwd-contatti .frm_forms .frm_form_field:has(textarea) { min-height: 230px; }
.ggwd-contatti .frm_forms .frm_form_field:has(input[type=checkbox]) { margin-top: 28px !important; }
.ggwd-contatti .frm_forms .frm_submit { margin-top: 19px; }
.ggwd-contatti .frm_forms .frm_button_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--wp--preset--color--custom-uno) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 5px !important;
  min-width: 112px;
  height: 52px;
  font-size: 20px;
  font-weight: 800;
}


/* ============================================================================
   4. MODALE "GRAZIE" — compare dopo l'invio del modulo contatti
   Il contenuto (testo e pulsanti) è nel JavaScript, funzione modaleGrazie() in js/portfolio.js.
   ============================================================================ */
.ggwd-modale-grazie {
  position: fixed;
  inset: 0;
  z-index: 100001; /* sopra anche alla galleria */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wp--style--root--padding-left, 4vw);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.ggwd-modale-grazie.is-aperta { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.ggwd-modale-grazie__overlay { position: absolute; inset: 0; background: rgba(17, 17, 17, .85); } /* velo scuro dietro alla finestra */
.ggwd-modale-grazie__finestra {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: 48px 40px;
  background: var(--ggwd-sfondo);
  border: 1px solid #333;
  border-radius: 10px;
  text-align: center;
  transform: translateY(12px);
  transition: transform .3s ease;
}
.ggwd-modale-grazie.is-aperta .ggwd-modale-grazie__finestra { transform: translateY(0); }
.ggwd-modale-grazie__chiudi {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 1px solid var(--ggwd-grigio-linee);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.ggwd-modale-grazie__chiudi:hover { background: var(--wp--preset--color--custom-uno); border-color: var(--wp--preset--color--custom-uno); }
.ggwd-modale-grazie__pretitolo { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--wp--preset--color--custom-uno); text-transform: uppercase; } /* "GRAZIE" */
.ggwd-modale-grazie__titolo { margin: 0 0 28px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; line-height: 1.2; color: #fff; }
.ggwd-modale-grazie__azione {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 48px;
  padding: 0 24px;
  background: var(--wp--preset--color--custom-uno);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity .2s;
}
.ggwd-modale-grazie__azione:hover { opacity: .85; }


/* ============================================================================
   5. TELEFONO (sotto i 782 px) — misure del design iPhone 14 Pro, 393 px di larghezza
   Qui si ridefinisce solo ciò che cambia: tutto il resto resta come sopra.
   I valori in vw sono rispetto a 393 px (px = vw × 3,93); il margine laterale della
   pagina (20 px) lo imposta globale.css.
   ============================================================================ */
@media (max-width: 781px) {

  /* testi in generale */
  .ggwd-testo { font-size: 15px; max-width: 355px; }
  .ggwd-titolo-sezione { font-size: min(40px, 10.2vw); }

  /* --- linea tratteggiata sotto ai titoli di sezione (solo telefono) ---
     48 px di larghezza, colore del testo grigio. Per toglierla da una sezione cancella il suo selettore. */
  .ggwd-servizi .ggwd-titolo-sezione::after,
  .ggwd-portfolio .ggwd-titolo-sezione::after,
  .ggwd-metodo .ggwd-titolo-sezione::after,
  .ggwd-contatti .ggwd-titolo-sezione::after {
    content: "";
    display: block;
    width: 48px;
    margin-top: 14px;
    border-bottom: 1px dashed var(--ggwd-grigio-testo);
  }
  /* nel Metodo il titolo ha già il suo spazio sotto: la linea non lo deve aumentare */
  .ggwd-metodo .ggwd-titolo-sezione::after { margin-top: 14px; margin-bottom: -14px; }

  /* --- HERO: foto ritagliata apposta per il telefono (393x1102), sfumatura dall'87vw --- */
  .ggwd-hero-img-mobile { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 0; margin: 0; }
  .ggwd-hero-img-mobile img { display: block; width: 100%; height: 280.4vw; object-fit: cover; }
  .ggwd-hero .wp-block-cover__image-background { display: none; } /* la foto desktop non serve */
  .ggwd-hero { min-height: 297vw !important; padding-bottom: 9.1vw !important; }
  .ggwd-hero .wp-block-cover__background { inset: 87vw 0 auto 0 !important; height: 193.6vw; }
  .ggwd-hero-titolo { font-size: min(44px, 11.2vw); line-height: .825; }
  .ggwd-hero-sub { font-size: min(20px, 5.1vw); line-height: .875; }
  .ggwd-hero-claim { font-size: 15px; line-height: 1.3; margin: 0 0 26px; max-width: 355px; }
  .ggwd-hero .wp-block-button__link { font-size: 15px; }

  /* --- SERVIZI: un servizio alla volta, gli altri si scorrono con lo swipe, con tre pallini sotto ---
     Per averli invece uno sotto l'altro cancella tutto il blocco "carosello servizi" qui sotto
     (e il blocco puntini in js/portfolio.js, funzione puntiniServizi). */
  .ggwd-servizi { padding-top: 32.3vw; padding-bottom: 35.1vw; }
  .ggwd-servizi-cols { margin-top: 6.1vw !important; gap: 0; }
  .ggwd-servizio-titolo { font-size: 25px; line-height: .96; }
  /* carosello servizi (inizio) */
  .ggwd-servizi-cols {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ggwd-servizi-cols::-webkit-scrollbar { display: none; }
  .ggwd-servizi-cols > .wp-block-column { flex: 0 0 100% !important; min-width: 0; scroll-snap-align: start; }
  .ggwd-dots { display: flex; gap: 8px; margin-top: 22px; }
  .ggwd-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--ggwd-grigio-scuro); transition: background-color .2s; }
  .ggwd-dots span.is-attivo { background: var(--wp--preset--color--custom-uno); }
  /* carosello servizi (fine) */

  /* --- PORTFOLIO: una colonna, 3 progetti per volta (lo decide portfolio.js) --- */
  .ggwd-portfolio { padding-bottom: 15.3vw; }
  .ggwd-portfolio-intro { margin-top: 8px; }
  /* filtri allineati a sinistra come il resto della colonna; quelli che non ci stanno vanno a capo */
  .ggwd-filtri { flex-wrap: wrap; justify-content: flex-start; gap: 9px !important; margin: 14.5vw 0 7.6vw; }
  .ggwd-filtri .ggwd-filtro { flex: none; }
  .ggwd-filtri .ggwd-filtro .wp-block-button__link { height: 29px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
  .ggwd-portfolio-grid { grid-template-columns: 100%; row-gap: 10.2vw; }
  .ggwd-card-img img { aspect-ratio: 356 / 351 !important; }
  .ggwd-card-anno { font-size: 15px; margin: 38px 0 6px; }
  .ggwd-card-titolo { font-size: min(31px, 7.9vw); line-height: .77; }
  .ggwd-card-luogo { font-size: 15px; margin-top: 6px; }
  .ggwd-piu { justify-content: flex-start; margin-top: 16vw; }

  /* --- GALLERIA: frecce in basso, vicino al contatore --- */
  .ggwd-gal__barra { padding: 18px 20px 0; }
  .ggwd-gal__swiper { padding-bottom: 96px; }
  .ggwd-gal .swiper-slide { padding: 0 20px; }
  .ggwd-gal__nav { top: auto; bottom: 20px; width: 48px; height: 48px; transform: none; }
  .ggwd-gal__prec { left: 20px; }
  .ggwd-gal__succ { right: 20px; }
  .ggwd-gal__conteggio { bottom: 34px; }

  /* --- METODO: ritratto ritagliato apposta per il telefono (393x572), testo che ci si appoggia sopra --- */
  .ggwd-metodo-img-mobile { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 0; margin: 0; }
  .ggwd-metodo-img-mobile img { display: block; width: 100%; height: 145.6vw; object-fit: cover; }
  .ggwd-metodo .wp-block-cover__image-background { display: none; } /* il ritratto desktop non serve */
  .ggwd-metodo { min-height: 283.7vw !important; padding-top: 122.9vw !important; }
  .ggwd-metodo .ggwd-titolo-sezione { margin-bottom: 47px; }
  .ggwd-metodo-titolo { font-size: min(50px, 12.7vw); line-height: .95; }
  .ggwd-metodo .ggwd-testo { margin-bottom: 20px; }

  /* --- TEAM --- */
  /* 20 px di spazio tra "Team" e la foto (il titolo ha altezza libera, così il testo non finisce sulla foto) */
  .ggwd-team-titolo { padding-bottom: 0; height: auto; margin-bottom: 20px; }
  .ggwd-team-foto img { height: 169.4vw; object-fit: cover; object-position: 50% 50%; } /* foto ritagliata */
  .ggwd-team-nome { top: 91.3%; }
  .ggwd-team-nome--sx { right: 53.4%; left: auto; }
  .ggwd-team-nome--dx { left: 54.2%; right: auto; }
  .ggwd-team-nome .ggwd-nome { font-size: 16px; line-height: .97; }
  .ggwd-team-nome .ggwd-ruolo { font-size: 8px; margin-top: 0; }
  /* bio una sotto l'altra: prima Paolo, poi Sofia (cambia solo l'ordine visivo, il markup resta uguale) */
  .ggwd-team-bio { grid-template-columns: 1fr; row-gap: 40px; padding: 14.2vw 20px 40px 20px; justify-content: stretch; }
  .ggwd-bio-sx { order: 2; text-align: left; }
  .ggwd-bio-dx { order: 1; }
  .ggwd-bio-sx .ggwd-icona { margin-left: 0; }

  /* --- CONTATTI: tutto a sinistra --- */
  .ggwd-contatti { padding-top: 29vw; padding-bottom: 60px; text-align: left; }
  .ggwd-contatti .ggwd-titolo-sezione { margin-bottom: 12px; }
  .ggwd-contatti .ggwd-testo { margin: 0 0 30px; text-align: left; }
  .ggwd-contatti > .ggwd-testo { margin-left: 0 !important; }
  .ggwd-contatti .frm_form_field:not(.frm_hidden) { min-height: 66px; margin: 0 !important; }
  .ggwd-contatti .frm_primary_label { font-size: 15px; color: var(--ggwd-grigio-label-mobile); }
  .ggwd-contatti .frm_forms input[type=text],
  .ggwd-contatti .frm_forms input[type=email],
  .ggwd-contatti .frm_forms input[type=tel],
  .ggwd-contatti .frm_forms textarea { font-size: 15px; }
  .ggwd-contatti .frm_forms .frm_submit { text-align: left; }
}


/* ============================================================================
   6. MOVIMENTO RIDOTTO — per chi ha attivato "riduci animazioni" nel sistema
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .ggwd-gal,
  .ggwd-card-img img { transition: none; }
}