/*
 * Bastardini – TELEFONO E TABLET, parte animazioni (giro del 23/10 notte, chat Animazioni).
 * Regole SOLO per il telefono (max-width: 767px) e per il tablet (768–1024 px): il computer (da 1025 px) non cambia mai.
 * Le regole stanno sulle classi (mai sui numeri dei blocchi). I pezzi creati dagli script del plugin (pulsanti, frecce,
 * pannelli) hanno classi che iniziano con "bst-". Ogni blocco dice quale script lo usa e come spegnerlo.
 * Caricato in tutte le pagine da bastardini-cms.php (cercare "telefono-tablet.css").
 */


/* ===== T1 – APERTURA DELLA HOME SUL TELEFONO =====
   Sul computer il riquadro del video è alto quanto lo schermo meno barra blu e menu (variabile altezza-apertura, con svh per
   la barra del browser): così video, logo e menu stanno tutti nel primo schermo. Sul telefono Elementor usava un'altra misura
   (altezza-apertura-mobile, che toglie DUE volte il menu): ora vale la stessa del computer. Il riquadro è il blocco subito
   prima del logo (data-bst-logo="estruso"; lo script del logo lo avvolge in .bst-logo-pausa). */
@media (max-width: 767px) {
	.elementor .elementor-element:is(:has(+ [data-bst-logo="estruso"]), :has(+ .bst-logo-pausa)) { min-height: var(--altezza-apertura); }
	/* (T86) da collegati WordPress aggiunge in cima la sua barra nera alta 46 px (misura fissa di WordPress sul telefono): il
	   riquadro si accorcia di altrettanto, così anche da collegati il menu sta in fondo al primo schermo visibile. (In T28
	   era stata tolta perché il menu vero spuntava sotto la copia: ora lo impedisce la regola «T73».) */
	body.admin-bar .elementor .elementor-element:is(:has(+ [data-bst-logo="estruso"]), :has(+ .bst-logo-pausa)) { min-height: calc(var(--altezza-apertura) - var(--altezza-barra-admin)); }
	/* (T97) con l'effetto del logo attivo (classe messa da logo-estruso.js) il riquadro del video continua sotto il bordo dello
	   schermo visibile per lo spazio delle barre del browser (--bst-barre): il logo sale di altrettanto (lo fa lo script), così
	   quando le barre spariscono sotto il logo c'è ancora il video e non il fondo nero */
	/* (A, 25/10 notte) L'allungamento non è più la misura delle barre presa dallo script all'apertura (--bst-barre: su Chrome
	   per iPhone valeva ~0, e quando la barra in basso si richiudeva sotto il video compariva una fascia scura). Ora è
	   --bst-allungo: differenza tra lo schermo con le barre richiuse (100lvh, unità FISSA: non cambia quando le barre si
	   muovono, W3C CSS Values 4 §6.1.2) e lo schermo misurato all'apertura (--bst-schermo, schermo-fisso.js), più una riserva
	   (--bst-riserva-video) per i browser che misurano male. Il video arriva sempre oltre il fondo dello schermo; il logo
	   resta in fondo allo schermo visibile all'apertura (lo script, o invito-scroll.js con «riduci movimento», lo alza di
	   --bst-allungo). Vale anche con «riduci movimento». */
	html.bst-apertura-lunga {
		--bst-riserva-video: 24px;
		--bst-allungo: calc(max(0px, 100lvh - var(--bst-schermo, 100lvh)) + var(--bst-riserva-video));
	}
	html.bst-apertura-lunga .elementor .elementor-element:is(:has(+ [data-bst-logo="estruso"]), :has(+ .bst-logo-pausa)) { min-height: calc(var(--altezza-apertura) + var(--bst-allungo)); }
	html.bst-apertura-lunga body.admin-bar .elementor .elementor-element:is(:has(+ [data-bst-logo="estruso"]), :has(+ .bst-logo-pausa)) { min-height: calc(var(--altezza-apertura) - var(--altezza-barra-admin) + var(--bst-allungo)); }
}


/* ===== T3 – MENU "BURGER" SUL TELEFONO (script menu-burger.js) =====
   Sul telefono nella barra restano il pittogramma e il pulsante a tre righe (bst-burger), che prende il posto delle 4 voci.
   Il pannello (bst-menu-pannello) è blu a tutto schermo e copre TUTTO, anche la barra blu e il pittogramma (T25): in alto a
   destra solo la X, al centro le
   voci in Bastardini (misura bastardini-90 con l'adattamento alla larghezza, come la classe adatta-90-10), sotto ogni voce
   la sua tendina in Season Sans. Da 768 px burger e pannello non si vedono: tablet e computer restano come prima. */
@media (max-width: 767px) {
	.elementor nav.bst-con-burger > .voce-con-tendina { display: none; }
	.elementor nav.bst-con-burger > .bst-burger {
		display: flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: flex-end;
		margin: 0; padding: 0 var(--margine); border: 0; border-radius: 0;
		background: var(--rosa); color: var(--nero); cursor: pointer;
	}
}
/* (T24) l'icona segue la misura del pittogramma: 3 volte più grande insieme a lui (vedi blocco «T24») */
.bst-burger-icona {
	display: block; inline-size: calc(var(--bst-icona-menu, var(--altezza-pittogramma-menu)) * 1.414); block-size: calc(var(--bst-icona-menu, var(--altezza-pittogramma-menu)) * 0.943);
	background:
		linear-gradient(var(--nero), var(--nero)) top / 100% var(--linea) no-repeat,
		linear-gradient(var(--nero), var(--nero)) center / 100% var(--linea) no-repeat,
		linear-gradient(var(--nero), var(--nero)) bottom / 100% var(--linea) no-repeat;
}
.elementor .bst-burger:focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: calc(-2 * var(--linea)); }
.bst-menu-chiudi:focus-visible { outline: var(--linea) solid var(--nero); outline-offset: calc(-1 * var(--linea)); }
@media (min-width: 768px) {
	.elementor .bst-burger, .bst-menu-radice { display: none !important; }
}
/* (T25) niente più "overflow: hidden" sulla pagina (su iPhone la faceva tornare in cima): il pannello scorre da solo e
   non passa lo scorrimento alla pagina sotto (overscroll-behavior); chiudendolo si resta dove si era. */
.bst-menu-pannello {
	position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column;
	background: var(--azzurro); color: var(--nero); overflow-y: auto; overscroll-behavior: contain;
	opacity: 0; transform: translateY(calc(-2 * var(--margine)));
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.bst-menu-pannello.bst-visibile { opacity: 1; transform: none; }
.bst-menu-pannello[hidden] { display: none; }
/* (T25) in alto solo la X, a destra, sul blu (niente barra, niente pittogramma); grande come il burger */
.bst-menu-testa { flex: 0 0 auto; display: flex; justify-content: flex-end; }
.bst-menu-chiudi {
	display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--margine);
	border: 0; border-radius: 0; background: transparent; color: var(--nero); cursor: pointer;
}
.bst-menu-chiudi-icona { position: relative; display: block; inline-size: calc(var(--bst-icona-menu, var(--altezza-pittogramma-menu)) * 1.1); block-size: calc(var(--bst-icona-menu, var(--altezza-pittogramma-menu)) * 1.1); }
.bst-menu-chiudi-icona::before, .bst-menu-chiudi-icona::after {
	content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: var(--linea);
	margin-block-start: calc(var(--linea) / -2); background: var(--nero); transform: rotate(45deg);
}
.bst-menu-chiudi-icona::after { transform: rotate(-45deg); }
/* le voci: impilate e centrate, al centro dello spazio sotto la barra */
.bst-menu-voci {
	list-style: none; margin: auto 0; flex: 1 0 auto; justify-content: center; padding: calc(2 * var(--margine)) var(--margine);
	display: flex; flex-direction: column; align-items: center; gap: calc(1.5 * var(--margine)); text-align: center;
}
.bst-menu-voce-riga { display: flex; flex-direction: column; align-items: center; }
.bst-menu-voce {
	display: inline-block; padding: calc(var(--margine) / 2) var(--margine);
	font-family: var(--font-bastardini); font-weight: 400; text-transform: uppercase; line-height: 0.93;
	font-size: min(var(--bastardini-90), calc((100vw - 2 * var(--linea) - 2 * var(--margine)) / 8));
	color: var(--nero); text-decoration: none;
}
.bst-menu-sotto { list-style: none; margin: 0; padding: calc(var(--margine) / 2) 0 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--margine) / 4); }
.bst-menu-sotto[hidden] { display: none; }
.bst-menu-sottovoce {
	display: inline-block; padding: calc(var(--margine) / 2) var(--margine);
	font-family: var(--font-season-sans); font-weight: 400; font-size: var(--season-30); line-height: 1.2; text-transform: uppercase;
	color: var(--nero); text-decoration: none;
}
.bst-menu-radice .bst-menu-pannello a:is(:hover, :focus-visible), .bst-menu-radice .bst-menu-voce[aria-expanded="true"] {
	color: var(--nero); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 0.12em;
}
.bst-menu-pannello a:focus-visible { outline: var(--linea) solid var(--nero); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
	.bst-menu-pannello { transition: none; transform: none; }
}


