/* ============================================================
   Villa San Vigilio — PAGINA CONTATTI
   Figma 99:7243 (1920×2309). 1rem = 16px @1920.
   Fondo: --c-sage #d9e2d9 · Testo/nav/linea: --c-olive #242d12 (in tokens.css)
   ============================================================ */

/* fondo pagina verde salvia (scoped al body, non tocca il resto del sito) */
body[data-page="contatti"] { background: var(--c-sage); }

/* ---------------- HEADER (override locale) ----------------
   Nav sopra il fondo salvia: nel Figma il testo nav è verde oliva #242d12.
   Override SCOPED alla pagina (il componente condiviso resta navy altrove). */
body[data-page="contatti"] .site-nav__link,
body[data-page="contatti"] .nav-toggle-label { color: var(--c-olive); }

/* ---------------- 1. HEADING + INTRO ----------------
   Il main parte a y0; l'header (banda 109px) è absolute e si sovrappone.
   Uso i TOP ASSOLUTI del Figma (contenuto sotto la nav). */
.contatti-intro__inner {
  position: relative;
  min-height: 31.375rem;              /* 502px: fino alla linea a y502 */
}
/* heading "Contattaci" — x40 y174 w1320, Bodoni 130px, allineato al gutter */
.contatti-intro__title {
  position: absolute;
  top: 10.875rem;                     /* y174 assoluto */
  left: 2.5rem;                       /* x40 (abs relativo al bordo container x0) */
  width: 82.5rem;                     /* 1320px */
  margin: 0;
  font-family: var(--font-serif);
  font-size: calc((8.125rem) * var(--fs-scale));                /* 130px */
  font-weight: 400;
  line-height: var(--lh-tight);       /* 1.16 */
  color: var(--c-olive);
}
/* intro a destra — x976 y222 w905, 26px Bodoni */
.contatti-intro__lead {
  position: absolute;
  top: 13.875rem;                     /* y222 assoluto */
  left: 61rem;                        /* x976 (abs relativo al bordo container x0) */
  width: 56.5625rem;                  /* 905px */
  margin: 0;
  font-size: var(--fs-lead);          /* 26px */
  line-height: var(--lh-body);        /* 1.46 */
  color: var(--c-olive);
}

/* ---------------- 2. LINEA DIVISORIA ---------------- */
/* y502 x40 w1840 = tutta la larghezza del contenuto del container (gutter 40) */
.contatti-rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c-olive);
}

/* ---------------- 3. TABELLA CONTATTI ---------------- */
/* label x975 / valori x1287, y600. Blocco spostato nella metà destra.
   Figma: blocco alto 418px (y600→1018) con righe vuote tra le voci. */
.contatti-table {
  padding-top: 6.125rem;              /* 600 - 502 (linea) = 98px */
}
.contatti-table__grid {
  margin: 0;
  margin-left: 58.4375rem;            /* 975 - 40 (gutter) = 935px: allinea la label a x975 */
  display: grid;
  grid-template-columns: 19.5rem auto; /* label(312px = 1287-975) | valori */
  row-gap: 2.375rem;                  /* 38px = 1 riga vuota piena (26px×1.46) tra le voci → blocco ~418px */
  column-gap: 0;
  font-size: var(--fs-lead);          /* 26px */
  line-height: var(--lh-body);        /* 1.46 */
  color: var(--c-olive);
}
.contatti-table__label {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;                /* label sempre su una riga */
}
.contatti-table__label--head {
  grid-column: 1 / -1;                /* riga head su tutta la larghezza (come nel Figma) */
  text-transform: uppercase;          /* "PER MAGGIORI INFORMAZIONI:" */
}
.contatti-table__label--head + .contatti-table__value { display: none; } /* cella vuota accanto alla head */
.contatti-table__value {
  margin: 0;
  font-weight: 400;
}
.contatti-table__value a {
  text-decoration: none;
}
.contatti-table__value a:hover { text-decoration: underline; text-underline-offset: .18em; }

/* ---------------- 4. IMMAGINE VILLA (inset) ---------------- */
/* x40 y1196 w1840 h705 (inset gutter 40), radius 3px */
.contatti-photo {
  padding-top: 11.0625rem;            /* 1196 - 1018 (bottom tabella) = 178px */
  line-height: 0;
}
.contatti-photo__img {
  width: 100%;
  height: 44.0625rem;                 /* 705px */
  object-fit: cover;
  object-position: center 52.2%;      /* replica offset Figma top -50.02% su img 4000x3000 */
  border-radius: var(--radius);       /* 3px */
}

/* spazio prima del footer (1947 - 1901 img-bottom = 46px) */
.contatti-photo { margin-bottom: 2.875rem; }

/* ============================================================
   MOBILE (<=1024px) — reflow: singola colonna, no design Figma.
   Heading e intro impilati · tabella impilata leggibile · immagine adattata.
   ============================================================ */
@media (max-width: 1024px) {

  /* intro: da absolute a flusso normale */
  .contatti-intro__inner {
    min-height: 0;
    padding-top: 6.5rem;              /* spazio sotto header assoluto */
  }
  .contatti-intro__title {
    position: static;
    width: auto;
    font-size: clamp(3rem, 13vw, 6rem);
    margin-bottom: 1.5rem;
  }
  .contatti-intro__lead {
    position: static;
    width: auto;
    left: auto; top: auto;
    font-size: 1.05rem;
    max-width: 40rem;
  }

  .contatti-rule { margin-block: 2rem; }

  /* tabella: allineata a sinistra, impilata su schermi stretti */
  .contatti-table { padding-top: 0; }
  .contatti-table__grid {
    margin-left: 0;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    column-gap: 1.5rem;
    row-gap: 1rem;
    font-size: 1.05rem;
  }

  .contatti-photo {
    padding-top: 2.5rem;
    margin-bottom: 0;
  }
  /* foto a tutta larghezza: esce dal gutter del container */
  .contatti-photo .container { padding-inline: 0; }
  .contatti-photo__img {
    height: auto;
    aspect-ratio: 1840 / 705;
    border-radius: 0;
  }
}

@media (max-width: 560px) {
  /* label sopra al valore, blocco impilato */
  .contatti-table__grid {
    grid-template-columns: 1fr;
    row-gap: .25rem;
  }
  .contatti-table__label { margin-top: 1rem; }
  .contatti-table__label--head { margin-top: 0; }
  .contatti-table__value:empty { display: none; }
  .contatti-photo__img { aspect-ratio: 4 / 3; }
}