/* WEB BRAIN — Slides del hero subidos como IMAGEN ENTERA.
 *
 * Solo aplica al modo "completo": la clase la lleva el widget de la imagen y la
 * plantilla de texto no la emite, asi que sus slides no se tocan.
 *
 * Por que existe este archivo. El contenedor del slide de WoodMart trae
 * `padding: 35px 5%`, y ademas la cadena de contenedores que hay entre el slide
 * y la imagen se dimensiona por su contenido. Con eso, un slide de 834x430 deja
 * un area util de 750x360 y la imagen queda flotando adentro con el fondo del
 * slider asomando por los cuatro lados: se ve como "una imagen puesta encima
 * del slide" y no como "el slide es la imagen", que es lo que se promete al
 * ofrecer este modo.
 *
 * Nada de esto se puede resolver desde Elementor: el padding lo pone un
 * ANCESTRO del arbol que construye la plantilla, no un nodo propio. De ahi el
 * :has().
 *
 * OJO al tocar los selectores: Elementor NO emite en el HTML el `_css_classes`
 * de un container, solo el de un widget. Por eso la clase cuelga del widget de
 * la imagen y los ancestros se alcanzan con :has(), y no al reves.
 *
 * Si el navegador no soporta :has() (Chrome <105, Safari <15.4) no se rompe
 * nada: la imagen se ve centrada y algo mas chica, que es exactamente el
 * comportamiento previo a este archivo.
 */

/* Sacar el padding es TODO lo que hace falta. Con el area util completa, una
   imagen al 100% del ancho resuelve su propio alto por la proporcion: a los
   834 px de ancho del slider, una imagen de 834x430 mide exactamente 430 de
   alto, que es lo que miden los otros slides.

   Los dos caminos "obvios" para forzar la altura se probaron y los dos ROMPEN
   el slide, porque su altura no es fija: la define el contenido.
     - height:100% en cada eslabon -> los intermedios no tienen altura resuelta,
       asi que en vez de estirarse, el slide se colapsaba de 430 a 380.
     - position:absolute + inset:0 -> saca la imagen del flujo, el slide se
       queda sin contenido que lo sostenga y colapsa igual.
   No hay nada que forzar: alcanza con no estorbar. */
.wd-slide-container:has(.naccato-hero-slide--imagen) {
  padding: 0 !important;
}

/* El otro tope son las alturas fijas: `.wd-slide-inner` viene con 360 px (el
   area util que dejan los 430 del slide menos sus 35+35 de padding) y el propio
   `.wd-slide` queda clavado en su min-height de 380. Con el padding ya fuera la
   imagen mide mas que eso y el slide —que tiene overflow:hidden— le cortaba la
   franja de abajo. Liberando las dos, el slide toma exactamente el alto de la
   imagen: a los 834 px de ancho del slider, los 430 de los otros slides.

   El !important no es pereza: las dos alturas las fija WoodMart con mas
   especificidad que cualquier selector razonable de este archivo. */
.wd-slide:has(.naccato-hero-slide--imagen),
.wd-slide-inner:has(.naccato-hero-slide--imagen) {
  height: auto !important;
}

.naccato-hero-slide--imagen,
.naccato-hero-slide--imagen .elementor-widget-container,
.naccato-hero-slide--imagen figure,
.naccato-hero-slide--imagen a {
  display: block;
  width: 100%;
  margin: 0;
}

/* `height: auto` es la clave: la imagen resuelve su alto por la proporcion en
   vez de que se lo impongamos. `object-fit: cover` queda igual por si el slider
   le fija una altura en algun breakpoint — asi recorta en vez de deformar. */
.naccato-hero-slide--imagen img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}