/* ===== T24 – BARRA IN ALTO PIÙ GRANDE SUL TELEFONO (23/10 mattina) =====
   Solo fino a 767 px. Pittogramma (logo) e icona burger 1,5 volte più grandi (l'utente: ×3 era troppo, la metà): si moltiplica la variabile del pittogramma e il
   menu cresce della stessa misura (stessi margini di prima). Scritta «Iscriviti alla newsletter →» 2 volte più grande e barra
   blu alta il doppio, in proporzione; la scritta si rimpicciolisce solo se non entra nello schermo (telefoni da 320–390 px:
   il testo è largo circa 16,2 volte la sua misura). Le altezze che dipendono da barra e menu (apertura della Home, menu
   agganciato, ancore) usano le variabili e seguono da sole. Le variabili del tablet (kit, «MENU COMPATTO») non cambiano. */
@media (max-width: 767px) {
	html:root {
		/* (T29, 23/10) barra del menu alta il DOPPIO di prima (da 33 a 62 px a 393): pittogramma e margini ×2 */
		--altezza-pittogramma-menu: calc(1.5 * max(1.75rem, 2.1875vw));
		--altezza-menu: calc(1.5 * max(1.75rem, 2.1875vw) + 2 * max(0.5rem, 0.6771vw));
		/* (T29) burger e X restano della misura del giro 2 (pittogramma da 21 px a 393): non crescono con la barra */
		--bst-icona-menu: calc(0.75 * max(1.75rem, 2.1875vw));
	}
	/* arrotondata al pixel intero: con le frazioni (38,3 px) sugli schermi densi la linea sotto la barra veniva sfocata o di spessore diverso */
	/* (T67, 23/10 giro 3) la scritta della barra passa alla misura MEDIA (season-30, 17,3 px a 393) in Bastardini Sans, al posto di corpo-barra
	   ×2; limite alla larghezza per i telefoni stretti (320 px: il testo è ≈ 18,4 volte la misura). La barra segue con gli STESSI margini interni di
	   prima: altezza di prima − riga di prima (1,35 × misura vecchia) + riga nuova (1,35 × misura nuova). */
	html body[class] {
		--bst-barra-misura-vecchia: min(calc(var(--season-18) * 2 / 3 * 1.25 * 2), calc((100vw - 2 * var(--linea) - 2 * var(--margine)) / 16.2));
		--bst-barra-misura: min(var(--season-30), calc((100vw - 2 * var(--linea) - 2 * var(--margine)) / 18.4));
		--altezza-barra-cta: round(calc(2 * (max(0.5rem, 0.6771vw) + 0.5rem + 0.225 * var(--season-18)) - 1.35 * var(--bst-barra-misura-vecchia) + 1.35 * var(--bst-barra-misura)), 1px);
	}
	.elementor .corpo-barra.corpo-barra.corpo-barra {
		font-size: var(--bst-barra-misura); font-family: "Bastardini Sans", sans-serif;
		white-space: nowrap; max-inline-size: none; /* su una riga sola */
	}
}


/* ===== T100 – NIENTE BORDINO CHIARO SUL BORDO SINISTRO (23/10 notte) =====
   Sull'iPhone, a sinistra del pittogramma (e lungo tutto il bordo sinistro) si vedeva una striscia chiara: la cornice nera
   di 2 px sta proprio sul bordo dello schermo e, quando non cade esatta sui pixel, si mescola con il fondo della pagina,
   che era BIANCO (tema Hello). Solo fino a 767 px il fondo della pagina diventa il nero del brand, come la cornice: la
   mescolanza resta nera e la striscia sparisce. La pagina è coperta tutta dal contenuto, quindi non cambia nient'altro
   (cambia solo il colore che si intravede tirando la pagina oltre l'inizio o la fine). Tablet e computer invariati. */
@media (max-width: 767px) {
	html body { background-color: var(--nero); }
}


/* (27/10, richiesta del Lancio) TABLET GRANDI A TOCCO: le regole del tablet di questo file per le righe evento apribili (T126)
   e per lo slideshow degli spazi (T18, pulsante sopra la foto, «TABLET COME IL TELEFONO») valgono anche sugli schermi a
   tocco (hover: none e pointer: coarse) fino a 1376 px, cioè iPad Pro 13" in verticale e in orizzontale. Il computer col
   mouse (anche a 1025–1376 px) non cambia. Gli script usano lo stesso criterio (righe-apribili.js, spazi-slideshow.js). */

/* ===== T6 / TB2 – RIGHE EVENTO APRIBILI (script righe-apribili.js) =====
   Righe evento di Home (a.riga-evento: nome .col-6, informazioni .col-2) e di Agenda e Spazi (.riga-tendina: nome
   .nome-pieno, informazioni .tendina-info). Lo script dà alla riga la classe bst-apribile (e bst-aperta quando si tocca il
   nome) e aggiunge «Vai all'evento →» (bst-vai-evento) e lo spazio vuoto in fondo (bst-riga-spazio, dal 23/10 mattina sempre nascosto: T26).
   Sul computer i due pezzi aggiunti non si vedono e la riga resta com'era. */
.elementor .bst-apribile .bst-vai-evento, .elementor .bst-apribile > .bst-riga-spazio { display: none; }
.elementor .bst-apribile :is(.bst-riga-quando, .bst-riga-nome, .bst-riga-sale) { display: none; } /* (T56) box del telefono */
.bst-apribile { --bst-riga-info: calc(2 * var(--margine) + 1.5 * var(--season-18)); } /* altezza di una riga di informazioni */
.elementor .bst-apribile .bst-vai-evento {
	align-items: center; justify-content: flex-end; min-block-size: var(--bst-riga-info); padding: var(--margine);
	background: var(--rosa); color: var(--nero); text-decoration: none; text-align: end;
	font-family: var(--font-season-sans); font-weight: 400; font-size: var(--season-18); line-height: 1.2; text-transform: uppercase;
}
.elementor .bst-apribile .bst-vai-evento:is(:hover, :focus-visible) { color: var(--nero); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.elementor .bst-apribile a.bst-vai-evento:focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: calc(-2 * var(--linea)); }

