/* ==========================================================================
   nuovo_preventivo.css — griglia della pagina "Nuovo preventivo" (sito)
   ==========================================================================
   Il form (le 4 sezioni) e il riepilogo prezzo/dorso sono costruiti a
   runtime da preventivo/js/form.js dentro #form (vedi costruisciForm()
   in docs/form_preventivo/02-campi-e-rendering.md).

   - #form resta il contenitore reale delle 4 sezioni (necessario perche'
     il reset del form fa #form.empty() e le ricostruisce): "display:
     contents" lo rende trasparente alla griglia, cosi' le sezioni
     diventano celle dirette di .preventivo-griglia;
   - #risultato (il riepilogo prezzo) viene spostato da costruisciForm(),
     SOLO da 992px in su, DENTRO l'ultima sezione (RISULTATO_IN_COLONNA,
     impostato nel template), come ultimo elemento della sua card. Una
     griglia CSS condivide l'altezza di riga fra tutte le colonne: se
     #risultato restasse una cella della griglia allineata sotto la
     sezione 3, ci sarebbe un vuoto fra la sezione 3 (piu' corta) e il
     riepilogo, alto quanto le colonne piu' alte. Nidificarlo nel DOM
     della sezione 3 lo fa restare "attaccato" alla fine di quella
     colonna a prescindere dall'altezza delle altre.
   - Sotto i 992px #risultato NON viene spostato: resta dov'e' nell'HTML
     del template, fratello di #form dentro .preventivo-griglia. Il suo
     "containing block" per lo sticky e' cosi' l'intera griglia (tutte
     le sezioni impilate), non la sola sezione 3: puo' restare agganciato
     in fondo allo schermo per l'intera durata dello scroll del form, non
     solo raggiungendo l'ultima sezione.

   Mobile-first: sotto i 992px una sola colonna, sezioni impilate 0-1-2-3;
   il riepilogo prezzo resta agganciato in fondo allo schermo durante lo
   scroll (position: sticky), fin dall'inizio. Da 992px in su, le 4
   colonne fisse richieste dal cliente: il riepilogo torna nel flusso
   normale, subito dopo i campi di "ALTRE LAVORAZIONI".
   ========================================================================== */

.preventivo-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ld-space-4);
}

.preventivo-griglia > #form {
  display: contents;
}

.preventivo-griglia .section0,
.preventivo-griglia .section1,
.preventivo-griglia .section2,
.preventivo-griglia .section3 {
  /* Neutralizza flex/width/max-width delle classi Bootstrap col-* che
     form.js applica alle sezioni (Bootstrap 5 imposta "width", non solo
     "max-width"): qui il posizionamento e la larghezza li decide la
     griglia, non Bootstrap. */
  flex: initial;
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
  margin: 0;
}

.preventivo-griglia .sezione-card .card-header {
  background-color: var(--ld-superficie-2);
  border-bottom: 1px solid var(--ld-bordo-neutro);
}

.preventivo-griglia .form-group.campo-div > label {
  color: var(--ld-testo);
}

/* Su desktop (vedi sotto) e' l'ultimo elemento della card di sezione 3:
   basta un separatore, niente bordo/ombra propri. Su mobile invece resta
   sticky in fondo allo schermo mentre si scorre, quindi ha bisogno di un
   proprio sfondo/bordo per staccarsi visivamente dal contenuto sotto. */
.preventivo-risultato {
  margin-top: var(--ld-space-3);
  border-top: 1px solid var(--ld-bordo-neutro);
}

@media (max-width: 991.98px) {
  .preventivo-risultato {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background-color: var(--ld-superficie);
    border: 1px solid var(--ld-bordo-neutro);
    border-radius: var(--ld-radius-lg) var(--ld-radius-lg) 0 0;
    box-shadow: var(--ld-ombra-3);
    margin-top: var(--ld-space-4);
  }

  /* Su desktop #prezzo eredita il padding orizzontale della card di
     sezione 3 in cui viene annidato. Su mobile #risultato non e' mai
     annidato (vedi form.js): senza questo, il suo testo resterebbe
     incollato al bordo della griglia invece di allinearsi alle card
     sopra. Stesso valore di .sezione-card .card-body (preventivo.css). */
  #prezzo {
    padding-inline: 0.875rem;
  }
}

@media (min-width: 992px) {
  .preventivo-griglia {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }

  .preventivo-griglia .section0 { grid-column: 1; }
  .preventivo-griglia .section1 { grid-column: 2; }
  .preventivo-griglia .section2 { grid-column: 3; }
  .preventivo-griglia .section3 { grid-column: 4; }
}

.preventivo-prezzo-tabella {
  width: 100%;
  font-size: var(--ld-dim-piccolo);
}

.preventivo-prezzo-tabella td:last-child {
  padding-left: var(--ld-space-1);
  color: var(--ld-testo-muted);
  font-size: var(--ld-dim-caption);
}

#prezzo-unitario,
#dorso {
  font-weight: var(--ld-peso-forte);
  color: var(--ld-primario-testo);
  text-align: right;
  min-width: 4rem;
}

#buttons {
  display: flex;
  gap: var(--ld-space-3);
  justify-content: center;
  padding: var(--ld-space-3) var(--ld-space-4);
  border-top: 1px solid var(--ld-bordo-neutro);
}