/**
 * @layer components — card de publicación (template-parts/components/
 * card-post.php). Se usa igual en las últimas publicaciones del home, en
 * la página de Publicaciones (home.php) y en el archive de categoría
 * (archive.php) — un solo componente, un solo lugar donde se estila.
 * Imagen + título + "Leer más", sin fecha ni categoría.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer components {
	.publicaciones-home__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}

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

	.publicaciones-home__card {
		display: block;
		text-decoration: none !important;
		color: inherit !important;
		padding-top: var(--space-4);
		border-top: 1px solid var(--c-ink-200);
	}

	.publicaciones-home__media {
		margin-bottom: var(--space-4);
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.publicaciones-home__foto {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.publicaciones-home__titulo {
		font-size: var(--text-lg) !important;
		margin: 0 0 var(--space-3);
	}

	.publicaciones-home__leer-mas {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--c-ink-900);
	}

	.publicaciones-home__leer-mas .icono {
		width: 16px;
		height: 16px;
	}
}