/* TELEFONO (T6, corretta con T26 il 23/10 mattina). Chiusa: solo il nome; le righe chiuse sono attaccate, con la sola linea
   da 2 px tra l'una e l'altra (niente più spazio vuoto in fondo, T26.1 e T26.3).
   Aperta: data (a sinistra) | «Vai all'evento →» (a destra, pulsante blu come «Invia richiesta →», T26.4); giorno e ora — sale
   (su una riga, scorre se è lunga); tag a coppie; subito sotto, l'evento dopo. Le linee sono lo stacco della griglia (2 px, una sola).
   Nome dell'evento grande (T26.2): Bastardini alla misura massima con la stessa formula di adatta-90-10 (larghezza utile / 8);
   i nomi più lunghi scorrono (scorrimento.js), non vengono tagliati. Tutti i testi centrati in verticale nei loro box (T26.5). */
/* (T126, 25/10) la fisarmonica del telefono vale fino a 1024 px: anche sul tablet la riga chiusa e' solo il nome, tutte alte come la riga minima; si apre toccando. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1376px) {
	/* come sul telefono: la riga va a capo, il nome occupa tutta la larghezza e le informazioni (aperta) stanno sotto, non accanto */
	.elementor .bst-apribile { flex-wrap: wrap; }
	.elementor .bst-apribile > :is(.nome-pieno, .col-6) { flex: 1 1 100%; margin-right: 0; }
	.elementor .bst-apribile > :is(.nome-pieno, .col-6) { align-items: center; justify-content: center; }
	.elementor .bst-apribile > :is(.nome-pieno, .col-6) :is(h1, h2, h3).titolo-bastardini {
		font-size: min(var(--bastardini-90), calc((100vw - 2 * var(--linea) - 2 * var(--margine)) / 8));
		white-space: nowrap; /* sempre su una riga: se non entra scorre (scorrimento.js), non va a capo */
	}
	.elementor .bst-apribile:not(.bst-aperta) > :is(.col-2, .tendina-info) { display: none; }
	.elementor .bst-apribile.bst-aperta > :is(.col-2, .tendina-info) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--linea); flex: 0 0 100%; }
	.elementor .bst-apribile.bst-aperta > :is(.col-2, .tendina-info) > * { min-width: 0; }
	/* (27/10, richiesta dell'utente dal Lancio) riga APERTA: la fascia del nome prende il colore della sua categoria, come sul computer al
	   passaggio del mouse (stessa classe cat-… messa dal costruttore secondo «Colore al passaggio», stesse variabili --cat-…); chiusa torna blu. */
	.elementor .bst-apribile.bst-aperta > :is(.nome-pieno, .col-6).cat-laboratorio.cat-laboratorio { background-color: var(--cat-laboratorio); }
	.elementor .bst-apribile.bst-aperta > :is(.nome-pieno, .col-6).cat-musica.cat-musica { background-color: var(--cat-musica); }
	.elementor .bst-apribile.bst-aperta > :is(.nome-pieno, .col-6).cat-arte.cat-arte { background-color: var(--cat-arte); }
	.elementor .bst-apribile.bst-aperta > :is(.nome-pieno, .col-6).cat-lavoro.cat-lavoro { background-color: var(--cat-lavoro); }
	.elementor .bst-apribile.bst-aperta > :is(.nome-pieno, .col-6).cat-incontri.cat-incontri { background-color: var(--cat-incontri); }
	.elementor .bst-apribile.bst-aperta > :is(.nome-pieno, .col-6).cat-comunita.cat-comunita { background-color: var(--cat-comunita); }
	/* (T56, 23/10) ordine della tendina aperta: [data giorno ora | Vai all'evento →] [nome intero, box nero] [sale] [tag].
	   I box originali (data; «giorno ora — sale») sul telefono non si vedono: i loro testi sono nei box nuovi (righe-apribili.js). */
	.elementor .bst-apribile.bst-aperta > :is(.col-2, .tendina-info) > :is(:first-child, :nth-child(2)) { display: none; }
	.elementor .bst-apribile.bst-aperta :is(.bst-riga-quando, .bst-riga-nome, .bst-riga-sale) {
		display: flex; align-items: center; min-block-size: var(--bst-riga-info); padding: var(--margine); background: var(--rosa); color: var(--nero);
		font-family: var(--font-season-sans); font-weight: 400; font-size: var(--season-18); line-height: 1.2; text-transform: uppercase;
	}
	/* (T69, 23/10) nuovo ordine, al posto di quello di T56: [nome intero, box BLU, Bastardini Sans] [data giorno ora | «Vai
	   all'evento →» in un box NERO] [sale] [tag] */
	.elementor .bst-apribile.bst-aperta .bst-riga-quando { order: 2; }
	.elementor .bst-apribile.bst-aperta .bst-vai-evento {
		display: flex; order: 3; align-items: center; justify-content: center; text-align: center;
		background: var(--nero); color: var(--rosa); font-family: var(--font-season-mix); text-transform: uppercase;
		font-size: var(--season-30); /* (T56) misura media, come «Invia richiesta →»; (T69) box nero, testo chiaro */
	}
	.elementor .bst-apribile.bst-aperta .bst-vai-evento:is(:hover, :focus-visible) { color: var(--rosa); }
	.elementor .bst-apribile.bst-aperta a.bst-vai-evento:focus-visible { outline-color: var(--azzurro); }
	.elementor .bst-apribile.bst-aperta .bst-riga-nome {
		order: 1; grid-column: 1 / -1; background: var(--azzurro); color: var(--nero);
		font-family: var(--font-bastardini); line-height: 1; /* (T69) Bastardini Sans, misura come la data */
	}
	.elementor .bst-apribile.bst-aperta .bst-riga-sale { order: 4; grid-column: 1 / -1; overflow: hidden; }
	.elementor .bst-apribile.bst-aperta .bst-riga-sale > span { white-space: nowrap; }
	.elementor .bst-apribile.bst-aperta > :is(.col-2, .tendina-info) .categoria { justify-content: center; }
	.elementor .bst-apribile.bst-aperta > :is(.col-2, .tendina-info) > .griglia-riga { order: 5; grid-column: 1 / -1; }
	.bst-nastro-sale { display: inline-flex; white-space: nowrap; } /* (T32) niente will-change: testo nitido */
	.bst-nastro-sale > span { flex: 0 0 auto; padding-inline-end: 2em; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce), (hover: none) and (pointer: coarse) and (max-width: 1376px) and (prefers-reduced-motion: reduce) {
	/* niente scorrimento: la riga delle sale va a capo */
	.elementor .bst-apribile.bst-aperta .bst-riga-sale > span { white-space: normal; }
}

/* (T126, 25/10) Il vecchio blocco «TABLET (TB2)» (tendina da destra anche sul tablet, colonna informazioni nascosta ma conteggiata nell'altezza)
   e' stato tolto: sul tablet valgono le regole della fisarmonica qui sopra (copia in backup-db\plugin-20261025-prima-T125-T126). */


/* ===== T8 / T15 / TB4 – SLIDESHOW DEGLI SPAZI E PANNELLO DELLE INFORMAZIONI (script spazi-slideshow.js) =====
   Elenchi con la classe slideshow-spazi (Home «Gli spazi» e pagina Spazi). Lo script aggiunge bst-slideshow all'elenco,
   bst-slide alle schede, le frecce (bst-slide-freccia) e, nella pagina Spazi, il pulsante sulla foto (bst-spazio-apri) e
   «Vai allo spazio →» (bst-vai-spazio). Sul computer frecce e pulsanti non si vedono. */
.bst-slide-freccia, .elementor .bst-spazio-apri, .elementor .bst-vai-spazio { display: none; }

