/* PAGINA TAPPE — poche regole in più sopra il linguaggio della homepage:
   la testata con la foto grande, la griglia delle tappe e il regolamento. */

.tappe-hero{position:relative;min-height:660px;display:flex;align-items:flex-end;padding:220px 6% 70px;isolation:isolate;overflow:hidden}
.tappe-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tappe-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#081728,rgba(8,23,40,.25) 92%),linear-gradient(90deg,#081728d9,transparent 75%)}
.tappe-hero-copy{width:min(760px,100%)}
.tappe-hero h1{font-size:clamp(54px,6.6vw,104px);line-height:.98;margin-bottom:22px}
.tappe-hero h1 em{font-style:normal;color:var(--mint)}
.tappe-hero .intro{font-size:15px;line-height:1.8;color:#d9e2ea;max-width:620px;margin:0 0 30px}
.tappe-hero .hero-azioni{display:flex;flex-wrap:wrap;gap:12px}
.tappe-hero .hero-side{position:absolute;right:24px;top:210px;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:#cfdce8}

.tappe-calendario .section-heading h2 span{color:var(--mint)}
.tappe-calendario .cards{margin-top:10px}
.tappe-vuoto{font-size:15px;line-height:1.8;color:#b8c6d5;margin:0}

.tappe-regolamento-corpo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px}
.tappe-regolamento-corpo p{font-size:15px;line-height:1.8;color:#d9e2ea;max-width:620px;margin:0}
.tappe-regolamento-corpo .text-link{margin-top:0;width:290px}

/* il village riusa il blocco della community: qui serve solo la foto più alta */
#village .community-image img{height:520px;object-fit:cover}

@media(max-width:900px){
	#village{grid-template-columns:1fr;gap:34px}
}
@media(max-width:620px){
	.tappe-hero{min-height:560px;padding:170px 7% 45px}
	.tappe-hero h1{font-size:12.5vw;line-height:1.04}
	.tappe-hero .intro{font-size:13px}
	.tappe-hero .hero-side{display:none}
	.tappe-hero .hero-azioni .button{width:100%;justify-content:space-between}
	#village .community-image img{height:300px}
	.tappe-regolamento-corpo .text-link{width:100%}
}

/* con una tappa sola la scheda prende tutta la riga: due colonne con una
   casella vuota sembrerebbero un errore di caricamento */
.cards--unica{grid-template-columns:1fr}
.cards--unica .card{height:560px}
@media(max-width:620px){.cards--unica .card{height:420px}}

/* sugli schermi larghi le sezioni rientrano al 9%: la testata segue la stessa griglia */
@media(min-width:1600px){.tappe-hero{padding-left:9%;padding-right:9%}}