/* layout centrale coerente con “legal-page” */
/* ---------- wrapper pagina contatti --------------------------- */
.contact-page{
  max-width:780px;
  margin:0 auto;                     /* margine orizzontale centrato   */
  padding: calc(var(--header-h) + 3rem) 1rem 3rem;
  /*               ↑ 92 px + 1.5 rem di aria extra                */
text-align: center;
  font:400 1rem/1.55 "Manrope", system-ui, sans-serif;
  /* ⬇︎ rimosso: spostava il blocco in modo assoluto                */
  /* top:200px; */
}

/* (cancella anche la seconda dichiarazione duplicata di .contact-page) */

.contact-page h1{color:#395934;font-size:2rem;margin:0 0 1.2rem}
.contact-page h2{color:#395934;font-size:1.25rem;margin:1.6rem 0 .6rem}

.contact-block{margin-top:1.2rem}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{margin:.3rem 0}

.contact-list a{color:#395934;text-decoration:underline}

/* MAPPA */
.map-wrap{text-align:center;margin-top:.8rem}
.map-frame{
  width:100%;height:420px;border:0;border-radius:8px;
}
.map-placeholder{
  display:inline-block;
  padding:2rem 2.2rem;
  border:1px solid #dcdcdc;
  border-radius:8px;
  background:#fff;
  font-size:.95rem;
}

/* GRIGLIA ORIZZONTALE CENTRATA */
.contact-grid{
  display:flex;
  justify-content:center;    /* centro l’intera riga */
  gap:3rem;                  /* spazio uniforme */
  flex-wrap:wrap;
}

/* ogni colonna è centrata al proprio interno */
.contact-block{
  text-align:center;         /* ← mancava: ora indirizzi e liste sono centrati */
  flex:0 0 260px;            /* larghezza fissa 260; cresce se c’è spazio */
  min-width:200px;           /* impedisce stringersi troppo su tablet verticale */
}

/* elenco contatti pulito */
.contact-list{
  list-style:none;
  margin:0;
  padding:0;
}
.contact-list li{margin:.3rem 0}

/* ========== MOBILE ≤600 px : ottimizzazioni ========== */
@media (max-width:600px){

  /* impila i blocchi: una colonna a larghezza piena */
  .contact-grid{
    display:block;          /* da flex → block  */
    gap:0;                  /* nessun gap orizzontale */
  }

  .contact-block{
    width:100%;             /* card larga 100 %       */
    max-width:none;
    margin-bottom:1.8rem;   /* aria tra i blocchi     */
    text-align:center;      /* già centrato ma ridichiaro */
  }

  /* testi un filo più piccoli per stare comodi */
  .contact-page h1{font-size:1.6rem;margin-bottom:1rem;}
  .contact-page h2{font-size:1.15rem;margin:1.4rem 0 .5rem;}

  /* lista compatta */
  .contact-list li{margin:.25rem 0;}

  /* mappa: altezza ridotta ma responsive */
  .map-frame{
    height:250px;
    width: 100%;           /* da 420 → 250 */
  }
}

/* ========== MAPPA FULL-WIDTH SENZA OVERFLOW ==================== */
/* (da incollare in fondo a assets/css/contact.css) */

.map-wrap{
  /* spinge il wrapper fuori di 1 rem per lato
     compensando il padding orizzontale di .contact-page */
  margin:2rem -1rem 0;          /* top 2rem, left/right -1rem, bottom 0 */
}

.map-frame{
  width:100%;                   /* ora riempie davvero i bordi */
  height:420px;
  border:0;
  border-radius:0;              /* flush ai lati */
}

/* altezza ridotta su smartphone */
@media (max-width:600px){
  .map-frame{height:280px;}     /* puoi ridurre/innalzare a piacere */
}