/* =========================================================================
   LAQUIN FOODS · Hero con video de fondo

   Lo carga el plugin «Laquin Foods — Optimización» (assets/hero.css). El
   video lo inserta el propio plugin dentro del contenedor del hero, como
   primer hijo, así que el orden de las capas sale del marcado:

     1. el video          .lq-hero__fondo
     2. el velo oscuro    .lq-hero__velo
     3. el titular        .uagb-container-inner-blocks-wrap

   El logo y el menú no cuelgan del hero —viven en la cabecera, que menu.css
   deja fija y transparente— pero como el hero arranca en el borde de arriba
   de la página, el video les hace de fondo igual, sin tocarlos.

   Sobre la especificidad: Spectra escribe las reglas del bloque con dos
   clases (.wp-block-uagb-container.uagb-block-1f9698d0) en una hoja que se
   imprime antes que ésta. Aquí se usan tres para no depender del orden, que
   LiteSpeed puede rebarajar al combinar las hojas.
   ========================================================================= */

.lq-hero {
  /* Casi negro de la paleta (--ast-global-color-6). El velo y los rellenos
     se escriben en rgba con estos mismos valores. */
  --lq-hero-tinta: 20, 6, 9;

  /* El negro real del video, medido de sus esquinas (no el vino de la
     marca): así el video se funde con el fondo del hero sin costura
     visible en las franjas que deja libres al no recortarlo. */
  --lq-video-negro: 2, 5, 7;
}

/* ---------- El contenedor del hero ---------- */

/* Alto de pantalla, el degradado vino fuera —lo sustituye el video— y lo que
   asome del video recortado, que si no aparece barra horizontal. */
.wp-block-uagb-container.uagb-is-root-container.lq-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: rgb(var(--lq-video-negro));
}

/* El titular, por delante del velo. */
.lq-hero > .uagb-container-inner-blocks-wrap {
  position: relative;
  z-index: 2;
}

/* Sobre video en movimiento el texto blanco se lee mejor con una sombra
   ancha y muy suave: no se percibe como sombra, sólo despega las letras. */
.lq-hero .uagb-heading-text {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}

/* ---------- El video ---------- */

/* Va por id, no por clase: Spectra le pone `position: relative; width: 100%`
   a todo hijo directo de un contenedor con una cadena de una docena de
   `:not()`, que ninguna combinación de clases alcanza. Con el id la regla
   gana por sí sola y no hace falta !important.

   Esta capa es exactamente el rectángulo del hero: mismo origen, mismo ancho
   y mismo alto. Nada de rellenos ni de centrado, para que el video no pueda
   quedar como una franja con negro suelto arriba y abajo. */
#lq-hero-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* El póster va de fondo: es lo que se ve mientras el video arranca, y lo
     único que se ve si el sistema pide menos movimiento. Va a `cover`, igual
     que el video, para que uno releve al otro sin ningún salto. */
  background-color: rgb(var(--lq-video-negro));
  background-image: url("hero/chuleta-humo.jpg");
  background-repeat: no-repeat;
  background-position: 50% 46%;
  background-size: cover;
}

/* El video llena la capa entera y se recorta con `cover`.

   El corte va centrado a lo ancho —la chuleta vive entre el 37 % y el 62 %
   del cuadro— y un punto por encima del centro a lo alto: en ventanas más
   anchas que 16:9 el recorte se come franjas de arriba y abajo, y ese 46 %
   es lo que salva la punta del hueso, que llega hasta el 12 % del alto.

   Se apunta con el id por delante para ganarle a la regla de Astra que le
   pone `max-width: 100%` a todo elemento multimedia. */
#lq-hero-fondo .lq-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  object-position: 50% 46%;
  filter: none;
  pointer-events: none;
  background: transparent;
}

/* ---------- El velo ---------- */

/* Dos degradados sobre el video:

     vertical    oscurece la franja del menú y el encuentro con la cintilla
     horizontal  oscurece el lado del titular

   En el centro-derecha se quedan en nada, que es justo donde está la carne:
   se lee el texto sin apagar ni el humo ni la chuleta.

   Los dos se superponen, así que la oscuridad no se suma: se multiplica lo
   que dejan pasar. Un 0,4 sobre un 0,6 no da 1, da 0,76. */
.lq-hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(
      180deg,
      rgba(20, 6, 9, 0.78) 0%,
      rgba(20, 6, 9, 0.34) 20%,
      rgba(20, 6, 9, 0.12) 46%,
      rgba(20, 6, 9, 0.42) 84%,
      rgba(20, 6, 9, 0.72) 100%
    ),
    linear-gradient(
      90deg,
      rgba(20, 6, 9, 0.82) 0%,
      rgba(20, 6, 9, 0.66) 22%,
      rgba(20, 6, 9, 0.38) 42%,
      rgba(20, 6, 9, 0.14) 58%,
      rgba(20, 6, 9, 0) 74%
    );
}

