/* ==========================================================================
   Pagina /contatti/ — fascia del titolo, recapiti, modulo, mappa sostituita.
   Valori dagli stili calcolati del sito vivo a 1440px
   (docs/research/components/pagina-contatti.spec.md). Le variabili e le classi
   comuni (.occhiello, .bottone, .testo-intro, .visivamente-nascosto) stanno in
   base.css e qui non si ridefiniscono.
   ========================================================================== */

/* ---------------------------------------------------- fascia titolo pagina */
.titolo-pagina{
  position:relative;
  height:515px;
  background-color:#fafafa;
  overflow:hidden;
}
.titolo-pagina__foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.titolo-pagina__contenuto{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  max-width:1140px;          /* 1100 di contenuto + 20px di respiro per lato */
  margin-inline:auto;
  padding-inline:20px;
  text-align:center;
}
.titolo-pagina__titolo{
  margin:0;
  font-family:var(--display);
  font-size:72px;
  font-weight:400;
  line-height:79.992px;
  letter-spacing:-2.88px;
  color:var(--bianco);
}

/* --------------------------------------------------------- h1 «Get in Touch» */
/* Titolo-filigrana: colore chiarissimo, sporge di 20px a sinistra della griglia. */
.contatti-apertura{
  display:flow-root;         /* trattiene il margine dell'h1: senza, i 28px scappano fuori */
  margin-top:100px;
  padding-left:129.594px;
}
.contatti-apertura__titolo{
  margin:28px 0 0;
  font-family:var(--display);
  font-size:110px;
  font-weight:400;
  line-height:121px;
  letter-spacing:-3.3px;
  color:#ccc1bd;
  transform:translateX(-20px);
}

/* ------------------------------------------------- due colonne: recapiti + modulo */
.contatti{
  margin-top:-34px;          /* le colonne risalgono sotto il titolo-filigrana */
  margin-bottom:160px;
  padding-inline:122.398px;
}
.contatti__griglia{
  display:flex;
  padding-left:47.6016px;    /* la griglia e' spostata a destra: colonne da 573.797px */
}
.contatti__recapiti{
  width:50%;
  padding:50px 68.8516px 0 80.3281px;
}
.contatti__modulo{
  width:50%;
  padding-top:53px;
}
.contatti__intro{
  max-width:495px;
  margin:10px 0;
}

/* ------------------------------------------------------------------ recapiti */
.recapiti{
  margin-top:50px;
}
.recapiti__voce{
  display:flex;
  align-items:center;
  gap:25px;                  /* icona 25px + 25px = testo a 300px dal bordo pagina */
  line-height:29.92px;
}
.recapiti__voce + .recapiti__voce{
  margin-top:42.08px;        /* passo fra una riga e l'altra: 72px */
}
.recapiti__icona{
  flex:0 0 25px;
  color:var(--accento);
}
/* L'originale scriveva l'indirizzo in nero e l'email in grigio con uno stile
   inline: qui i tre recapiti hanno lo stesso peso, sul piu' leggibile dei due. */
.recapiti__testo{
  color:var(--nero);
  transition:color .2s ease-out;
}
.recapiti__testo:hover{color:var(--accento)}
/* blocco di azione sotto ai recapiti: 40px lo staccano dall'ultima riga */
.contatti__azioni{margin-top:40px}

.recapiti__filo{
  display:block;
  width:1px;
  height:118px;
  margin-top:59px;
  background:var(--linea);
}

/* -------------------------------------------------------------------- modulo */
.modulo__titolo{
  margin:-5px 0 20px;
  font-family:var(--display);
  font-size:46px;
  font-weight:400;
  line-height:59.8px;
  letter-spacing:-1.38px;
  color:var(--nero);
}
.modulo__form{
  padding-top:26px;
}
.modulo__gruppo{
  margin-bottom:30px;
}
.modulo__campo{
  display:block;
  width:100%;
  padding:4px 0;
  border:0;
  border-bottom:1px solid var(--linea);
  border-radius:0;
  background:transparent;
  font-family:var(--display);
  font-size:27px;
  font-weight:400;
  line-height:38px;
  letter-spacing:.7px;
  color:var(--nero);
  transition:border-color .2s ease-out;
}
.modulo__campo--area{
  height:48px;
  min-height:48px;
  resize:vertical;
}
.modulo__campo::placeholder{
  color:var(--nero);
  opacity:1;
}
.modulo__campo:hover{border-bottom-color:var(--nero)}

