/* Verona tutto l'anno (piano 0047, bozza locale del 14/10). Classi va-; caratteri e colori del sito.
   Computer: indice e filtri in una colonna fissa a sinistra, contenuto che scorre a destra (Brian 14/10).
   Telefono (sotto i 1000 px): l'indice diventa una barra in alto che scorre di lato, i filtri stanno sotto. */
#room.va{--va-testata:110px;--va-barra:0px}
/* foto di apertura: stessa cornice delle altre pagine (1120x689), foto orizzontale */
#room.va .va-apertura .imago{max-width:1120px;margin:0 auto}
#room.va .va-apertura .imago img{display:block;width:100%;height:auto;aspect-ratio:1120/689;object-fit:cover}

/* etichetta col filetto, come in tutto il sito */
#room.va .va-sezione>h6{font-size:16px;letter-spacing:.1em;font-weight:500;text-transform:uppercase;color:#000;padding-left:75px;position:relative;display:inline-block;margin-bottom:1.6em}
#room.va .va-sezione>h6:before{content:'';height:1px;position:absolute;top:50%;width:66px;background:#000;left:0}
#room.va .va-sezione>h2{font-family:'Didot',serif;font-style:italic;font-size:52px;line-height:1.05em;color:#000;margin:0 0 .4em}
#room.va h3{font-family:'Didot',serif;font-size:32px;line-height:1.1em;color:#000;margin:1.4em 0 .6em}
#room.va p,#room.va li{font-size:18px;line-height:1.55em;color:#3A3A3A}
#room.va a{color:#000;text-decoration:underline;text-underline-offset:.18em}
#room.va a:focus-visible,#room.va button:focus-visible{outline:2px solid #000;outline-offset:3px}
#room.va li{margin:0}

/* In breve */
#room.va .va-breve{max-width:1120px;margin:0 auto;padding:22px 40px 0;text-align:center}
#room.va .va-breve p{margin:0}

