/* ============================================================
   PAGINA CONTATTI — mobile-first, isolato sotto .contact-page
   Tutti i selettori sono nestati sotto .contact-page per evitare
   leak su altre pagine. Le classi BEM (__hq, __training, ecc.)
   sono additive: convivono con le classi legacy del markup.
   ============================================================ */
.contact-page {
  padding-bottom: 130px;
  /* ---------- reset/overrides di pagina (mobile-first) ---------- */
  /* -----------------------------------------------------------
       Sede centrale + Centro di formazione
       Mobile: stack verticale; mappa visibile come blocco fluido.
       - HQ: HTML è "testo → mappa" → su mobile mostriamo
         mappa SOPRA il testo via column-reverse.
       - Training: HTML è già "mappa → testo" → column.
       ----------------------------------------------------------- */
  /* Annulliamo il padding 100px / 250px ereditato da .centro-formazione
       solo per la sezione "Centro di formazione" della pagina contatti. */
  /* -----------------------------------------------------------
       Box contatti (mailboxes)
       Mobile: 1 col. Tablet+: auto-adattivo via auto-fit.
       ----------------------------------------------------------- */
  /* -----------------------------------------------------------
       Depositi e centri assistenza
       Tabs scrollabili in orizzontale su mobile (touch friendly).
       Container-sede stack su mobile.
       ----------------------------------------------------------- */
  /* -----------------------------------------------------------
       FAS Servizio Sicurezza
       Mobile: immagine SOPRA, testo SOTTO (column-reverse) come
       da screen mobile 4/5.
       ----------------------------------------------------------- */
  /* ============================================================
       TABLET — ≥ 769px
       ============================================================ */
  /* ============================================================
       DESKTOP — ≥ 1555px
       Ripristina il comportamento "bleed" originale della mappa
       e il padding generoso della pagina, allineato agli screen
       desktop 1–5.
       ============================================================ */
}
.contact-page.pagina-contatti,
.contact-page .pagina-contatti {
  padding-bottom: 60px;
}
.contact-page .contact-page__hq.sede-centrale.page-contatti,
.contact-page .contact-page__training.sede-centrale.page-contatti {
  padding-bottom: 30px;
}
.contact-page .contact-page__hq.sede-centrale.page-contatti > .container,
.contact-page .contact-page__training.sede-centrale.page-contatti > .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  top: 0;
  padding: 0;
}
.contact-page .contact-page__hq.sede-centrale.page-contatti .container-img-mappa,
.contact-page .contact-page__training.sede-centrale.page-contatti .container-img-mappa {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  margin: 0;
  border-radius: 0;
}
.contact-page .contact-page__hq.sede-centrale.page-contatti .container-map,
.contact-page .contact-page__training.sede-centrale.page-contatti .container-map {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  margin: 0;
  border-radius: 0;
}
.contact-page .contact-page__hq.sede-centrale.page-contatti .container-map.map-formazione,
.contact-page .contact-page__training.sede-centrale.page-contatti .container-map.map-formazione {
  border-radius: var(--border-radius);
}
.contact-page .contact-page__hq.sede-centrale.page-contatti .sede-testo,
.contact-page .contact-page__training.sede-centrale.page-contatti .sede-testo {
  padding: 0 16px;
}
.contact-page .contact-page__hq.sede-centrale.page-contatti .sede-testo.display-flex-column,
.contact-page .contact-page__training.sede-centrale.page-contatti .sede-testo.display-flex-column {
  gap: 12px;
}
.contact-page .contact-page__hq.sede-centrale.page-contatti > .container {
  flex-direction: column-reverse;
}
.contact-page .contact-page__training.sede-centrale.page-contatti.centro-formazione {
  margin: 0 auto;
  padding: 20px 0 30px 0;
  gap: 0;
}
.contact-page .container-box-contatti.contact-page__mailboxes {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  column-gap: 15px;
  row-gap: 15px;
  margin-top: 40px;
  padding: 0 16px;
}
.contact-page .contact-page__mailbox {
  width: auto;
}
.contact-page .contact-page__mailbox h4 a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.contact-page .contact-page__mailbox .container-title-mailbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 10px;
}
.contact-page .contact-page__depots {
  padding: 60px 0;
}
.contact-page .contact-page__depots .intro-depositi {
  padding: 0 16px;
}
.contact-page .contact-page__depots .tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  padding: 0 16px 6px 16px;
  margin: 30px 0;
}
.contact-page .contact-page__depots .tab {
  flex: 0 0 auto;
}
.contact-page .contact-page__depots .tab-content {
  padding: 0 16px;
}
.contact-page .contact-page__depots .container-sede {
  max-width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.contact-page .contact-page__depots .container-sede img {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--border-radius);
}
.contact-page .contact-page__safety.centro-formazione.sicurezza {
  flex-direction: column-reverse;
  gap: 30px;
  margin: 0 auto;
  padding: 40px 16px 60px 16px;
}
.contact-page .contact-page__safety.centro-formazione.sicurezza .intro-sedi {
  gap: 16px;
}
.contact-page .contact-page__safety.centro-formazione.sicurezza .contact-page__safety-media {
  padding: 0 18px 30px 18px;
}
.contact-page .contact-page__safety.centro-formazione.sicurezza .contact-page__safety-media img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.contact-page .contact-page__safety.centro-formazione.sicurezza .contact-page__safety-media .bg-centro-formazione {
  width: calc(100% - 30px);
  max-width: 350px;
}
@media (min-width: 769px) {
  .contact-page {
    /* Su tablet l'HQ resta row "normale": testo a sinistra, mappa a destra. */
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti,
  .contact-page .contact-page__training.sede-centrale.page-contatti {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti > .container,
  .contact-page .contact-page__training.sede-centrale.page-contatti > .container {
    flex-direction: row;
    align-items: center;
    gap: 50px;
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti > .container {
    flex-direction: row;
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti .container-img-mappa {
    max-width: 980px;
    width: 100vw;
    height: 510px;
    margin-right: calc(50% - 50vw);
    margin-left: 0;
    flex: none;
    aspect-ratio: auto;
    overflow: visible;
    width: 60dvw;
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti .container-map,
  .contact-page .contact-page__training.sede-centrale.page-contatti .container-map {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: auto;
    height: 420px;
    border-radius: var(--border-radius);
    position: relative;
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti .sede-testo,
  .contact-page .contact-page__training.sede-centrale.page-contatti .sede-testo {
    flex: 1 1 0;
    min-width: 0;
  }
  .contact-page .container-box-contatti.contact-page__mailboxes {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 80px;
    padding: 0 20px;
  }
  .contact-page .container-box-contatti.contact-page__mailboxes .contact-page__mailbox .container-title-mailbox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .contact-page .contact-page__depots {
    padding: 90px 0;
  }
  .contact-page .contact-page__depots .intro-depositi,
  .contact-page .contact-page__depots .tabs,
  .contact-page .contact-page__depots .tab-content {
    padding: 0;
  }
  .contact-page .contact-page__depots .tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
  }
  .contact-page .contact-page__depots .container-sede {
    max-width: 400px;
    flex-direction: row;
    align-items: flex-start;
  }
  .contact-page .contact-page__safety.centro-formazione.sicurezza {
    flex-direction: row;
    align-items: center;
    gap: 60px;
    padding: 60px 16px 80px 16px;
  }
  .contact-page .contact-page__safety.centro-formazione.sicurezza .contact-page__safety-media {
    flex: 1 1 0;
    min-width: 0;
  }
  .contact-page .contact-page__safety.centro-formazione.sicurezza .intro-sedi {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (min-width: 1300px) {
  .contact-page .container-box-contatti.contact-page__mailboxes {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    margin-top: 130px;
  }
}
@media (min-width: 1555px) {
  .contact-page.pagina-contatti,
  .contact-page .pagina-contatti {
    padding-bottom: 200px;
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti,
  .contact-page .contact-page__training.sede-centrale.page-contatti {
    padding-top: 0;
    padding-bottom: 0;
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti > .container,
  .contact-page .contact-page__training.sede-centrale.page-contatti > .container {
    gap: 75px;
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti .container-img-mappa {
    max-width: 980px;
    width: 100vw;
    height: 510px;
    margin-right: calc(50% - 50vw);
    margin-left: 0;
    flex: none;
    aspect-ratio: auto;
    overflow: visible;
  }
  .contact-page .contact-page__hq.sede-centrale.page-contatti .container-map {
    max-width: 980px;
    width: 100vw;
    height: 510px;
    margin-right: calc(50% - 50vw);
    margin-left: 0;
    flex: none;
    aspect-ratio: auto;
    position: absolute;
    top: -100px;
  }
  .contact-page .contact-page__training.sede-centrale.page-contatti .container-map.map-formazione {
    max-width: 980px;
    width: 100vw;
    height: 510px;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    flex: none;
    aspect-ratio: auto;
  }
  .contact-page .contact-page__training.sede-centrale.page-contatti.centro-formazione {
    margin: 50px auto;
    padding: 0 0 0 0;
  }
  .contact-page .container-box-contatti.contact-page__mailboxes {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    margin-top: 130px;
  }
  .contact-page .contact-page__depots {
    padding: 115px 0;
  }
  .contact-page .contact-page__safety.centro-formazione.sicurezza {
    gap: 100px;
    margin: 50px auto;
    padding: 0;
  }
}