/*
 * Chiusura di pagina — aspetto
 *
 * Origine: .closing-band / .closing-action della cattura Impegno.html.
 * Ogni valore letto, compresi i blocchi @media.
 *
 * E' la fascia bianca che precede il piè di pagina: titolo a sinistra,
 * testo e pulsante a destra. Il pulsante riusa .falone-btn del tema, con
 * misure proprie (52px di altezza invece di 48, 34 di margine invece di 24).
 */

.falone-closing {
  display: grid;
  grid-template-columns:
    minmax(0, var(--falone-closing-left-fr, 1fr))
    minmax(var(--falone-closing-right-min, 300px), var(--falone-closing-right-fr, .8fr));

  gap: clamp(40px, 6vw, 96px);   /* ripiego */
  gap: var(--falone-closing-gap,
    clamp(
      var(--falone-closing-gap-min, 40px),
      var(--falone-closing-gap-vw, 6vw),
      var(--falone-closing-gap-max, 96px)
    ));
  /* ⚠️ end, non start: il testo si allinea al PIEDE del titolo */
  align-items: var(--falone-closing-align, end);
  padding:
    var(--falone-closing-pad-y, 88px)
    var(--falone-closing-pad-x, 52px);
  background: var(--falone-closing-bg, #fff);
}

.falone-closing__h2 {
  margin: 0;
  color: var(--falone-closing-title-color, #262626);
}

/* ⚠️ `.falone-accent` vale (0,1,0) come `.falone-closing__h2`, e questo foglio
   si stampa DOPO components.css: senza questa riga la parola in accento
   restava del colore del titolo. Nello split funzionava per caso, perche' li'
   il colore non e' dichiarato sull'h2. */
.falone-closing__h2 .falone-accent {
  color: var(--falone-accent, #f7941d);
}
/* la scala arriva da .falone-h2--page del tema */

.falone-closing__action { max-width: var(--falone-closing-action-max, 500px); }

.falone-closing__text {
  margin: 0 0 var(--falone-closing-text-gap, 30px);
  color: var(--falone-closing-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .94rem;
  font-weight: 400;
  line-height: 1.85;
}

/* ⚠️ Selettore DISCENDENTE: il pulsante e' un <a>, ed Elementor azzera
   box-shadow e text-decoration su `.elementor a` con specificita' (0,1,1). */
.falone-closing__action .falone-btn {
  min-height: var(--falone-closing-btn-h, 52px);
  padding: 0 var(--falone-closing-btn-pad, 34px);
}

@media (max-width: 1180px) {
  .falone-closing {
    /* ⚠️ `minmax(0, 1fr)` e non `1fr`: il minimo implicito di `1fr` e'
       `min-content`, quindi una parola troppo lunga fa CRESCERE la colonna
       oltre il contenitore e la pagina scorre di lato. Misurato a 460px:
       colonna 564,8px in una fascia di 445 e scorrimento orizzontale di
       141px su tre pagine. */
    grid-template-columns: minmax(0, 1fr);
    /* impilate, allineare al piede non ha senso */
    align-items: start;
  }
  .falone-closing__action { max-width: none; }
}

@media (max-width: 820px) {
  .falone-closing {
    padding: var(--falone-closing-pad-y-tablet, 72px) var(--falone-closing-pad-x-tablet, 18px);
  }
  /* ⚠️ Nascondere il <br> incolla le due parole ai suoi lati se nel testo
     non c'e' uno spazio: «Costruzioni,Costruttori» diventava una parola sola
     di 565px. I titoli si scrivono con uno spazio PRIMA del <br> (che quando
     il <br> si vede viene comunque collassato), e qui si spezza comunque. */
  .falone-closing__h2 { overflow-wrap: break-word; }
  .falone-closing__h2 br { display: none; }
}

@media (max-width: 480px) {
  /* sotto i 480 il sorgente allarga il pulsante a tutta riga, come gli altri */
  .falone-closing__action .falone-btn {
    width: 100%;
    padding: 0 18px;
  }
}