/* ==========================================================================
   prezzi — sezione «ENTRARE NEL MONDO EDILINCLOUD» — vedi doc/copy.md

   Cinque passi a righe alternate e la card col prezzo, sull'impianto della
   sezione «come acquistarlo» di RESTinCloud ma in palette EDILinCloud.
   Zero JavaScript, zero classi Bootstrap. Mobile-first.
   La regola prefers-reduced-motion e il focus-visible stanno in edil.css.
   ========================================================================== */

/* Fondo bianco: viene dopo la sezione dei soci (chiara) e prima dei contatti
   (scura). Il gradino chiaro tiene il prezzo su una superficie neutra —
   e' l'informazione che deve leggersi senza nessun rumore attorno. */
.prezzi {
  background: var(--bianco);
  padding: 64px 0 72px;
}

/* --------------------------------------------------------------------------
   Testata centrata
   -------------------------------------------------------------------------- */
.pr-testata {
  text-align: center;
  margin-bottom: 40px;
}

.pr-titolo {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: clamp(29px, 6.4vw, 47px);
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--testo-forte);
  margin: 0;
}

/* Stesso accento in gradiente delle altre testate su fondo chiaro. Il
   fallback fuori dal @supports e' --blu, che sul bianco sta a 6,9:1. */
.pr-titolo-accento { color: var(--blu); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .pr-titolo-accento {
    background-image: linear-gradient(135deg, var(--blu), var(--azzurro));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --------------------------------------------------------------------------
   I cinque passi.
   Base mobile: figura sopra, testo sotto, una colonna.
   -------------------------------------------------------------------------- */
.pr-passi {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  counter-reset: passo;
  display: grid;
  gap: 34px;
}

.pr-passo {
  counter-increment: passo;
  display: grid;
  gap: 18px;
  align-items: center;
}

.pr-passo__figura {
  position: relative;
  /* La figura non si allarga oltre la sua misura naturale: ingrandita
     diventerebbe l'elemento principale della riga, che invece e' il testo. */
  width: min(260px, 100%);
  justify-self: center;
}

.pr-passo__figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-piccolo);
  border: 1px solid var(--filetto);
  box-shadow: 0 6px 18px rgba(16, 36, 59, .10);
}

/* Il numero del passo lo conta il CSS: non e' testo da tradurre, e togliendo
   o spostando un passo la numerazione si rifa' da sola.
   Sta nell'angolo da cui comincia la lettura, quindi in arabo passa a destra. */
.pr-passo__figura::before {
  content: counter(passo);
  position: absolute;
  top: -13px;
  inset-inline-start: -13px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blu), var(--azzurro));
  color: var(--bianco);
  border: 3px solid var(--bianco);
  font-family: var(--f-etichetta);
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(46, 155, 230, .28);
}

.pr-passo__titolo {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  color: var(--testo-forte);
  margin: 0 0 8px;
}

.pr-passo__testo {
  font-family: var(--f-testo);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--testo);
  margin: 0;
  max-width: 58ch;
}

/* Il rilievo dentro il testo: peso alto, colore del testo forte. Niente
   azzurro — l'accento azzurro della riga e' gia' il pallino del numero. */
.pr-passo__chiave {
  font-weight: 500;
  color: var(--testo-forte);
}

/* --------------------------------------------------------------------------
   La card del prezzo
   -------------------------------------------------------------------------- */
.pr-prezzo {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  padding: 34px 24px;
  border-radius: var(--r-medio);
  border: 1px solid var(--filetto);
  background: linear-gradient(160deg, var(--tinta) 0%, var(--bianco) 62%);
  box-shadow: 0 16px 44px rgba(16, 36, 59, .08);
}

/* Lo sconto e' l'unica cosa azzurra della card: il prezzo resta nero, perche'
   e' un dato e non un richiamo. */
.pr-prezzo__badge {
  display: inline-block;
  font-family: var(--f-etichetta);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bianco);
  background: linear-gradient(135deg, var(--blu), var(--azzurro));
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0 0 20px;
}

.pr-prezzo__importo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0 0 18px;
  /* La cifra e' un dato numerico: resta nell'ordine latino anche in arabo,
     dove altrimenti l'unita' scavalcherebbe l'importo. */
  direction: ltr;
}

.pr-prezzo__cifra {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: clamp(42px, 9vw, 58px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--testo-forte);
}

.pr-prezzo__periodo {
  font-family: var(--f-etichetta);
  font-weight: 600;
  font-size: 17px;
  color: var(--testo-tenue);
}

.pr-prezzo__periodo sup { font-size: .55em; }

/* Note in piccolo, come su RESTinCloud. Piccole ma leggibili: restano sopra
   il 4,5:1 richiesto, perche' dicono una condizione del contratto. */
.pr-prezzo__note {
  display: grid;
  gap: 4px;
  font-family: var(--f-testo);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--testo-tenue);
  margin: 0 0 26px;
}

.pr-prezzo__azioni {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 17px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.pr-bottone--pieno {
  color: var(--bianco);
  background: linear-gradient(135deg, var(--blu), var(--azzurro));
  box-shadow: 0 12px 30px rgba(46, 155, 230, .26);
}
.pr-bottone--pieno:hover,
.pr-bottone--pieno:focus-visible {
  color: var(--bianco);
  box-shadow: 0 16px 38px rgba(46, 155, 230, .38);
}

.pr-bottone--contorno {
  color: var(--blu);
  background: transparent;
  border: 1.5px solid var(--filetto);
}
.pr-bottone--contorno:hover,
.pr-bottone--contorno:focus-visible {
  color: var(--blu);
  border-color: var(--azzurro);
  background: rgba(46, 155, 230, .06);
}

/* --------------------------------------------------------------------------
   Da 768 px: la sezione respira e i bottoni tornano in riga.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .prezzi { padding: 96px 0 104px; }
  .pr-testata { margin-bottom: 56px; }

  .pr-prezzo { padding: 44px 40px; }

  .pr-prezzo__azioni {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   Da 900 px: righe alternate, figura e testo affiancati.

   Sulle righe pari figura e testo si scambiano le colonne. Non e' un `order`
   travestito: l'immagine e' DECORATIVA (alt vuoto), quindi per chi legge con
   uno screen reader non esiste e l'ordine di lettura resta quello dei testi,
   dal primo passo al quinto. Su una coppia figura-testo dove la figura
   raccontasse qualcosa, questo scambio non si potrebbe fare.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* Le righe stanno piu' strette del contenuto: a 1.140 px il testo di un
     passo lungo tre righe lasciava mezza pagina vuota alla sua destra e la
     riga sembrava spezzata. Bloccate a 900 px e centrate, lo spazio che resta
     ai lati si legge come margine invece che come buco. */
  .pr-passi {
    gap: 44px;
    max-width: 900px;
    margin-inline: auto;
  }

  .pr-passo {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    column-gap: 40px;
  }

  .pr-passo__figura { justify-self: start; width: 100%; }

  .pr-passo:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  }
  .pr-passo:nth-child(even) .pr-passo__figura { grid-column: 2; grid-row: 1; }
  .pr-passo:nth-child(even) .pr-passo__corpo  { grid-column: 1; grid-row: 1; }
}