/* ==========================================================================
   CUSTOM PHONE VIDEO  ·  phone-slider-for-bricks
   Marco de celular fijo + portada con play + video (YouTube o MP4) dentro
   del hueco de la pantalla.

   Mismo esquema que Phone Slider: contenido ABAJO, marco ARRIBA, recorte
   con overflow:hidden posicionado en % sobre la caja del marco.

   Scoping: los defaults viven en .brxe-custom-phone-video. Bricks escribe los
   controles de estilo en #brxe-{id} y render() inyecta la geometria inline en
   el _root, asi que ambos pisan estos valores sin !important.

   Este archivo se encola SOLO desde enqueue_scripts() del elemento: en paginas
   donde el widget no se usa, no se carga.
   ========================================================================== */

.brxe-custom-phone-video {
  /* -- Geometria: la pisa el inline style de render() ---------------------- */
  /* apple-iphone14pro-silver-portrait.png: 1339x2716, hueco en 80,80 de 1179x2556 */
  --cpv-frame-w: 1339;
  --cpv-frame-h: 2716;
  --cpv-screen-left: 5.9746%;
  --cpv-screen-top: 2.9455%;
  --cpv-screen-width: 88.0508%;
  --cpv-screen-height: 94.1090%;
  --cpv-screen-radius: 8.4818% / 3.9124%;

  /* -- Look: lo pisan los controles de estilo de Bricks -------------------- */
  --cpv-max-width: 360px;
  --cpv-screen-bg: #000;
  --cpv-poster-fit: cover;
  --cpv-poster-position: center center;
  --cpv-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .35) 100%);

  /* % del ANCHO del hueco: el play escala con el celular. 76px de tope,
     56px de piso para que siga siendo un blanco tactil comodo */
  --cpv-play-size: clamp(56px, 24%, 76px);
  --cpv-play-icon-size: 42%;
  --cpv-play-icon-offset: 8%;
  --cpv-play-bg: rgba(255, 255, 255, .22);
  --cpv-play-bg-hover: rgba(255, 255, 255, .34);
  --cpv-play-color: #fff;
  --cpv-play-blur: 10px;
  --cpv-play-hover-scale: 1.08;
  --cpv-fade: 350ms;

  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--cpv-max-width);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   CAJA DEL MARCO (aspect-ratio = responsive sin px fijos)
   -------------------------------------------------------------------------- */
.brxe-custom-phone-video .cpv-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cpv-frame-w) / var(--cpv-frame-h);
}

/* ==========================================================================
   >>> BLOQUE DE RECORTE <<<
   Con el marco del iPhone un rectangulo NO alcanza: el cuerpo tiene las
   esquinas tan redondeadas que el vertice del hueco cae FUERA del cuerpo,
   donde el PNG tambien es transparente, y asoma un puntito negro. De ahi el
   border-radius, que render() calcula en % a partir del radio en px del
   original (control "Corner radius").
   ========================================================================== */
.brxe-custom-phone-video .cpv-screen {
  position: absolute;
  left:   var(--cpv-screen-left);
  top:    var(--cpv-screen-top);
  width:  var(--cpv-screen-width);
  height: var(--cpv-screen-height);
  border-radius: var(--cpv-screen-radius);
  overflow: hidden;
  background: var(--cpv-screen-bg);
  z-index: 1;
}
/* ======================= FIN BLOQUE DE RECORTE ========================== */

/* --------------------------------------------------------------------------
   PORTADA + PLAY
   Todo el hueco es un unico <button>: se puede tocar en cualquier parte de
   la pantalla, y para el lector de pantalla es un solo control.
   -------------------------------------------------------------------------- */
.brxe-custom-phone-video .cpv-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--cpv-fade) ease, visibility 0s linear var(--cpv-fade);
}

.brxe-custom-phone-video .cpv-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: var(--cpv-poster-fit);
  object-position: var(--cpv-poster-position);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.brxe-custom-phone-video .cpv-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cpv-overlay);
  pointer-events: none;
}

