/* ══════════════════════════════════════════════════════════════════════
   VentiRent — sito-v2 — la collezione (/vetture/, /en/cars/)
   ══════════════════════════════════════════════════════════════════════
   Un indice editoriale, non una griglia di card: fotografia senza
   cornice, testo sotto, filetti al posto dei riquadri. Ferrari Roma
   e Porsche 718 Spyder stanno in testa e sono più grandi; portano alla loro pagina.
   ══════════════════════════════════════════════════════════════════════ */

.intesta{padding:calc(var(--testata-h) + clamp(64px,10vw,160px)) 0 clamp(40px,5vw,72px)}
.intesta h1{margin-top:26px;max-width:12ch}
.intesta .lead{margin-top:26px;max-width:38ch}
.filtri-riga{
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px 32px;
  margin-top:clamp(44px,5vw,72px);padding-top:18px;border-top:1px solid var(--linea);
}
.filtri{display:flex;flex-wrap:wrap;gap:4px 28px}
.filtri button{
  position:relative;padding:12px 0;min-height:44px;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grigio);transition:color .4s;
}
.filtri button::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e-uscita);
}
.filtri button[aria-pressed="true"]{color:var(--osso)}
.filtri button[aria-pressed="true"]::after{transform:scaleX(1)}
@media(hover:hover){ .filtri button:hover{color:var(--osso)} }
.filtri-conta{color:var(--grigio)}
.filtri-conta b{color:var(--osso);font-weight:500}

.catalogo{padding:clamp(40px,5vw,72px) 0 var(--sezione)}
/* Due colonne anche sul telefono (dal 13 settembre 2026): su una colonna
   si vedeva una vettura per schermata. Sotto i 600px tutte le vetture,
   Ferrari Roma e Porsche 718 Spyder comprese, stanno due per riga, con foto
   quadrata e testo compatto. Da 600px Roma e Spyder tornano più grandi.
   Il prefisso .indice serve a vincere sulle regole .voce-grande più sotto. */
.indice{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px) clamp(12px,2vw,36px)}
@media(min-width:600px){ .voce-grande{grid-column:1/-1} }
@media(max-width:599px){
  .indice .voce .voce-foto{aspect-ratio:1/1}
  .indice .voce .voce-testo{padding-top:12px}
  .indice .voce .micro{font-size:.6rem;letter-spacing:.16em}
  .indice .voce .voce-nome{margin-top:6px;font-size:1.12rem;letter-spacing:-.02em;line-height:1.18}
  .indice .voce .voce-dati{margin-top:6px;font-size:.76rem;line-height:1.45}
  .indice .voce .prezzo{margin-top:12px;padding-top:10px;gap:2px 8px}
  .indice .voce .prezzo b{font-size:1.2rem}
  .indice .voce .azioni{margin-top:6px;gap:0 14px}
  .indice .voce .link{font-size:.62rem;letter-spacing:.1em;gap:8px}
  .indice .voce .link .freccia{width:18px}
}
@media(min-width:1200px){
  .indice{grid-template-columns:repeat(6,minmax(0,1fr))}
  .voce{grid-column:span 2}
  .voce-grande{grid-column:span 3}
}
.voce-foto{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--grafite)}
.voce-grande .voce-foto{aspect-ratio:16/10}
.voce-foto img{transition:transform 1.4s var(--e-uscita)}
@media(hover:hover){ a.voce-foto:hover img{transform:scale(1.04)} }
.voce-foto.vuota{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#171717,#0c0c0c)}
.voce-testo{padding-top:20px}
.voce-nome{margin-top:10px;font-size:clamp(1.6rem,2.3vw,2.4rem);font-weight:300;letter-spacing:-.035em;line-height:1.08}
.voce-grande .voce-nome{font-size:clamp(2.2rem,4vw,4.2rem);letter-spacing:-.05em}
.voce-dati{margin-top:10px;color:var(--grigio);font-size:.92rem}
.voce .prezzo{margin-top:20px;padding-top:16px;border-top:1px solid var(--linea)}
.voce .prezzo b{font-size:clamp(1.5rem,2vw,2rem)}
.voce .azioni{margin-top:14px;gap:4px 28px}
.catalogo .nota{margin-top:clamp(48px,6vw,80px);color:var(--grigio);font-size:.84rem}

.cerchi{padding:var(--sezione) 0;border-top:1px solid var(--linea)}
.cerchi h2{grid-column:1/-1;max-width:12ch}
.cerchi-testo{grid-column:1/-1;margin-top:28px}
.cerchi-testo .lead{max-width:34ch}
.cerchi .azioni{margin-top:30px}
@media(min-width:900px){
  .cerchi h2{grid-column:1/span 7}
  .cerchi-testo{grid-column:8/-1;margin:0;align-self:end}
}