/**
 * «Marcas que manejamos» de la portada: rejilla de logotipos.
 *
 * La pinta el shortcode `[na_marcas_home]` (includes/ux/na-marcas-home.php), que va
 * dentro de un widget `shortcode` de Elementor en la seccion 424bef25 de la home,
 * justo debajo del encabezado 5de15126.
 *
 * === COMO SE CAMBIA ESTO (leer antes de tocar nada) ========================
 *
 * 1. QUE MARCAS SALEN Y EN QUE ORDEN ..... Elementor, atributo `marcas` del
 *    shortcode: `[na_marcas_home marcas="hills,pro-plan,mazuri"]`. Son los slugs
 *    de la taxonomia `product_brand`. NO se tocan ni este CSS ni el PHP.
 *
 * 2. EL LOGO DE UNA MARCA ................ Panel de WordPress, Productos > Marcas,
 *    campo imagen del termino. NADA de imagenes escritas aqui.
 *
 * 3. FORMA DE LA CAJA .................... `--na-marcas-ratio`. Viene en `4 / 3`
 *    (rectangular apaisada, que es la que mejor traga los logos anchos tipo
 *    «Royal Canin»). Para cuadrada: `1 / 1` desde el atributo `ratio` del
 *    shortcode, sin tocar este fichero.
 *
 * 4. CUANTAS CABEN POR FILA .............. NO se fija un numero. Manda
 *    `--na-marcas-min` (ancho minimo de caja) y la rejilla es `auto-fit`, asi que
 *    el navegador mete las que quepan y reparte el resto. Con el valor por defecto
 *    de 130px y las 7 marcas actuales, medido: 7 en una fila a 1440 y 2 por fila a
 *    390. Si un dia se anaden marcas, esto sigue funcionando solo.
 *
 * ⚠ POR QUE `object-fit: contain` Y CAJA DE PROPORCION FIJA, y por que no se
 * simplifica. Los logos de marca llegan en proporciones MUY distintas: los de este
 * sitio van desde un cuadrado casi perfecto hasta apaisados de mas de 3:1. Con
 * `cover` a «Royal Canin» se le comen las letras de los lados, y sin caja de
 * proporcion fija cada fila queda con una altura distinta y la rejilla se ve rota.
 * `aspect-ratio` en la caja + `contain` en la imagen es lo que garantiza que
 * NINGUN logo se recorte ni se deforme. No cambies esto sin volver a medir con los
 * logos reales, no con uno de prueba.
 *
 * ⚠ ESPECIFICIDAD. El tema VamTam y Elementor ponen sus propias reglas a `ul`,
 * `li` e `img` dentro de los widgets. Por eso aqui se resetean `list-style`,
 * margenes y `max-width` de forma explicita, y se usan selectores de dos clases
 * (`.na-marcas-home .na-marcas-home__logo`) en vez de una sola. No los acortes: sin
 * eso, la vinneta de la lista y el `width: 100%` del tema vuelven a aparecer.
 */

.na-marcas-home {
	/* Valores por defecto. El shortcode los sobrescribe en linea si le pasan
	   `ratio` o `min`, asi que aqui solo actuan como red de seguridad. */
	--na-marcas-ratio: 4 / 3;
	--na-marcas-min: 130px;
	--na-marcas-hueco: 24px;
	--na-marcas-relleno: 10px;
	--na-marcas-fondo: #fff;
	--na-marcas-borde: #e6e6e6;
	--na-marcas-radio: 10px;

	display: grid;
	/* `auto-fit` + `minmax` = numero de columnas automatico. El `min()` evita el
	   desbordamiento horizontal cuando la ventana es mas estrecha que el minimo
	   (medido a 390px: sin el, la rejilla sacaba scroll lateral). */
	grid-template-columns: repeat( auto-fit, minmax( min( var( --na-marcas-min ), 100% ), 1fr ) );
	gap: var( --na-marcas-hueco );

	/* Reset del `ul` frente al tema. */
	margin: 0;
	padding: 0;
	list-style: none;
}

.na-marcas-home .na-marcas-home__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.na-marcas-home .na-marcas-home__caja {
	display: flex;
	align-items: center;
	justify-content: center;

	/* LA caja: proporcion fija. Es lo que hace que todas las celdas midan igual
	   independientemente del logo que lleven dentro. */
	aspect-ratio: var( --na-marcas-ratio );
	width: 100%;
	padding: var( --na-marcas-relleno );
	box-sizing: border-box;

	background: var( --na-marcas-fondo );
	border: 1px solid var( --na-marcas-borde );
	border-radius: var( --na-marcas-radio );

	/* Muchos logos vienen sobre fondo blanco: sin esto, sobre el fondo claro de la
	   home no se distingue donde empieza y acaba cada uno. El borde lo resuelve
	   sin tener que retocar las imagenes. */
	text-decoration: none;
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.na-marcas-home .na-marcas-home__caja:hover,
.na-marcas-home .na-marcas-home__caja:focus-visible {
	border-color: #28600a; /* el verde de marca que ya usa la home */
	transform: translateY( -2px );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .08 );
}

.na-marcas-home .na-marcas-home__caja:focus-visible {
	/* Se navega con teclado: el foco tiene que verse SIEMPRE, y el `transform` de
	   arriba por si solo no es una senal accesible. */
	outline: 2px solid #28600a;
	outline-offset: 2px;
}

.na-marcas-home .na-marcas-home__logo {
	/*
	 * `contain` = el logo se ve ENTERO, nunca recortado ni estirado.
	 *
	 * ⚠ EL 100% DE ANCHO Y ALTO NO ES DECORATIVO, y por que no se pone `auto`:
	 * con `width: auto` la imagen se pinta a su tamano natural y los logos
	 * pequenos quedan perdidos en medio de la caja. Medido a 1440 con la caja de
	 * 176x132: el PNG de Royal Canin (que viene chico) salia a ~100px mientras el
	 * de Hill's llenaba la caja, y la fila se veia descompensada. Con 100%/100% +
	 * `contain` TODOS escalan hasta tocar el lado corto de la caja, sin recorte y
	 * sin deformacion, y la fila queda pareja. El `padding` de la caja es el aire
	 * que impide que el logo toque el borde.
	 */
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* Marca sin logotipo subido todavia. Se ve el nombre a proposito: es el aviso de
   que falta la imagen en Productos > Marcas. En cuanto se suba, esta rama deja de
   pintarse sola. */
.na-marcas-home .na-marcas-home__caja--sin-logo {
	background: #f6f6f4;
	border-style: dashed;
}

.na-marcas-home .na-marcas-home__texto {
	font-size: 14px;
	line-height: 1.25;
	font-weight: 600;
	text-align: center;
	color: #28600a;
	/* Un nombre largo («Royal Canin dietas veterinarias») no debe desbordar la
	   caja ni empujar la rejilla. */
	overflow-wrap: anywhere;
}

@media ( max-width: 767px ) {
	.na-marcas-home {
		--na-marcas-hueco: 14px;
		--na-marcas-relleno: 8px;
	}

	.na-marcas-home .na-marcas-home__texto {
		font-size: 12px;
	}
}

/* Quien pida menos animacion, que no la tenga. */
@media ( prefers-reduced-motion: reduce ) {
	.na-marcas-home .na-marcas-home__caja {
		transition: none;
	}

	.na-marcas-home .na-marcas-home__caja:hover,
	.na-marcas-home .na-marcas-home__caja:focus-visible {
		transform: none;
	}
}