/* froid.css — le poche regole aggiunte al CSS originale di Squarespace (che resta intatto).
   Solo per le parti ricostruite: le anteprime di TED e SoundCloud, che al clic lasciano il posto
   al player vero (nessuna richiesta a terzi finché il visitatore non preme play). */

.froid-facade { display: block; position: relative; width: 100%; overflow: hidden; container-type: inline-size; cursor: pointer; }
.froid-facade--ted { position: absolute; left: 0; top: 0; height: 100%; background: #000; }
/* l'iframe di SoundCloud era un elemento in linea: sotto c'era lo spazio della riga di testo.
   L'involucro in linea riproduce quello spazio; la container query resta sul blocco interno
   (inline-block + container-type sullo stesso elemento fa cadere Chromium nelle catture a pagina intera) */
.froid-facade-inline { display: inline-block; width: 100%; vertical-align: baseline; }
.froid-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.froid-facade .froid-facade__wide { display: none; }
/* TED e SoundCloud cambiano impaginazione sotto una certa larghezza del player:
   si mostra l'immagine catturata a quella stessa impaginazione */
@container (min-width: 600px) { .froid-facade--ted .froid-facade__wide { display: block; } .froid-facade--ted .froid-facade__narrow { display: none; } }
@container (min-width: 450px) { .froid-facade--soundcloud .froid-facade__wide { display: block; } .froid-facade--soundcloud .froid-facade__narrow { display: none; } }
.froid-facade__play { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.froid-facade__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* Il player «Relaxing with FROID»: era un widget Elfsight, qui ricostruito con le sue misure
   (blocco alto 120 px, carta 136×60 centrata in alto, velatura blu, pulsanti 36 e 24 px). */
.froid-player { position: relative; display: flex; justify-content: center; align-items: flex-start; height: 120px; }
.froid-player audio { display: none; }
.froid-player__card { position: relative; display: flex; align-items: center; box-sizing: border-box; width: 136px; height: 60px; padding: 18px; border-radius: 8px; background-size: cover; background-position: center center; backface-visibility: hidden; }
.froid-player__card::before { content: ""; position: absolute; inset: 0; background-color: rgba(16, 31, 56, 0.31); border-radius: inherit; z-index: 0; pointer-events: none; }
.froid-player__controls { position: relative; display: flex; align-items: center; gap: 40px; width: 100px; height: 36px; }
.froid-player__play, .froid-player__volbtn { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.froid-player__play { width: 36px; height: 36px; flex: 0 0 36px; }
.froid-player__play svg { display: block; width: 36px; height: 36px; }
.froid-player__vol { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.froid-player__volbtn { width: 24px; height: 24px; }
.froid-player__volbtn svg { display: block; width: 24px; height: 24px; }
.froid-player__volbtn svg path, .froid-player__volbtn svg polygon { transition: opacity 0.2s; }
.froid-player__slider { position: absolute; bottom: 100%; right: 0; width: 24px; height: 120px; box-sizing: border-box; margin: 12px 0; padding: 12px 0; border-radius: 4px; background-color: rgb(47, 47, 47); box-shadow: rgba(17, 17, 17, 0.2) 0 5px 8px 0; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.froid-player__vol:hover .froid-player__slider, .froid-player__vol:focus-within .froid-player__slider { opacity: 1; pointer-events: auto; }
.froid-player__track { position: relative; width: 4px; height: 96px; margin: 0 10px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.3); cursor: pointer; touch-action: none; }
.froid-player__level { position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; border-radius: 0 0 4px 4px; background-color: #fff; pointer-events: none; }
.froid-player__thumb { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background-color: #fff; transform: translate(-7px, 39px); cursor: grab; }
.froid-player__play:focus-visible, .froid-player__volbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }

/* banner dei cookie (markup e css di Squarespace, vedi consenso.js): nascosto finché non serve.
   Il css originale gli dà display:flex, che altrimenti vincerebbe sull'attributo hidden */
.gdpr-cookie-banner[hidden] { display: none !important; }
/* il link alla policy (sull'originale non c'era): bianco sottolineato come il testo, perché il
   colore dei link del tema, turchese su rosa, non si leggerebbe */
.gdpr-cookie-banner .disclaimer-text a { color: inherit; }

/* a capo scelti da Ale sugli schermi larghi (scripts/import.mjs, TEXT_FIXES); sotto, il testo va a
   capo da sé. Soglie misurate: la frase di AI radio sta su una riga da 1024 px (e da 1080 px, se
   andasse a capo, lascerebbe «ascoltano.» da solo); nel Podcast «…le email.» sta in prima riga solo
   da circa 1060 px. !important perché i titoli di Squarespace hanno white-space in linea */
.froid-br-wide { display: none; }
@media (min-width: 1024px) { .froid-nowrap-wide { white-space: nowrap !important; } }
@media (min-width: 1100px) { .froid-br-wide { display: inline; } }
/* Emotions decoding: il paragrafo accanto all'uomo con la maglia gialla finisce una colonna prima.
   Il blocco è largo 16 colonne del fluid engine (spazio fra colonne 11 px): una colonna più uno
   spazio = (100% + 11px) / 16 */
@media (min-width: 768px) { .froid-accanto-immagine { padding-right: calc((100% + 11px) / 16); } }