/*
 * Aspetto del lettore video di croveglivideo nel negozio (giro 645, 12/11/2026).
 * Lo usano la galleria della scheda prodotto (slide aggiunte da views/js/video.js) e la pagina /video/...
 * Prefisso cvv- su tutto: niente deve toccare le classi del tema o di Creative Elements.
 */

/* ---- Il lettore (uguale nei due posti) ---------------------------------------------------------------- */

.cvv-lettore {
  position: relative;
  /* 9:16 come i video: il riquadro ha gia' la misura giusta prima che il video arrivi (la pagina non salta). */
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
}
.cvv-lettore .cvv-filmato {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Bottoni: 44 px almeno, la misura minima comoda per il dito (indicazioni di Apple e del W3C). */
.cvv-lettore .cvv-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cvv-lettore .cvv-bottone svg {
  width: 22px;
  height: 22px;
}
.cvv-lettore .cvv-bottone:hover {
  background: rgba(0, 0, 0, 0.75);
}
.cvv-lettore .cvv-bottone:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.cvv-lettore .cvv-comandi {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
/* Il play grande: quando il browser rifiuta la partenza da sola o con "riduci movimento". */
.cvv-lettore .cvv-grande {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.cvv-lettore .cvv-grande svg {
  width: 36px;
  height: 36px;
}
.cvv-lettore .cvv-grande[hidden] {
  display: none;
}

/* Schermo intero (Chrome, Firefox, Safari del Mac): il video riempie lo schermo, sfondo nero. */
.cvv-lettore:fullscreen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.cvv-lettore:-webkit-full-screen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* ---- Galleria della scheda prodotto --------------------------------------------------------------------- */

/* La slide e' quadrata come le foto (800x800): il video verticale sta in mezzo, ai lati le bande chiare.
   Cosi' la galleria non cambia altezza passando da una foto al video (decisione di Federico). */
.cvv-quadro {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Il grigio resta sotto: si vede finche' la copertina dello sfondo non e' arrivata (o se non arriva). */
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: lo sfondo sfocato e' piu' grande del quadrato (vedi sotto) e non deve uscire.
     isolation: lo sfocato resta "dentro" il quadrato e non si mescola con la pagina. */
  overflow: hidden;
  isolation: isolate;
}
.cvv-quadro .cvv-lettore {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  /* Giro 650: proporzioni vere del video (le mette video.js), cosi' ai lati non restano righe nere.
     Fondo trasparente invece del nero: se avanza mezzo pixel per gli arrotondamenti si vede lo sfondo, non una riga
     scura. Tolta anche l'ombra del giro 648: faceva bordi scuri che Federico ha trovato brutti. */
  aspect-ratio: var(--cvv-proporzione, 9 / 16);
  background: transparent;
}
.cvv-quadro .cvv-lettore .cvv-filmato {
  background: transparent;
}
/* A schermo intero il fondo torna nero, come in ogni lettore video. */
.cvv-quadro .cvv-lettore:fullscreen,
.cvv-quadro .cvv-lettore:fullscreen .cvv-filmato {
  background: #000;
}
.cvv-quadro .cvv-lettore:-webkit-full-screen,
.cvv-quadro .cvv-lettore:-webkit-full-screen .cvv-filmato {
  background: #000;
}
/* Giro 648: ai lati la copertina del video, ingrandita e sfocata (scelta di Federico).
   inset -10%: la sfocatura fa sbiadire i bordi verso il trasparente; allargando il riquadro i bordi sbiaditi
   finiscono fuori dal quadrato e non si vede un alone grigio. brightness 0.9: appena piu' scuro, cosi' il video
   in mezzo resta la cosa che si guarda.
   Giro 650: sfocatura 12 px invece di 24 (Federico: "ridurre la sfocatura anche dietro"). */
.cvv-quadro .cvv-sfondo {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(12px) saturate(1.2) brightness(0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.cvv-quadro .cvv-sfondo.cvv-pronto {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cvv-quadro .cvv-sfondo {
    transition: none;
  }
}
/* Nella galleria un tocco sul video apre lo schermo intero: la manina lo dice a chi usa il mouse. */
.cvv-lettore.cvv-tocca .cvv-filmato {
  cursor: pointer;
}
/* Due regole separate e non una con la virgola: un browser che non conosce una delle due scritture butterebbe via
   la regola intera. */
.cvv-lettore.cvv-tocca:fullscreen .cvv-filmato {
  cursor: auto;
}
.cvv-lettore.cvv-tocca:-webkit-full-screen .cvv-filmato {
  cursor: auto;
}
/* Riserva senza Creative Elements: il riquadro sotto la copertina, staccato di poco. */
.cvv-fuori-galleria {
  margin-top: 1rem;
}

/* Miniatura: copertina tagliata a quadrato come le altre, col segno del play in mezzo. */
.cvv-miniatura .cvv-mini {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
}
.cvv-miniatura .cvv-mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cvv-miniatura .cvv-segno {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  max-width: 40px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
}
.cvv-miniatura .cvv-segno svg {
  width: 55%;
  height: 55%;
}

/* ---- Pagina del video ----------------------------------------------------------------------------------- */

.cvv-pagina .cvv-colonne {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.cvv-pagina .cvv-colonna-video {
  flex: 0 0 auto;
  /* Il video intero sta nello schermo: alto al massimo l'80% della finestra (quindi largo 80vh x 9/16). */
  width: min(100%, calc(80vh * 9 / 16));
  margin: 0 auto;
}
.cvv-pagina .cvv-colonna-video .cvv-lettore {
  width: 100%;
  border-radius: 6px;
}
.cvv-pagina .cvv-colonna-testo {
  flex: 1 1 20rem;
  min-width: 0;
}
.cvv-pagina .cvv-titolo-pagina {
  margin: 0 0 0.25rem;
}
.cvv-pagina .cvv-durata {
  color: #6c6c6c;
  margin-bottom: 1rem;
}
.cvv-pagina .cvv-prodotto {
  margin-bottom: 1.5rem;
}
/* pre-line: i ritorni a capo scritti nel back office si vedono, senza HTML nei testi. */
.cvv-pagina .cvv-descrizione,
.cvv-pagina .cvv-testo {
  white-space: pre-line;
  line-height: 1.6;
}
.cvv-pagina .cvv-trascrizione,
.cvv-pagina .cvv-altri {
  margin-top: 2rem;
}
.cvv-pagina .cvv-trascrizione h2,
.cvv-pagina .cvv-altri h2 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}
.cvv-pagina .cvv-altri ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.cvv-pagina .cvv-altri a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 90px;
  font-size: 0.85rem;
}
.cvv-pagina .cvv-altri img {
  width: 90px;
  height: 160px;
  object-fit: cover;
  border-radius: 4px;
  background: #000;
}