/**
 * Ajustes de las landings de Sostenibilidad escritos a mano.
 *
 * `landing-rse.css` es el resultado de un build que no vive en este
 * repositorio: viene minificado en una sola línea y sin archivo fuente, así que
 * cualquier cosa que se le escriba encima se pierde la próxima vez que se
 * compile. Lo que haya que añadir desde aquí va en este archivo, que se encola
 * justo después y gana por orden.
 *
 * Es el mismo criterio que sigue `megamenu.css` con el Tailwind compilado.
 *
 * @package Tiendasisimo
 * @since 1.10.0
 */

/* ==========================================================================
   Rejilla de iniciativas a cinco columnas
   ========================================================================== */

/**
 * La clase de la rejilla sale del número de tarjetas
 * (`rse-initiatives__grid--<n>`, en template-parts/rse/initiatives.php), y el
 * build solo traía reglas para tres y para cuatro. Con cinco tarjetas —que es
 * lo que hay en /sostenibilidad/— caía en el caso de tres y quedaban 3 + 2,
 * con el renglón de abajo descuadrado.
 *
 * Ojo con esto si el cliente añade una sexta tarjeta: pasaría a ser `--6`, para
 * la que tampoco hay regla, y volvería a tres columnas. La solución de fondo es
 * que el número de columnas sea un ajuste del bloque y no una consecuencia de
 * cuántas tarjetas haya.
 */
@media (width >= 1024px) {
	.rse-initiatives__grid--5 {
		grid-template-columns: repeat(5, 1fr);
	}

	/*
	 * A cinco columnas la tarjeta mide unos 165 px a 1024, así que el título y
	 * el botón necesitan menos aire y menos cuerpo que a tres: con los valores
	 * de la rejilla ancha, «Seguridad alimentaria y atención humanitaria» se
	 * partía en una columna de dos palabras.
	 */
	.rse-initiatives__grid--5 .rse-initiative__title {
		padding: 0 calc(0.75 * var(--u));
		font-size: calc(1.5 * var(--u));
	}

	.rse-initiatives__grid--5 .rse-initiative__cta {
		padding-left: calc(1.25 * var(--u));
		padding-right: calc(1.25 * var(--u));
		font-size: calc(1.5 * var(--u));
	}
}

/* A partir de 1440 la tarjeta vuelve a pasar de 240 px y el texto recupera
   parte del cuerpo que cedió para caber a 1024. */
@media (width >= 1440px) {
	.rse-initiatives__grid--5 .rse-initiative__title,
	.rse-initiatives__grid--5 .rse-initiative__cta {
		font-size: calc(1.75 * var(--u));
	}

	.rse-initiatives__grid--5 .rse-initiative__title {
		padding: 0 calc(1.25 * var(--u));
	}

	.rse-initiatives__grid--5 .rse-initiative__cta {
		padding-left: calc(2 * var(--u));
		padding-right: calc(2 * var(--u));
	}
}