/* ==========================================================================
   CONTATTI — Figma 87:536, y=809–2157.
   Reused verbatim, no CSS here:
     · .page-hero — the plain 686px variant (no wash, no caption)
     · .breadcrumb, .grid-2, .aec-btn
     · .section-heading — "I NOSTRI CONTATTI" is the same 27/500/44 red
       uppercase used for INTERVENTO and LE NOSTRE INNOVAZIONI
     · .ruled-item — the address and email blocks are the same 21/50 label +
       193px rule + body as ESG's innovation items
   New here: the contact form, which is the only form in the build.
   No CTA band: the footer starts at 2157 and is 540 tall, ending at 2697; the
   frame's 2902 leaves 205px of empty space below it.
   ========================================================================== */
.contatti {
  padding-top: 64px;      /* measured: hero bottom (809) → crumb top (873) */
  padding-bottom: 11px;   /* measured: map band bottom (2146) → footer top (2157) */
}
/* This page runs 61px from the breadcrumb to the heading, not the 64 baked
   into .breadcrumb for every other page. */
.contatti .breadcrumb { margin-bottom: 61px; }
.contatti__heading { margin: 0 0 27px; }   /* heading box bottom (1012) → first label top (1039) */

/* Not .grid-2: Figma splits this 413 + 845 with a 22px gutter (rail at x=80,
   form at x=515), so the form gets far more than a half column. */
.contatti__grid {
  display: grid;
  grid-template-columns: var(--col-narrow) 845px;
  justify-content: space-between;
}
@media (max-width: 1440px) {
  .contatti__grid { grid-template-columns: 1fr 2.05fr; gap: var(--gap-proj); }
}
@media (max-width: 1024px) {
  .contatti__grid { grid-template-columns: 1fr; gap: var(--space-40); }
}

/* Left rail holds the two ruled blocks; Figma steps them 139px apart. */
.contatti__details .ruled-item + .ruled-item { margin-top: 14px; }

/* --- Form ----------------------------------------------------------------
   Two 409px fields per row inside the right column, then a full-width
   textarea, then a consent row with the submit pinned right. Figma gives the
   right column x=515–1360, i.e. slightly wider than the .grid-2 track's 732
   start — the form block is its own width, not a grid column. */
/* Figma's box for this reads 837x56 but the node screenshots at 827x20 — one
   line, not two. Only the gaps around it come from the real render: 11px below
   the rail's first label, 41px above the first field row. */
.contatti__intro {
  margin: 11px 0 41px;
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
  color: #2b2b2b;
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 24px;      /* measured: rows step 55 against a 40px field; columns 951−927 */
  margin-bottom: 16px;
}
.contact-form__field {
  height: 40px;
  padding: 0 15px;
  font: inherit;
  font-size: 14px;
  line-height: 34px;
  color: #424242;
  background: rgba(218, 213, 209, .5);
  border: 0;
  border-radius: var(--radius-frame);
}
.contact-form__field--message {
  height: 179px;
  padding: 12px 15px;
  line-height: 29px;
  resize: vertical;
  display: block;
  width: 100%;
}
.contact-form__field::placeholder { color: #424242; opacity: 1; }
.contact-form__field:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Consent + submit share a row; the checkbox is a 13x12 box in Figma. */
.contact-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 4px;   /* textarea bottom (1409) → submit top (1413) */
}
.contact-form__consent {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 14px;
}
.contact-form__consent input {
  flex: none;
  width: 13px;
  height: 12px;
  margin: 0;
  accent-color: var(--c-accent);
}
.contact-form__consent a { color: var(--c-accent); }
.contact-form__consent a:hover { text-decoration: underline; }
/* `height` has to come with the size — .aec-btn pins its box to --lh-micro. */
.contact-form__submit { font-size: 18px; line-height: 34px; height: 34px; }

/* --- Map ------------------------------------------------------------------
   A flat image in the design (87:691, 1440x624). Left as an <img> rather than
   an embed so the static build stays script-free and offline-renderable; the
   WP phase can swap it for a live map without touching the layout. */
.contatti-map {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 75px;   /* measured: submit row bottom (1447) → band top (1522) */
}

@media (max-width: 1024px) {
  .contatti__details .ruled-item + .ruled-item { margin-top: 14px; }
  .contatti-map { margin-top: 48px; }
}
@media (max-width: 768px) {
  .contatti { padding-top: 40px; }
  .contact-form__row { grid-template-columns: 1fr; }
  /* .aec-btn is nowrap; at this width the consent text and the button can't
     share a row without overflowing. */
  .contact-form__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .contatti-map { margin-top: 36px; }
}