/* ============================================================================
   assets/elementor-blog.css

   Forma del DOM de las TRES PLANTILLAS DEL BLOG y de los dos indices.

   Hermana de `assets/elementor-native.css`, con el mismo criterio y la misma
   frontera: toda regla esta acotada a `.lon-native`, la clase que el generador
   pone en la raiz de cada seccion del port nativo, asi que ninguna puede
   alcanzar al port atomico ni a nada de fuera.

   POR QUE HACE FALTA UNA HOJA APARTE
   ----------------------------------
   `assets/elementor-atomic.css` ya reemite el sistema de diseno con `.elementor`
   de ancestro, y ahi estan TODAS las reglas del blog: `.post-grid`,
   `.card-post`, `.post-feature`, `.article`, `.hero-split`, `.media-organic`.
   O sea que el diseno no falta. Lo que falta es lo unico que una hoja de
   reemision no puede resolver: la FORMA del arbol que pintan los widgets.

   Son tres cosas, y solo tres:

     1. La rejilla del bucle mete CUATRO envoltorios entre `.post-grid` y cada
        `.card-post`. Sin aplanarlos, la rejilla de la maqueta tiene un solo hijo
        y las sesenta y siete tarjetas caben en una columna de 280 px.
     2. Un widget de imagen mete DOS envoltorios entre su contenedor y el `<img>`,
        asi que `height:100%` no encuentra contra que resolverse y los selectores
        de hijo directo del sistema de diseno (`.post-feature > img`) no casan.
     3. `.e-con { width: var(--width) }` con `--width:100%` estira las cajas que
        en la maqueta van absolutas o se ajustan a su contenido (`.tags`).

   Cero diseno nuevo: cada valor es copia literal de `assets/components.css` o de
   `assets/site.css`. Lo unico que no sale de ahi es `display: contents`, que no
   es un valor de diseno sino la forma de quitar un envoltorio de la ecuacion.

   ORDEN DE ENCOLADO
   -----------------
     prio 10 · base-desktop.css            estilos base del motor
     prio 15 · elementor-atomic-fixes.css  neutralizacion del motor atomico
     prio 20 · elementor-atomic.css        sistema de diseno reemitido
     prio 25 · elementor-native.css        forma del DOM de los widgets clasicos
     prio 30 · ESTE ARCHIVO                forma del DOM de las plantillas del blog

   Se encola desde `inc/enqueue.php` declarando `land-of-nomads-elementor-native`
   como dependencia: el grafo de dependencias garantiza el orden aunque cambien
   las prioridades.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 · La rejilla del bucle, aplanada hasta la tarjeta
-------------------------------------------------------------------------------*/

/* El arbol que pinta el widget `loop-grid` dentro del asiento `.post-grid`:

     .post-grid                         <- la rejilla de la maqueta
       .elementor-widget-loop-grid      <- envoltorio del widget
         .elementor-widget-container    <- envoltorio interior del widget
           .elementor-loop-container    <- rejilla PROPIA del widget
             .e-loop-item               <- envoltorio por entrada
               a.card-post              <- la tarjeta

   La rejilla de la maqueta reparte con `repeat(auto-fill, minmax(280px, 1fr))`,
   que se adapta al ancho disponible. La del widget reparte en un numero fijo de
   columnas. Se conserva la de la maqueta, que es la aprobada, y se apaga la del
   widget con `display: contents`: los cuatro envoltorios dejan de generar caja y
   cada `.card-post` pasa a ser hijo directo de `.post-grid`.

   `display: contents` y no `grid-template-columns` copiado aqui: la medida vive
   en `components.css` y no debe existir en dos sitios. */
.lon-native .post-grid > .elementor-widget-loop-grid,
.lon-native .post-grid > .elementor-widget-loop-grid > .elementor-widget-container,
.lon-native .post-grid .elementor-loop-container,
.lon-native .post-grid .e-loop-item { display: contents; }


/* ----------------------------------------------------------------------------
   2 · La fotografia de la tarjeta
-------------------------------------------------------------------------------*/

/* `.card-post .media { aspect-ratio: 16/10 }` y `.card-post .media img
   { width:100%; height:100% }`   components.css:783-784

   El `height:100%` del `<img>` se resuelve contra su padre, y su padre ya no es
   `.media` sino los dos envoltorios del widget. Se les da altura para que la
   cadena llegue. Mismo patron y mismos valores que `elementor-native.css` aplica
   a `.card-property .media`. */
.lon-native .card-post .media > .elementor-widget-image { height: 100%; width: 100%; }
.lon-native .card-post .media > .elementor-widget-image > .elementor-widget-container { height: 100%; }
.lon-native .card-post .media > .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* `.post-feature > img { position:absolute; inset:0 }`   components.css:733
   Es un selector de HIJO DIRECTO y el hijo directo es ahora el envoltorio del
   widget. Se le pasa el anclaje a el, y el `<img>` llena su caja. Esto es del
   articulo destacado del indice, no de la tarjeta. */
.lon-native .post-feature > .elementor-widget-image,
.lon-native .post-feature > .elementor-widget-image > .elementor-widget-container {
  position: absolute;
  inset: 0;
}
.lon-native .post-feature > .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* `.post-feature { display:flex; align-items:flex-end }`   components.css:728-732
   En la maqueta la caja es una FILA y su unico hijo en flujo (`.body`, porque la
   fotografia y el velo van absolutos) se pega abajo con `align-items:flex-end`.
   El motor le pone `--flex-direction: column` en su bloque de estilos por
   identificador, y en una columna `align-items` alinea en HORIZONTAL: el titular
   del articulo destacado subia al borde de arriba de la fotografia, donde el velo
   todavia no ha oscurecido y el texto claro se queda sin contraste.

   Se devuelve la direccion de la maqueta escribiendo `flex-direction` derecho, no
   la variable: la regla del motor (`.e-con { flex-direction: var(--flex-direction) }`)
   vale (0,1,0) y esta (0,2,0), asi que gana sin tocar la variable ni el bloque de
   estilos que genera Elementor. */
.lon-native .post-feature { flex-direction: row; align-items: flex-end; }

/* `.page-dividido .media-organic img { height: clamp(420px, calc(100vh - 240px), 780px) }`
   site.css. La altura la lleva el `<img>`, asi que los envoltorios no necesitan
   altura; lo que si necesitan es no romper el recorte organico del contenedor,
   que se hace con `overflow:hidden` sobre `.media-organic`. Basta con que el
   `<img>` sea bloque: si queda en linea, su linea base deja una franja de fondo
   por debajo de la fotografia. */
.lon-native .media-organic > .elementor-widget-image img { display: block; }


/* ----------------------------------------------------------------------------
   3 · Cajas que no deben estirarse al 100 %
-------------------------------------------------------------------------------*/

/* `.card-post .media .tags { position:absolute; top:12px; left:12px }`
   components.css:785. Absoluta y ajustada a sus pildoras. Con el `width:100%`
   del motor cruza la tarjeta de lado a lado y las pildoras se separan hasta el
   borde derecho. Misma familia de reglas que `elementor-native.css` seccion 1. */
.lon-native .card-post .media .tags,
.lon-native .post-feature .tags { width: auto; }

/* `.card-post .cta { align-self: flex-start }` components.css:791. La nota de
   «Leer mas» es un widget de texto con la piel de boton: `.btn` la declara
   `inline-flex`, pero como hijo de una columna flex se estira a lo ancho igual.
   `align-self` ya lo trae el sistema; lo que falta es que no reclame el ancho. */
.lon-native .card-post .cta { width: fit-content; }


/* ----------------------------------------------------------------------------
   4 · El cuerpo del articulo
-------------------------------------------------------------------------------*/

/* El widget `theme-post-content` mete sus dos envoltorios entre `.article` y los
   parrafos. Las reglas del sistema para el articulo son de DESCENDIENTE
   (`.article p`, `.article h2`, `.article .direct-answer`), asi que atraviesan
   los envoltorios sin ayuda. Lo unico que estorba es el hueco: `.article` es un
   contenedor flex con `gap`, y con un solo hijo el hueco no se ve, pero el
   envoltorio hereda el `margin-block-end` de 20 px que el motor pone entre
   widgets hermanos. Se quita, como hace `elementor-native.css` con el resto.

   El primer parrafo del articulo NO lleva margen superior en la maqueta
   (`.article p { margin: 0 0 16px }`), y el ultimo no deja hueco extra. Con los
   envoltorios el margen del ultimo parrafo se suma al relleno de la seccion; se
   colapsa para que el cierre quede a la distancia de la maqueta. */
.lon-native .article > .elementor-widget-theme-post-content { margin-block-end: 0; }
.lon-native .article > .elementor-widget-theme-post-content > .elementor-widget-container > *:last-child { margin-bottom: 0; }