/* =========================================================
   AREA ADV — COMPONENTE VIDEO ALPHA (PILOTA)

   Destinazione server:
   wp-content/themes/uncode-child/assets/css/areaadv-alpha-video.css

   Caricato solo nelle pagine dove lo shortcode
   [areaadv_alpha_video] viene realmente usato.

   Il wrapper porta anche .project-editorial-media, quindi le
   larghezze responsive e i breakpoint arrivano già da
   scrolling.css. Qui c'è soltanto ciò che quel file non copre:
   il rapporto d'aspetto riservato in anticipo e il fondo
   trasparente necessario all'alpha.
   ========================================================= */

.areaadv-alpha-video {
  position: relative;

  /*
   * Il ratio viene scritto inline dal PHP come
   * --areaadv-alpha-ratio, letto dai metadata dell'attachment
   * oppure dal parametro ratio="" dello shortcode.
   *
   * Averlo sul wrapper (e non sul video) rende l'altezza
   * definita prima che il file venga scelto e scaricato:
   * niente layout shift e nessun ratio box Uncode da simulare.
   */
  width: 100%;
  aspect-ratio: var(--areaadv-alpha-ratio, 16 / 9);

  /*
   * Lo shortcode viene inserito in un modulo Testo, quindi il
   * wrapper non è per forza figlio diretto di .uncont: in quel
   * caso l'align-self:center del layout editorial non lo
   * centrerebbe. I margini auto lo centrano in entrambi i casi.
   */
  margin-right: auto;
  margin-left: auto;
}


.areaadv-alpha-video__media {
  display: block;

  /*
   * Il video riempie sempre e solo il riquadro riservato dal wrapper:
   * un'altezza in percentuale su un box con aspect-ratio non è
   * affidabile ovunque (Safari), e con un ratio sbagliato il video
   * usciva dal riquadro, sopra agli elementi successivi.
   */
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;

  margin: 0;
  padding: 0;

  border: 0;
  outline: 0;
  box-shadow: none;

  /* Un fondo opaco annullerebbe la trasparenza del video. */
  background: transparent;

  object-fit: contain;
  object-position: center center;

  /* Coerente con gli altri media editorial: decorativo. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;

  /* Ingrandimento facoltativo (zoom="" nello shortcode): cresce il
     disegno, non lo spazio che occupa nella pagina. */
  transform: scale(var(--areaadv-alpha-zoom, 1));
  transform-origin: center center;
}


/* Un'animazione ingrandita può sporgere oltre i bordi: niente
   scroll orizzontale della pagina. clip, a differenza di hidden,
   non crea un contenitore di scroll e non altera lo scroll verticale. */
html body.single-portfolio .project-editorial-layout:has(.areaadv-alpha-video) {
  overflow-x: clip !important;
}


/* Ratio della variante mobile, se lo shortcode ne ha una
   (--areaadv-alpha-ratio-mobile); altrimenti resta quello desktop. */
@media (max-width: 767.98px) {
  .areaadv-alpha-video {
    aspect-ratio:
      var(
        --areaadv-alpha-ratio-mobile,
        var(--areaadv-alpha-ratio, 16 / 9)
      );
  }

  .areaadv-alpha-video__media {
    transform:
      scale(
        var(
          --areaadv-alpha-zoom-mobile,
          var(--areaadv-alpha-zoom, 1)
        )
      );
  }
}


/* Il <video> resta vuoto finché il JS non ha scelto la
   variante: in quel momento non deve mostrare bordi o sfondi
   propri del browser. */
.areaadv-alpha-video__media:not([src]) {
  background: transparent;
}