/* ==========================================================================
   Sezione "Prima di firmare qualsiasi preventivo"
   Mobile/tablet (base): testo in sequenza; quattro righe di dati centrate,
   separatori orizzontali. Desktop (≥ 60em): testo su due colonne; dati in
   un unico pannello a quattro colonne con separatori verticali.
   Icona Phosphor come watermark grande e tenue, sempre dentro il proprio dato.
   Sfondo fotografico (stesso approccio della Hero): testi chiari sulla foto,
   pannello dati chiaro su desktop.
   ========================================================================== */

/* Overlay nello stesso background: agisce solo sulla foto, non su testi e dati.
   Colore di riserva = --color-ink se l'immagine manca. */
.estimate {
  padding-block: 56px;
  background-color: var(--color-ink);
  background-image:
    linear-gradient(rgba(23, 35, 43, 0.78), rgba(23, 35, 43, 0.78)),
    url("../assets/images/sfondopreventivo.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid var(--color-border);
}

.estimate__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Testo ---------- */
.estimate__eyebrow {
  margin-bottom: 12px;
  color: var(--color-accent-soft);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.estimate__title {
  margin-bottom: 28px;
  color: var(--color-surface);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.estimate__body {
  max-width: 68ch;
}

.estimate__body p {
  color: var(--color-surface);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.estimate__body p + p {
  margin-top: 16px;
}

/* ---------- Fascia dati: righe su mobile, un unico pannello su desktop ---------- */
.estimate__stats {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.stat {
  position: relative;
  overflow: hidden; /* sicurezza: il watermark non esce mai dal dato */
  padding-block: 32px;
  text-align: center;
}

.stat + .stat {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Icona Phosphor Regular come watermark: a sinistra, interamente nella riga */
.stat__icon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 96px;
  height: 96px;
  color: var(--color-surface);
  opacity: 0.1;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Valore e descrizione sopra il watermark */
.stat__value,
.stat__label {
  position: relative;
}

.stat__value {
  margin-bottom: 8px;
  color: var(--color-surface);
  font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Cifre a larghezza fissa + larghezza minima impostata via JS sul valore
   finale: il conteggio non sposta "mq" né gli altri elementi. */
.stat__number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.stat__unit {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0;
}

/* Valore definitivo per i lettori di schermo (il numero animato è aria-hidden) */
.stat__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stat__label {
  max-width: 32ch;
  margin-inline: auto;
  color: var(--color-accent-soft);
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- Tablet ---------- */
@media (min-width: 40em) {
  .estimate {
    padding-block: 72px;
  }

  .estimate__stats {
    margin-top: 48px;
  }

  .stat__icon {
    width: 112px;
    height: 112px;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 60em) {
  .estimate {
    padding-block: 96px;
  }

  .estimate__columns {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }

  .estimate__title {
    margin-bottom: 0;
  }

  /* Pannello unico con quattro colonne uguali (disposizione approvata) */
  .estimate__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 64px;
    padding: 40px 0;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background-color: var(--color-surface);
  }

  .stat {
    padding: 8px 24px;
  }

  .stat + .stat {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  /* Sul pannello bianco tornano i colori chiari approvati */
  .stat__value {
    color: var(--color-primary);
  }

  /* Watermark sul lato sinistro della colonna, interamente al suo interno */
  .stat__icon {
    left: 12px;
    width: 96px;
    height: 96px;
    color: var(--color-primary);
    opacity: 0.08;
  }

  .stat__label {
    max-width: 30ch;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
  }
}