/* ============================================================
   VINILÈIS RADIO
   Gli stessi colori e caratteri del sito di prima: giallo,
   ciano sopra le foto, Roboto Slab per i titoli. Cambia solo
   che adesso c'e' anche la diretta.
   ============================================================ */

:root {
  /* Lo stesso giallo che hanno dentro logo.jpg e 1app.jpg: cosi' le
     immagini si appoggiano sul fondo senza lasciare il riquadro. */
  --giallo:  #fece00;
  --ciano:   #0a92c6;
  --nero:    #232323;
  --bianco:  #ffffff;
  --rosso:   #e2342b;

  --largo: 1140px;
  --slab: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --testo: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Senza questa riga un elemento con display:grid resta visibile anche con
   l'attributo hidden, e la fascia IN ONDA si vedeva pure a radio spenta. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--testo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.dentro { position: relative; max-width: var(--largo); margin: 0 auto; padding: 0 22px; }

.titolo {
  font-family: var(--slab);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  text-align: center;
  margin: 0 0 34px;
}
.titolo--chiaro { color: var(--bianco); }

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--nero); color: var(--giallo);
  padding: 12px 18px; font-weight: 700;
}
.salta:focus { left: 0; }

/* ─── Icone social, dal font che c'era gia' ───────────────── */
@font-face {
  font-family: 'Socicon';
  src: url('/assets/font/socicon.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: block;
}
.ico {
  font-family: 'Socicon'; font-style: normal; font-weight: normal;
  line-height: 1; speak: none; -webkit-font-smoothing: antialiased;
}
.ico-apple::before { content: '\e008'; }
.ico-facebook::before { content: '\e028'; }
.ico-instagram::before { content: '\e044'; }
.ico-mixcloud::before { content: '\e053'; }
.ico-play::before { content: '\e064'; }
.ico-whatsapp::before { content: '\e099'; }

/* ─── Fascia IN ONDA ──────────────────────────────────────── */
.onda {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--nero); color: var(--giallo);
  padding: 11px 22px; font-size: .95rem;
}
.onda strong { letter-spacing: .14em; font-weight: 700; }
.onda span:not(.onda-punto) { color: var(--bianco); }
.onda a {
  margin-left: auto;
  background: var(--giallo); color: var(--nero);
  padding: 6px 16px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.onda-punto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rosso); animation: battito 1.6s ease-in-out infinite;
}
@keyframes battito { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }

/* ─── Apertura gialla ─────────────────────────────────────── */
.apertura {
  background: var(--giallo);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 5vw, 70px); flex-wrap: wrap;
  padding: clamp(40px, 7vw, 80px) 22px;
  text-align: center;
}
.apertura-logo { display: block; }
.apertura-logo img {
  width: clamp(190px, 26vw, 330px); height: auto;
}
.claim {
  font-family: var(--slab); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  margin: 0; color: var(--nero);
}
.claim-parola { color: var(--ciano); }
.claim-parola::after {
  content: '|'; margin-left: 2px;
  animation: lampeggia 1s step-end infinite;
}
@keyframes lampeggia { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

/* ─── Diretta, sopra la foto dei dischi ───────────────────── */
.diretta {
  position: relative;
  padding: clamp(46px, 7vw, 80px) 0;
  /* niente 'fixed': con l'immagine ancorata alla finestra la sezione piu'
     alta dello schermo resta scoperta, e su iOS lo scorrimento singhiozza. */
  /* image-set: il browser prende il webp se lo sa leggere, il jpeg se no.
     Due misure perche' mandare 1900px a un telefono e' banda buttata. */
  background: url('/assets/img/dischi.jpg') center/cover no-repeat;
  background-image: -webkit-image-set(url('/assets/img/dischi-1100.webp') 1x,
                                      url('/assets/img/dischi-1920.webp') 1.8x);
  background-image: image-set(url('/assets/img/dischi-1100.webp') 1x,
                              url('/assets/img/dischi-1920.webp') 1.8x);
}
.velo { position: absolute; inset: 0; background: var(--ciano); opacity: .5; }
.velo--forte { opacity: .8; }

.lettore { max-width: 620px; margin: 0 auto; }
.lettore iframe { border-radius: 6px; }
.ripiego { background: rgba(0, 0, 0, .55); color: #fff; padding: 20px; border-radius: 8px; }
.ripiego p { margin: 0 0 10px; font-weight: 700; }
.ripiego audio { width: 100%; }

.in-onda {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px;
  align-items: start; margin-top: 30px;
}
.riquadro {
  background: rgba(0, 0, 0, .45);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .3);
}
.sedici-noni { position: relative; padding-top: 56.25%; }
.sedici-noni iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.riquadro--chat iframe { width: 100%; height: 560px; border: 0; display: block; }

.fuori-onda {
  margin: 30px auto 0; max-width: 620px;
  background: rgba(0, 0, 0, .45); color: var(--bianco);
  border-radius: 10px; padding: 22px 24px; text-align: center;
}
.fuori-onda-prossimo { margin: 0; font-weight: 500; }
.palinsesto { margin-top: 14px; text-align: left; }
.palinsesto summary { cursor: pointer; text-align: center; opacity: .85; }
.palinsesto ul { list-style: none; padding: 0; margin: 16px 0 0; }
.palinsesto li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: .95rem;
}
.palinsesto li span:last-child { opacity: .8; white-space: nowrap; }