/* consenso */
.modulo__gruppo--consenso{
  /* gli 8px stanno nel padding e non nel margine: fra un gruppo e l'altro i
     margini si fonderebbero e la casella salirebbe di 8px */
  margin:0 0 24px;
  padding-top:8px;
}
.modulo__consenso{
  display:flex;
  align-items:flex-start;
  gap:7px;
  font-size:16px;
  line-height:29.92px;
  color:var(--testo);
  cursor:pointer;
}
.modulo__casella{
  flex:0 0 13px;
  width:13px;
  height:13px;
  margin:8px 0 0;            /* allineata alla prima riga del testo */
  accent-color:var(--accento);
}
.modulo__consenso-testo a{
  color:var(--nero);
  text-decoration:underline;
}
.modulo__consenso-testo a:hover{color:var(--accento)}

/* errori: compaiono solo quando modulo.js li mostra */
.modulo__errore{
  margin:6px 0 0;
  font-size:14px;
  font-weight:400;
  line-height:22px;
  color:#b3261e;
}
.modulo__campo[aria-invalid="true"]{
  border-bottom-color:#b3261e;
}
.modulo__casella[aria-invalid="true"]{
  outline:2px solid #b3261e;
  outline-offset:2px;
}

/* trappola per i robot: fuori dallo schermo, mai visibile e mai raggiungibile */
.modulo__trappola{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.modulo__invia{
  padding:15px 46px;
  margin-top:18px;
}

/* --------------------------------------------------------------------- mappa */
/* Fascia a tutta larghezza al posto della mappa Google rotta. Il fondo e'
   lo stesso grigio che la fascia aveva sull'originale (#e8eaee). */
.mappa{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:700px;
  padding:60px 20px;
  background:#e8eaee;
  text-align:center;
}
.mappa__icona{
  color:var(--accento);
}
.mappa__indirizzo{
  margin:16px 0 30px;
  font-family:var(--display);
  font-size:34px;
  font-weight:400;
  line-height:40.8px;
  letter-spacing:-1.38px;
  color:var(--nero);
}

/* ==========================================================================
   Schermi stretti. Il sito vivo non e' stato misurato sotto i 1440px per questa
   pagina: qui sotto i valori sono scelti, non copiati, e servono solo a far
   scendere il testo senza rompere niente.
   ========================================================================== */
@media (max-width:1024px){
  .titolo-pagina{height:420px}
  .titolo-pagina__titolo{font-size:56px;line-height:64px;letter-spacing:-2.24px}

  .contatti-apertura{margin-top:70px;padding-left:40px}
  .contatti-apertura__titolo{font-size:76px;line-height:84px;letter-spacing:-2.28px}

  .contatti{margin-top:-20px;margin-bottom:100px;padding-inline:40px}
  .contatti__griglia{gap:40px;padding-left:0}
  .contatti__recapiti{padding:30px 0 0}
  .contatti__modulo{padding-top:30px}

  /* il filo verticale l'originale lo nascondeva gia' da tablet in giu' */
  .recapiti__filo{display:none}

  .mappa{min-height:520px}
}

@media (max-width:768px){
  .titolo-pagina{height:320px}
  .titolo-pagina__titolo{font-size:40px;line-height:46px;letter-spacing:-1.6px}

  .contatti-apertura{margin-top:50px;padding-left:20px}
  .contatti-apertura__titolo{font-size:46px;line-height:52px;letter-spacing:-1.38px;transform:none}

  .contatti{margin-top:0;margin-bottom:70px;padding-inline:20px}
  .contatti__griglia{flex-direction:column;gap:0}
  .contatti__recapiti,
  .contatti__modulo{width:100%}
  .contatti__modulo{padding-top:40px}

  .recapiti{margin-top:34px}
  .recapiti__voce + .recapiti__voce{margin-top:24px}
  .recapiti__voce{gap:16px}

  .modulo__titolo{font-size:34px;line-height:40.8px;letter-spacing:-1.02px}
  .modulo__campo{font-size:22px;line-height:32px}
  .modulo__campo--area{height:42px;min-height:42px}
  .modulo__gruppo{margin-bottom:24px}
  .modulo__invia{width:100%;text-align:center}

  .mappa{min-height:auto;padding:60px 20px}
  .mappa__indirizzo{font-size:26px;line-height:34px;letter-spacing:-.78px}
}