/* ============================================================
   Villa San Vigilio — PAGINA SERVIZI
   Figma 99:7293 (1920×3177). 1rem = 16px @1920.
   Fondo: --c-linen #ece5e1 · Testo/heading/chiusura/nav: --c-brown #322924
   Lista servizi: nero puro, Bodoni Bold uppercase 40px (in tokens.css)
   ============================================================ */

/* fondo pagina crema/rosa chiaro (scoped al body, non tocca il resto del sito) */
body[data-page="servizi"] { background: var(--c-linen); }

/* ---------------- HEADER (override locale) ----------------
   Nav sopra il fondo crema: nel Figma il testo nav è marrone scuro #322924.
   Override SCOPED alla pagina (il componente condiviso resta navy altrove). */
body[data-page="servizi"] .site-nav__link,
body[data-page="servizi"] .nav-toggle-label { color: var(--c-brown); }

/* ============================================================
   1. HEADING "I Servizi" + INTRO
   Il main parte a y0; l'header (banda 109px) è absolute e si sovrappone.
   Uso i TOP ASSOLUTI del Figma (contenuto sotto la nav).
   ============================================================ */
.servizi-intro__inner {
  position: relative;
  min-height: 32.5625rem;              /* 521px: fino alla lista a y521 */
}
/* heading "I Servizi" — x60 y181 w1320, Bodoni 130px, marrone.
   left absolute è relativo al bordo del container (x0), NON al gutter → left = x60 pieno. */
.servizi-intro__title {
  position: absolute;
  top: 11.3125rem;                     /* y181 assoluto */
  left: 3.75rem;                       /* x60 (il container abs parte da 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-body);         /* 1.46 (dal design_context) */
  color: var(--c-brown);
}
/* intro a destra — x663 y229 w1217, 26px Bodoni, 2 paragrafi */
.servizi-intro__lead {
  position: absolute;
  top: 14.3125rem;                     /* y229 assoluto */
  left: 41.4375rem;                    /* x663 (abs relativo al bordo container x0) */
  width: 76.0625rem;                   /* 1217px */
  margin: 0;
  font-size: var(--fs-lead);           /* 26px */
  line-height: var(--lh-body);         /* 1.46 */
  color: var(--c-brown);
}
.servizi-intro__lead p { margin: 0; }

/* ============================================================
   2. LISTA SERVIZI — x659 y521 w895 h432, 6 voci.
   40px Bodoni BOLD, uppercase, NERO, line-height 1.8.
   ============================================================ */
.servizi-list {
  padding-top: 0;
  --servizi-bullet-indent: 1.5rem;     /* 24px: rientro del testo rispetto al punto elenco */
}
.servizi-list__items {
  margin: 0;
  margin-left: 38.6875rem;             /* 659 - 40 (gutter) = 619px: allinea a x659 */
  /* Figma 895px, ma il Bodoni Moda e piu largo del Bodoni 72 del Figma: a 895
     "FLOWER DESIGN & INTERIOR DECORATION" sborda di 1-3px e va a capo da 1152 a
     1728 di larghezza. +30px le lasciano ~2.7% di margine su ogni larghezza; il
     testo e allineato a sinistra e a destra non c'e nulla, quindi non sposta nulla.
     Il padding del punto elenco si somma alla larghezza per non rubare spazio al testo. */
  width: calc(57.8125rem + var(--servizi-bullet-indent));
  padding-left: var(--servizi-bullet-indent);
  list-style: disc outside;            /* punto elenco (il reset globale toglie i marker) */
  font-family: var(--font-serif);
  font-size: var(--fs-navlist);        /* 40px */
  font-weight: 700;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--c-brown);               /* marrone della pagina (era nero) */
}
.servizi-list__items li { margin: 0; }
/* il pallino del Bodoni bold a 40px sarebbe grosso: ridotto e allineato al testo */
.servizi-list__items li::marker { font-size: 0.45em; }

/* ============================================================
   3. IMMAGINE FULL-BLEED (lago + villa) — x0 y1102 w1920 h1279.
   Gap lista(bottom y953) → img(top y1102) = 149px.
   ============================================================ */
.servizi-photo {
  margin-top: 9.3125rem;               /* 1102 - 953 (bottom lista) = 149px */
  line-height: 0;
}
.servizi-photo__img {
  width: 100%;
  height: 79.9375rem;                  /* 1279px */
  object-fit: cover;                   /* sorgente 4096×2729 ratio 1.5 ≈ box 1.5 → cover flush, nessun crop */
  object-position: center;
}

/* ============================================================
   4. TESTO DI CHIUSURA — x507 y2541 w905 h114, 26px CENTER.
   Gap img(bottom y2381) → testo(top y2541) = 160px.
   Blocco centrato nel container: w905 centrato (507 ≈ (1920-905)/2 = 507).
   ============================================================ */
.servizi-closing {
  padding-top: 10rem;                  /* 2541 - 2381 (bottom img) = 160px */
  padding-bottom: 10rem;               /* 2815 - 2655 (bottom testo) = 160px → prima del footer */
}
.servizi-closing__text {
  margin: 0 auto;
  width: 56.5625rem;                   /* 905px */
  max-width: 100%;
  font-size: var(--fs-lead);           /* 26px */
  line-height: var(--lh-body);         /* 1.46 */
  text-align: center;
  color: var(--c-brown);
}

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

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

  /* lista: allineata a sinistra, dimensione comoda.
     Il rientro del punto elenco passa in em, così entra nel conto della riga
     e resta proporzionato anche a font piccoli. */
  .servizi-list {
    padding-top: 2.5rem;
    --servizi-bullet-indent: 0.8em;
  }
  /* ogni voce su una riga sola: la dimensione segue la larghezza dello schermo,
     tarata sulla voce più lunga (FLOWER DESIGN & INTERIOR DECORATION = 22,68 volte
     la font-size, misurata sul rendering reale). */
  .servizi-list__items {
    margin-left: 0;
    width: auto;
    font-size: clamp(0.6rem, calc(4.13vw - 3.3px), 2rem);
    line-height: 1.9;
  }
  .servizi-list__items li { white-space: nowrap; }

  /* immagine adattata al ratio nativo */
  .servizi-photo {
    margin-top: 2.5rem;
  }
  .servizi-photo__img {
    height: auto;
    aspect-ratio: 1920 / 1279;
  }

  /* chiusura */
  .servizi-closing {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .servizi-closing__text {
    width: auto;
    font-size: 1.05rem;
    max-width: 40rem;
  }
}