/* ========================================================================
   CONTATTI.CSS
   La sezione "Richiedi un incontro": recapiti a sinistra, modulo a destra.
   Usata dalla home e dalla pagina Aziende, quindi vive fuori da home.css.
======================================================================= */

#contatti {
  padding: var(--section-pad) 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

/* Nella pagina Aziende la sezione arriva subito dopo un altro blocco blu
   notte: un tono più scuro e una riga dorata la staccano da quello sopra. */
#corporate + #contatti,
#advisory + #contatti {
  background: var(--navy-dark);
  border-top: 1px solid rgba(201, 169, 110, 0.22);
}

/* L'etichetta sopra il titolo è su fondo blu: serve l'oro chiaro,
   quello scuro usato sulle sezioni bianche qui non si leggerebbe. */
#contatti .section-eyebrow span {
  color: var(--gold);
}

.contatti-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 70% at 90% 50%,
    rgba(201, 169, 110, 0.07) 0%,
    transparent 60%
  );
}

/* La sezione si sviluppa in orizzontale: sopra il titolo con accanto i
   recapiti, sotto il modulo per tutta la larghezza. Cosi non diventa una
   colonna lunghissima rispetto alle sezioni che la precedono. */
.contatti-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  gap: 56px;
}

/* Qui dentro e rimasto il solo racconto: i recapiti sono scesi nella fascia
   in fondo. Due colonne lasciavano meta blocco vuoto, quindi ne resta una. */
.contatti-top {
  display: grid;
  grid-template-columns: 1fr;
}

/* -----------------------------
   Recapiti
----------------------------- */
.contatti-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contatti-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contatti-info-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid rgba(201, 169, 110, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contatti-info-icon svg {
  stroke: var(--gold);
}

.contatti-info-label {
  margin-bottom: 3px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
}

.contatti-info-value {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  /* L'indirizzo email e una parola sola lunga: sui telefoni piu stretti
     allargava tutta la sezione e il testo finiva fuori dallo schermo. */
  overflow-wrap: anywhere;
}

.contatti-info-item > div {
  min-width: 0;
}

/* Email e telefono si toccano col pollice: area alta almeno 44 px,
   la misura sotto la quale il dito manca il bersaglio. */
.contatti-info-value a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 4px;
  transition: color var(--transition-fast);
}

.contatti-info-value a:hover {
  color: var(--gold);
}

.contatti-info-sub {
  display: block;
  margin-top: 2px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.72);
}

/* -----------------------------
   Modulo
----------------------------- */
.contatti-form-wrap {
  padding: 40px 44px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 169, 110, 0.22);
}

.form-title {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1.30;
}

.form-subtitle {
  margin-bottom: 28px;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
}

/* I dati di contatto stanno a sinistra su due colonne, tema e messaggio a
   destra: il modulo si allarga invece di allungarsi. */
.form-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.form-destra {
  display: flex;
  flex-direction: column;
}

