/* Home 2027 — "le strisce".
   Le quattro strisce inclinate del logo sono il segno grafico della pagina: tagliano la foto,
   formano le quattro tappe, chiudono la pagina. I richiami al passato restano sottili: fotografie in
   bianco e nero che prendono colore al passaggio, il numero di gara per il conto alla rovescia,
   il tratto delle illustrazioni, il carattere Cabrito. Solo per index.html.
   Niente vetro, ombre, gradienti, numerazioni, monospazio, linee. */

body[data-page="index.html"],body[data-page="il-giro.html"],body[data-page="news.html"]{
  --m:clamp(16px,3vw,44px);
  --ink:#0f1b24;            /* solo per i testi */
  --scuro:#2f4050;          /* tutti gli sfondi scuri: mai nero assoluto */
  --fondo:#f7f8f8;
  --grigio:#e9ecee;
  --t1:#1CB3BE; --t2:#0A744C; --t3:#FAA741; --t4:#F0596C;
  --s1:#0E7C85; --s2:#0A744C; --s3:#B26A0C; --s4:#C22F43;   /* le stesse tinte, abbastanza scure per il testo */
  --tan:.2126;                                               /* inclinazione 12° delle strisce del logo */
  --step:clamp(88px,11vw,180px);
  font-size:18px;line-height:1.55;color:var(--ink);
}
body[data-page="index.html"] main,body[data-page="il-giro.html"] main,body[data-page="news.html"] main{display:block;padding:0}  /* senza fondo: si vede la texture cemento del sito */
.h-wrap{padding-left:var(--m);padding-right:var(--m);max-width:1680px;margin:0 auto}
.h-sec{padding-top:var(--step)}
.h-h2{font-weight:700;letter-spacing:-.02em;line-height:.98;font-size:clamp(44px,6.2vw,100px);margin:0;text-wrap:balance}
.h-lead{font-size:clamp(20px,1.7vw,26px);line-height:1.4;max-width:38rem;margin:0}
.h-p{font-size:18px;line-height:1.6;max-width:38rem;margin:0}
.h-p+.h-p{margin-top:1rem}

.h-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 28px;white-space:nowrap;
  font-family:inherit;font-weight:700;font-size:18px;text-decoration:none;border:0;border-radius:0;
  background:var(--scuro);color:#fff;cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .2s}
