/* ══════════════════════════════════════════════════════════════════════
   VentiRent — sito-v2 — pagine delle vetture
   /vetture/ferrari-roma/, /vetture/porsche-718-spyder/ e le inglesi
   ══════════════════════════════════════════════════════════════════════
   Sezioni
     01 Scena      la vettura a tutto schermo, nome enorme, prezzo, azioni
     02 Essenza    due righe editoriali e una fotografia
     03 In numeri  i dati che contano, in cifre grandi
     04 Galleria   fila orizzontale, si apre ingrandita
     05 Noleggio   sezione chiara: tariffa, chilometri, consegna, requisiti
     06 Prossima   la vettura successiva, a tutta larghezza
   ══════════════════════════════════════════════════════════════════════ */

main{position:relative}
main>section:not(.scena){position:relative;z-index:2;background:var(--nero)}
main>section.chiaro{background:var(--osso)}

/* ── 01 SCENA ─────────────────────────────────────────────────────────── */
.scena{
  position:sticky;top:0;z-index:1;
  height:100vh;height:100svh;min-height:600px;
  overflow:hidden;isolation:isolate;background:var(--grafite);
}
.scena-foto{position:absolute;inset:0;z-index:-2;transform-origin:50% 40%}
.scena-foto picture{display:block;width:100%;height:100%}
.scena-foto img{width:100%;height:100%;object-fit:cover;object-position:var(--fuoco,50% 60%)}
.scena-velo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 40%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.94) 100%);
}
@media(prefers-reduced-motion:no-preference){
  .js .scena-foto img{transform:scale(1.1);transition:transform 2.8s var(--e-uscita)}
  .js.pronto .scena-foto img{transform:none}
}
.briciole{position:absolute;top:calc(var(--testata-h) + 18px);left:0;right:0;z-index:2}
.briciole ol{display:flex;gap:12px;color:var(--argento)}
.briciole li+li::before{content:"/";margin-right:12px;color:var(--piombo)}
.briciole a{color:var(--argento)}
@media(hover:hover){ .briciole a:hover{color:var(--osso)} }

.scena-testo{position:absolute;left:0;right:0;bottom:calc(80px + env(safe-area-inset-bottom));z-index:2}
.scena-testo .micro{grid-column:1/-1;color:var(--argento)}
.scena-nome{
  grid-column:1/-1;margin-top:14px;
  font-size:clamp(3.4rem,min(15vw,15svh),14rem);font-weight:250;line-height:.84;letter-spacing:-.065em;
}
.scena-nome .riga{display:block}
.scena-lato{grid-column:1/-1;margin-top:26px;display:grid;gap:22px}
.scena-piede{
  position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));z-index:2;
  display:flex;justify-content:space-between;align-items:center;
}
@media(max-width:599px){
  .scena-lato .azioni{display:grid;gap:6px}
  .scena-lato .btn{width:100%}
  .scena-lato .link{justify-self:start}
}
@media(min-width:900px){
  .scena-testo{bottom:clamp(76px,10vh,120px)}
  /* come l'apertura della home: 22px dal bordo erano troppo pochi */
  .scena-piede{bottom:clamp(26px,3.2vh,38px)}
  .scena-nome{grid-column:1/span 8}
  .scena-lato{grid-column:9/-1;align-self:end;margin:0;padding-bottom:.4em}
}

/* ── 02 ESSENZA ───────────────────────────────────────────────────────── */
.essenza{padding:var(--sezione) 0}
.essenza .micro{grid-column:1/-1;margin-bottom:clamp(28px,4vw,48px)}
.essenza-frase{grid-column:1/-1;font-size:clamp(1.8rem,4.2vw,4.4rem);font-weight:300;line-height:1.1;letter-spacing:-.04em}
.essenza-coda{margin-top:clamp(44px,9vw,150px);align-items:end}
.essenza-foto{grid-column:1/-1;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--grafite)}
.essenza-testo{grid-column:1/-1;margin-top:40px}
.essenza-testo .corpo{margin-top:18px}
@media(min-width:600px){ .essenza-foto{grid-column:1/span 4} }
@media(min-width:900px){
  .essenza-frase{grid-column:1/span 10}
  .essenza-foto{grid-column:1/span 5}
  .essenza-testo{grid-column:7/span 5;margin:0;padding-bottom:4px}
}

