/* La pagina del video (13/10/2026): il video di presentazione è il contenuto principale della pagina. Prima del tocco
   su Play c'è solo la miniatura (nessuna richiesta a YouTube); al tocco, o da un capitolo, js/video.js mette il
   lettore di youtube-nocookie.com al suo posto. Caricato solo in quella pagina, come calendario.css nel calendario. */
.video-page .yt { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; margin: 22px 0 10px; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.video-page .yt img, .video-page .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.video-page .yt img { opacity: 0.92; }
.video-page .yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px 12px 18px; border: 0; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease; }
.video-page .yt-play:hover, .video-page .yt-play:focus-visible { transform: translate(-50%, -50%) scale(1.05); }
.video-page .yt-play svg { width: 28px; height: 28px; fill: currentColor; }
.video-page .yt-fallback { position: absolute; right: 12px; bottom: 10px; font-size: 0.8rem; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 5px 11px; border-radius: 999px; text-decoration: none; }
.video-page .yt-fallback:hover { background: rgba(0, 0, 0, 0.8); }
.video-page .yt.is-on .yt-play, .video-page .yt.is-on .yt-fallback, .video-page .yt.is-on img { display: none; }
.video-page .chapters { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.video-page .chapter { width: 100%; display: flex; gap: 12px; align-items: baseline; text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); color: inherit; font: inherit; cursor: pointer; }
.video-page .chapter:hover, .video-page .chapter:focus-visible { border-color: var(--lime); }
.video-page .chapter b { color: var(--lime); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .video-page .yt { border-radius: 12px; }
  .video-page .yt-play { padding: 10px 18px 10px 14px; font-size: 0.95rem; }
}