/* TELEFONO: una foto alla volta, si scorre col dito e si ferma sempre su una foto intera */
@media (max-width: 767px) {
	.elementor .bst-slideshow.bst-slideshow {
		flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
	}
	.bst-slideshow::-webkit-scrollbar { display: none; }
	.elementor .bst-slideshow.bst-slideshow .bst-slide.bst-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
	/* (T50, 23/10) frecce BLU senza riquadro, ai lati, a metà della parte di foto che si vede (le mette lì lo script). Un'ombra
	   leggera le fa vedere anche sulle foto scure. Il pulsante resta grande (zona da toccare), si vede solo la freccia. */
	.bst-slide-freccia {
		display: flex; position: absolute; z-index: 3; align-items: center; justify-content: center;
		inline-size: calc(2 * var(--margine) + 1.2 * var(--season-30)); block-size: calc(2 * var(--margine) + 1.2 * var(--season-30));
		margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--azzurro);
		filter: drop-shadow(0 0 calc(0.5 * var(--linea)) rgba(43, 43, 43, 0.6)) drop-shadow(0 0 calc(1.5 * var(--linea)) rgba(43, 43, 43, 0.35));
		transform: translate(var(--margine), -50%); cursor: pointer;
	}
	.bst-slide-succ { transform: translate(calc(-100% - var(--margine)), -50%); }
	.bst-slide-freccia::before {
		content: ""; inline-size: 40%; block-size: 40%; border: solid var(--azzurro); border-width: calc(1.5 * var(--linea)) calc(1.5 * var(--linea)) 0 0;
		transform: translateX(15%) rotate(-135deg);
	}
	.bst-slide-succ::before { transform: translateX(-15%) rotate(45deg); }
	.bst-slide-freccia[hidden] { display: none; }
	.bst-slide-freccia:focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: var(--linea); }
}

/* (27/10, richiesta del Lancio) Il vecchio blocco «TABLET, pagina Spazi» (righe con la foto fino al bordo destro e le
   informazioni che salivano riga per riga) e' stato tolto: sul tablet Home e Spazi sono lo slideshow del telefono (blocco
   «TABLET COME IL TELEFONO» più sotto). Copia in backup-db\file-20261027-prima-tablet-spazi\. */

/* T18 (23/10 notte, CMS costruttore) – pagina Servizi, schede degli spazi (classi schede-spazi sull'elenco, scheda-foto e
   scheda-nome nella scheda; le regole del telefono qui sopra valgono anche per loro). Sul TABLET le schede restano come sul
   computer (foto + nome, informazioni nascoste): il pulsante sopra la foto non serve. */
@media (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (hover: none) and (pointer: coarse) and (max-width: 1376px) {
	.elementor .schede-spazi .bst-spazio-apri.bst-spazio-apri { display: none; }
}

/* pulsante trasparente sopra la foto e «Vai allo spazio →» (telefono e tablet) */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1376px) {
	.elementor .bst-spazio .bst-spazio-apri {
		display: block; position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0;
		border: 0; border-radius: 0; background: transparent; cursor: pointer;
	}
	.elementor .bst-spazio .bst-spazio-apri:focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: calc(-2 * var(--linea)); }
	.elementor .bst-spazio .bst-vai-spazio {
		display: flex; align-items: center; justify-content: flex-end; padding: var(--margine);
		background: var(--rosa); color: var(--nero); text-decoration: none; text-align: end;
		font-family: var(--font-season-sans); font-weight: 400; font-size: var(--season-18); line-height: 1.2; text-transform: uppercase;
	}
	.elementor .bst-spazio .bst-vai-spazio:is(:hover, :focus-visible) { color: var(--nero); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
	.elementor .bst-spazio .bst-vai-spazio:focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: calc(-2 * var(--linea)); }
}


/* ===== T17 / TB6 – LOGHI DEI PARTNER IN UN NASTRO INFINITO (script loghi-nastro.js) =====
   Progetto, blocco «Partner» (classe nastro-loghi). Fino a 1024 px: una sola fascia alta come un riquadro dei loghi, con tutti
   i loghi in fila che scorrono senza fine (sul tablet al posto delle due righe di riquadri; «I nostri partner» e il suo testo
   stanno in alto nel loro box). Ogni logo ha la linea da 2 px a destra (margine, non stacco: così metà pista = una serie
   esatta e il giro riprende senza scatti). Con "riduci movimento" la fascia è ferma e si scorre col dito. */
