/* ==========================================================================
   Ritocchi alla versione statica di ANEMA (04/11/2026). Collegato da tutte le pagine.
   ========================================================================== */

/* --- Video Vimeo: anteprima (immagine salvata sul sito) che apre il lettore in una finestra sovrapposta.
   Nell'originale l'iframe era dentro ".grve-video" e il tema lo rendeva a tutta larghezza in 16:9: l'anteprima fa lo stesso. --- */
.video-anteprima { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.video-anteprima img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-anteprima .video-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 3px solid #fff; box-sizing: border-box; transition: background .2s; }
.video-anteprima .video-play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -7px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.video-anteprima:hover .video-play { background: rgba(0, 204, 255, .9); }
.video-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; background: rgba(0, 0, 0, .88); display: flex; align-items: center; justify-content: center; }
.video-overlay-inner { position: relative; width: 92vw; max-width: 960px; aspect-ratio: 16 / 9; background: #000; }
.video-overlay-inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-overlay-chiudi { position: absolute; top: -40px; right: 0; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: #fff; font-size: 34px; line-height: 36px; cursor: pointer; }

/* --- Podcast Spotify: scheda al posto del lettore; il lettore compare al clic (stessa altezza di prima: 152 px) --- */
.spotify-carta { box-sizing: border-box; min-height: 152px; border-radius: 12px; background: #181818; color: #fff; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
div.spotify-carta button.spotify-carica { position: static !important; margin: 0 !important; cursor: pointer; border: 0 !important; border-radius: 500px !important; padding: 12px 26px !important; background: #1ed760 !important; color: #000 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; }   /* !important: il tema da' ai pulsanti uno stile proprio (viola, maiuscolo) con priorita' alta */
div.spotify-carta button.spotify-carica:hover, div.spotify-carta button.spotify-carica:focus { background: #3be477 !important; }
.spotify-carta small { font-size: 12.5px; line-height: 1.4; opacity: .8; }
div.spotify-carta small a, div.spotify-carta small a:visited { color: #1ed760 !important; text-decoration: underline !important; }   /* il tema colora i collegamenti di scuro: sul fondo nero non si leggevano */
div.spotify-carta small a:hover, div.spotify-carta small a:focus { color: #fff !important; }

/* --- Assistente virtuale "Martina" (Scena): pulsante con la stessa immagine e lo stesso fumetto dell'originale, in basso a sinistra.
   Lo script di Scena si carica solo al clic. L'avviso sotto il fumetto rimanda alla sezione della privacy. --- */
.avatar-scena { position: fixed; left: 16px; bottom: 16px; z-index: 9990; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 300px; }
.avatar-scena .avatar-fumetto { box-sizing: border-box; background: #003049; color: #fff; font: 400 15px/1.4 "Raleway", sans-serif; padding: 12px 14px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.avatar-scena .avatar-fumetto small { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.35; opacity: .85; }
div.avatar-scena .avatar-fumetto small a, div.avatar-scena .avatar-fumetto small a:visited { color: #4ccfff !important; text-decoration: underline !important; }
.avatar-scena .avatar-bottone { width: 125px; height: 125px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: #003049; box-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.avatar-scena .avatar-bottone:hover, .avatar-scena .avatar-bottone:focus { box-shadow: 0 0 0 3px #4ccfff, 0 2px 12px rgba(0, 0, 0, .4); }
.avatar-scena .avatar-bottone img, .avatar-scena .avatar-bottone video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (max-width: 767px) { .avatar-scena { max-width: 240px; } .avatar-scena .avatar-fumetto { font-size: 13px; } .avatar-scena .avatar-bottone { width: 84px; height: 84px; } }

/* --- /comunicazione/ "Digital Entertainment Book": video interattivo di Scena. Scheda con il fotogramma iniziale; al clic compare <scena-ai-banner> (a tutta larghezza in 16:9, come l'originale) --- */
.scena-banner { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #003049; overflow: hidden; }
.scena-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* !important: il tema da' ai pulsanti uno stile proprio (viola, position: relative) con priorita' alta */
div.scena-banner button.scena-banner-avvia { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; cursor: pointer; border: 0 !important; border-radius: 500px !important; padding: 14px 30px !important; background: #0073bb !important; color: #fff !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .45) !important; }
div.scena-banner button.scena-banner-avvia:hover, div.scena-banner button.scena-banner-avvia:focus { background: #198cd4 !important; }
.scena-banner small { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 14px; background: rgba(0, 48, 73, .88); color: #fff; font-size: 12.5px; line-height: 1.35; }
div.scena-banner small a, div.scena-banner small a:visited { color: #4ccfff !important; text-decoration: underline !important; }
scena-ai-banner { display: block; width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 767px) { div.scena-banner button.scena-banner-avvia { padding: 10px 18px !important; font-size: 14px !important; } .scena-banner small { font-size: 11px; padding: 6px 10px; } }

/* --- Collegamenti nelle fasce azzurre (#1e73be): il tema li colora di viola al passaggio del mouse (#8958e3), che sul fondo azzurro non si legge (contrasto 1,1). Ora diventano bianchi e sottolineati. (4 pagine: convention-bureau-napoli, eventi/hospitalitysud, scenari-a-bivi-narrativi, valutazione-competenze) --- */
.grve-section[style*="#1e73be"] a:hover, .grve-section[style*="#1e73be"] a:focus { color: #fff !important; text-decoration: underline !important; }