.c-video {
  margin: 0 0 var(--space-18);
}

/* Box a parte, non la <figure> stessa: la figcaption è un figlio
   normale della figure, non deve finire dentro il box con
   aspect-ratio/overflow:hidden (altrimenti resta nascosta dietro
   al video, che la sovrasta essendo position:absolute). */
/* --video-aspect-ratio: il rapporto lo detta il file, non lo stile — un
   16/9 imposto a un video 2004x1080 lo incornicerebbe con due bande nere
   dentro un box che ha già il suo bordo arrotondato. */
.c-video__box {
  position: relative;
  aspect-ratio: var(--video-aspect-ratio, 16 / 9);
  border-radius: var(--radius-8);
  overflow: hidden;
  background: var(--zinc-900);
}

.c-video__facade {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.c-video__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Immagine statica dentro il box (placeholder senza facade/iframe cliccabile). */
.c-video__box > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video servito da noi, con i controlli nativi del browser: nessuna
   facade e nessun JS, perché non c'è una richiesta a terzi da evitare.
   `contain` e non `cover`: il box ha già il rapporto del file, e se un
   domani non l'avesse è meglio una banda che un taglio. */
.c-video__box > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--space-60);
  height: var(--space-60);
  color: var(--zinc-50);
}

.c-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
}

.c-video__iframe.is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .c-video__iframe {
    transition: opacity var(--duration-250) var(--ease-out);
  }
}

/* Thumbnail e spinner restano visibili nel box overlay finché l'iframe
   non ha finito di caricare (evento load): evita il buco vuoto tra
   apertura overlay e comparsa video. L'iframe li copre una volta
   caricato, restano semplicemente sotto. */
.c-video-overlay__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-video-overlay__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--space-48);
  height: var(--space-48);
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--zinc-50);
  border-radius: var(--radius-full);
}

@media (prefers-reduced-motion: no-preference) {
  .c-video-overlay__spinner {
    animation: c-video-spin 0.8s linear infinite;
  }
}

@keyframes c-video-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Overlay: si ingrandisce sulla colonna contenuto (.l-section__content),
   non su tutto il viewport — stesso pattern di .c-masonry-overlay in
   portfolio.html. position: fixed verticalmente (segue il viewport),
   left/width impostati via JS in base al contenitore. Vedi design-system.md,
   sezione Z-index. */
.c-video-overlay {
  position: fixed;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay);
  z-index: var(--z-overlay);
  cursor: pointer;
}

.c-video-overlay[hidden] {
  display: none;
}

/* Il rapporto lo copia il JS dal box sorgente all'apertura: l'overlay
   deve avere la forma del video che sta aprendo, non una forma fissa. */
.c-video-overlay__box {
  position: relative;
  width: 100%;
  aspect-ratio: var(--video-aspect-ratio, 16 / 9);
  cursor: default;
}

.c-video-overlay__close {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  appearance: none;
  border: none;
  background: none;
  color: var(--zinc-50);
  font-size: var(--font-size-30);
  line-height: 1;
  cursor: pointer;
}

/* Fondo nero sotto il player: mentre il video carica, il box non
   lampeggia bianco. */
.c-video__box {
  border-radius: var(--radius-4);
  background: var(--color-black);
}