.bst-nastro-pista { display: none; } /* (P3) da 1025 px vedi la regola più sotto */
@media (max-width: 1024px) {
	.elementor .nastro-loghi.nastro-loghi { flex-wrap: nowrap; gap: 0; overflow: hidden; }
	.elementor .nastro-loghi.nastro-loghi > :not(.bst-nastro-pista) { display: none; }
	.elementor .nastro-loghi > .bst-nastro-pista {
		display: flex; flex: 0 0 auto; flex-wrap: nowrap; inline-size: max-content;
		animation: bst-nastro-loghi calc(var(--bst-loghi, 6) * 4s) linear infinite;
	}
	.elementor .nastro-loghi .bst-nastro-logo.bst-nastro-logo { flex: 0 0 auto; inline-size: calc((100vw - 9 * var(--linea)) * 6 / 8 / 4); max-inline-size: none; /* 4 loghi nella larghezza dei riquadri di oggi (6 colonne su 8) */ margin: 0 var(--linea) 0 0; }
	/* «I nostri partner» e il testo in alto nel loro box (il box subito prima del nastro) */
	.elementor .elementor-element:has(+ .nastro-loghi) { justify-content: flex-start; }
}
@media (max-width: 767px) {
	/* sul telefono un logo e mezzo per volta */
	.elementor .nastro-loghi .bst-nastro-logo.bst-nastro-logo { inline-size: calc(60vw - var(--linea)); }
}
@keyframes bst-nastro-loghi { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* (P3, 23/10) COMPUTER (da 1025 px): la stessa fascia che scorre, al posto della griglia dei riquadri. 4 loghi visibili, ognuno
   largo 1/4 della fascia (--bst-nastro-w, messa da loghi-nastro.js) meno le linee; la linea da 2 px a destra di ogni logo fa da
   separazione (una sola, mai doppia: la quarta cade sul bordo e resta nascosta dalla fascia). */
@media (min-width: 1025px) {
	.elementor .nastro-loghi.nastro-loghi { flex-wrap: nowrap; gap: 0; overflow: hidden; }
	.elementor .nastro-loghi.nastro-loghi > :not(.bst-nastro-pista) { display: none; }
	.elementor .nastro-loghi > .bst-nastro-pista {
		display: flex; flex: 0 0 auto; flex-wrap: nowrap; inline-size: max-content; align-items: stretch;
		animation: bst-nastro-loghi calc(var(--bst-loghi, 6) * 4s) linear infinite;
	}
	.elementor .nastro-loghi .bst-nastro-logo.bst-nastro-logo {
		flex: 0 0 auto; max-inline-size: none; margin: 0 var(--linea) 0 0;
		inline-size: calc((var(--bst-nastro-w, 75vw) - 3 * var(--linea)) / 4);
		min-block-size: var(--altezza-fascia-loghi); /* altezza della fascia decisa da Modifiche layout (kit), come i riquadri originali */
	}
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
	.elementor .nastro-loghi.nastro-loghi { overflow-x: auto; scrollbar-width: none; }
	.elementor .nastro-loghi > .bst-nastro-pista { animation: none; }
	.elementor .nastro-loghi .bst-nastro-copia { display: none; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	.elementor .nastro-loghi.nastro-loghi { overflow-x: auto; scrollbar-width: none; }
	.elementor .nastro-loghi > .bst-nastro-pista { animation: none; }
	.elementor .nastro-loghi .bst-nastro-copia { display: none; }
}


/* ===== T25 – il pannello del menu scorre sempre da solo =====
   Un pixel in più dell'altezza dello schermo: così il pannello è sempre "scorrevole" e su iPhone il dito non fa scorrere la
   pagina sotto (che resta dov'era, senza bloccarla). */
.bst-menu-pannello::after { content: ""; flex: 0 0 1px; }
.bst-menu-voci { min-block-size: 100%; }
/* (E6, 25/10) le voci sono dentro un <nav class="bst-menu-nav"> (menu-burger.js, regola 8): il nav sta nella colonna del
   pannello come prima l'elenco (cresce, centrato in verticale, alto almeno quanto il pannello) e l'elenco lo riempie.
   Nessun cambiamento visivo. Le regole T73 sui nav della barra lo escludono. */
.bst-menu-nav { display: flex; flex-direction: column; flex: 1 0 auto; margin: auto 0; min-block-size: 100%; }
html.bst-pausa-menu .elementor nav.bst-menu-nav.bst-menu-nav { background: transparent; border-color: transparent; }
html.bst-pausa-menu .elementor nav.bst-menu-nav.bst-menu-nav > * { opacity: 1; }


/* ===== T23 → T49 – PANNELLO DEGLI SPAZI NELLO SLIDESHOW, UGUALE IN HOME, SPAZI E SERVIZI (script spazi-slideshow.js, solo telefono) =====
   Modello: la Home. Ogni scheda (classe bst-con-pannello) mostra la foto 4:5; in basso, sopra la foto, il pannello
   bst-pannello-spazio: il box rosa con nome e frase a bandiera sinistra (bst-ps-nome) si vede sempre; il resto (m², persone,
   piano e «Vai allo spazio →») sta sotto il bordo della foto e sale quando si tocca la foto o il box (bst-info-aperte
   sull'elenco). Nome e frase non cambiano aspetto né allineamento. Linee da 2 px (stacco della griglia sul fondo nero).
   Nelle schede di Spazi e Servizi i pezzi originali (pittogramma, nome, informazioni) sul telefono non si vedono: le stesse
   informazioni sono nel pannello. Sul tablet e sul computer il pannello non c'è. */
.bst-pannello-spazio { display: none; }
@media (max-width: 767px) {
	/* (27/10, richiesta dell'utente dal Lancio) la FOTO occupa da sola tutto il riquadro 4:5 (prima nome e frase stavano dentro,
	   sopra la parte bassa della foto); il box con nome e frase sta SOTTO la foto, nello spazio in più in fondo alla scheda
	   (padding alto quanto il box, --bst-nome-h, misurato da spazi-slideshow.js: niente altezze fisse, niente testo tagliato).
	   content-box: il 4:5 vale per la foto, lo spazio del box si aggiunge sotto. Al tocco il pannello sale come prima e copre
	   la parte bassa della foto con m², persone, piano e «Vai allo spazio →». Tablet e computer non cambiano. */
	.elementor .bst-slideshow .bst-con-pannello.bst-con-pannello {
		display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 5; min-height: 0;
		box-sizing: content-box; padding-block-end: var(--bst-nome-h, 0px);
	}
	.elementor .bst-con-pannello.bst-con-pannello > :is(.col-1-fissa, .col-3-fissa, .scheda-nome, .tendina-info) { display: none; }
	.elementor .bst-con-pannello.bst-con-pannello > :is(.nome-pieno, .scheda-foto, .cella-sabbia) { position: absolute; inset: 0 0 var(--bst-nome-h, 0px); width: auto; height: auto; aspect-ratio: auto; min-height: 0; margin: 0; }
	.elementor .bst-con-pannello .cella-sabbia > .cella { display: none; } /* l'etichetta della Home: ora è il box del pannello */
	.elementor .bst-con-pannello .bst-spazio-apri { z-index: 1; }
	.elementor .bst-con-pannello > .bst-pannello-spazio {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--linea);
		position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
		background: var(--nero); border-block-start: var(--linea) solid var(--nero);
		transform: translateY(var(--bst-dettagli-h, 100%)); transition: transform 0.35s ease;
		color: var(--nero); text-align: start;
	}
	/* (27/10) chiuso si vede la linea e tutto il box nome e frase, sotto la foto */
	.elementor .bst-slideshow .bst-con-pannello > .bst-pannello-spazio { transform: translateY(calc(100% - var(--bst-nome-h, 0px))); }
	.elementor .bst-info-aperte .bst-con-pannello > .bst-pannello-spazio { transform: none; }
	.bst-pannello-spazio > * { min-width: 0; background: var(--rosa); padding: var(--margine); }
	.bst-pannello-spazio > :not(:nth-last-child(2), :last-child) { grid-column: 1 / -1; }
	.bst-ps-nome { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--margine) / 2); text-align: start; }
	.bst-ps-titolo {
		font-family: var(--font-bastardini); font-weight: 400; text-transform: uppercase; line-height: 0.93;
		font-size: min(var(--bastardini-60), calc((100vw - 2 * var(--linea) - 2 * var(--margine)) / 9));
	}
	.bst-ps-frase { font-family: var(--font-season-mix); font-size: var(--season-18); line-height: 1.35; }
	.bst-ps-dato, .bst-ps-vai { font-family: var(--font-season-sans); font-size: var(--season-18); line-height: 1.2; text-transform: uppercase; }
	.bst-ps-dato { visibility: hidden; transition: visibility 0s linear 0.35s; }
	.bst-ps-vai { display: flex; align-items: center; justify-content: flex-end; text-align: end; color: var(--nero); text-decoration: none; visibility: hidden; transition: visibility 0s linear 0.35s; }
	.elementor .bst-info-aperte .bst-con-pannello :is(.bst-ps-dato, .bst-ps-vai) { visibility: visible; transition-delay: 0s; } /* chiuse: fuori dal Tab */
	.elementor .bst-con-pannello .bst-ps-vai:is(:hover, :focus-visible) { color: var(--nero); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
	.elementor .bst-con-pannello a.bst-ps-vai:focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: calc(-2 * var(--linea)); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.elementor .bst-con-pannello > .bst-pannello-spazio, .bst-ps-dato, .bst-ps-vai { transition: none; }
}


/* ===== TABLET COME IL TELEFONO – SLIDESHOW DEGLI SPAZI (27/10, richiesta del Lancio; script spazi-slideshow.js) =====
   Da 768 a 1024 px Home «Gli spazi» e pagina Spazi (classe bst-slideshow-tablet, messa dallo script; non la pagina Servizi)
   sono IDENTICHE al telefono: una foto alla volta, si scorre col dito e si ferma su una foto intera, frecce blu ai lati,
   box rosa con nome e frase sempre visibile, al tocco salgono m², persone, piano e «Vai allo spazio →». Le regole sono le
   stesse dei blocchi «T8» e «T23 → T49» del telefono; cambia solo la forma della foto: 3:2 invece di 4:5, così una scheda
   intera sta nello schermo del tablet sia in verticale sia in orizzontale. Il telefono e il computer non cambiano. */