.form-messaggio {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.form-messaggio .form-textarea {
  flex: 1;
}

/* L'ultimo campo a sinistra non deve staccare il fondo delle due colonne. */
.form-group--ultimo {
  margin-bottom: 0;
}

/* La via piu leggera, sotto il modulo: chiedere un incontro e' un impegno
   grosso da prendere alla prima visita, e chi non e' pronto se ne andava
   senza fare niente. Due righe e un recapito costano molto meno. */
.form-alternativa {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(201, 169, 110, 0.22);
  font-family: var(--font-ui);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.form-alternativa a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-alternativa a:hover {
  color: var(--gold-light);
}

/* Consenso a sinistra, pulsante a destra: una riga sola invece di due. */
.form-chiusura {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px 40px;
  margin-top: 28px;
}

.form-chiusura .form-check {
  margin: 0;
}

.form-chiusura .form-submit {
  width: auto;
  min-width: 260px;
}

/* -----------------------------
   Telefono e tablet
----------------------------- */
@media (max-width: 960px) {
  .form-griglia {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-messaggio {
    margin-top: 20px;
  }

  .form-chiusura {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Il pulsante prende tutta la riga: la larghezza minima da 260 pixel qui
     non serve piu, e sui telefoni piu stretti allargava l'intera sezione. */
  .form-chiusura .form-submit {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .contatti-form-wrap {
    padding: 36px 24px;
  }
}

/* -----------------------------
   Cosa succede dopo, e le due cose dette prima
----------------------------- */

/* Il secondo paragrafo racconta i tempi: cosa succede fra il primo incontro
   e le prime proposte. Sta piu vicino al primo, e' la stessa voce. */
.contatti-processo {
  margin-top: 18px;
}

/* Le due domande che nessuno fa a voce: quando non sono la persona giusta,
   e come vengo pagato. Stessa impaginazione del percorso di studi in
   "Chi sono": filo d'oro a sinistra, titolo in oro, testo sotto. */
.contatti-condizioni {
  margin-top: 30px;
  padding-left: 20px;
  border-left: 1px solid rgba(201, 169, 110, 0.35);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contatti-condizione-titolo {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.contatti-condizione p {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

/* Gli orari vanno letti a colpo d'occhio: qui il grassetto e piu marcato
   e piu chiaro del resto del paragrafo. */
.contatti-condizione p strong {
  color: #fff;
  font-weight: 600;
}

/* Titoletto del racconto del metodo. Da quando la schermata "Metodo" non
   esiste piu, i quattro passaggi si leggono qui: serve un titolo perche i
   motori di ricerca capiscano che questa e la parte su come si lavora. */
.contatti-sottotitolo {
  margin-top: 30px;
  margin-bottom: 10px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
}

.contatti-processo {
  margin-top: 0;
}

/* -----------------------------
   Modulo accanto al testo
----------------------------- */

/* Il modulo stava sotto tutto il racconto: chi arrivava in fondo alla home
   doveva leggere una colonna intera prima di vedere dove si scrive. Ora le
   due cose stanno affiancate — a sinistra come si lavora, a destra il
   modulo — e la schermata si accorcia della meta. */
@media (min-width: 961px) {
  .contatti-inner {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 64px;
    align-items: start;
  }

  /* I recapiti prendono tutta la larghezza sotto le due colonne. */
  .contatti-info {
    grid-column: 1 / -1;
  }

  /* Il modulo era disegnato per stare a tutta larghezza: dentro aveva due
     colonne, e la colonna dei dati ne aveva altre due. In mezza pagina
     diventavano quattro colonnine sfalsate. Qui torna una colonna sola. */
  .form-griglia {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-messaggio {
    margin-top: 20px;
  }

  .form-group--ultimo {
    margin-bottom: 22px;
  }

  /* Le tre rassicurazioni sopra il pulsante, in colonna: affiancate in
     mezza pagina restavano larghe otto lettere. */
  .form-garanzie {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Consenso sopra, pulsante sotto a tutta larghezza. */
  .form-chiusura {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .form-chiusura .form-submit {
    width: 100%;
    min-width: 0;
  }
}

/* I quattro passaggi: schema, non racconto. Il numero e in oro sul filo
   verticale, il titoletto sopra la riga di spiegazione. */
.contatti-passi {
  list-style: none;
  counter-reset: passo;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contatti-passi li {
  counter-increment: passo;
  position: relative;
  padding-left: 40px;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.contatti-passi li::before {
  content: "0" counter(passo);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--gold);
}

.contatti-passo-titolo {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.94);
}


/* -----------------------------
   Recapiti per lungo
----------------------------- */

/* Email, telefono e sede stanno affiancati in una fascia sotto le due
   colonne, non incolonnati di lato: tre voci brevi occupano una riga sola
   invece di tre. */
.contatti-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(201, 169, 110, 0.22);
}

/* Sul telefono le tre voci tornano una sotto l'altra: affiancate
   starebbero in quattro lettere. Sull'iPad in verticale ci stanno. */
@media (max-width: 620px) {
  .contatti-info {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 26px;
  }
}