/* ════════════════════════════════════════════════════
   GRILLA DE LÍNEAS (shortcode [fp_lineas_grid])
   Ver fitness-pro-lineas-grid.php - todas las líneas (Panatta,
   Hammer Strength, etc.) con la imagen destacada de un producto real
   + nombre en H3 subrayado.
════════════════════════════════════════════════════ */

/* Flex en vez de Grid a propósito: con Grid, si la última fila queda
   incompleta (ej. un solo ítem sobrante), CSS la deja pegada a la
   izquierda - con Flexbox + justify-content:center, esos ítems
   sobrantes quedan centrados. */
.fp-lineas-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	text-align: center;
}

.fp-linea-grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	flex: 0 0 calc((100% - 2 * 40px) / 3);
}

.fp-linea-grid-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #000000;
	overflow: hidden;
}

.fp-linea-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter .2s ease;
}

/* Oscurece la imagen + letras rojas al pasar el mouse. */
.fp-linea-grid-item:hover .fp-linea-grid-image img {
	filter: brightness(0.7);
}

.fp-linea-grid-item:hover .fp-linea-grid-title {
	color: var(--theme-palette-color-1, #FA0000);
}

.fp-linea-grid-fallback {
	font-family: 'Fjalla One', sans-serif;
	font-size: 64px;
	color: #ffffff;
	opacity: 0.4;
}

.fp-linea-grid-title {
	margin: 16px 0 0;
	color: #ffffff;
	font-family: 'Fjalla One', sans-serif;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.25;
	transition: color .15s ease;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
	.fp-lineas-grid {
		gap: 20px;
	}

	.fp-linea-grid-item {
		flex: 0 0 calc((100% - 20px) / 2);
	}

	.fp-linea-grid-title {
		font-size: 19px;
		margin-top: 10px;
	}

	.fp-linea-grid-fallback {
		font-size: 42px;
	}
}