/* Il Giro — stile 2027 "le strisce" (usa i colori e i pulsanti di home.css).
   Solo per il-giro.html. Niente vetro, ombre, gradienti, numerazioni, monospazio, linee. */

.g-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--m);align-items:center;padding-top:clamp(40px,5vw,80px)}
.g-titolo{font-size:clamp(72px,11.5vw,200px);line-height:.86;font-weight:700;letter-spacing:-.03em;margin:0 0 0 -.03em}
.g-edizione{display:inline-block;margin:1.3rem 0 0;padding:6px 18px;background:var(--scuro);color:#fff;font-weight:700;font-size:18px}
.g-hero .h-lead{margin-top:1.3rem}
.g-foglio{width:min(100%,460px);justify-self:center;height:auto;display:block}

/* le quattro tappe come strisce inclinate: indice della pagina */
.g-nav{--gh:clamp(88px,8vw,112px);--gdx:calc(var(--gh) * var(--tan));display:flex;margin-top:clamp(32px,4vw,56px)}
.g-nav a{flex:1 1 0;min-width:0;height:var(--gh);display:flex;flex-direction:column;justify-content:center;
  padding:0 calc(var(--gdx) * .7) 0 calc(var(--gdx) + 8px);margin-left:calc(var(--gdx) * -1 + 6px);
  clip-path:polygon(var(--gdx) 0,100% 0,calc(100% - var(--gdx)) 100%,0 100%);
  color:var(--ink);text-decoration:none;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.g-nav a:first-child{margin-left:0}
.g-nav a:hover,.g-nav a:focus-visible{transform:translateY(-6px)}
.g-nav a:focus-visible{outline:3px solid var(--scuro);outline-offset:3px}
.g-nav .t1{background:var(--t1)} .g-nav .t2{background:var(--t2);color:#fff}
.g-nav .t3{background:var(--t3)} .g-nav .t4{background:var(--t4)}
.g-nav b{font-size:clamp(20px,2vw,32px);font-weight:700;line-height:1;display:block}
.g-nav span{font-size:16px;display:block;margin-top:.25em}

/* una tappa: banda di colore con il bordo destro inclinato, poi programma e mappa */
.g-tappa{padding-top:var(--step);scroll-margin-top:84px}
.g-tappa.t1{--sc:var(--s1)} .g-tappa.t2{--sc:var(--s2)} .g-tappa.t3{--sc:var(--s3)} .g-tappa.t4{--sc:var(--s4)}
.g-banda{--bh:clamp(190px,17vw,270px);--bdx:calc(var(--bh) * var(--tan));min-height:var(--bh);display:flex;align-items:center;color:var(--ink);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--bdx)) 100%,0 100%)}
.g-tappa.t1 .g-banda{background:var(--t1)} .g-tappa.t2 .g-banda{background:var(--t2);color:#fff}
.g-tappa.t3 .g-banda{background:var(--t3)} .g-tappa.t4 .g-banda{background:var(--t4)}
.g-banda-in{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-right:calc(var(--m) + var(--bdx))}
.g-giorno{font-size:clamp(20px,1.8vw,28px);font-weight:700;margin:0}
.g-nome{font-size:clamp(52px,7.5vw,128px);font-weight:700;line-height:.92;letter-spacing:-.02em;margin:.05em 0 0}
.g-azioni{display:flex;gap:12px;flex-wrap:wrap}
.g-corpo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--m) clamp(32px,5vw,88px);align-items:start;padding-top:clamp(28px,3.4vw,52px)}
.g-tappa.alt .g-mappa{order:-1}
.g-sotto h3{font-size:clamp(28px,2.6vw,40px);font-weight:700;line-height:1;margin:1.6rem 0 .9rem;color:var(--sc)}
.g-riga{display:grid;grid-template-columns:clamp(84px,8vw,124px) minmax(0,1fr);gap:6px 16px;align-items:baseline;padding:14px 18px;background:rgba(255,255,255,.72);margin-bottom:6px}
.g-ora{font-size:clamp(24px,2.2vw,34px);font-weight:700;line-height:1.1;color:var(--sc);letter-spacing:-.01em}
.g-ora-testo{font-size:clamp(20px,1.7vw,26px);line-height:1.2}
.g-riga span:last-child{font-size:18px;line-height:1.4}
.g-mappa{display:block;text-decoration:none;color:inherit}
.g-mappa img{width:100%;height:auto;display:block;background:#fff;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.g-mappa:hover img{transform:scale(1.01)}
.g-mappa span{display:inline-block;margin-top:.8rem;font-weight:700;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px}
.g-mappa:focus-visible{outline:3px solid var(--scuro);outline-offset:3px}

@media (max-width:600px){.g-riga{grid-template-columns:1fr}}
@media (max-width:900px){
  .g-hero{grid-template-columns:1fr}
  .g-foglio{width:min(70%,340px);justify-self:start}
  .g-nav{flex-direction:column}
  .g-nav a{margin:0 0 6px;height:auto;min-height:76px;padding:14px var(--m);clip-path:none}
  .g-nav a:hover,.g-nav a:focus-visible{transform:none}
  .g-banda{clip-path:none;padding:28px 0}
  .g-banda-in{padding-right:var(--m)}
  .g-corpo{grid-template-columns:1fr}
  .g-tappa.alt .g-mappa{order:0}
}