/*
 * «En vídeo» (14/09/2026). El vídeo que Joan (JRHSHOP) tiene subido en la ficha
 * de Amazon de cada producto, en un bloque propio de la ficha. No arranca solo:
 * portada y controles del navegador.
 *
 * Colocación (Toni, 14/09/2026): el título y el texto arriba, a lo ancho; debajo,
 * la foto y el vídeo **con el mismo alto y los bordes alineados**, con la
 * separación de la rejilla. La foto, el ancho de su proporción; el vídeo, el
 * resto. Vídeo vertical a la derecha de la foto; horizontal, a la izquierda.
 */
.gp-video-producto {
  align-items: stretch;
  background: #f5f5f7;
  border-radius: clamp(1.5rem, 2.8vw, 2.25rem);
  column-gap: clamp(1rem, 2.4vw, 2rem);
  display: grid;
  grid-template-areas:
    "texto texto"
    "video foto";
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  row-gap: clamp(1.25rem, 2.6vw, 2rem);
}

.gp-video-producto--vertical {
  grid-template-areas:
    "texto texto"
    "foto video";
  grid-template-columns: minmax(0, 1fr) auto;
}

.gp-video-producto__texto { grid-area: texto; }

.gp-video-producto__texto h2 {
  color: #1d1d1f;
  font-size: clamp(1.9rem, 3.4vw, 3.25rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

.gp-video-producto__texto p {
  color: #6e6e73;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  margin: 1rem 0 0;
  max-width: 34rem;
}

/*
 * Un solo alto para los dos: `--gp-video-alto`. La foto toma el ancho de su
 * proporción y el vídeo **ocupa el resto**, con franjas negras a los lados si
 * hace falta (Toni, 14/09: «no recortes toda la parte negra», que no quede hueco
 * en blanco). Solo en pantallas muy anchas se pone un tope al vídeo, para que
 * no sea casi todo negro: ahí va pegado a la foto y lo que sobre queda a la derecha.
 */
.gp-video-producto { --gp-video-alto: min(52vh, 26rem); }
.gp-video-producto--vertical { --gp-video-alto: min(74vh, 48rem); }

.gp-video-producto:not(.gp-video-producto--sin-foto) {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.gp-video-producto--vertical:not(.gp-video-producto--sin-foto) {
  grid-template-columns: max-content minmax(0, 1fr);
}

.gp-video-producto__marco {
  background: #000;
  border-radius: 1.25rem;
  grid-area: video;
  height: var(--gp-video-alto);
  justify-self: start;
  max-width: calc(var(--gp-video-alto) * 2);
  overflow: hidden;
  width: 100%;
}

.gp-video-producto--vertical .gp-video-producto__marco {
  max-width: calc(var(--gp-video-alto) * 1.25);
  min-width: calc(var(--gp-video-alto) * 9 / 16);
}

/* Horizontal: vídeo a la izquierda; si tiene tope, pegado a la foto por la derecha. */
.gp-video-producto:not(.gp-video-producto--vertical):not(.gp-video-producto--sin-foto) .gp-video-producto__marco { justify-self: end; }

.gp-video-producto__marco video {
  background: #000;
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/*
 * La foto: el mismo alto que el vídeo y el ancho de su proporción (una cuadrada
 * mide lo mismo de ancho que de alto). Si no cabe, se recorta sin deformarse.
 */
.gp-video-producto__fotos {
  grid-area: foto;
  min-width: 0;
}

.gp-video-producto__fotos img {
  background: #fff;
  border-radius: 1.25rem;
  display: block;
  height: var(--gp-video-alto);
  max-width: 100%;
  object-fit: cover;
  width: auto;
}

/* Sin foto, el vídeo solo, pegado a la izquierda. */
.gp-video-producto--sin-foto,
.gp-video-producto--sin-foto.gp-video-producto--vertical {
  grid-template-areas:
    "texto"
    "video";
  grid-template-columns: minmax(0, 1fr);
}

.gp-video-producto--sin-foto .gp-video-producto__marco { aspect-ratio: 16 / 9; width: auto; }

.gp-video-producto--sin-foto.gp-video-producto--vertical .gp-video-producto__marco { aspect-ratio: 9 / 16; min-width: 0; }

@media (max-width: 760px) {
  .gp-video-producto__fotos { display: none; }

  .gp-video-producto.gp-video-producto,
  .gp-video-producto.gp-video-producto--vertical:not(.gp-video-producto--sin-foto) {
    grid-template-areas:
      "texto"
      "video";
    grid-template-columns: minmax(0, 1fr);
  }

  .gp-video-producto .gp-video-producto__marco.gp-video-producto__marco {
    aspect-ratio: 16 / 9;
    height: auto;
    justify-self: stretch;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .gp-video-producto--vertical .gp-video-producto__marco.gp-video-producto__marco {
    aspect-ratio: 9 / 16;
    justify-self: center;
    max-height: 78vh;
    width: min(100%, 24rem);
  }
}