/* Carrusel de marcas (issue #37): sustituye el widget Elementor
   "image-carousel" (Swiper) por un grid estático sin JavaScript. Se
   confirmó contra ambas referencias del cliente -ABRASIVO_Complete.pdf
   (desktop) y Responsive_ABRASIVO_homepage.pdf (mobile)- que las 6 marcas
   caben completas en los dos anchos, sin ningún logo cortado ni asomando:
   no hay nada que desplazar, así que no hace falta scroll ni flechas.
   Contenido/orden: functions.php, abrasivomx_carrusel_marcas -engancha
   elementor/widget/render_content, no toca la base de datos-. */
/* justify-content: center, no space-between: se midió en píxeles contra
   ABRASIVO_Complete.pdf (clusters de contenido por columna en
   brands_zoom.png) que el espacio entre logos es angosto y parejo -gap
   promedio de ~0.58x el ancho promedio de un logo-, no estirado a todo el
   ancho del contenedor como hacía space-between -eso dejaba huecos casi el
   doble de anchos de lo que pide el diseño-. */
/* Sombra suave que separa la franja de marcas de "Categorías de Producto"
   debajo -está en ABRASIVO_Complete.pdf, se perdió al reemplazar el widget
   Swiper (traía la sombra de fábrica en su propio wrapper de Elementor) por
   el grid estático. Va en un wrapper aparte -no en .brands-grid, que tiene
   max-width:1200px- para que la sombra corra de borde a borde. La sección
   de Elementor que lo contiene es "boxed" (1170px, no ocupa el viewport
   completo), así que un ancho fijo se queda corto en pantallas más anchas
   que eso. El ancho no puede ser 100vw: esa unidad cuenta la barra de
   scroll y la página no, así que la franja quedaba corrida unos pixeles
   -mismo caso que .abrasivomx-slider en slider.css-; --abrasivomx-vw la
   mide de verdad (js/slider.js), 100vw queda de respaldo si el JS no
   corre. */
.brands-grid-wrap {
	--abrasivomx-banda: var(--abrasivomx-vw, 100vw);
	position: relative;
	width: var(--abrasivomx-banda);
	margin-left: calc(50% - var(--abrasivomx-banda) / 2);
	margin-right: calc(50% - var(--abrasivomx-banda) / 2);
	box-shadow: 0 10px 15px -8px rgba(0, 0, 0, 0.12);
}

.brands-grid {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 56px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 15px;
}

/* !important: Elementor trae ".elementor img { height: auto; max-width:
   100% }" (clase+etiqueta, más específica que una sola clase) que si no,
   gana y deja cada logo a su tamaño natural. */
.brands-grid__logo {
	height: 50px !important;
	width: auto !important;
	max-width: 165px !important;
	object-fit: contain;
}

/* Una altura por marca, medida sobre la franja de la propuesta (p.2): ahí
   cada logo tiene la suya según su peso visual, no una altura pareja. Son
   las de la parte visible de cada uno, así que los archivos van recortados
   a su contenido -austrodiam.png traía 183px de margen horizontal, y con
   eso su proporción no era la del logo sino la de su lienzo, y el alto no
   lo podía gobernar-. */
.brands-grid__logo--austromex { height: 50px !important; }
.brands-grid__logo--tenazit { height: 28px !important; }
.brands-grid__logo--austrodiam { height: 60px !important; }
.brands-grid__logo--tyrolit { height: 46px !important; }
.brands-grid__logo--zenesis { height: 61px !important; }
.brands-grid__logo--scholl { height: 53px !important; }

@media (max-width: 767px) {
	/* minmax(0, 1fr), no solo 1fr: Tenazit es el wordmark más ancho -a
	   32px de alto pide 157px de ancho, pero el max-width:140px de abajo lo
	   recorta a 140px- y con "1fr" a secas esa columna no podía encogerse
	   por debajo del contenido, forzándose a 140px mientras las otras dos
	   quedaban angostas -toda la fila se veía cargada a la izquierda-.
	   minmax(0, 1fr) fuerza a las 3 columnas parejas de verdad. */
	.brands-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		justify-items: center;
		align-items: center;
		gap: 28px 16px;
		padding: 28px 20px;
	}

	/* En tres columnas de ~100px las alturas de escritorio no caben, así
	   que bajan todas por igual -a 0.65- para conservar entre ellas la
	   proporción de la propuesta. */
	.brands-grid__logo {
		height: 33px !important;
		max-width: 100px !important;
	}

	.brands-grid__logo--austromex { height: 33px !important; }
	.brands-grid__logo--tenazit { height: 18px !important; }
	.brands-grid__logo--austrodiam { height: 39px !important; }
	.brands-grid__logo--tyrolit { height: 30px !important; }
	.brands-grid__logo--zenesis { height: 40px !important; }
	.brands-grid__logo--scholl { height: 35px !important; }
}