@media (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (hover: none) and (pointer: coarse) and (max-width: 1376px) {
	.elementor .bst-slideshow-tablet.bst-slideshow-tablet {
		display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
	}
	.bst-slideshow-tablet::-webkit-scrollbar { display: none; }
	.elementor .bst-slideshow-tablet.bst-slideshow-tablet .bst-slide.bst-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
	/* frecce: come T50 (le mette al loro posto lo script) */
	.bst-slideshow-tablet ~ .bst-slide-freccia {
		display: flex; position: absolute; z-index: 3; align-items: center; justify-content: center;
		inline-size: calc(2 * var(--margine) + 1.2 * var(--season-30)); block-size: calc(2 * var(--margine) + 1.2 * var(--season-30));
		margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--azzurro);
		filter: drop-shadow(0 0 calc(0.5 * var(--linea)) rgba(43, 43, 43, 0.6)) drop-shadow(0 0 calc(1.5 * var(--linea)) rgba(43, 43, 43, 0.35));
		transform: translate(var(--margine), -50%); cursor: pointer;
	}
	.bst-slideshow-tablet ~ .bst-slide-succ { transform: translate(calc(-100% - var(--margine)), -50%); }
	.bst-slideshow-tablet ~ .bst-slide-freccia::before {
		content: ""; inline-size: 40%; block-size: 40%; border: solid var(--azzurro); border-width: calc(1.5 * var(--linea)) calc(1.5 * var(--linea)) 0 0;
		transform: translateX(15%) rotate(-135deg);
	}
	.bst-slideshow-tablet ~ .bst-slide-succ::before { transform: translateX(-15%) rotate(45deg); }
	.bst-slideshow-tablet ~ .bst-slide-freccia[hidden] { display: none; }
	.bst-slideshow-tablet ~ .bst-slide-freccia:focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: var(--linea); }
	/* pannello: come T49 */
	.elementor .bst-slideshow-tablet .bst-con-pannello.bst-con-pannello {
		display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; min-height: 0;
	}
	.elementor .bst-slideshow-tablet .bst-con-pannello.bst-con-pannello > :is(.col-1-fissa, .col-3-fissa, .scheda-nome, .tendina-info) { display: none; }
	.elementor .bst-slideshow-tablet .bst-con-pannello.bst-con-pannello > :is(.nome-pieno, .scheda-foto, .cella-sabbia) { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; min-height: 0; margin: 0; }
	.elementor .bst-slideshow-tablet .bst-con-pannello .cella-sabbia > .cella { display: none; }
	.elementor .bst-slideshow-tablet .bst-con-pannello .bst-spazio-apri { z-index: 1; }
	.elementor .bst-slideshow-tablet .bst-con-pannello > .bst-pannello-spazio {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--linea);
		position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
		background: var(--nero); border-block-start: var(--linea) solid var(--nero);
		transform: translateY(var(--bst-dettagli-h, 100%)); transition: transform 0.35s ease;
		color: var(--nero); text-align: start;
	}
	.elementor .bst-slideshow-tablet.bst-info-aperte .bst-con-pannello > .bst-pannello-spazio { transform: none; }
	.bst-slideshow-tablet .bst-pannello-spazio > * { min-width: 0; background: var(--rosa); padding: var(--margine); }
	.bst-slideshow-tablet .bst-pannello-spazio > :not(:nth-last-child(2), :last-child) { grid-column: 1 / -1; }
	.bst-slideshow-tablet .bst-ps-nome { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--margine) / 2); text-align: start; }
	.bst-slideshow-tablet .bst-ps-titolo {
		font-family: var(--font-bastardini); font-weight: 400; text-transform: uppercase; line-height: 0.93;
		font-size: min(var(--bastardini-60), calc((100vw - 2 * var(--linea) - 2 * var(--margine)) / 9));
	}
	.bst-slideshow-tablet .bst-ps-frase { font-family: var(--font-season-mix); font-size: var(--season-18); line-height: 1.35; }
	.bst-slideshow-tablet :is(.bst-ps-dato, .bst-ps-vai) { font-family: var(--font-season-sans); font-size: var(--season-18); line-height: 1.2; text-transform: uppercase; }
	.bst-slideshow-tablet .bst-ps-dato { visibility: hidden; transition: visibility 0s linear 0.35s; }
	.bst-slideshow-tablet .bst-ps-vai { display: flex; align-items: center; justify-content: flex-end; text-align: end; color: var(--nero); text-decoration: none; visibility: hidden; transition: visibility 0s linear 0.35s; }
	.elementor .bst-slideshow-tablet.bst-info-aperte .bst-con-pannello :is(.bst-ps-dato, .bst-ps-vai) { visibility: visible; transition-delay: 0s; } /* chiuse: fuori dal Tab */
	.elementor .bst-slideshow-tablet .bst-con-pannello .bst-ps-vai:is(:hover, :focus-visible) { color: var(--nero); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
	.elementor .bst-slideshow-tablet .bst-con-pannello a.bst-ps-vai:focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: calc(-2 * var(--linea)); }
}
@media (min-width: 768px) and (max-width: 1024px) and (prefers-reduced-motion: reduce), (min-width: 768px) and (hover: none) and (pointer: coarse) and (max-width: 1376px) and (prefers-reduced-motion: reduce) {
	.bst-slideshow-tablet .bst-con-pannello > .bst-pannello-spazio, .bst-slideshow-tablet :is(.bst-ps-dato, .bst-ps-vai) { transition: none; }
}

/* ===== T27 – INTRODUZIONE DELLA HOME SUL TELEFONO (23/10 mattina) =====
   Blocco «Introduzione – cella» della Home (classe intro-bandiera-telefono, segnaposto senza stile): sul telefono il testo
   «Bastardini è uno spazio ibrido…» va a bandiera a sinistra e «Scopri il progetto →» a destra. Tablet e computer restano centrati. */
@media (max-width: 767px) {
	.elementor .elementor-element.intro-bandiera-telefono.intro-bandiera-telefono { align-items: stretch; }
	.elementor .elementor-element.intro-bandiera-telefono.intro-bandiera-telefono > :first-child { text-align: start; align-self: stretch; }
	.elementor .elementor-element.intro-bandiera-telefono.intro-bandiera-telefono > :last-child { text-align: end; align-self: flex-end; }
}


/* ===== T28 – ALTEZZE FISSE SUL TELEFONO (23/10, dalla registrazione dell'utente su iPhone con Chrome; script schermo-fisso.js) =====
   Su iPhone l'altezza della finestra cambia mentre si scorre (barre di Chrome) e svh/vh si ricalcolavano: la pagina saltava.
   schermo-fisso.js misura una volta l'altezza più grande dello schermo (100lvh) in --bst-schermo (px) e mette la classe
   bst-schermo-fisso su <html>; qui, solo fino a 767 px e solo in Home, quella misura prende il posto di 100svh/100vh:
   apertura e riquadro del video (variabile altezza-apertura), «Quadro schermo» (classe quadro-schermo) e il blocco principale. */
@media (max-width: 767px) {
	html.bst-schermo-fisso body.home .elementor-element { --altezza-apertura: calc(var(--bst-schermo) - var(--altezza-barra-cta) - var(--altezza-menu) - 3 * var(--linea)); }
	html.bst-schermo-fisso body.home .elementor .quadro-schermo.quadro-schermo { min-height: calc(var(--bst-schermo) - var(--altezza-barra-cta) - 2 * var(--altezza-menu) - 4 * var(--linea)); }
	html.bst-schermo-fisso body.home .elementor > main.elementor-element { min-height: var(--bst-schermo); }
}


/* ===== T66 – NIENTE BOX O CONTORNO AL TOCCO (23/10, tutto il sito) =====
   Su telefono e tablet, toccando la X del menu (e altri pulsanti) compariva un riquadro chiaro: era l'evidenziazione del tocco
   del browser e il contorno o lo sfondo del "focus" lasciato dal tocco (il tema dà ai pulsanti un fondo diverso quando hanno
   il focus). Solo sui dispositivi a sfioramento (nessun mouse vero): niente evidenziazione e niente contorno dopo un tocco.
   Il contorno resta per chi usa la tastiera (:focus-visible). Il computer con il mouse non cambia. */
@media (hover: none), (pointer: coarse) {
	html { -webkit-tap-highlight-color: transparent; }
	:focus:not(:focus-visible) { outline: none; }
	/* i nostri pulsanti tengono il loro fondo anche con focus o tocco (il tema altrimenti lo cambia) */
	.elementor .bst-burger:is(:focus, :hover, :active) { background: var(--rosa); color: var(--nero); }
	:is(.bst-menu-chiudi, .bst-slide-freccia, .bst-spazio-apri):is(:focus, :hover, :active) { background: transparent; color: inherit; }
	.bst-slide-freccia:is(:focus, :hover, :active) { color: var(--azzurro); }
	/* (25/10, T122) filtro-apri («Filtra per tipologia»): i colori in TUTTI gli stati sono SOLO nel CSS del kit, blocco T95.
	   Non aggiungere qui regole di fondo: questo file si carica dopo il kit e, a pari forza, vincerebbe (era il nero su nero). */
}