.brxe-custom-phone-video.cpv-no-overlay .cpv-cover::before {
  display: none;
}

.brxe-custom-phone-video .cpv-play {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--cpv-play-size);
  /* height en % se mediria contra el ALTO del hueco: se cuadra por ratio */
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: var(--cpv-play-bg);
  color: var(--cpv-play-color);
  -webkit-backdrop-filter: blur(var(--cpv-play-blur));
  backdrop-filter: blur(var(--cpv-play-blur));
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  transition: transform 250ms ease, background-color 250ms ease;
}

/* Sirve para el SVG por defecto y para iconos del control (svg o <i>) */
.brxe-custom-phone-video .cpv-play svg,
.brxe-custom-phone-video .cpv-play img {
  width: var(--cpv-play-icon-size);
  height: var(--cpv-play-icon-size);
  margin-left: var(--cpv-play-icon-offset);   /* centro optico del triangulo */
  display: block;
  fill: currentColor;
}
.brxe-custom-phone-video .cpv-play i {
  font-size: calc(var(--cpv-play-size) * .42);
  margin-left: var(--cpv-play-icon-offset);
  line-height: 1;
}

.brxe-custom-phone-video .cpv-cover:hover .cpv-play {
  transform: scale(var(--cpv-play-hover-scale));
  background: var(--cpv-play-bg-hover);
}

.brxe-custom-phone-video .cpv-cover:focus-visible {
  outline: none;
}
.brxe-custom-phone-video .cpv-cover:focus-visible .cpv-play {
  outline: 2px solid var(--cpv-play-color);
  outline-offset: 4px;
}

/* Cargando: el play late hasta que el reproductor avisa que esta listo */
.brxe-custom-phone-video.is-loading .cpv-cover {
  cursor: progress;
}
.brxe-custom-phone-video.is-loading .cpv-play {
  animation: cpv-pulse 900ms ease-in-out infinite;
}
@keyframes cpv-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.92); opacity: .7; }
}

/* Precargado (YouTube): la portada se sigue viendo pero el toque la
   atraviesa y cae en el iframe de YouTube que esta debajo. Asi iOS cuenta el
   toque como hecho DENTRO del reproductor y arranca con sonido a la primera.
   El hover se mira en el root porque el mouse ahora esta sobre el iframe. */
.brxe-custom-phone-video.is-armed .cpv-cover {
  pointer-events: none;
}
.brxe-custom-phone-video.is-armed:hover .cpv-play {
  transform: scale(var(--cpv-play-hover-scale));
  background: var(--cpv-play-bg-hover);
}

/* Reproduciendo: la portada se va y deja pasar los clicks al reproductor */
.brxe-custom-phone-video.is-playing .cpv-cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   REPRODUCTOR (lo crea el JS recien al hacer click)
   -------------------------------------------------------------------------- */
.brxe-custom-phone-video .cpv-player {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.brxe-custom-phone-video .cpv-player iframe,
.brxe-custom-phone-video .cpv-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  display: block;
  background: var(--cpv-screen-bg);
}

/* MP4: el ajuste es nativo */
.brxe-custom-phone-video .cpv-player video {
  object-fit: contain;
}
.brxe-custom-phone-video.is-fit-cover .cpv-player video {
  object-fit: cover;
}

/* YouTube no tiene object-fit: para "cover" se agranda el iframe a 9:16
   por alto y se centra; el overflow del hueco recorta los costados. */
.brxe-custom-phone-video.is-fit-cover .cpv-player iframe {
  left: 50%;
  width: auto;
  aspect-ratio: 9 / 16;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   EL MARCO, POR ENCIMA (no intercepta clicks)
   -------------------------------------------------------------------------- */
.brxe-custom-phone-video .cpv-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .brxe-custom-phone-video {
    --cpv-fade: 1ms;
    --cpv-play-hover-scale: 1;
  }
  .brxe-custom-phone-video.is-loading .cpv-play {
    animation: none;
  }
}