/* Testimonianze in video: carosello e facciata click-to-play.
 *
 * SCRITTO A MANO. Non lo genera scripts/genera-css.mjs e non lo tocca: quello
 * produce solo assets/tailwind.css e assets/fa/icone.css. Le classi vt-* qui
 * dentro entrano comunque nell'impronta di verifica-css.mjs, perche' compaiono
 * negli attributi class= delle pagine: dopo averle aggiunte si rigenera.
 *
 * Due scelte che non si vedono leggendo l'HTML:
 *
 * 1. Il carosello e' scorrimento nativo (overflow-x + scroll-snap), non un
 *    secondo motore JavaScript. Col dito funziona senza che noi scriviamo
 *    niente, e se il JS non parte i video restano tutti raggiungibili.
 * 2. L'ultimo riquadro si vede a meta' perche' --vt-visibili e' un numero con
 *    la virgola, non perche' ci sia un ritaglio: 1.5 su telefono, 2.5 su
 *    tablet. E' l'indizio che dice "scorri, ce n'e' ancora".
 *
 * Da 1024px i tre video ci stanno tutti in fila: li' non c'e' niente da
 * scorrere, quindi niente sbirciata e niente overflow.
 */

.vt-riga {
  --vt-gap: 16px;
  --vt-visibili: 1.5;
  display: flex;
  gap: var(--vt-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Lo scorrimento morbido sta qui e non nella chiamata JS:
   * scrollTo({behavior:'smooth'}) viene ignorato da alcuni motori (e da tutti
   * quando il sistema chiede meno animazioni) e il carosello non si muove
   * affatto. Assegnare scrollLeft invece si muove sempre, e se il browser
   * conosce scroll-behavior lo fa pure con l'animazione. */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.vt-riga::-webkit-scrollbar { display: none; }

.vt-card {
  flex: 0 0 calc((100% - var(--vt-gap) * (var(--vt-visibili) - 1)) / var(--vt-visibili));
  scroll-snap-align: start;
  margin: 0;
  min-width: 0;
}

@media (min-width: 768px) { .vt-riga { --vt-visibili: 2.5; } }
@media (min-width: 1024px) {
  .vt-riga { --vt-visibili: 3; --vt-gap: 24px; overflow-x: visible; }
}

/* Riga dei video brevi: stessa meccanica, formato verticale 9:16 e molte piu'
 * card. Qui i video sono tredici, quindi non ci stanno in fila a nessuna
 * larghezza: lo scorrimento resta acceso anche sul desktop, dove la riga base
 * invece lo spegne. */
.vt-corti { --vt-visibili: 2.3; --vt-gap: 12px; }
@media (min-width: 768px) { .vt-corti { --vt-visibili: 4.3; } }
@media (min-width: 1024px) { .vt-corti { --vt-visibili: 6.3; --vt-gap: 16px; overflow-x: auto; } }

.vt-corti .vt-schermo {
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.vt-corti .vt-tasto { width: 44px; height: 44px; }
.vt-corti .vt-tasto::before { border-width: 8px 0 8px 13px; margin-left: 3px; }

/* Il video che non sta su YouTube porta scritto dove va a finire il clic. */
.vt-marchio {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}

.vt-schermo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #14103a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.vt-schermo > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vt-avvia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}
.vt-avvia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-avvia:focus-visible { outline: 3px solid #ffa726; outline-offset: 3px; }

/* Il triangolo e' disegnato con i bordi: nessuna icona da tenere viva in
 * assets/fa/icone.css, quindi un file in meno che puo' perdere un simbolo. */
.vt-tasto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  transition: transform .2s ease, background .2s ease;
}
.vt-tasto::before {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #1a1464;
  margin-left: 4px;
}
.vt-avvia:hover .vt-tasto { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

/* Il colore si eredita: la stessa didascalia sta bene sul bianco delle pagine
 * e sul blu scuro del deck, senza una seconda regola. */
.vt-did { margin-top: 12px; line-height: 1.35; color: inherit; }
.vt-nome { display: block; font-weight: 700; font-size: 15px; }
.vt-ruolo { display: block; font-size: 13px; opacity: .62; margin-top: 2px; }

/* Puntini di scorrimento, gli stessi del carosello recensioni. Li costruisce
 * js/video-testimonial.js: senza JavaScript non scorrerebbero niente, quindi
 * scriverli nell'HTML vorrebbe dire lasciare in pagina dei bottoni morti.
 * Da 1024px non c'e' niente da scorrere e spariscono. */
.vt-punti {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.vt-punti button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.vt-punti button[aria-current="true"] { background: #1a1464; transform: scale(1.2); }
.vt-punti button:focus-visible { outline: 3px solid #ffa726; outline-offset: 3px; }

/* Sul fondo scuro dell'header il blu dei puntini sparirebbe. */
.vt-su-scuro + .vt-punti button { background: rgba(255, 255, 255, .3); }
.vt-su-scuro + .vt-punti button[aria-current="true"] { background: #ffa726; }

/* Sotto i puntini della riga dei brevi viene subito la CTA: senza questo
 * respiro il pulsante sembra attaccato ai puntini e si fatica a capire quali
 * dei due si sta premendo. */
.vt-corti + .vt-punti { margin-bottom: 30px; }

/* La riga dei brevi si scorre a ogni larghezza, quindi i puntini restano. */
@media (min-width: 1024px) {
  .vt-punti { display: none; }
  .vt-corti + .vt-punti { display: flex; }
}

@media (max-width: 767px) { .vt-tasto { width: 52px; height: 52px; } }

@media (prefers-reduced-motion: reduce) {
  .vt-tasto { transition: none; }
  .vt-avvia:hover .vt-tasto { transform: translate(-50%, -50%); }
  .vt-punti button { transition: none; }
  .vt-riga { scroll-behavior: auto; }
}


/* ── Riquadro di riproduzione ──────────────────────────────────────────────
 *
 * I video brevi sono verticali e le loro card sono strette: 119px sul desktop,
 * 142px sul telefono. Un player dentro una card di quella misura non si guarda,
 * e con l'embed di Instagram, che porta con se' la sua barra di nome, like e
 * commenti, non si guarda proprio. Quindi il clic apre il video sopra la
 * pagina, alla misura giusta, e si chiude con la X, con un clic fuori o con Esc.
 *
 * Le testimonianze 16:9 restano invece dove sono: la' la card e' larga ~390px e
 * il video ci sta comodo, aprire un riquadro sarebbe un passaggio in piu' per
 * niente.
 */
.vt-telo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 4, 28, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vt-telo iframe {
  border: 0;
  border-radius: 16px;
  background: #000;
  width: min(92vw, 400px);
  height: min(86vh, 711px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
/* L'embed di Instagram ha una barra sua sopra e sotto il video: se gli si da'
 * l'altezza di un 9:16 il video resta schiacciato. Gli serve piu' spazio. */
.vt-telo[data-fonte="instagram"] iframe { height: min(92vh, 780px); background: #fff; }

.vt-chiudi {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.vt-chiudi:hover { background: rgba(255, 255, 255, .26); }
.vt-chiudi:focus-visible { outline: 3px solid #ffa726; outline-offset: 3px; }