.h-btn:hover{transform:translateY(-2px);background:#3f566b}
.h-btn:active{transform:translateY(0) scale(.98)}
.h-btn:focus-visible,.h-link:focus-visible,.h-tappa:focus-visible,.h-video:focus-visible{outline:3px solid var(--scuro);outline-offset:3px}
.h-btn.colore{background:var(--t3);color:var(--ink)} .h-btn.colore:hover{background:#ffb866}
.h-btn.chiaro{background:#fff;color:var(--ink)} .h-btn.chiaro:hover{background:var(--grigio)}
.h-link{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px}

/* ---------- 1. Prima schermata: il titolo a sinistra, la foto tagliata dalle strisce ---------- */
.h-hero{--hh:clamp(560px,min(calc(100svh - 74px),64vw),920px);  /* mai più alta di quanto la larghezza giustifichi */
  --dx:calc(var(--hh) * var(--tan));
  position:relative;height:var(--hh);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.h-hero-testo{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.8vw,26px);
  padding:var(--m) calc(var(--dx) * .5 + 1.5vw) var(--m) var(--m)}
.h-hero h1{margin:0;line-height:0}
.h-logo{display:block;width:min(100%,clamp(320px,36vw,580px));height:auto}
.h-hero-trofeo{font-weight:700;font-size:clamp(22px,2.2vw,36px);line-height:1.1;margin:.35em 0 0;color:var(--s2)}
.h-hero-dove{font-weight:700;font-size:clamp(26px,2.5vw,42px);line-height:1.05;margin:0}
.h-hero-claim{font-size:clamp(18px,1.5vw,22px);line-height:1.4;margin:.4em 0 0;max-width:26rem}
.h-hero-azioni{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.h-numero-gara{display:grid;place-items:center;align-content:center;width:clamp(104px,9vw,140px);aspect-ratio:1;border-radius:50%;background:var(--scuro);color:#fff;text-align:center;line-height:1}
.h-numero-gara b{font-size:clamp(38px,4vw,60px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.h-numero-gara span{font-size:clamp(10px,.9vw,13px);font-weight:700;margin-top:.3em;white-space:nowrap}
.h-hero-arte{position:relative}
.h-hero-foto{position:absolute;inset:0;overflow:hidden;background:var(--scuro);clip-path:polygon(var(--dx) 0,100% 0,100% 100%,0 100%)}
.h-hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease-in-out}
.h-hero-foto img.attiva{opacity:1}
.h-strisce{position:absolute;top:0;bottom:0;left:0;pointer-events:none}
.h-strisce i{position:absolute;top:-2px;bottom:-2px;width:clamp(14px,1.5vw,26px);transform:skewX(-12deg)}
/* le quattro strisce poggiano sul bordo inclinato della foto, a sinistra */
.h-strisce i:nth-child(1){left:calc(var(--dx) * .5 - 7.4vw);background:var(--t1)}
.h-strisce i:nth-child(2){left:calc(var(--dx) * .5 - 5.6vw);background:var(--t2)}
.h-strisce i:nth-child(3){left:calc(var(--dx) * .5 - 3.8vw);background:var(--t3)}
.h-strisce i:nth-child(4){left:calc(var(--dx) * .5 - 2.0vw);background:var(--t4)}
.h-credito{position:absolute;right:14px;bottom:12px;z-index:3;font-size:14px;color:#fff;text-decoration:none;background:rgba(47,64,80,.8);padding:3px 9px}
.h-credito:hover{text-decoration:underline}

/* ---------- 2. Le quattro tappe: quattro strisce che si incastrano ---------- */
.h-testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(24px,3vw,44px)}
.h-tappe{--th:clamp(380px,34vw,500px);--tdx:calc(var(--th) * var(--tan));display:flex;padding-left:0}
.h-tappa{flex:1 1 0;min-width:0;height:var(--th);display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(22px,2.4vw,36px) calc(var(--tdx) * .95 + 4px) clamp(22px,2.4vw,36px) calc(var(--tdx) + clamp(8px,1vw,16px));
  margin-left:calc(var(--tdx) * -1 + 8px);text-decoration:none;color:var(--ink);
  clip-path:polygon(var(--tdx) 0,100% 0,calc(100% - var(--tdx)) 100%,0 100%);
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.h-tappa:first-child{margin-left:0}
.h-tappa:hover,.h-tappa:focus-visible{transform:translateY(-10px)}
.h-tappa.t1{background:var(--t1)} .h-tappa.t2{background:var(--t2);color:#fff}
.h-tappa.t3{background:var(--t3)} .h-tappa.t4{background:var(--t4)}
.h-tappa-giorno{font-size:20px;font-weight:700;margin:0}
.h-tappa-nome{font-weight:700;font-size:clamp(32px,3.2vw,52px);line-height:.95;letter-spacing:-.02em;margin:0;text-wrap:balance}
.h-tappa-luoghi{font-size:18px;line-height:1.4;margin:.7em 0 0}
.h-riga-l{display:block;white-space:nowrap}
.h-tappa-vai{font-weight:700;font-size:18px;margin-top:1em;display:block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.h-tappa:hover .h-tappa-vai{transform:translateX(6px)}

/* ---------- 3. Numeri: grandi, nelle tinte scure delle tappe ---------- */
.h-numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,56px)}
.h-numero b{display:block;font-weight:700;font-size:clamp(60px,9vw,160px);line-height:.88;letter-spacing:-.03em}
.h-numero:nth-child(1) b{color:var(--s1)} .h-numero:nth-child(2) b{color:var(--s2)}
.h-numero:nth-child(3) b{color:var(--s3)} .h-numero:nth-child(4) b{color:var(--s4)}
.h-numero span{display:block;font-size:20px;margin-top:.6em;line-height:1.3;max-width:15rem}
.h-numero a{color:inherit;text-decoration:none;display:block}
.h-numero a:hover span{text-decoration:underline}

/* ---------- 4. Chi siamo: fotografia d'archivio in bianco e nero, testo, trofeo a tratto ---------- */
.h-chi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,110px);align-items:start}
.h-chi-foto{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transition:filter .8s}
.h-chi-foto:hover{filter:none}
.h-chi h2{margin-bottom:.5em}
.h-patrocini{display:flex;align-items:center;justify-content:center;max-width:38rem;gap:clamp(24px,3vw,48px);margin-top:clamp(24px,2.6vw,36px)}
.h-patrocini img{height:clamp(88px,8vw,124px);width:auto;display:block}
.h-trofeo{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:24px;align-items:center;margin-top:clamp(28px,3vw,44px);background:var(--grigio);padding:clamp(20px,2.4vw,32px)}
.h-trofeo img{width:100%;height:auto;display:block}
.h-trofeo h3{font-size:clamp(26px,2.3vw,36px);line-height:1;margin:0 0 .4em;font-weight:700}
.h-trofeo p{margin:0 0 .6em;font-size:17px;line-height:1.5}

/* ---------- 5. Il territorio: foto in movimento con il bordo inclinato ---------- */
.h-territorio{background:var(--scuro);color:#fff}
.h-territorio-media{--mh:clamp(320px,38vw,620px);position:relative;height:var(--mh);overflow:hidden;background:var(--scuro);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--mh) * var(--tan) * .6),0 100%)}
.h-territorio-media iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none}
.h-territorio-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-territorio-testo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,6vw,110px);padding:clamp(24px,3vw,48px) var(--m) clamp(56px,7vw,110px);align-items:start;max-width:1680px;margin:0 auto}
.h-territorio .h-lead{margin-bottom:1.4rem}
.h-territorio-azioni{display:flex;gap:12px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.h-territorio-media iframe{display:none}}

