/* =============================================================
   Parea Sons — i tre pregi della maison

   Tre disegni a matita: il lino raccolto, lo stemma ricamato sul
   cartellino, il cofanetto. Non sono immagini su un riquadro: la
   carta è stata tolta davvero (l'alfa viene dalla copertura della
   grafite) e i bordi sfumano, così ogni tavola si scioglie nel fondo
   della sezione. Per questo non hanno né cornice né ombra: sarebbero
   il contrario di quello che si è appena fatto.

   La sezione è tenuta BASSA di proposito. Sopra c'è la vetrina e
   sotto Inside: se anche questa fosse alta, la home diventerebbe una
   fila di blocchi tutti uguali. Da 900px in giù le tavole si mettono
   di fianco al testo invece che sopra — tre righe corte anziché tre
   colonne lunghe.
   ============================================================= */

.pregi-maison {
  position: relative;
  z-index: 1;
  padding-block: var(--s-64);
  background: var(--bianco-lino);
  border-top: 1px solid var(--filetto);
}

.pregi-maison__inner {
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

/* --- Testata --------------------------------------------------- */

.pregi-maison__testa {
  display: grid;
  justify-items: center;
  gap: var(--s-8);
  text-align: center;
  margin-bottom: var(--s-48);
}

.pregi-maison__titolo {
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: clamp(var(--t-32), 3.4vw, var(--t-48));
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* --- I tre ----------------------------------------------------- */

.pregi-maison__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.pregio-maison {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s-16);
  text-align: center;
  padding-inline: var(--s-32);
}

.pregio-maison + .pregio-maison {
  border-left: 1px solid var(--filetto);
}

/* --- La tavola -------------------------------------------------
   Le tre tavole si vedono INTERE, e le tre hanno forme molto diverse:
   il lino è verticale (0,73), il cartellino è una fascia lunga (2,59),
   il cofanetto sta in mezzo (1,16). Ritagliarle alla stessa forma
   vorrebbe dire tagliarle, e infatti la prima versione nascondeva
   metà del cartellino.

   Si pareggiano invece per AREA: a parità di area due disegni di
   forma diversa pesano uguale all'occhio, che è quello che serve.
   Da un lato --lato, ognuna prende la sua larghezza moltiplicandolo
   per la radice della propria proporzione. La cassa è alta quanto la
   più alta delle tre, così le tre stanno su una riga sola e i testi
   sotto partono allineati.                                          */

.pregio-maison__tavola {
  --lato: clamp(88px, 10vw, 128px);
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(var(--lato) * 1.173);   /* la proporzione del lino */
}

/* Il <source> non disegna niente, ma qui dentro diventerebbe una cella
   della griglia e spingerebbe l'immagine in basso: va tolto dal flusso
   a mano, perché non tutti i browser gli danno display:none. */
.pregio-maison__tavola source { display: none; }

.pregio-maison__tavola img {
  display: block;
  grid-area: 1 / 1;
  width: calc(var(--lato) * var(--k));
  height: auto;
}

/* radice della proporzione di ciascuna: √(l/h) */
.pregio-maison--lino       .pregio-maison__tavola { --k: 0.852; }
.pregio-maison--cartellino .pregio-maison__tavola { --k: 1.610; }
.pregio-maison--giftbox    .pregio-maison__tavola { --k: 1.075; }

/* Dichiarate qui perché la pagina non salti mentre arrivano. */
.pregio-maison--lino       .pregio-maison__tavola img { aspect-ratio: 654 / 900; }
.pregio-maison--cartellino .pregio-maison__tavola img { aspect-ratio: 900 / 347; }
.pregio-maison--giftbox    .pregio-maison__tavola img { aspect-ratio: 753 / 651; }

/* --- Testo ------------------------------------------------------ */

.pregio-maison__testo {
  display: grid;
  justify-items: center;
  gap: var(--s-8);
}

.pregio-maison__nome {
  font-family: var(--font-testo);
  font-weight: 500;
  font-size: var(--t-20);
  line-height: 1.25;
}

.pregio-maison__nota {
  font-size: var(--t-16);
  line-height: 1.55;
  color: color-mix(in srgb, var(--inchiostro) 78%, transparent);
  max-width: 28ch;
  margin-bottom: var(--s-8);
}

/* Il «Scopri di più» è il cartellino, identico a quello dell'account
   nella sostanza — stessa tela rossa, stessa trama di lino, stessi
   due filetti che si aprono dal centro al passaggio — ma qui è un
   rimando minuto sotto tre righe di testo, non l'azione di un
   modulo: si stringe, non occupa la riga. */
.pregio-maison .bottone {
  margin-top: var(--s-8);
  width: auto;
  display: inline-block;
  padding: 4px var(--s-16);
  font-size: 10px;
  line-height: 1.3;
}

/* I filetti stanno a 9px dal bordo per il cartellino a grandezza
   piena: qui il bottone è basso ~19px, e a quella distanza si
   toccherebbero. Li riavvicino perché restino due segni distinti. */
.pregio-maison .bottone::before { top: 4px; }
.pregio-maison .bottone::after  { bottom: 4px; }

/* --- Comparsa ---------------------------------------------------
   Se ne occupa js/rivela.js, che accende data-anima e data-visibile. */

.pregi-maison[data-anima="sì"] .pregio-maison {
  opacity: 0;
  transform: translateY(14px);
}

.pregi-maison[data-anima="sì"][data-visibile="sì"] .pregio-maison {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--t-lento) var(--ease) calc(var(--i, 0) * 90ms),
    transform var(--t-lento) var(--ease) calc(var(--i, 0) * 90ms);
}

.pregio-maison:nth-child(1) { --i: 0; }
.pregio-maison:nth-child(2) { --i: 1; }
.pregio-maison:nth-child(3) { --i: 2; }

/* --- Larghezze minori -------------------------------------------
   Sotto i 900px la tavola va di fianco al testo. Impilarli
   raddoppierebbe l'altezza della sezione su proprio gli schermi che
   ne hanno meno.                                                   */

@media (max-width: 900px) {
  .pregi-maison { padding-block: var(--s-48); }
  .pregi-maison__testa { margin-bottom: var(--s-32); }

  .pregi-maison__elenco {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
    margin-inline: auto;
  }

  .pregio-maison {
    /* La colonna deve contenere la più larga delle tre, il cartellino,
       che vale 1,61 volte --lato: 32vw a 375px fa 120px, e 1,61 × 71
       ne fa 114. Ci sta. */
    grid-template-columns: clamp(118px, 32vw, 152px) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-24);
    text-align: left;
    padding-inline: 0;
    padding-block: var(--s-24);
  }

  .pregio-maison__tavola { --lato: clamp(62px, 19vw, 84px); }

  .pregio-maison + .pregio-maison {
    border-left: 0;
    border-top: 1px solid var(--filetto);
  }

  .pregio-maison__testo { justify-items: start; }
  .pregio-maison__nota { max-width: none; }
}

/* A 375px la tavola scende a 100px e il testo si stringe: impilare
   qui porterebbe la sezione da ~800 a 1200px di altezza, proprio
   sugli schermi che ne hanno meno. Si impila solo sotto i 340, dove
   la colonna del testo diventerebbe davvero una fessura. */
@media (max-width: 560px) {
  .pregio-maison {
    /* La colonna resta larga quanto sopra: se si stringe, il
       cartellino — che è 1,61 volte --lato — viene strizzato dal
       max-width e perde il pareggio delle aree. */
    grid-template-columns: clamp(112px, 32vw, 140px) minmax(0, 1fr);
    gap: var(--s-16);
    padding-block: var(--s-16);
  }
  .pregio-maison__tavola { --lato: clamp(54px, 17vw, 70px); }
  .pregio-maison__nome { font-size: var(--t-16); }
  .pregio-maison__nota { font-size: var(--t-13); line-height: 1.5; margin-bottom: 0; }
  /* Il padding verticale è già minimo dalla regola di base: qui non
     serve stringerlo oltre, resta uguale a ogni larghezza. */
}

@media (max-width: 340px) {
  .pregio-maison {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .pregio-maison__tavola { --lato: 74px; justify-items: start; }
}

/* --- Movimento ridotto ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .pregi-maison[data-anima="sì"] .pregio-maison { transform: none; }
  .pregi-maison[data-anima="sì"][data-visibile="sì"] .pregio-maison {
    transition: opacity var(--t-medio) var(--ease);
  }
}