/* ============================================================
   «ROTATIVA» — fasce.css: i blocchi del corpo, dalla Home alle
   due pagine d'area. Patto, schede delle aree, tappe numerate
   (con la variante 2×2), punti e citazione, nastro fotografico.
   Le VARIANTI stanno qui, dopo la loro base: interni.css è
   caricato dopo e non deve mai doverle riscrivere.
   ============================================================ */

/* ============ IL PATTO: titolo a sinistra, testo a destra ============ */
.pact-grid{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
/* il tratto sopra il titolo lo fa scendere di ~31px: il testo a destra
   scende con lui, altrimenti le due colonne non si agganciano */
@media (min-width:900px){.pact-text{padding-top:1.95rem}}
.pact-text p{font-size:1.1875rem;line-height:1.7;color:var(--gray-1);max-width:36rem}
.pact-text p + p{margin-top:1.1rem}
.question{font-family:var(--serif);font-style:italic;color:var(--red);font-size:1.25rem}

/* ============ LE AREE: due schede con la stampa in testa ============ */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,2.5vw,1.75rem)}
.card{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--border);
  overflow:hidden;
  /* 5/9/2026, scelta di Giorgio nel giro a vista del 3a: sollevamento più ampio e più lento (4px in .35s,
     curva morbida anche per ombra e bordo) al posto dei 2px in .25s della proposta, che sembravano un colpo secco */
  transition:border-color .35s var(--ease-soft),transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft);
}
.card .plate{aspect-ratio:3/2}
.card .plate::after{border:0;border-bottom:1px solid var(--border)}
.card-body{padding:clamp(1.5rem,2.5vw,2rem);display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.4375rem;margin-bottom:.7rem}
.card-body p{color:var(--gray-1);font-size:1.0625rem;line-height:1.62}
.card-body .arrow-link{margin-top:auto;padding-top:1rem}
/* il sollevamento è del mouse: sul tocco non esiste, e a riposo la scheda è piatta */
@media (hover:hover) and (pointer:fine){
  /* la scheda è un livello composto (5/9/2026): il sollevamento corre sul compositore, e il cambio di
     ombra ridipinge solo testo e fondo, non la stampa (che ha il suo livello in base.css) */
  .card{will-change:transform}
  .card:hover{transform:translateY(-4px);border-color:#D9B3AE;box-shadow:var(--shadow-lift)}
}

/* ============ LE TAPPE: la cifra, il filetto che si tira, il passo ============
   Elenco ordinato vero: la sequenza è informazione, non decorazione. */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.25rem)}
.steps-four{grid-template-columns:repeat(2,1fr);gap:clamp(1.75rem,3.5vw,2.75rem) clamp(2rem,4vw,3.5rem)}
.step .rule{width:100%;margin:.9rem 0 1.15rem;background:var(--gold-rule)}
.step h3{font-family:var(--sans);font-size:1.0625rem;font-weight:600;line-height:1.4;margin-bottom:.55rem}
.step p{font-size:1rem;line-height:1.62;color:var(--gray-1)}
/* dopo .step p e con la stessa forza: la cifra è un titolo, non un paragrafo */
.step .step-number{
  display:block;margin:0;
  font-family:var(--serif);font-size:2.5rem;line-height:1;
  color:var(--red);letter-spacing:.01em;
}

/* ============ PERCHÉ: i punti spuntati e la citazione ============ */
.why-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:center;
}
.points{list-style:none;display:flex;flex-direction:column;gap:1.6rem}
.point{display:flex;gap:1.1rem;align-items:flex-start}
.point h3{font-family:var(--sans);font-size:1.0625rem;font-weight:600;line-height:1.4;margin-bottom:.35rem}
.point p{font-size:1rem;line-height:1.62;color:var(--gray-1)}
.quote{
  margin:0;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.75rem 1.5rem;
}
@media (min-width:900px){.quote{padding:2.5rem 2.125rem}}
.quote p{
  font-family:var(--serif);font-style:italic;
  font-size:1.375rem;line-height:1.45;
  color:var(--bordeaux-deep);
  max-width:none;
}
@media (min-width:900px){.quote p{font-size:1.5625rem}}
.quote footer{
  display:flex;align-items:center;gap:.75rem;
  margin-top:1.6rem;padding-top:1.3rem;
  border-top:1px solid var(--border);
  font-size:.9375rem;font-weight:600;color:var(--gray-1);
}
.quote footer .monogram{
  flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--bordeaux);color:var(--paper);
  font-family:var(--serif);font-size:1.1875rem;
}

/* ============ NASTRO: la stampa larga che taglia la pagina ============ */
.ribbon{margin:0}
.ribbon .plate{aspect-ratio:21/9}
.ribbon .plate::after{border-left:0;border-right:0}

/* ===== RESPONSIVE — fasce ===== */
@media (max-width:1000px){
  .pact-grid,.why-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .pact-grid,.why-grid{grid-template-columns:1fr;gap:2rem}
  .steps{grid-template-columns:1fr 1fr}
  .pact-text p,.quote p{max-width:62ch}
}
@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .ribbon .plate{aspect-ratio:16/9}
}
@media (max-width:560px){
  .steps,.steps-four{grid-template-columns:1fr;gap:1.75rem}
  .step-number{font-size:2.125rem}
  .ribbon .plate{aspect-ratio:3/2}
}