/* ---------- 6. I tre pilastri: tre fotografie che prendono colore ---------- */
.h-giro{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,56px);align-items:start}
.h-giro article:nth-child(2){margin-top:clamp(40px,7vw,120px)}
.h-giro img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;filter:grayscale(1);transition:filter .8s}
.h-giro article:hover img{filter:none}
.h-giro h3{font-weight:700;font-size:clamp(34px,3.4vw,56px);line-height:1;letter-spacing:-.02em;margin:.7em 0 .3em}
.h-giro article:nth-child(1) h3{color:var(--s1)} .h-giro article:nth-child(2) h3{color:var(--s2)} .h-giro article:nth-child(3) h3{color:var(--s4)}
.h-giro p{margin:0;font-size:18px;line-height:1.5;max-width:26rem}

/* ---------- 7. Aftermovie ---------- */
.h-videoblocco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(24px,4vw,72px);align-items:center}
.h-videoblocco .h-h2{font-size:clamp(40px,4.6vw,76px)}
.h-videoblocco .h-lead{margin:.6em 0 1.4rem}
.h-video{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--scuro);cursor:pointer;overflow:hidden}
.h-video img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.h-video:hover img{transform:scale(1.03)}
.h-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.h-video-play{position:absolute;left:var(--m);bottom:var(--m);display:flex;align-items:center;gap:16px;color:#fff;font-weight:700;font-size:clamp(17px,1.4vw,22px)}
.h-video-play i{display:grid;place-items:center;width:clamp(60px,5vw,88px);height:clamp(60px,5vw,88px);background:var(--t3);border-radius:50%;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.h-video:hover .h-video-play i{transform:scale(1.08)}
.h-video-play span{background:rgba(47,64,80,.85);padding:5px 12px}
.h-nota{font-size:16px;margin:.9rem 0 0}

/* ---------- 8. Ultime notizie (schede scritte da build_news.py: qui solo l'aspetto) ---------- */
.h-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.h-news-grid .news-card{background:none;border:0;box-shadow:none;border-radius:0;padding:0;color:inherit;backdrop-filter:none;-webkit-backdrop-filter:none;transition:none;overflow:hidden;display:flex;flex-direction:column}
.h-news-grid .news-card:hover{background:none;box-shadow:none;transform:none}
.h-news-grid .news-card::after{display:none}
.h-news-grid .news-card[class*="tappa-"]::before{content:'';display:block;height:8px;background:var(--t);margin-bottom:12px}
.h-news-grid .news-cover{border:0;border-radius:0;aspect-ratio:16/9;object-position:center top;margin:0 0 1rem;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.h-news-grid .news-card:hover .news-cover{transform:scale(1.03)}
.h-news-grid .news-date{order:3;margin-top:.8em;font-family:inherit;font-size:16px;font-weight:600;letter-spacing:0;color:var(--ink)}
.h-news-grid .news-title{font-weight:700;font-size:clamp(26px,2.3vw,36px);line-height:1.05;margin:0 0 .4em;letter-spacing:-.01em}
.h-news-grid .news-excerpt{font-size:17px;line-height:1.5;color:#2a3a47}

/* ---------- 9. Chiusura: le strisce tornano ---------- */
.h-fine{position:relative;overflow:hidden;background:#2f4050;  /* meno nero: lo stesso tono del footer */color:#fff;padding:clamp(64px,8vw,140px) 0;margin-top:var(--step)}
.h-fine .h-wrap{position:relative;z-index:1;padding-right:calc(30vw + var(--m));display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px 80px;align-items:end}
.h-fine h2{margin:0}
.h-fine p{margin:0 0 1.4rem;font-size:20px;line-height:1.45;max-width:32rem}
.h-fine-strisce{position:absolute;top:0;bottom:0;right:-2vw;width:30vw}
.h-fine-strisce i{position:absolute;top:-2px;bottom:-2px;width:clamp(30px,5vw,80px);transform:skewX(-12deg)}
.h-fine-strisce i:nth-child(1){right:24vw;background:var(--t1)} .h-fine-strisce i:nth-child(2){right:18vw;background:var(--t2)}
.h-fine-strisce i:nth-child(3){right:12vw;background:var(--t3)} .h-fine-strisce i:nth-child(4){right:6vw;background:var(--t4)}

/* ---------- transizione tra le foto: le quattro bande scorrono lungo la propria diagonale ----------
   Quattro bande della stessa larghezza, affiancate, inclinate come quelle del logo. Ognuna scorre lungo il
   proprio asse diagonale (translateY dopo skewX): una sale, la vicina scende, così non si sovrappongono mai
   e hanno sempre la stessa ampiezza. Partenze scaglionate, curva di Bézier continua, nessuna sosta.
   La foto cambia quando le bande la coprono. Solo transform e opacity. */
.h-sweep{--sdx:var(--dx);position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;clip-path:polygon(var(--dx) 0,100% 0,100% 100%,0 100%)}
/* il bordo sinistro della foto è esso stesso una diagonale come le bande: la prima banda parte da lì */
.h-sweep i{position:absolute;top:-50%;bottom:-50%;width:27%;opacity:0;transform:skewX(-12deg)}
.h-sweep i:nth-child(1){left:calc(var(--sdx) * .5 - 1%);background:var(--t1)}
.h-sweep i:nth-child(2){left:calc(var(--sdx) * .5 + 26%);background:var(--t2)}
.h-sweep i:nth-child(3){left:calc(var(--sdx) * .5 + 53%);background:var(--t3)}
.h-sweep i:nth-child(4){left:calc(var(--sdx) * .5 + 80%);background:var(--t4)}
.h-sweep.passa i{animation:h-su 1.4s cubic-bezier(.65,0,.35,1) both}
.h-sweep.passa i:nth-child(even){animation-name:h-giu}
.h-sweep.passa i:nth-child(2){animation-delay:.04s} .h-sweep.passa i:nth-child(3){animation-delay:.08s} .h-sweep.passa i:nth-child(4){animation-delay:.12s}
@keyframes h-su{from{opacity:1;transform:skewX(-12deg) translateY(80%)}to{opacity:1;transform:skewX(-12deg) translateY(-80%)}}
@keyframes h-giu{from{opacity:1;transform:skewX(-12deg) translateY(-80%)}to{opacity:1;transform:skewX(-12deg) translateY(80%)}}
.h-hero-foto.passa-foto img{transition-duration:.6s}  /* la nuova foto sfuma sotto le bande, anche dove non la coprono */
@media (prefers-reduced-motion:reduce){.h-sweep{display:none}}

/* ---------- movimento: solo opacity e transform ---------- */
@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}
  .h-hero-foto img.attiva{animation:h-deriva 9s ease-out forwards}
  @keyframes h-deriva{from{transform:scale(1)}to{transform:scale(1.07)}}
  .h-hero-testo>*{animation:h-sale .9s cubic-bezier(.16,1,.3,1) both}
  .h-hero-testo>*:nth-child(2){animation-delay:.1s}.h-hero-testo>*:nth-child(3){animation-delay:.2s}
  .h-strisce i{animation:h-entra 1s cubic-bezier(.16,1,.3,1) both}
  .h-strisce i:nth-child(2){animation-delay:.08s}.h-strisce i:nth-child(3){animation-delay:.16s}.h-strisce i:nth-child(4){animation-delay:.24s}
  @keyframes h-sale{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  @keyframes h-entra{from{transform:translateY(-100%) skewX(-12deg)}to{transform:skewX(-12deg)}}
}

/* finestre strette ma non ancora a una colonna: più spazio al testo e al logo */
@media (min-width:901px) and (max-width:1250px){
  .h-hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .h-hero-testo{padding-right:calc(var(--dx) * .5 + 1vw)}
}

/* ---------- tablet e telefono ---------- */
@media (max-width:900px){
  .h-hero{height:auto;grid-template-columns:1fr}
  .h-hero-testo{padding:var(--m);align-items:center;text-align:center}
  .h-hero-testo .h-logo{margin-inline:auto}
  .h-hero-claim{margin-inline:auto}
  .h-hero-azioni{justify-content:center}
  .h-hero-arte{height:min(56vw,34svh);min-height:200px;order:-1}
  .h-hero-foto{clip-path:none}
  .h-sweep{--sdx:0px;clip-path:none}
  .h-sweep i{width:34%}
  .h-sweep i:nth-child(1){left:-14%} .h-sweep i:nth-child(2){left:16%} .h-sweep i:nth-child(3){left:46%} .h-sweep i:nth-child(4){left:76%}
  .h-strisce{top:auto;bottom:0;left:0;right:0;height:12px;display:flex}
  .h-strisce i{position:static;flex:1;width:auto;transform:none;top:auto;bottom:auto}
  .h-tappe{flex-direction:column}
  .h-tappa{height:auto;min-height:220px;margin:0;clip-path:none;padding:24px var(--m)}
  .h-tappa:hover,.h-tappa:focus-visible{transform:none}
  .h-numeri{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .h-chi{grid-template-columns:1fr}
  .h-chi-foto{aspect-ratio:3/2}
  .h-territorio-testo{grid-template-columns:1fr}
  .h-giro{grid-template-columns:1fr}
  .h-giro article:nth-child(2){margin-top:0}
  .h-giro img{aspect-ratio:3/2}
  .h-videoblocco{grid-template-columns:1fr}
  .h-news-grid{grid-template-columns:1fr}
  .h-fine .h-wrap{grid-template-columns:1fr}
  .h-fine .h-wrap{padding-right:var(--m)}
  .h-fine-strisce{display:none}  /* sul telefono ci pensa la striscia in cima al footer */
}
@media (max-width:600px){
  body[data-page="index.html"],body[data-page="il-giro.html"],body[data-page="news.html"]{font-size:17px}
  .h-hero h1{font-size:clamp(52px,16vw,110px)}
  .h-trofeo{grid-template-columns:96px 1fr;gap:16px}
}