/* ===== T73 – UN SOLO MENU DURANTE LA PAUSA DEL LOGO (23/10; classe bst-pausa-menu messa da logo-estruso.js) =====
   Durante la pausa il menu vero sta sotto la copia che viaggia con il logo: se lo schermo è più alto della misura fissa
   (iPhone con Safari: si vede anche dietro la barra in basso) spuntava sotto la copia come seconda barra. Finché dura la pausa
   il menu vero non mostra il suo contenuto e il suo posto è rosa, come l'inizio del blocco che segue (nessuna linea doppia). */
@media (max-width: 767px) {
	html.bst-pausa-menu .elementor nav:not(.bst-menu-copia) { background: var(--rosa); border-color: var(--rosa); }
	/* opacity e non visibility: il menu vero resta raggiungibile da tastiera e da VoiceOver anche durante la pausa */
	html.bst-pausa-menu .elementor nav:not(.bst-menu-copia) > * { opacity: 0; }
	/* sotto la copia, solo durante la pausa, un lembo rosa che si muove con lei: copre la fascia scura che resterebbe tra la copia
	   e il menu vero quando lo schermo è più alto della misura fissa. 100 px bastano per la barra di Safari e non arrivano mai al
	   testo del blocco che segue (comincia almeno 106 px sotto: posto del menu + aria dell'introduzione). */
	html.bst-pausa-menu .elementor .bst-menu-copia::after {
		content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--linea)); /* sotto la linea del menu (100% è il bordo interno) */
		block-size: max(var(--altezza-minima-barre), calc(var(--bst-barre, 0px) + var(--altezza-barra-admin))); /* (T86) almeno lo spazio delle barre del browser (+ la barra di WordPress da collegati) */ background: var(--rosa); pointer-events: none;
	}
}


/* ===== T78 – NIENTE RIQUADRO BIANCO DOPO UN TOCCO (23/10; classe bst-ultimo-tocco da tocco-senza-hover.js) =====
   Su iPhone intorno alla X del menu compariva un riquadro bianco spesso: era il contorno di focus che Safari disegna quando il
   focus lo mette uno script. Ora menu-burger.js sposta il focus sulla X solo se il menu è aperto da tastiera; in più, su
   telefono e tablet, dopo un tocco nessun elemento mostra il contorno di focus. Appena si preme Tab il contorno torna (per chi
   usa la tastiera), sottile e nero o azzurro come prima, mai bianco. Il computer con il mouse non ha mai la classe. */
/* Il riquadro bianco veniva dal tema (Hello Elementor, reset.css): a ogni elemento con il focus «da tastiera» dà un'ombra
   BIANCA di 4 px (box-shadow) più un contorno nero. Dopo un tocco: niente ombra e niente contorno. */
html.bst-ultimo-tocco :focus, html.bst-ultimo-tocco :focus-visible { outline: none !important; }
html.bst-ultimo-tocco :is([tabindex], a, button, input, select, textarea):focus-visible { box-shadow: none !important; }
/* Con la tastiera, su telefono e tablet, niente ombra bianca del tema: resta solo il contorno sottile (2 px) nero o azzurro */
@media (hover: none), (pointer: coarse) {
	:is([tabindex]:not([tabindex="-1"]), a, button, input, select, textarea):focus-visible { box-shadow: none; }
}
.bst-menu-pannello:focus { outline: none; } /* il pannello riceve il focus solo per tenere dentro VoiceOver: niente contorno */


/* ===== T80 – LINGUE IN FONDO AL MENU BURGER (23/10; solo se l'interruttore BST_LINGUE_NEL_MENU del plugin è acceso) =====
   «ITA / EN» sulla stessa riga, stessa misura e stesso carattere delle voci; la lingua in cui si è sottolineata. */
.bst-menu-lingue { flex-direction: row; justify-content: center; align-items: baseline; }
.bst-menu-lingue .bst-menu-voce { padding-inline: calc(var(--margine) / 2); }
/* (29/10, Lancio) le lingue nel menu sono alte 1/3 delle altre voci (stessa formula della voce, per 1/3) */
.bst-menu-lingue .bst-menu-voce, .bst-menu-lingue .bst-menu-lingue-stacco { font-size: calc(min(var(--bastardini-90), calc((100vw - 2 * var(--linea) - 2 * var(--margine)) / 8)) / 3); }
.bst-menu-lingue-stacco {
	font-family: var(--font-bastardini); font-weight: 400; line-height: 0.93; color: var(--nero);
	font-size: min(var(--bastardini-90), calc((100vw - 2 * var(--linea) - 2 * var(--margine)) / 8));
}
.bst-menu-radice .bst-menu-lingue .bst-menu-voce[aria-current="true"] { text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 0.12em; }


/* ===== T92 – GALLERIA DI UNO SPAZIO A TUTTO SCHERMO (lightbox di Elementor; tutti i dispositivi) =====
   La lightbox mostra in fila le foto dello stesso spazio (frecce, scorrimento col dito, X per chiudere). Qui solo l'aspetto:
   fondo nero del sito, frecce e X azzurre, nessun riquadro bianco né ombra al tocco (vedi T78); con la tastiera un contorno
   azzurro sottile. La pagina dello spazio non cambia. */
.elementor-lightbox {
	--lightbox-ui-color: var(--azzurro); --lightbox-ui-color-hover: var(--azzurro); --lightbox-text-color: var(--rosa);
	background-color: rgb(43 43 43 / 0.95); /* var(--nero) quasi pieno: la pagina sotto non si legge più */
	-webkit-tap-highlight-color: transparent;
}
.elementor-lightbox :is(.elementor-swiper-button, .dialog-lightbox-close-button, .elementor-slideshow__header i):focus { outline: none; box-shadow: none; }
.elementor-lightbox :is(.elementor-swiper-button, .dialog-lightbox-close-button, .elementor-slideshow__header i):focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: var(--linea); box-shadow: none; }
html.bst-ultimo-tocco .elementor-lightbox :is(.elementor-swiper-button, .dialog-lightbox-close-button):focus-visible { outline: none; }
/* frecce: il CSS di Elementor (e-swiper) le fa bianche con un riquadro scuro; qui azzurre e senza riquadro */
.elementor-lightbox.elementor-lightbox :is(.swiper .elementor-swiper-button, .swiper ~ .elementor-swiper-button) { color: var(--azzurro); }
.elementor-lightbox.elementor-lightbox :is(.swiper .elementor-swiper-button, .swiper ~ .elementor-swiper-button) svg { fill: var(--azzurro); }
.elementor-lightbox.elementor-lightbox .elementor-swiper-button :is(i, svg) { background-color: transparent; }


/* ===== T98 – NIENTE PULSANTE ▶ SUI VIDEO DI SFONDO (script video-fondo.js; tutti i dispositivi) =====
   Su iPhone, se la riproduzione automatica viene bloccata, il browser disegna un grande ▶ sul video: i video di sfondo non
   hanno controlli, quindi il pulsante non si mostra mai (si vede il poster, il primo fotogramma). */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }


/* ===== VIDEO AL POSTO DELLA FOTO NEGLI SPAZI (26/10, bastardini-cms.php «Video al posto della foto»; tutti i dispositivi) =====
   Il video sta subito dopo la sua foto, nello stesso contenitore, e la copre esattamente: le foto degli Spazi sono già
   «assolute» e riempiono il loro riquadro, il video fa lo stesso, quindi le misure non cambiano di un pixel. Ritaglio come la
   foto (cover); il punto focale arriva dal plugin (style). Il clic passa alla foto o al link sotto (schermo intero, scheda). */
.bst-video-posto {
	position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
	object-fit: cover; pointer-events: none;
}