/* le due colonne */
#room.va .va-zona{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 64px;max-width:1200px;margin:0 auto;padding:0 40px;box-sizing:border-box}
#room.va .va-lato{position:sticky;top:calc(var(--va-testata) + 20px);align-self:start;max-height:calc(100dvh - var(--va-testata) - 40px);overflow-y:auto;padding:40px 4px 16px 0;box-sizing:border-box;scrollbar-width:thin}
#room.va .va-contenuto{min-width:0}
/* fascia bianca dietro la testata trasparente mentre si scorre la zona con l'indice: il testo non passa sotto marchio e menu */
#room.va.va-dentro:before{content:'';position:fixed;top:0;left:0;right:0;height:var(--va-testata);background:#fff;z-index:1;pointer-events:none}
/* al computer la fascia scende di 16 px: dopo un clic dell'indice non resta una striscia della sezione di sopra */
@media (min-width:1000px){#room.va.va-dentro:before{height:calc(var(--va-testata) + 16px)}}

/* indice */
#room.va .va-lato-et,#room.va .va-filtri-et{margin:0 0 .7em;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#000;font-family:'Futura PT',sans-serif}
#room.va .va-barra ul{list-style:none;margin:0;padding:0}
#room.va .va-barra>ul{border-left:1px solid #e6e0d8}
#room.va .va-barra li{position:relative}
#room.va .va-barra a{display:flex;align-items:center;min-height:34px;padding:0 0 0 16px;margin-left:-1px;font-family:'Futura PT',sans-serif;font-size:18px;line-height:1.2;color:#6E6E6E;text-decoration:none;border-left:2px solid transparent;box-sizing:border-box}
#room.va .va-barra a:hover{color:#000}
#room.va .va-barra a[aria-current="true"]{color:#000;border-left-color:#000}
#room.va .va-corto{display:none}
#room.va .va-oggi{display:block;margin:-8px 0 4px 16px;font-size:13px;line-height:1.2;color:#5c5c5c;font-style:italic}
#room.va .va-oggi:before{content:'• '}
/* i mesi si aprono sotto il periodo in vista */
#room.va .va-sotto{display:none;padding:0 0 6px 14px!important}
#room.va .va-p.va-aperto .va-sotto{display:block}
#room.va .va-sotto a{min-height:30px;font-size:16px}
#room.va .va-p+.va-altre{margin-top:10px;border-top:1px solid #e6e0d8;padding-top:10px}

/* filtri */
#room.va .va-filtri{margin-bottom:28px}
#room.va .va-filtri [role=group]{display:flex;flex-wrap:wrap;gap:0 18px}
#room.va .va-filtri button{display:flex;align-items:center;gap:10px;font-family:'Futura PT',sans-serif;font-size:18px;color:#6E6E6E;background:none;border:0;min-height:36px;padding:0;cursor:pointer;text-align:left}
#room.va .va-filtri button:before{content:'';flex:none;width:14px;height:14px;border:1px solid #9a9a9a;border-radius:50%;box-sizing:border-box}
#room.va .va-filtri button:hover{color:#000}
#room.va .va-filtri button[aria-pressed="true"]{color:#000}
#room.va .va-filtri button[aria-pressed="true"]:before{border:4px solid #000}
#room.va .va-annuncio{position:absolute;left:-9999px}
/* promemoria del filtro attivo: solo al telefono (al computer i filtri restano in vista) */
#room.va .va-attivo{display:none!important}

/* sezioni */
#room.va .va-sezione{padding:56px 0 0;scroll-margin-top:calc(var(--va-testata) + var(--va-barra) + 16px)}
#room.va .va-mese{scroll-margin-top:calc(var(--va-testata) + var(--va-barra) + 16px)}
#room.va .va-mese h3 .va-anno{font-family:'Futura PT',sans-serif;font-size:16px;color:#6E6E6E;letter-spacing:.05em}
#room.va .va-frase-periodo{max-width:40em}
#room.va .va-mesi{font-family:'Futura PT',sans-serif;font-size:20px;color:#6E6E6E}
#room.va .va-mesi a{display:inline-block;padding:10px 2px}
#room.va .va-mesi span{color:#767676}
/* foto di sezione, come le immagini larghe delle altre pagine */
#room.va .va-foto{margin:26px 0 8px}
#room.va .va-foto img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}

/* Adesso: un elenco, non riquadri */
#room.va .va-adesso{list-style:none;margin:0;padding:0;border-top:1px solid #e6e0d8}
#room.va .va-adesso li{border-bottom:1px solid #e6e0d8}
#room.va .va-adesso a{display:grid;grid-template-columns:12em 1fr auto;gap:4px 24px;padding:14px 0;text-decoration:none}
#room.va .va-a-data{font-family:'Futura PT',sans-serif;color:#000}
#room.va .va-a-nome{font-family:'Didot',serif;font-size:22px;color:#000}
#room.va .va-adesso a:hover .va-a-nome{text-decoration:underline}
#room.va .va-a-dist{font-style:italic;color:#6E6E6E;text-align:right}
#room.va .va-tutto{margin-top:1em}

/* bacheca e riquadri: stesse righe nello stesso ordine */
#room.va .va-bacheca{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
#room.va .va-q{padding:26px 24px 22px}
#room.va .va-q p{margin:0}
#room.va .va-evento{background:#FDF1EA}
#room.va .va-consiglio{background:#fff;position:relative;padding:30px 0 6px}
#room.va .va-consiglio:before{content:'';position:absolute;top:0;left:0;width:66px;height:1px;background:#000}
#room.va .va-tipo{font-family:'Futura PT',sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#000}
#room.va .va-q h4{font-family:'Didot',serif;font-size:27px;line-height:1.1em;color:#000;margin:.35em 0 .4em}
#room.va .va-quando{font-family:'Futura PT',sans-serif;color:#000}
#room.va .va-corso,#room.va .va-adesso em{font-style:italic;color:#5c5c5c}
#room.va .va-dist{font-style:italic;color:#5c5c5c;font-size:16px}
#room.va .va-frase{margin-top:.6em!important}
#room.va .va-fonte{margin-top:.8em!important}
#room.va .va-fonte a{display:inline-block;padding:10px 0;margin:-10px 0}
#room.va .va-ridotto{background:#fff;border:1px solid #f0dccd}
#room.va .va-ridotto h4{font-size:22px}
/* immagine sopra ogni evento (goal 19/10): a filo dei bordi del riquadro, 2:1 */
#room.va .va-img{display:block;margin:-26px -24px 20px}
#room.va .va-img img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
#room.va .va-ridotto{align-self:start}
#room.va .va-crediti{margin-top:40px;font-size:14px;color:#6E6E6E}
#room.va .va-crediti summary{cursor:pointer;font-family:'Futura PT',sans-serif;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
#room.va .va-crediti p{margin-top:.6em;line-height:1.5em}

/* due colonne: Tutto l'anno, Vicino a casa, Come arrivare */
#room.va .va-colonne{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
#room.va .va-righe-luoghi{list-style:none;margin:0;padding:0}
#room.va .va-righe-luoghi li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #e6e0d8;padding:9px 0}
#room.va .va-min{white-space:nowrap;color:#000;font-family:'Futura PT',sans-serif}
#room.va .va-nota{font-style:italic;color:#6E6E6E;font-size:16px;margin-top:.8em}

#room.va [hidden],#room.va .va-q[hidden]{display:none!important}
#room.va .conversione{margin-top:90px}

/* schermi bassi del computer (portatili, testata del sito alta 160 px): la colonna si stringe per entrare intera */
@media (min-width:1000px) and (max-height:820px){
	#room.va .va-lato{padding:16px 4px 8px 0}
	#room.va .va-lato-et{display:none}
	#room.va .va-filtri{margin-bottom:14px}
	#room.va .va-filtri-et{margin-bottom:.3em}
	#room.va .va-filtri button{min-height:30px;font-size:16px}
	#room.va .va-barra a{min-height:28px;font-size:16px}
	#room.va .va-sotto a{min-height:26px;font-size:15px}
	#room.va .va-oggi{position:absolute;right:0;top:7px;margin:0}
	#room.va .va-p+.va-altre{margin-top:6px;padding-top:6px}
}
@media (max-width:999px){
	/* telefono e tablet: l'indice torna una barra in alto, sotto la testata del sito, e i filtri sotto */
	#room.va .va-zona{display:flex;flex-direction:column;padding:0}
	#room.va .va-barra{order:1}
	#room.va .va-filtri{order:2}
	#room.va .va-contenuto{order:3}
	#room.va .va-lato{display:contents}
	#room.va .va-barra{position:sticky;top:var(--va-testata);z-index:2;background:#fff;border-bottom:1px solid #e6e0d8}
	#room.va .va-lato-et,#room.va .va-sotto,#room.va .va-lungo{display:none!important}
	#room.va .va-corto{display:inline}
	/* tutte le voci in una riga che scorre di lato; la sfumatura a destra dice che ce ne sono altre */
	#room.va .va-barra>ul{display:flex;gap:0 13px;border:0;padding:0 12px;margin:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
	#room.va .va-barra>ul::-webkit-scrollbar{display:none}
	#room.va .va-barra>ul.va-fine{-webkit-mask-image:none;mask-image:none}
	#room.va .va-barra li{flex:none}
	#room.va .va-p+.va-altre{margin:0;padding:0;border:0}
	#room.va .va-barra a{min-height:50px;padding:0 2px 8px;margin:0;border-left:0;border-bottom:2px solid transparent;font-size:15px;white-space:nowrap}
	#room.va .va-barra a[aria-current="true"]{border-bottom-color:#000}
	#room.va .va-oggi{position:absolute;left:0;right:0;bottom:2px;margin:0;font-size:12px;line-height:1;text-align:center;white-space:nowrap;pointer-events:none}
	#room.va .va-attivo:not([hidden]){display:flex!important;justify-content:space-between;align-items:center;margin:0;padding:0 20px;background:#FDF1EA;font-family:'Futura PT',sans-serif;font-size:15px;color:#000}
	#room.va .va-attivo button{font:inherit;color:#000;background:none;border:0;min-height:40px;padding:0;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
	#room.va .va-filtri{margin:0;padding:8px 20px 0}
	#room.va .va-filtri button{min-height:44px}
	#room.va .va-filtri [role=group]{flex-direction:row;flex-wrap:wrap;gap:0 18px}
	#room.va .va-filtri-et{display:none}
	#room.va .va-contenuto,#room.va .va-breve{padding-left:20px;padding-right:20px}
	#room.va .va-sezione{padding-top:48px;scroll-margin-top:calc(var(--va-testata) + var(--va-barra))}
	#room.va .va-bacheca{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699px){
	#room.va .va-bacheca,#room.va .va-colonne{grid-template-columns:1fr}
	#room.va .va-sezione>h2{font-size:38px}
	#room.va .va-breve{padding-top:16px}
	#room.va .va-adesso a{grid-template-columns:1fr}
	#room.va .va-a-dist{text-align:left}
	#room.va .va-foto img{aspect-ratio:3/2}
	/* al telefono titolo e sottotitolo coprono la foto in alto e in basso: cornice quadrata, il ponte resta in vista */
	#room.va .va-apertura .imago img{aspect-ratio:1/1;object-position:48% center}
	#room.va{padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}