/* ==========================================================================
   Blocco condiviso — VIDEO YOUTUBE (a facciata)

   Il riquadro non ha misure proprie: riempie il contenitore che lo ospita.
   Nell'Hero della Home quel contenitore e `.hero__media`, 1432 x 800.
   Non fissare qui nessuna altezza, o il blocco smette di essere riusabile.

   Il video di YouTube e 16:9 (1,778), il riquadro dell'Hero e 1,79: la
   copertina in `cover` perde meno di 5px in altezza. Impercettibile, ma e il
   motivo per cui non uso `contain`, che lascerebbe due bande nere.
   ========================================================================== */

.video {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Il fondo si vede solo finche manca la copertina: un riquadro incompleto
     resta comunque un riquadro del brand, non un buco bianco. */
  background: var(--gradient-card-how);
}

.video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.video__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(0 18 43 / .15) 0%, rgb(0 18 43 / .55) 100%);
}

/* --- Il tasto --------------------------------------------------------------
   E' grande quanto tutto il riquadro: cliccare ovunque sulla copertina fa
   partire il video, che e quello che chiunque si aspetta. Il cerchio col
   triangolo e solo la parte visibile.
-------------------------------------------------------------------------- */
.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-white);
}

.video__cerchio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .16);
  /* Il vetro smerigliato dietro al cerchio: dove non e supportato resta il
     bianco al 16%, che funziona lo stesso. */
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .35);
  transition: transform 260ms cubic-bezier(.22, .61, .36, 1),
              background-color 260ms ease;
}

/* Il triangolo e otticamente sbilanciato a sinistra dentro un cerchio: 3px a
   destra lo rimettono al centro percepito. Trucco vecchio, funziona sempre. */
.video__cerchio > svg {
  margin-left: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .video__play:hover .video__cerchio {
    transform: scale(1.08);
    background: rgb(255 255 255 / .26);
  }
}

.video__play:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -6px;
}

/* Il titolo in basso a sinistra: serve a far capire cosa parte prima di
   cliccare. `aria-hidden` perche il testo accessibile e gia dentro al tasto. */
.video__titolo {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  max-width: calc(100% - 2 * var(--space-5));
  pointer-events: none;
  color: var(--text-on-dark);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}

/* --- Dopo il clic ---------------------------------------------------------
   Il JS sostituisce il contenuto con l'iframe. Da qui in poi comanda YouTube.
-------------------------------------------------------------------------- */
.video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .video__cerchio { width: 64px; height: 64px; }
  .video__cerchio > svg { width: 22px; height: 22px; }
  .video__titolo {
    left: var(--space-4);
    bottom: var(--space-4);
    max-width: calc(100% - 2 * var(--space-4));
  }
}