/* ── 03 IN NUMERI ─────────────────────────────────────────────────────── */
.numeri{padding:0 0 var(--sezione)}
.numeri-testa{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.numeri-testa h2{margin-top:22px}
.tabella-dati{display:grid;grid-template-columns:1fr 1fr;gap:38px 18px;margin-top:clamp(40px,5vw,72px)}
@media(min-width:900px){ .tabella-dati{grid-template-columns:repeat(3,1fr);gap:56px clamp(20px,2vw,36px)} }

/* ── 04 GALLERIA ──────────────────────────────────────────────────────── */
.galleria{padding:var(--sezione) 0 calc(var(--sezione) * .8);overflow:hidden}
main>.galleria{background:var(--antracite)}
.galleria-testa{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(32px,4vw,56px)}
.galleria-testa h2{margin-top:22px}
/* le frecce hanno la classe .frecce: stile comune in sito.css */
.galleria-binario{
  display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--margine);padding-inline:var(--margine);
  scrollbar-width:none;cursor:grab;
}
.galleria-binario::-webkit-scrollbar{display:none}
.galleria-binario.trascina{cursor:grabbing;scroll-snap-type:none;user-select:none}
.galleria-binario:focus-visible{outline-offset:-2px}
.scatto{flex:0 0 auto;height:clamp(300px,56svh,760px);scroll-snap-align:start;position:relative;overflow:hidden;background:var(--grafite)}
/* l'ultima foto aggancia a destra: la fine della fila è una posizione di arrivo */
.galleria-binario>:last-child{scroll-snap-align:end}
.scatto.l{aspect-ratio:16/9}
.scatto.p{aspect-ratio:4/5}
.scatto button{position:absolute;inset:0;width:100%;height:100%;cursor:zoom-in}
.scatto img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-uscita)}
@media(hover:hover){ .scatto button:hover img{transform:scale(1.04)} }
.scatto figcaption{position:absolute;left:14px;bottom:12px;z-index:2;pointer-events:none;color:var(--argento);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.galleria-avanzamento{height:1px;margin:30px var(--margine) 0;background:var(--linea)}
.galleria-avanzamento{--progresso:.12}
.galleria-avanzamento::after{content:"";display:block;height:100%;background:var(--osso);transform-origin:0 50%;transform:scaleX(var(--progresso))}
@media(max-width:599px){ .scatto.l{height:auto;width:88vw;aspect-ratio:16/10} }
@media(min-width:900px){ .scatto{height:clamp(420px,66vh,780px)} }

/* ── 05 NOLEGGIO (sezione chiara) ─────────────────────────────────────── */
.noleggio{padding:var(--sezione) 0}
.noleggio-testa{grid-column:1/-1}
.noleggio-testa h2{margin-top:24px;max-width:12ch}
.noleggio-testa .lead{margin-top:22px;color:var(--piombo);max-width:32ch}
.noleggio .prezzo{margin-top:34px}
.noleggio .prezzo b{font-size:clamp(2.6rem,4.4vw,4.2rem)}
.noleggio-regole{grid-column:1/-1;margin-top:48px}
.noleggio .azioni{margin-top:36px}
.noleggio .nota{margin-top:16px;color:var(--piombo);font-size:.84rem}
@media(min-width:900px){
  .noleggio-testa{grid-column:1/span 5}
  .noleggio-regole{grid-column:7/-1;margin-top:0}
}

/* ── 06 PROSSIMA VETTURA ──────────────────────────────────────────────── */
.prossima{padding:0!important}
.prossima a{position:relative;display:block;height:78vh;height:78svh;min-height:480px;overflow:hidden;background:var(--grafite)}
.prossima .riempi img{transition:transform 1.6s var(--e-uscita)}
.prossima-velo{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 100%)}
.prossima-testo{position:absolute;left:0;right:0;bottom:clamp(36px,7vh,90px);z-index:2}
.prossima-testo .micro{color:var(--argento)}
.prossima-nome{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:16px}
.prossima-nome span{font-size:clamp(3rem,10vw,10rem);font-weight:250;line-height:.86;letter-spacing:-.06em}
.prossima-nome .freccia{width:clamp(40px,5vw,72px);height:auto;margin-bottom:.8em}
@media(hover:hover){
  .prossima a:hover .riempi img{transform:scale(1.04)}
  .prossima a:hover .freccia{transform:translateX(10px)}
}