/* wf-yt.css — la facciata di un video YouTube: copertina nostra + tasto play, l'iframe nasce al clic
   (public/js/wf-yt.js). Niente icone font e niente risorse esterne: deve stare in piedi da solo. */
.wf-yt, .wf-yt-dal-vivo { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9;
    background: #111; overflow: hidden; box-sizing: border-box; }
/* hqdefault ha le bande nere 4:3: cover le taglia */
/* specificità alzata apposta (a + doppia classe): i fogli dei siti hanno regole come `.wf-post-corpo img { margin: 2em 0; height: auto }` che, a pari peso e scritte dopo, spostavano la copertina di 35 px */
a.wf-yt.wf-yt > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; border: 0; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
.wf-yt { cursor: pointer; color: #fff; text-decoration: none; }
.wf-yt__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
    background: rgba(17, 17, 17, .78); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 6px 24px rgba(0, 0, 0, .45);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .25s; pointer-events: none; }
.wf-yt__play::after { content: ''; position: absolute; left: 29px; top: 21px; border-style: solid;
    border-width: 15px 0 15px 24px; border-color: transparent transparent transparent #fff; }
.wf-yt:hover .wf-yt__play, .wf-yt:focus-visible .wf-yt__play { transform: scale(1.12); background: rgba(17, 17, 17, .92); }
.wf-yt:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px #111; }
.wf-yt--bloccato .wf-yt__play { display: none; }
.wf-yt__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    .wf-yt__play { transition: none; }
    .wf-yt:hover .wf-yt__play, .wf-yt:focus-visible .wf-yt__play { transform: none; }
}

/* la playlist non ha una copertina da id: riquadro scuro col tasto play e una scritta piccola */
.wf-yt--lista { background: linear-gradient(135deg, #1b1b1f 0%, #0d0d10 100%); }
.wf-yt__etichetta { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: .78rem;
    letter-spacing: .04em; color: rgba(255, 255, 255, .85); pointer-events: none; }

/* il player vivo: stesso box 16:9, iframe a tutta area. !important perché i contenuti ricopiati
   (es. `.wf-post-corpo iframe` negli articoli) portano regole di misura e margini per gli iframe nudi */
.wf-yt-dal-vivo > iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    margin: 0 !important; border: 0 !important; border-radius: 0 !important; aspect-ratio: auto !important; display: block; }

/* il messaggio del consenso, sopra la copertina */
.wf-yt-msg { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 8px;
    padding: 14px; text-align: center; background: rgba(0, 0, 0, .72); color: #fff; }
.wf-yt-msg p { margin: 0; }
.wf-yt-msg-tit { font-weight: 800; font-size: 1rem; line-height: 1.25; max-width: 26ch; }
.wf-yt-msg-txt { font-size: .82rem; color: #d8d8d8; max-width: 40ch; }
.wf-yt-msg-tasto { border: 0; cursor: pointer; background: #fff; color: #111; font: inherit; font-weight: 800; font-size: .84rem;
    padding: 9px 16px; border-radius: 6px; }
.wf-yt-msg-tasto:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wf-yt-msg-yt { font-size: .8rem; color: #fff; text-decoration: underline; }
@media (max-width: 440px) { .wf-yt-msg-txt { display: none; } .wf-yt-msg-tit { font-size: .9rem; } }

/* il video ricopiato da WordPress: il vecchio tema dava l'altezza con un padding sul :before del
   wrapper (embed 16:9). La facciata ha già il suo aspect-ratio: senza questo l'altezza sarebbe doppia. */
.wp-block-embed__wrapper:has(> .wf-yt), .wp-block-embed__wrapper:has(> .wf-yt-dal-vivo) { position: static; padding: 0; height: auto; }
.wp-block-embed__wrapper:has(> .wf-yt)::before, .wp-block-embed__wrapper:has(> .wf-yt-dal-vivo)::before,
.wp-embed-aspect-16-9 .wp-block-embed__wrapper:has(> .wf-yt)::before { content: none; display: none; padding: 0; }
figure.wp-block-embed:has(.wf-yt), figure.wp-block-embed:has(.wf-yt-dal-vivo) { height: auto; padding: 0; }

/* ───────── Spotify, Spreaker, 3B Meteo al clic (src/utils/terziAlClic.js) ─────────
   La facciata è una scheda: copertina nostra (se c'è) + servizio + titolo + tasto play. Niente risorse esterne.
   Specificità alzata (a.wf-terzi.wf-terzi) per lo stesso motivo di `a.wf-yt.wf-yt > img`: i fogli dei siti
   hanno regole per le immagini dei contenuti (`.wf-post-corpo img { margin: 2em 0 }`). */
a.wf-terzi.wf-terzi { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; max-width: 100%;
    min-height: min(var(--wf-h, 200px), 200px); padding: 16px 84px 16px 16px; box-sizing: border-box; overflow: hidden;
    background: #121212; color: #fff; text-decoration: none; cursor: pointer; border-radius: 12px; margin: 1em 0; }
a.wf-terzi.wf-terzi > img.wf-terzi__cop { flex: 0 0 auto; width: 96px; height: 96px; max-width: none; object-fit: cover;
    margin: 0; padding: 0; border: 0; border-radius: 8px; box-shadow: none; display: block; }
.wf-terzi__testo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wf-terzi__serv { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.wf-terzi__tit { font-size: 1.02rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.wf-terzi__prog { font-size: .82rem; color: rgba(255, 255, 255, .75);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.wf-terzi--spreaker, .wf-terzi--tunein, .wf-terzi--soundcloud { background: #1c1c1e; }
.wf-terzi__play { position: absolute; right: 18px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
    background: #fff; transition: transform .25s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.wf-terzi__play::after { content: ''; position: absolute; left: 19px; top: 14px; border-style: solid;
    border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #111; }
.wf-terzi:hover .wf-terzi__play, .wf-terzi:focus-visible .wf-terzi__play { transform: scale(1.12); }
.wf-terzi:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px #111; }
.wf-terzi.wf-yt--bloccato .wf-terzi__play { display: none; }
/* la scheda audio è bassa: il velo trasparente del video lasciava leggere copertina e titolo sotto il messaggio */
.wf-terzi .wf-yt-msg { background: #111; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) {
    .wf-terzi__play { transition: none; }
    .wf-terzi:hover .wf-terzi__play, .wf-terzi:focus-visible .wf-terzi__play { transform: none; }
}
@media (max-width: 440px) {
    a.wf-terzi.wf-terzi { padding-right: 76px; gap: 12px; }
    a.wf-terzi.wf-terzi > img.wf-terzi__cop { width: 72px; height: 72px; }
}

/* il lettore vivo: stessa larghezza, altezza data dalla facciata. !important perché i contenuti ricopiati portano
   regole di misura per gli iframe nudi (`.wf-post-corpo iframe`). La mappa meteo ha le misure del suo componente. */
.wf-terzi-dal-vivo--spotify, .wf-terzi-dal-vivo--spreaker, .wf-terzi-dal-vivo--tunein, .wf-terzi-dal-vivo--soundcloud { width: 100%; max-width: 100%; margin: 1em 0; height: auto; }
.wf-terzi-dal-vivo--spotify > iframe, .wf-terzi-dal-vivo--spreaker > iframe,
.wf-terzi-dal-vivo--tunein > iframe, .wf-terzi-dal-vivo--soundcloud > iframe { display: block; width: 100% !important; margin: 0 !important;
    border: 0 !important; border-radius: 12px !important; aspect-ratio: auto !important; }
.wf-terzi-dal-vivo--meteo { height: auto; }
.wf-terzi-dal-vivo--meteo > iframe { display: block; border: 0; }