/* ===========================================================================
   goEnergy · Contatti (page-specific)
   =========================================================================== */

/* === BLOCCO CONTATTI (intro+prova a sinistra, modulo a destra) === */
.contact {
  color: var(--color-text-inverted);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "intro form"
    "proof form";
  align-items: start;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  padding-block: calc(var(--navbar-h) + var(--space-10)) var(--space-20);
}
.contact__intro { grid-area: intro; min-width: 0; }
.contact__proof { grid-area: proof; margin-top: var(--space-10); min-width: 0; }
.contact__form-wrap { grid-area: form; min-width: 0; }

.contact__title {
  font-size: var(--text-4xl);
  text-transform: uppercase;
  color: var(--color-text-inverted);
}
.contact__subtitle {
  max-width: 46ch;
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.contact__proof-text {
  margin: var(--space-6) 0 var(--space-4);
  font-weight: var(--weight-bold);
}

/* Lista vantaggi con spunte */
/* .checklist è ora in components.css (condiviso); su sfondo teal della pagina
   Contatti testo e icone in bianco per la massima leggibilità */
.contact .checklist li { color: var(--color-text-inverted); }
.contact .checklist .icon { color: var(--color-text-inverted); }

/* === MODULO === */
.contact__form-title {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverted);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  background-color: var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.input--textarea { min-height: 140px; resize: vertical; }
.contact-form .btn { margin-top: var(--space-2); }

/* === IMMAGINE A TUTTA LARGHEZZA === */
.contact-photo { padding-block: var(--section-y); }
.contact-photo__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.contact-photo__frame img { width: 100%; height: auto; display: block; }

/* ===========================================================================
   RESPONSIVE - contatti
   =========================================================================== */
@media (max-width: 1024px) {
  .contact__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "form"
      "proof";
  }
  .contact__proof { margin-top: 0; }
}