/* ============================================================
   LETTORE VIDEO — stile, usato dalla home e dall'area corsi
   Va insieme a lettore-video.js. Le fondamenta (colori, finestra, pulsanti)
   arrivano da style.css.
   ============================================================ */

/* La finestra di style.css non ha imbottitura: nel sito gliela dà il pezzo di
   pagina che ci infila app.js. Qui il contenuto è costruito da JavaScript, e
   senza questa riga titolo e note finiscono a filo del bordo, mezzi fuori. */
.modale-lettore .modale-corpo { padding: 26px; width: min(900px, 100%); }
.modale-lettore .modale-corpo h2 { font-size: 1.25rem; padding-right: 40px; }

.lettore {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 14px; overflow: hidden; margin: 14px 0;
}
.lettore iframe,
.lettore video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------- lettore YouTube senza YouTube ----------------
   La scatola contiene tre strati, uno sopra l'altro: il lettore vero, uno
   scudo trasparente che si prende tutti i click (così il titolo, il pulsante
   «Guarda su YouTube» e il menu del tasto destro non si raggiungono) e la
   barra dei comandi di questa pagina. */

.yt-scatola { position: absolute; inset: 0; background: #000; }
.yt-scatola iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.yt-scudo {
  position: absolute; inset: 0; z-index: 2;
  cursor: pointer;
  /* Trasparente ma non "vuoto": senza un fondo, in certi browser i click
     passano sotto e finiscono lo stesso dentro il lettore di YouTube */
  background: rgba(0, 0, 0, 0);
}

.yt-comandi {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
  opacity: 0; transition: opacity .2s;
}
/* I comandi compaiono avvicinando il mouse. Da telefono non c'è passaggio del
   mouse: lì restano sempre visibili, altrimenti non si mette in pausa. */
.yt-scatola:hover .yt-comandi,
.yt-scatola:focus-within .yt-comandi { opacity: 1; }
@media (hover: none) {
  .yt-comandi { opacity: 1; }
}

.yt-btn {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 0; border-radius: 9px;
  color: #fff; font-size: .95rem; line-height: 1;
}
.yt-btn:hover { background: rgba(255, 255, 255, .25); }

.yt-tempo {
  color: #fff; font-size: .8rem; font-variant-numeric: tabular-nums;
  min-width: 42px; text-align: center;
}

.yt-barra {
  flex: 1; height: 5px; cursor: pointer; accent-color: var(--accento);
  background: rgba(255, 255, 255, .3); border-radius: 999px; appearance: none;
}
.yt-barra::-webkit-slider-thumb {
  appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; cursor: pointer;
}
.yt-barra::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; cursor: pointer;
}

/* A schermo intero la scatola prende tutto: senza questo resterebbe alta
   quanto il riquadro 16:9 di prima, con due fasce nere enormi */
.yt-scatola:fullscreen { width: 100vw; height: 100vh; }

/* ---------------- il fermo immagine nostro ----------------
   Copre lo schermo iniziale di YouTube (titolo, canale, «Guarda su YouTube»),
   che prima dell'avvio lo disegna YouTube e non si può togliere. */

.yt-copertina {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; gap: 18px; align-content: center;
  background: linear-gradient(140deg, #0f1524, #05060a);
  background-size: cover; background-position: center;
  cursor: pointer; transition: opacity .3s;
}
/* Con una figura sotto, una velatura scura tiene leggibile il titolo */
.yt-copertina.con-figura::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(5, 7, 12, .62);
}
.yt-copertina.via { opacity: 0; pointer-events: none; }

.yt-copertina-titolo {
  position: relative; z-index: 1;
  color: #fff; font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.4rem);
  text-align: center; padding: 0 24px; text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.yt-avvio {
  position: relative; z-index: 1;
  width: 74px; height: 74px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accento), var(--accento-2));
  border: 0; color: #fff; font-size: 1.6rem; padding-left: 5px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
  transition: transform .2s;
}
.yt-avvio:hover { transform: scale(1.07); }

.lezione-note { color: var(--testo-2); font-size: .92rem; line-height: 1.6; }
.lezione-note:empty { display: none; }

/* Premuto play, il cerchio gira finché YouTube non ha caricato: senza, per
   due secondi non succede niente e si preme una seconda volta */
.yt-avvio.in-attesa {
  pointer-events: none;
  background: rgba(255, 255, 255, .18);
  animation: yt-attesa 1s linear infinite;
}
.yt-avvio.in-attesa span { visibility: hidden; }
.yt-avvio.in-attesa::after {
  content: ""; position: absolute; inset: 14px;
  border: 3px solid rgba(255, 255, 255, .3);
  border-top-color: #fff; border-radius: 50%;
}
@keyframes yt-attesa { to { transform: rotate(360deg); } }