/* Pagine interne — stile 2027 "le strisce".
   Vale per le pagine che hanno <body data-stile="2027"> (Regolamento, Iscrizioni, Contatti, Dario Sebaste,
   Storia dell'Otto, Albo d'Oro, Foto, Partner, Area stampa, Rassegna, Comunicati, Cookie Policy).
   Ridisegna i vecchi componenti (pannelli, schede, pulsanti, chip, tabelle) senza toccare i contenuti.
   Niente vetro, ombre, gradienti, linee sottili, monospazio, maiuscolo, numerazioni. */

body[data-stile="2027"]{
  --m:clamp(16px,3vw,44px);
  --ink:#0f1b24; --scuro:#2f4050; --carta:rgba(255,255,255,.74);
  --t1:#1CB3BE; --t2:#0A744C; --t3:#FAA741; --t4:#F0596C;
  --s1:#0E7C85; --s2:#0A744C; --s3:#B26A0C; --s4:#C22F43;
  --tan:.2126; --step:clamp(48px,6vw,96px);
  font-size:18px;line-height:1.55;color:var(--ink);
}
body[data-stile="2027"] main{max-width:1680px;margin:0 auto;padding:0 var(--m) var(--step)}
body[data-stile="2027"] main > * + *{margin-top:clamp(36px,4.6vw,72px)}

/* ---- testata ---- */
.p-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--m);align-items:center;padding-top:clamp(28px,4.4vw,72px)}
.p-titolo{font-size:clamp(56px,8.6vw,150px);line-height:.9;font-weight:700;letter-spacing:-.03em;margin:0 0 0 -.03em;text-wrap:balance}
.p-chip{margin:1.3rem 0 0}
.p-lead{font-size:clamp(20px,1.7vw,26px);line-height:1.4;max-width:40rem;margin:1.3rem 0 0}
.p-hero .flex{margin-top:1.6rem}
.p-disegno{width:min(100%,400px);justify-self:center;height:auto;display:block}
.p-strisce{position:relative;justify-self:stretch;align-self:stretch;min-height:240px;overflow:hidden}
.p-strisce i{position:absolute;top:-4%;bottom:-4%;width:20%;transform:skewX(-12deg)}
.p-strisce i:nth-child(1){left:22%;background:var(--t1)} .p-strisce i:nth-child(2){left:42%;background:var(--t2)}
.p-strisce i:nth-child(3){left:62%;background:var(--t3)} .p-strisce i:nth-child(4){left:82%;background:var(--t4)}