/* ---------- Tablet ---------- */

/* Spectra deja 250 px de relleno abajo, que venían de la imagen de producto
   que había antes de fondo. Con el video sobran: dejaban un hueco muerto
   entre el titular y la cintilla. */
@media (max-width: 976px) {

  .wp-block-uagb-container.uagb-is-root-container.lq-hero {
    min-height: 92vh;
    min-height: 92svh;
    padding-bottom: 96px;
  }

  /* Aquí el titular deja de estar a un lado y se planta encima de la carne:
     medido, ocupa del 44 % al 66 % del alto del hero. El velo vertical se
     ensancha en esa franja y el lateral se afloja, que si no el borde
     izquierdo se iba a negro. */
  .lq-hero__velo {
    background-image:
      linear-gradient(
        180deg,
        rgba(20, 6, 9, 0.84) 0%,
        rgba(20, 6, 9, 0.44) 16%,
        rgba(20, 6, 9, 0.26) 30%,
        rgba(20, 6, 9, 0.48) 42%,
        rgba(20, 6, 9, 0.58) 55%,
        rgba(20, 6, 9, 0.50) 70%,
        rgba(20, 6, 9, 0.52) 86%,
        rgba(20, 6, 9, 0.78) 100%
      ),
      linear-gradient(
        90deg,
        rgba(20, 6, 9, 0.34) 0%,
        rgba(20, 6, 9, 0.18) 40%,
        rgba(20, 6, 9, 0) 70%
      );
  }
}

/* ---------- Móvil ---------- */

/* En vertical el titular ocupa todo el ancho, así que el velo pasa a ser
   sobre todo vertical: si se mantuviera el lateral, la chuleta —que queda
   centrada— se apagaría por la izquierda. */
@media (max-width: 767px) {

  .wp-block-uagb-container.uagb-is-root-container.lq-hero {
    min-height: 86vh;
    min-height: 86svh;
    padding-bottom: 72px;
  }

  /* Aquí entra el archivo vertical 9:16, que el plugin sirve con
     `<source media>`. Su póster tiene el mismo encuadre, así que el relevo
     entre uno y otro no se nota. Al ser ya vertical, `cover` apenas recorta
     y la chuleta queda entera y centrada. */
  #lq-hero-fondo {
    background-image: url("hero/chuleta-humo-vertical.jpg");
    background-position: 50% 50%;
  }

  #lq-hero-fondo .lq-hero__video {
    object-position: 50% 50%;
  }

  /* El pie se afloja respecto al de tablet: con el encuadre vertical ahí
     abajo hay humo, y apagarlo del todo dejaba una franja negra muerta antes
     de la cintilla. Lo justo para que el borde con el papel siga limpio. */
  .lq-hero__velo {
    background-image:
      linear-gradient(
        180deg,
        rgba(20, 6, 9, 0.84) 0%,
        rgba(20, 6, 9, 0.44) 15%,
        rgba(20, 6, 9, 0.24) 29%,
        rgba(20, 6, 9, 0.50) 42%,
        rgba(20, 6, 9, 0.60) 55%,
        rgba(20, 6, 9, 0.48) 72%,
        rgba(20, 6, 9, 0.42) 88%,
        rgba(20, 6, 9, 0.68) 100%
      );
  }
}

/* ---------- Movimiento reducido ---------- */

/* Quien pide menos movimiento en su sistema ve el póster quieto. El video
   además lo retira hero.js, para no descargarlo en balde; esta regla es la
   red por si el guion no llega a ejecutarse. */
@media (prefers-reduced-motion: reduce) {

  .lq-hero__video {
    display: none;
  }
}

/* =========================================================================
   Aire entre la cintilla de clientes y «Ahumados»

   La cintilla se inserta justo detrás del hero, y la sección de productos
   arrancaba pegada a ella. El espacio pertenece a «Ahumados» y por tanto
   sale con su fondo, que es el vino de la página.

   Se apunta por el id del ancla (#productos), que es el que usa el menú, y
   no por la clase de bloque de Spectra, que cambia si algún día se rehace
   el bloque.
   ========================================================================= */

#productos.wp-block-uagb-container {
  padding-top: 64px;
}

@media (max-width: 976px) {

  #productos.wp-block-uagb-container {
    padding-top: 56px;
  }
}

@media (max-width: 767px) {

  #productos.wp-block-uagb-container {
    padding-top: 44px;
  }
}