/* ===== H5 – TITOLI DELLE NEWS CON I DUE PUNTI (26/10, bastardini-cms.php «Titoli delle news con i due punti»; tutti i dispositivi) =====
   La parte dopo i due punti va a capo in Season Mix, scritta com'è (non in maiuscolo), alla stessa misura del titolo. */
.bst-titolo-dopo {
	display: block; font-family: var(--font-season-mix); text-transform: none; letter-spacing: normal;
}


/* ===== GALLERIA DELLE NEWS (26/10, modello News da strumenti-cms
ews.php, riga «Galleria» con la classe galleria-scorre) =====
   (26/10 notte, decisione dell'utente) UNA SOLA FILA che scorre, con le frecce ai lati (spazi-slideshow.js, «Galleria delle news»):
   - computer: 3 foto alla volta, grandi come una colonna su tre (3:4); con 1–3 foto niente frecce e le foto riempiono la fila
     (1 = tutta la larghezza, 2 = metà ciascuna, più alte);
   - tablet (≤1024): 2 foto alla volta; con 1–2 foto niente frecce;
   - telefono (≤767): una foto e un pezzo della successiva, si scorre col dito (e con le frecce); una sola foto = tutta la larghezza.
   Linee da 2 px tra le foto (fondo nero della griglia), foto ritagliate «cover», clic = schermo intero. La fila scorre dentro sé
   stessa: la pagina non si allarga. Barra di scorrimento nascosta (come lo slideshow degli spazi). */
.galleria-scorre { container-type: inline-size; }
.galleria-scorre.galleria-scorre {
	flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.galleria-scorre::-webkit-scrollbar { display: none; }
.galleria-scorre.galleria-scorre > .e-con {
	position: relative; overflow: hidden; aspect-ratio: auto; scroll-snap-align: start;
	flex: 1 0 calc((100% - 2 * var(--linea)) / 3); /* 3 alla volta (la griglia del sito ha 8 colonne: col-2 ne darebbe 4) */
	block-size: calc((100cqi - 2 * var(--linea)) / 3 * 3 / 4);
}
/* computer, 2 foto: metà ciascuna e più alte (come le celle a 2 per riga) */
@media (min-width: 1025px) {
	.galleria-scorre.galleria-scorre:has(> .e-con:nth-child(2):last-child) > .e-con { block-size: calc((100cqi - var(--linea)) / 2 * 3 / 4); }
}
@media (max-width: 1024px) {
	.galleria-scorre.galleria-scorre > .e-con { flex-basis: calc((100% - var(--linea)) / 2); block-size: calc((100cqi - var(--linea)) / 2 * 3 / 4); }
}
@media (max-width: 767px) {
	.galleria-scorre.galleria-scorre > .e-con { flex: 0 0 85%; block-size: calc(85cqi * 3 / 4); }
	.galleria-scorre.galleria-scorre > .e-con:only-child { flex-basis: 100%; block-size: calc(100cqi * 3 / 4); } /* una sola foto: tutta la larghezza, niente da scorrere */
}
@media (prefers-reduced-motion: reduce) { .galleria-scorre.galleria-scorre { scroll-behavior: auto; } }
/* frecce della galleria (le aggiunge lo script accanto alla fila): stesse frecce BLU dello slideshow degli spazi (T50), ma su
   tutti i dispositivi, a metà altezza della fila, ai due lati. */
.bst-gal-freccia {
	display: flex; position: absolute; z-index: 3; align-items: center; justify-content: center;
	inline-size: calc(2 * var(--margine) + 1.2 * var(--season-30)); block-size: calc(2 * var(--margine) + 1.2 * var(--season-30));
	margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--azzurro);
	filter: drop-shadow(0 0 calc(0.5 * var(--linea)) rgba(43, 43, 43, 0.6)) drop-shadow(0 0 calc(1.5 * var(--linea)) rgba(43, 43, 43, 0.35));
	transform: translate(var(--margine), -50%); cursor: pointer;
}
.bst-gal-freccia.bst-gal-succ { transform: translate(calc(-100% - var(--margine)), -50%); }
.bst-gal-freccia::before {
	content: ""; inline-size: 40%; block-size: 40%; border: solid var(--azzurro); border-width: calc(1.5 * var(--linea)) calc(1.5 * var(--linea)) 0 0;
	transform: translateX(15%) rotate(-135deg);
}
.bst-gal-freccia.bst-gal-succ::before { transform: translateX(-15%) rotate(45deg); }
.bst-gal-freccia[hidden] { display: none; }
.bst-gal-freccia:focus-visible { outline: var(--linea) solid var(--azzurro); outline-offset: var(--linea); }


/* ===== MAPPA AL CLIC (27/10, script mappa-clic.js, pagina Contatti) =====
   Dopo il clic su «Mostra la mappa di Google →» la mappa di Google prende il posto dell'immagine: stesso riquadro, stessa
   misura (come l'immagine, riempie la cella mappa-riquadro). Il link resta sopra, in basso a sinistra, come prima. */
.mappa-riquadro .bst-mappa-iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }


/* ===== NOMI DEGLI EVENTI SU UNA RIGA FIN DAL CARICAMENTO (27/10, segnalazione dell'utente dal Lancio; tutti i dispositivi) =====
   I nomi lunghi degli eventi (Agenda, Home, «Prossimi eventi» degli spazi) scorrono grazie a scorrimento.js, che però parte
   solo a pagina caricata (dopo i caratteri): fino ad allora il nome andava a capo su 3–4 righe e la riga si allungava
   (misurato: 288 px invece di 72 a 1440, 491 a 1024, 196 invece di 42 a 393). Qui il nome sta su una riga da subito e il suo
   box taglia quello che esce, così la riga ha già l'altezza giusta; poi lo script lo fa scorrere (computer: solo i lunghi;
   tablet e telefono: tutti). Con «riduci movimento» niente di tutto questo: i nomi non scorrono e vanno a capo come prima,
   così non si taglia mai il testo. */
@media (prefers-reduced-motion: no-preference) {
	.elementor .riga-evento > :is(.nome-pieno, .col-6) { overflow: hidden; }
	.elementor .riga-evento > :is(.nome-pieno, .col-6) > :is(h1, h2, h3) { white-space: nowrap; }
}

/* ===== MENU IN ALTO SUBITO SUL TELEFONO, HOME (28/10, iPhone in «risparmio energetico»; script logo-estruso.js e invito-scroll.js) =====
   Sul telefono il menu della Home sta in alto, sopra il video; nella pagina però è scritto DOPO il video e lo portano in alto
   gli script. Se uno script arriva tardi (in risparmio energetico Safari rallenta tutto) il menu si vedeva in fondo, sotto il
   video. Rete di sicurezza: il contenitore è una colonna flex, quindi con «order» il menu si vede già primo anche prima di
   qualsiasi script; quando lo script lo sposta davvero in cima non cambia niente. Solo fino a 767 px e solo in Home (il menu
   della Home ha la classe menu-copia-home; la copia dentro il logo, bst-menu-copia, è esclusa). */
@media (max-width: 767px) {
	body.home .elementor nav.menu-copia-home:not(.bst-menu-copia) { order: -1; }
}

/* LINGUA (29/10, inglese): barra «IT / EN» in alto a destra. Il plugin (bst_lingua_barra) trasforma il testo in due link
   di Polylang; qui prendono il colore e il carattere della barra. La lingua attiva è sottolineata; l'altra si sottolinea
   al passaggio del mouse e con il Tab. Vale su tutti i dispositivi (la barra non c'è sul telefono, dove le lingue stanno
   nel menu burger). */
.lingua-barra .bst-lingua { color: inherit; font: inherit; text-decoration: none; }
.lingua-barra .bst-lingua[aria-current="true"],
.lingua-barra a.bst-lingua:hover,
.lingua-barra a.bst-lingua:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }