/**
 * Grilla de productos al estilo Pebble — overrides del tema hijo sobre el
 * widget `lumik_product_grid` (plugin lumik-agency-widgets, clases `pgw-*`).
 *
 * Spec: desarrollo/web/grilla-pebble.md §3. El plugin queda INTACTO
 * (decisión 5): todo esto es CSS del tema hijo con especificidad suficiente
 * para ganarle a las reglas del plugin, incluidos sus `!important`
 * (CLAUDE.md gotcha 54) y a `.elementor img{height:auto}` (gotcha 94).
 *
 * Se encola A MANO desde grilla-pebble.php, condicionado al interruptor
 * `hda_grilla_pebble_enabled` (CLAUDE.md gotcha 5: los dos autocargadores
 * de includes/footer/ y js/load-global-scripts.php están MUERTOS — esto no
 * pasa por ninguno de los dos).
 *
 * Técnica de especificidad: se repite la clase más específica
 * (`.pgw-grid.pgw-grid`, etc.) y se antepone `body` — el mismo truco que
 * ya usa el sitio (gotcha 54) para superar (0,1,1)/(0,1,2) sin depender de
 * que nuestra hoja cargue después de la del plugin.
 */

/* ============================================================
   1. MÓVIL (< 768px): márgenes 16px, gap 8px horizontal / 24px vertical.
   ============================================================

   Hoy el margen (~26px) es la SUMA de tres paddings de ancestros
   (contenedor de Elementor + margen automático de section.section-container
   + padding del propio widget — ver grilla-pebble.md §2). En vez de intentar
   afinar los tres a mano (frágil: depende de configuración de Elementor que
   puede cambiar), se usa la técnica de "sangrado completo" que ya existe en
   este sitio (`.fv2-bleed`, CLAUDE.md gotcha 90): `.pgw-container` se saca a
   100vw y se recentra con `margin-left: calc(50% - 50vw)`, lo que cancela
   CUALQUIER offset acumulado de los ancestros (demostrado algebraicamente:
   si el contenedor padre está centrado respecto al viewport — lo está, vía
   `margin:0 auto` en la cadena de Elementor — el borde izquierdo resultante
   es siempre 0, sin importar cuánto padding acumulen los ancestros). Con
   eso, un `padding: 0 16px` en el propio `.pgw-container` deja la primera
   tarjeta a exactamente 16px del borde.

   `.pgw-filter-bar` y `.pgw-pagination` son HERMANOS de `.pgw-grid` dentro
   del MISMO `.pgw-container` (verificado en el PHP del widget: los tres son
   hijos directos, ninguno con padding horizontal propio — `.pgw-filter-bar`
   usa `padding:12px 0` y `.pgw-pagination` `padding:20px 0`, ambos con 0
   horizontal). Por eso arreglar el contenedor alinea los tres a la vez, sin
   tocarlos por separado. */
@media screen and (max-width: 767px) {
	body div.pgw-container.pgw-container {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box !important;
	}

	/* El plugin pone `gap: 1.2rem !important` (mismo valor para ambos ejes,
	   ~16,4px). Pebble usa 8px de columna y 24px de fila: van por separado,
	   no por el shorthand `gap` (que además invierte el orden: row primero). */
	body div.pgw-grid.pgw-grid {
		column-gap: 8px !important;
		row-gap: 24px !important;
	}
}

/* ============================================================
   2. TABLET Y ESCRITORIO (>= 768px): SIN CAMBIOS a propósito.
   ============================================================
   Decisión 2 del spec: columnas, márgenes y gaps quedan como hoy. No hay
   ninguna regla acá para esos breakpoints — solo cambia la imagen (§3 más
   abajo), que aplica a TODOS los tamaños.
   ============================================================ */

/* ============================================================
   3. IMAGEN, EN TODOS LOS TAMAÑOS: caja 3:4, foto que llena la caja,
      radio 20px en caja e imagen (decisión 3).
   ============================================================

   La caja usaba el truco `padding-bottom: 100%` (ratio 1:1). Se reemplaza
   por `aspect-ratio: 3 / 4` — hay que ANULAR el padding-bottom del plugin
   (no se cancela solo: con los dos declarados, la caja terminaría más alta
   que 3:4, sumando el padding-bottom encima del aspect-ratio). */
body div.pgw-product-image.pgw-product-image {
	padding-bottom: 0 !important;
	aspect-ratio: 3 / 4 !important;
	border-radius: 20px !important;
	/* `overflow` queda en `visible` (valor del plugin, sin tocar): la
	   insignia "¡Oferta!" y (en desktop) el badge se posicionan con offsets
	   NEGATIVOS a propósito para asomar fuera de la caja (ver
	   product-grid.css: top:-1.4rem/left:-1.6rem en desktop, etc.). Un
	   `overflow: hidden` acá se los recortaría. La imagen se recorta con
	   `clip-path` en sí misma (ver abajo), no delegando en el contenedor. */
}

/* Decisión 4 (nitidez y peso) — DESVIACIÓN MEDIDA Y EXPLICADA respecto de
   la "salida" que sugiere el spec (agrandar el <img> a 133,3334% del ancho
   de caja y recortar con `overflow`/`clip-path`, para que el navegador
   "auto-sizes" mida el ancho REALMENTE dibujado):

   Se probó esa salida (ancho 133,3334% + `clip-path: inset(0 16.6667%
   round 20px)`) y se MIDIÓ con el registro de red de Chrome en
   /coronas-funebres/ en staging: el peso de la primera pantalla subió
   **+28,7% en 1440×900** (1.177.098 → 1.514.627 B), por encima del tope de
   20% que exige el propio criterio de la decisión 4. La causa: el techo
   real de ancho de caja en escritorio (231px) × 4/3 = 308px, apenas 8px
   por ENCIMA del escalón de 300w del srcset — y como no hay escalón
   intermedio entre 300w y 600w, esos 8px de más le cuestan a cada foto
   pasar de ~20 KB a ~55-77 KB (case por caso: CASI EL TRIPLE). Es
   exactamente el gotcha 33 del CLAUDE.md ("un sizes que se pasa por pocos
   píxeles cuesta el doble de peso"), aplicado a la propia corrección que
   se estaba escribiendo. Medido, no supuesto: `medicion-antes.json` /
   `medicion-despues.json` en el scratchpad de esta sesión.

   Por eso se vuelve a la técnica de SIEMPRE (`object-fit: cover` con
   ancho/alto 100% de la caja — YA la usa `product-grid.css` en su regla
   base `.pgw-product-image img`, no se toca): el <img> sigue midiendo el
   ancho de la CAJA para elegir candidato (sin cambios en desktop/tablet,
   decisión 2; apenas unos px más en móvil por el nuevo margen — ver el
   filtro PHP de `sizes`), así que la selección de candidato NO cruza
   ningún escalón nuevo y el peso queda dentro del presupuesto (medido:
   +3,0% en 390×844 DPR3, +0% en 1440×900 DPR1 tras la corrección — ver
   `medicion-despues.json`). El costo es un recorte levemente MENOS nítido
   en el peor caso (el candidato de 300w cubre 300px reales contra un
   ancho "ideal" de 308px dibujados — 2,6% de diferencia lineal,
   imperceptible) a cambio de no triplicar el peso de cada foto. Es la
   letra chica del propio criterio de la decisión 4 ("ni uno el doble de
   pesado") ganándole a la otra mitad ("ni uno más chico que se vea
   borroso") en este caso puntual — ambas no se pueden cumplir a la vez con
   los escalones de srcset que existen hoy en este sitio.

   Solo hace falta fijar el radio: `object-fit`, `width`, `height`,
   `position` y `object-position` YA están correctos en la regla base del
   plugin (`.pgw-product-image img`, especificidad (0,1,1), sin
   `!important`) — no hace falta repetirlos acá. */
body div.pgw-product-image.pgw-product-image img.pgw-img-primary,
body div.pgw-product-image.pgw-product-image img.pgw-img-hover {
	border-radius: 20px !important;
}