/* ---- blocchi: colore pieno, angoli netti, niente bordi né ombre ---- */
body[data-stile="2027"] .glass-panel,
body[data-stile="2027"] .glass-card,
body[data-stile="2027"] .glass-flat{background:var(--carta);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
body[data-stile="2027"] .glass-flat{background:rgba(255,255,255,.55)}
body[data-stile="2027"] a.glass-card:hover,body[data-stile="2027"] .glass-card:hover{background:rgba(255,255,255,.92);box-shadow:none;transform:none}
body[data-stile="2027"] .gold-top::after,body[data-stile="2027"] .tappa-top::after{display:none}
body[data-stile="2027"] main [class*="rounded"]:not(.rounded-full){border-radius:0}
body[data-stile="2027"] main > section [class*="border"]:not(input):not(select):not(textarea):not(button){border:0}
body[data-stile="2027"] .stage-num{display:none}

/* ---- testi ---- */
body[data-stile="2027"] main [class*="text-slate"],body[data-stile="2027"] main [class*="text-gray"]{color:var(--ink)}
body[data-stile="2027"] main .text-sm{font-size:17px;line-height:1.55}
body[data-stile="2027"] main .text-xs{font-size:15px}
body[data-stile="2027"] main .font-mono{font-family:inherit}
body[data-stile="2027"] main .uppercase{text-transform:none;letter-spacing:0}
body[data-stile="2027"] main [class*="tracking-"]{letter-spacing:0}
body[data-stile="2027"] main section h2{font-size:clamp(30px,3.2vw,52px);line-height:1.02;letter-spacing:-.015em;font-weight:700}
body[data-stile="2027"] main section h3{font-size:clamp(22px,2vw,30px);line-height:1.1;font-weight:700}
body[data-stile="2027"] main section h4{font-size:20px;font-weight:700}
body[data-stile="2027"] main a:not(.btn):not(.glass-card):not([class*="scheda"]):not(.nav-link){text-underline-offset:.2em}
body[data-stile="2027"] main p a,body[data-stile="2027"] main li a{color:var(--s1);text-decoration:underline;text-decoration-thickness:2px}
body[data-stile="2027"] main p a:hover,body[data-stile="2027"] main li a:hover{color:var(--ink)}
body[data-stile="2027"] main blockquote,body[data-stile="2027"] .citazione-egle{background:rgba(255,255,255,.55);border:0;border-radius:0;padding:1.2rem 1.5rem}
body[data-stile="2027"] .citazione-egle p{font-size:clamp(20px,1.8vw,26px);line-height:1.4;color:var(--ink)}
body[data-stile="2027"] .citazione-egle footer{color:var(--s3);font-size:17px}

/* ---- pulsanti e chip ---- */
body[data-stile="2027"] .btn{min-height:50px;padding:0 24px;border:0;border-radius:0;box-shadow:none;font-size:17px;font-weight:700;transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .2s}
body[data-stile="2027"] .btn-primary{background:var(--t3);color:var(--ink)}
body[data-stile="2027"] .btn-primary:hover{background:#ffb866}
body[data-stile="2027"] .btn-ghost{background:var(--scuro);color:#fff}
body[data-stile="2027"] .btn-ghost:hover{background:#3f566b;color:#fff}
body[data-stile="2027"] .btn:hover{transform:translateY(-2px)}
body[data-stile="2027"] .year-chip{font-family:inherit;font-size:16px;letter-spacing:0;text-transform:none;border:0;border-radius:0;padding:5px 14px;background:var(--scuro);color:#fff}
body[data-stile="2027"] .year-chip.active{background:var(--t3);color:var(--ink)}
body[data-stile="2027"] a:focus-visible,body[data-stile="2027"] button:focus-visible{outline:3px solid var(--scuro);outline-offset:3px}

/* ---- righe di programma, tabelle, elenchi di documenti ---- */
body[data-stile="2027"] .timeline-row{display:flex;gap:16px;align-items:baseline;border:0;padding:.7rem 1rem;background:rgba(255,255,255,.7);margin-bottom:6px}
body[data-stile="2027"] .timeline-time{font-family:inherit;font-size:clamp(22px,2vw,28px);font-weight:700;color:var(--s1);min-width:5.5rem;padding:0}
body[data-stile="2027"] .price-table{font-size:17px}
body[data-stile="2027"] .price-table th{font-size:17px;letter-spacing:0;text-transform:none;background:rgba(255,255,255,.85);border:0;padding:.7rem .9rem}
body[data-stile="2027"] .price-table td{border:0;padding:.7rem .9rem}
body[data-stile="2027"] .price-table tbody tr:nth-child(odd){background:rgba(255,255,255,.6)}
body[data-stile="2027"] .price-table td.num{font-family:inherit}
body[data-stile="2027"] .doc-riga{border:0;background:rgba(255,255,255,.7);margin-bottom:6px;padding:.8rem 1rem}
body[data-stile="2027"] .doc-riga .nome{font-size:19px}
body[data-stile="2027"] .doc-riga .meta,body[data-stile="2027"] .scheda-rassegna .meta{font-family:inherit;font-size:15px;color:var(--ink)}
body[data-stile="2027"] .doc-riga:hover .nome{color:var(--s1)}
body[data-stile="2027"] .scheda-rassegna .nome{font-size:21px;color:var(--ink)}
body[data-stile="2027"] .scheda-rassegna .riassunto{font-size:17px;color:var(--ink)}
body[data-stile="2027"] .scheda-rassegna .apri{font-size:17px;color:var(--s1)}
body[data-stile="2027"] .scheda-partner{border:0;border-radius:0;box-shadow:none;background:var(--carta)}
body[data-stile="2027"] .scheda-partner .nome{font-size:17px;color:var(--ink)}
body[data-stile="2027"] .galleria img{border:0;border-radius:0}
body[data-stile="2027"] .mappa-tappa{border:0;border-radius:0}

/* righe di testo di lunghezza leggibile (prima fino a 180 caratteri) */
body[data-stile="2027"] main section p:not(.p-lead):not(.text-center){max-width:62rem}
/* partner: loghi più grandi, griglia che riempie la larghezza */
body[data-stile="2027"] .griglia-partner{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(10px,1.2vw,20px)}
body[data-stile="2027"] .scheda-partner img{max-height:110px}
body[data-stile="2027"] .scheda-partner img[src$="amici-vecchie-moto.png"],body[data-stile="2027"] .scheda-partner img[src$="partner/ruote-epoca-cherasco.png"]{height:110px;max-height:110px}

@media (max-width:900px){
  .p-hero{grid-template-columns:1fr}
  .p-disegno{justify-self:start;width:min(60%,300px)}
  .p-strisce{min-height:90px}
}

/* entrata delle parti (solo transform e opacity; senza script o con "riduci movimento" tutto resta visibile) */
@media (prefers-reduced-motion:no-preference){
  html.h-js [data-rivela]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--ritardo,0ms)}
  html.h-js [data-rivela].visto{opacity:1;transform:none}
}
@media (max-width:600px){
  body[data-stile="2027"] .timeline-row{flex-direction:column;gap:2px}
  body[data-stile="2027"] .timeline-time{min-width:0}
}

/* ---- Albo d'Oro: il cruscotto (Tailwind + app.js dell'altro progetto) nello stesso stile ----
   Si agisce solo con CSS sulle classi che il cruscotto usa: i suoi file non si toccano. */
body[data-page="albo-d-oro.html"] main [class*="border"]:not(input):not(select):not(textarea):not(button){border-width:0}
body[data-page="albo-d-oro.html"] main [class*="shadow"]{box-shadow:none}
body[data-page="albo-d-oro.html"] main [class*="bg-white"],
body[data-page="albo-d-oro.html"] main [class*="bg-slate-50"]{background-color:rgba(255,255,255,.74)}
body[data-page="albo-d-oro.html"] main [class*="bg-slate-100"],
body[data-page="albo-d-oro.html"] main [class*="bg-slate-200"]{background-color:rgba(255,255,255,.5)}
body[data-page="albo-d-oro.html"] main select,body[data-page="albo-d-oro.html"] main input{font-size:16px;border-radius:0}
/* righe di tutte le tabelle del cruscotto: stesso fondo bianco, senza dipendere dalle classi hover di Tailwind.
   :where() azzera la specificità (l'hover di Tailwind resta visibile); le righe-messaggio (colspan) restano senza fondo */
:where(body[data-page="albo-d-oro.html"] #classifiche-embed tbody > tr:not(:has(> td[colspan]))){background-color:rgba(255,255,255,.5)}
.p-hero-testo .justify-center{justify-content:flex-start}
.p-hero nav{flex-wrap:wrap;overflow:visible;max-width:100%;gap:6px;background:none;padding:0}
body[data-page="albo-d-oro.html"] #modal-backdrop{background:rgba(47,64,80,.93)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.p-hero nav[class*="bg-white"]{background-color:transparent!important}

/* medaglie dell'Albo d'Oro: al posto delle emoji 🥇🥈🥉 (le mette js/home.js) */
.medaglia{display:inline-block;width:.8em;height:.8em;border-radius:50%;vertical-align:-.05em;margin-right:.3em}
.medaglia.oro{background:#E8B100} .medaglia.argento{background:#B7C0C8} .medaglia.bronzo{background:#B9743A}

/* ================= Albo d'Oro: colori e dimensioni (revisione con le regole delle schermate di lavoro) =================
   Misurato a 1440 px su tutte le schede: testi a 9-11 px (fino a 1728 elementi), grigi e colori sotto 4,5:1,
   sei famiglie di colore (viola, indaco, azzurro, smeraldo, arancio, ambra), grassetto sintetico 800/900,
   sfumature e bagliori dei ritratti. Qui si porta tutto alla palette del sito e alla leggibilità. */
body[data-page="albo-d-oro.html"]{
  --a-ambra:#8F5508;      /* ambra scura per testo: 6:1 su bianco e sulle tinte ambra */
  --a-verde:#0A744C; --a-ciano:#0E7C85; --a-rosso:#B91C1C; --a-corallo:#C22F43; --a-secondario:#52606b;
}
/* -- un solo gruppo di tinte: ambra + le quattro tinte scure delle tappe; niente viola/indaco -- */
body[data-page="albo-d-oro.html"] main [class*="text-amber"],
body[data-page="albo-d-oro.html"] main [class*="text-yellow"]{color:var(--a-ambra)}
body[data-page="albo-d-oro.html"] main [class*="text-emerald"],
body[data-page="albo-d-oro.html"] main [class*="text-green"]{color:var(--a-verde)}
body[data-page="albo-d-oro.html"] main [class*="text-blue"],
body[data-page="albo-d-oro.html"] main [class*="text-cyan"],
body[data-page="albo-d-oro.html"] main [class*="text-sky"],
body[data-page="albo-d-oro.html"] main [class*="text-teal"]{color:var(--a-ciano)}
body[data-page="albo-d-oro.html"] main [class*="text-purple"],
body[data-page="albo-d-oro.html"] main [class*="text-indigo"],
body[data-page="albo-d-oro.html"] main [class*="text-violet"],
body[data-page="albo-d-oro.html"] main [class*="text-orange"]{color:var(--a-corallo)}
body[data-page="albo-d-oro.html"] main [class*="text-red"]{color:var(--a-corallo)}
/* secondario in grigio-blu (5,9:1), principale in inchiostro: due livelli che si leggono */
body[data-page="albo-d-oro.html"] main [class*="text-slate-4"],
body[data-page="albo-d-oro.html"] main [class*="text-slate-5"]{color:var(--a-secondario)}
/* -- dimensioni: niente testo sotto i 13 px; il grassetto è quello vero di Cabrito (600/700), non sintetico -- */
body[data-page="albo-d-oro.html"] main [class*="text-[9px]"],
body[data-page="albo-d-oro.html"] main [class*="text-[10px]"],
body[data-page="albo-d-oro.html"] main [class*="text-[11px]"],
body[data-page="albo-d-oro.html"] main [class*="text-[12px]"]{font-size:13px;line-height:1.35}
body[data-page="albo-d-oro.html"] main [class*="font-black"],
body[data-page="albo-d-oro.html"] main [class*="font-extrabold"]{font-weight:700}
body[data-page="albo-d-oro.html"] main [class*="font-semibold"],
body[data-page="albo-d-oro.html"] main [class*="font-medium"]{font-weight:600}
body[data-page="albo-d-oro.html"] main [class*="font-mono"]{font-family:inherit}
/* -- controlli: pulsanti Video/Magazine, caselle da spuntare, schede di navigazione -- */
body[data-page="albo-d-oro.html"] main a[target="_blank"][class*="flex-1"]{min-height:38px}
body[data-page="albo-d-oro.html"] main input[type="checkbox"]{width:20px;height:20px;accent-color:var(--scuro)}
/* -- pillole di testo quadrate come i pulsanti; restano tonde solo le figure (medaglie, avatar) -- */
body[data-page="albo-d-oro.html"] main [class*="rounded-full"][class*="px-"]{border-radius:0}
/* -- fine di sfumature, bagliori e ombre che arrivavano dal progetto classifiche -- */
body[data-page="albo-d-oro.html"] main [class*="bg-gradient"],
body[data-page="albo-d-oro.html"] main [class*="from-amber"]{background-image:none!important;background-color:var(--t3)}
body[data-page="albo-d-oro.html"] .winner-card-border::after{display:none}
body[data-page="albo-d-oro.html"] .portrait-container{background:#dde1e4;border-radius:0}
body[data-page="albo-d-oro.html"] .portrait-overlay{background:none}
body[data-page="albo-d-oro.html"] .modal-portrait-frame{background:#dde1e4;border:0;border-radius:0;box-shadow:none}
body[data-page="albo-d-oro.html"] .modal-portrait-img{border-radius:0}
body[data-page="albo-d-oro.html"] [class*="glow"],body[data-page="albo-d-oro.html"] .ring-1{box-shadow:none}
/* focus da tastiera sempre visibile sui filtri (gli anelli Tailwind restano solo in focus) */
body[data-page="albo-d-oro.html"] main select:focus-visible,body[data-page="albo-d-oro.html"] main input:focus-visible{outline:3px solid var(--scuro);outline-offset:2px}

/* -- voti e sigilli sopra le foto: fondo pieno, così il testo si legge su qualunque ritratto -- */
body[data-page="albo-d-oro.html"] main [class*="absolute"][class*="top-2.5"] > *{background-color:rgba(255,255,255,.94)!important}
/* -- controlli piccoli: area di tocco di almeno 36 px -- */
body[data-page="albo-d-oro.html"] #reset-filters,
body[data-page="albo-d-oro.html"] #btn-view-grid,
body[data-page="albo-d-oro.html"] #btn-view-table{min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding-left:.9rem;padding-right:.9rem}

/* ================= Albo d'Oro: allineamenti =================
   Schede come i link dell'header: testo piatto, banda inclinata (12°) sotto l'attiva. */
body[data-stile="2027"] .p-hero nav{gap:2px;margin-left:-1rem}
body[data-stile="2027"] .p-hero nav button{position:relative;isolation:isolate;background:none!important;color:var(--ink)!important;font-size:15px;font-weight:700;padding:.55rem 1rem;border-radius:0;min-height:40px}
body[data-stile="2027"] .p-hero nav button::before{content:'';position:absolute;inset:5px 3px;z-index:-1;background:transparent;transform:skewX(-12deg);transition:background-color .2s}
body[data-stile="2027"] .p-hero nav button:hover::before{background:#e1e5e8}
body[data-stile="2027"] .p-hero nav button[class*="bg-amber"]::before{background:var(--t3)}
/* i blocchi del cruscotto partono dal margine della pagina, lo stesso della testata */
body[data-page="albo-d-oro.html"] #classifiche-embed > section > .glass-panel{background:transparent;padding-left:0;padding-right:0}
body[data-page="albo-d-oro.html"] #classifiche-embed section h3,
body[data-page="albo-d-oro.html"] #classifiche-embed section h4{text-align:left}
body[data-page="albo-d-oro.html"] #classifiche-embed section h3[class*="justify-center"],
body[data-page="albo-d-oro.html"] #classifiche-embed section h4[class*="justify-center"]{justify-content:flex-start}
body[data-page="albo-d-oro.html"] #classifiche-embed > section > .glass-panel > h3{font-size:clamp(28px,2.6vw,40px);line-height:1.05;margin-bottom:.4rem}
/* controlli (menu a tendina, filtri) allineati a sinistra come il resto */
body[data-page="albo-d-oro.html"] #classifiche-embed div:has(> select)[class*="flex-col"]{align-items:flex-start}
body[data-page="albo-d-oro.html"] #classifiche-embed div[class*="justify-center"]:has(select){justify-content:flex-start}
body[data-page="albo-d-oro.html"] #classifiche-embed [class*="text-center"]:has(select){text-align:left}
/* niente cornici colorate attorno al podio e alle schede dei vincitori */
body[data-page="albo-d-oro.html"] main [class~="ring-2"],body[data-page="albo-d-oro.html"] main [class~="ring-4"]{box-shadow:none}

/* marcatore del vincitore (la coppa era un'emoji): un pallino oro, non una pillola vuota */
body[data-page="albo-d-oro.html"] main span[class*="from-amber"]:empty{display:inline-block;width:14px;height:14px;padding:0;border-radius:50%;background:#E8B100!important;background-image:none!important}
/* blocchi centrati con mx-auto: tutti a sinistra, sul margine della pagina; il confronto occupa tutta la larghezza */
body[data-page="albo-d-oro.html"] #classifiche-embed [class*="mx-auto"]{margin-left:0}
body[data-page="albo-d-oro.html"] #comparison-results [class*="max-w-"]{max-width:none}
/* tabelle del Testa a Testa: stesse colonne in tutte, anno a sinistra */
body[data-page="albo-d-oro.html"] #section-compare table{table-layout:fixed;width:100%}
body[data-page="albo-d-oro.html"] #section-compare table th:first-child,
body[data-page="albo-d-oro.html"] #section-compare table td:first-child{width:12%;text-align:left;padding-left:1rem}
/* titoli di blocco e etichette: stesso filo dei riquadri (prima 2 px più dentro) */
body[data-page="albo-d-oro.html"] #classifiche-embed [class~="px-0.5"]{padding-left:0;padding-right:0}
/* etichette dei menu a sinistra sopra il proprio menu; nomi dei piloti sullo stesso filo (uno o due avatar) */
body[data-page="albo-d-oro.html"] #classifiche-embed label[class*="text-center"]{text-align:left}
body[data-page="albo-d-oro.html"] #classifiche-embed [class*="-space-x-3"]{min-width:60px;flex-shrink:0}
@media (max-width:900px){
  body[data-stile="2027"] .p-hero nav{row-gap:0}
  body[data-stile="2027"] .p-hero nav button{min-height:36px}
}

/* ================= Albo d'Oro: animazioni al clic (come nelle altre pagine) =================
   Si ripartono da sole a ogni cambio: una scheda che torna visibile e una lista ridisegnata dallo script del
   cruscotto fanno rientrare le loro parti. Solo transform e opacity; ferme con "riduci movimento". */
@media (prefers-reduced-motion:no-preference){
  @keyframes albo-entra{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  @keyframes albo-banda{from{opacity:0;transform:skewX(-12deg) scaleX(.15)}to{opacity:1;transform:skewX(-12deg) scaleX(1)}}
  /* la scheda entra, tranne le due altissime (Piloti: ~55.000 px, Classifiche): animare un blocco così grande
     costringe il browser a ridisegnarlo intero e fa scattare; in quelle entrano solo le prime schede */
  body[data-page="albo-d-oro.html"] #classifiche-embed > section:not(#section-riders):not(#section-rankings){animation:albo-entra .55s cubic-bezier(.16,1,.3,1) both}
  body[data-page="albo-d-oro.html"] :is(#riders-container,#rankings-overview-grid,#squadre-grid,#squadre-podium,#hof-winners-list,#hof-veterans-list,#hof-nations-list,#comparison-results) > :nth-child(-n+12),
  body[data-page="albo-d-oro.html"] #section-curiosities .glass-card:nth-child(-n+12){animation:albo-entra .5s cubic-bezier(.16,1,.3,1) both}
  body[data-page="albo-d-oro.html"] :is(#riders-container,#rankings-overview-grid,#squadre-grid,#squadre-podium,#hof-winners-list,#hof-veterans-list,#hof-nations-list,#comparison-results) > :nth-child(2){animation-delay:60ms}
  body[data-page="albo-d-oro.html"] :is(#riders-container,#rankings-overview-grid,#squadre-grid,#squadre-podium,#hof-winners-list,#hof-veterans-list,#hof-nations-list,#comparison-results) > :nth-child(3){animation-delay:120ms}
  body[data-page="albo-d-oro.html"] :is(#riders-container,#rankings-overview-grid,#squadre-grid,#squadre-podium,#hof-winners-list,#hof-veterans-list,#hof-nations-list,#comparison-results) > :nth-child(4){animation-delay:180ms}
  body[data-page="albo-d-oro.html"] :is(#riders-container,#rankings-overview-grid,#squadre-grid,#squadre-podium,#hof-winners-list,#hof-veterans-list,#hof-nations-list,#comparison-results) > :nth-child(n+5){animation-delay:240ms}
  /* la banda inclinata si apre sulla scheda scelta */
  body[data-stile="2027"] .p-hero nav button[class*="bg-amber"]::before{animation:albo-banda .4s cubic-bezier(.16,1,.3,1) both}
  /* effetto "premuto" su pulsanti, schede e righe cliccabili */
  body[data-page="albo-d-oro.html"] main :is(button,a.glass-card,.glass-card[onclick],[onclick],label){transition:transform .18s cubic-bezier(.16,1,.3,1),background-color .2s}
  body[data-page="albo-d-oro.html"] main :is(button,a.glass-card,.glass-card[onclick]):active{transform:scale(.97)}
  body[data-stile="2027"] .p-hero nav button{transition:transform .18s cubic-bezier(.16,1,.3,1)}
  body[data-stile="2027"] .p-hero nav button:active{transform:scale(.95)}
  body[data-stile="2027"] .p-hero nav button:hover{transform:translateY(-2px)}
}

/* le schede fuori dallo schermo non si disegnano finché non servono (216 piloti, 10 edizioni): scorrimento fluido */
body[data-page="albo-d-oro.html"] #riders-container > *{content-visibility:auto;contain-intrinsic-size:auto 322px auto 990px}
body[data-page="albo-d-oro.html"] #rankings-overview-grid > *{content-visibility:auto;contain-intrinsic-size:auto 430px auto 1180px}
body[data-page="albo-d-oro.html"] #ranking-tbody > tr,body[data-page="albo-d-oro.html"] #stages-tbody > tr{content-visibility:auto;contain-intrinsic-size:auto 68px}

/* schede dell'Albo d'Oro: la banda è l'elemento che scorre (js/home.js), non più il disegno sul singolo pulsante */
body[data-stile="2027"] .p-hero nav{position:relative}
body[data-stile="2027"] .p-hero nav.evidenza-js button[class*="bg-amber"]::before{background:transparent;animation:none}

/* Storia dell'Otto: foto intere (mai ritagliate), a righe giustificate: ogni riga ha la stessa altezza.
   --ar = larghezza/altezza della foto; la larghezza segue la proporzione e un tetto in altezza evita gli ingrandimenti eccessivi */
body[data-stile="2027"] .foto-riga{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:.75rem}
body[data-stile="2027"] .foto-riga>a{display:block;flex:calc(var(--ar)*100) 1 calc(var(--ar)*190px);max-width:calc(var(--ar)*400px);text-decoration:none}
body[data-stile="2027"] .foto-riga img{display:block;width:100%;height:auto;border:0;border-radius:0}
body[data-stile="2027"] .foto-riga .mappa-nota{margin-top:.35rem}
body[data-stile="2027"] .foto-singola{text-align:center}
body[data-stile="2027"] .foto-singola img{display:inline-block;width:auto;max-width:100%;max-height:640px;height:auto;border:0;border-radius:0}
@media (max-width:560px){
  body[data-stile="2027"] .foto-riga>a{flex-basis:calc(var(--ar)*230px);max-width:calc(var(--ar)*340px)}
}

/* Grafico dei punti bonus (Regolamento) */
.bonus-grafico{display:flex;align-items:flex-end;gap:4px;height:150px;margin-top:.75rem;padding-top:1.25rem}
.bonus-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}
.bonus-bar{display:block;flex:none;width:100%;height:calc(var(--v) * 4px);background:#2f4050;border-radius:3px 3px 0 0}
.bonus-col.top .bonus-bar{background:#FAA741}
.bonus-val{font-size:.7rem;line-height:1;color:#2f4050}
.bonus-pos{font-size:.65rem;line-height:1;color:#64748b}
@media (max-width:400px){.bonus-grafico{gap:2px}.bonus-val{font-size:.6rem}.bonus-pos{font-size:.55rem}}