/* ─── Puntate ─────────────────────────────────────────────── */
.puntate { background: var(--ciano); color: var(--bianco); padding: clamp(46px, 7vw, 80px) 0; }
.puntate .titolo { color: var(--bianco); }
.filtri { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
.filtro {
  background: transparent; color: var(--bianco);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px; padding: 7px 16px;
  font: inherit; font-size: .9rem; cursor: pointer;
}
.filtro[aria-pressed="true"] { background: var(--giallo); color: var(--nero); border-color: var(--giallo); font-weight: 700; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.puntata { background: var(--bianco); color: var(--nero); border-radius: 10px; overflow: hidden; }
.puntata img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: #000; }
.puntata-testo { padding: 14px 16px 18px; }
.puntata-titolo { font-family: var(--slab); font-weight: 700; margin: 0 0 4px; font-size: 1rem; }
.puntata-dati { color: #6b6b6b; font-size: .85rem; margin: 0; }
.copertina { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.copertina::after {
  content: '▶'; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: 2.4rem; color: #fff;
  background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .18s;
}
.copertina:hover::after, .copertina:focus-visible::after { opacity: 1; }
.quante { text-align: center; opacity: .85; margin: 22px 0 0; font-size: .9rem; }

/* ─── App ─────────────────────────────────────────────────── */
.app { background: var(--giallo); padding: clamp(46px, 7vw, 80px) 0 0; text-align: center; }
.pillole { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.pillola {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--nero); color: var(--bianco);
  font-family: var(--slab); font-weight: 700; font-size: 1.05rem;
  padding: 12px 26px; border-radius: 999px; text-decoration: none;
}
.pillola .ico { font-size: 1.1rem; }
.telefono { display: block; margin: 40px auto 0; max-width: 560px; }
.telefono img { width: 100%; }

/* ─── Contatti, sopra la foto del giradischi ──────────────── */
.contatti {
  position: relative; color: var(--bianco);
  padding: clamp(46px, 7vw, 84px) 0;
  background: url('/assets/img/touch-1.jpg') center/cover no-repeat;
  background-image: -webkit-image-set(url('/assets/img/touch-1100.webp') 1x,
                                      url('/assets/img/touch-1920.webp') 1.8x);
  background-image: image-set(url('/assets/img/touch-1100.webp') 1x,
                              url('/assets/img/touch-1920.webp') 1.8x);
}
.rete { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.rete a { text-decoration: none; display: block; }
.rete .ico { font-size: 2.6rem; display: block; margin-bottom: 12px; }
.rete span { font-family: var(--slab); font-size: .98rem; }

/* ─── Piede ───────────────────────────────────────────────── */
.piede { background: var(--nero); color: #b9b9b9; text-align: center; padding: 26px 22px 34px; font-size: .85rem; }
.piede p { margin: 4px 0; }
.piede a { color: var(--giallo); }

/* ─── Telefono ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .in-onda { grid-template-columns: 1fr; }
  .rete { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Chat aperta ma niente diretta: si prende tutta la larghezza invece di
   lasciare una colonna vuota accanto a se'. */
.in-onda--sola { grid-template-columns: 1fr; }

/* ─── Pagine di testo (privacy) ───────────────────────────── */
.apertura--corta { padding: 30px 22px; gap: 24px; }
.apertura--corta .apertura-logo img { width: 120px; }
.claim--piccolo { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.documento { padding: clamp(36px, 6vw, 60px) 0; }
.documento .dentro { max-width: 760px; }
.documento h2 {
  font-family: var(--slab); font-weight: 700;
  font-size: 1.3rem; margin: 36px 0 10px;
}
.documento p, .documento li { line-height: 1.7; }
.documento ul { padding-left: 22px; }
.documento li { margin-bottom: 8px; }
.documento a { color: var(--ciano); }
.aggiornato { color: #6b6b6b; font-size: .9rem; margin-top: 0; }
.ritorno { margin-top: 44px; font-weight: 700; }

/* Il link per portarsi via la puntata. Discreto: chi guarda l'archivio di
   solito vuole vedere, scaricare e' l'eccezione. */
.scarica {
  display: inline-block; margin-top: 10px;
  font-size: .85rem; font-weight: 700; text-decoration: none;
  color: var(--ciano); border-bottom: 2px solid currentColor;
}
.scarica:hover { color: var(--nero); }