/**
 * @layer components — lista de "Links" (template-parts/components/
 * card-link.php). Un solo componente, dos formas según dónde se use:
 *
 * - Home ("Más publicaciones"): grilla de cards (4 por fila en desktop),
 *   contenida en .contenedor — ver .publicaciones-links de más abajo.
 * - Archive de Links: filas de lista de ancho completo (contenidas al
 *   breakpoint, adentro de .contenedor) — ver .archive-links de más abajo.
 */

@layer components {
	.links-lista__item {
		display: flex;
		text-decoration: none !important;
		color: inherit !important;
		transition: color var(--dur-2) var(--ease-out);
	}

	.links-lista__item:hover,
	.links-lista__item:focus-visible {
		color: var(--c-accent-600) !important;
	}

	.links-lista__titulo {
		font-family: var(--font-display);
		font-size: var(--text-lg);
	}

	.links-lista__ver-mas {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-sm);
		font-weight: 500;
	}

	.links-lista__ver-mas .icono {
		width: 16px;
		height: 16px;
	}

	/* Home: grilla de cards, 4 por fila en desktop --------------------- */

	.publicaciones-links .links-lista {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}

	@media (width >= 768px) {
		.publicaciones-links .links-lista {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (width >= 1024px) {
		.publicaciones-links .links-lista {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.publicaciones-links .links-lista__item {
		flex-direction: column;
		align-items: flex-start;
		padding-top: var(--space-4);
		border-top: 1px solid var(--c-ink-200);
	}

	.publicaciones-links .links-lista__ver-mas {
		margin-top: var(--space-3);
	}

	/* Archive de Links: filas de ancho completo (contenidas al breakpoint) */

	.archive-links .links-lista {
		display: flex;
		flex-direction: column;
	}

	.archive-links .links-lista__item {
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		padding-block: var(--space-5);
		border-top: 1px solid var(--c-ink-200);
	}

	.archive-links .links-lista__item:last-child {
		border-bottom: 1px solid var(--c-ink-200);
	}
}