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

	.article-card {
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-200);
		border-radius: var(--radius-md);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.article-card__media {
		display: block;
		background: var(--color-bg-subtle);
	}

	.article-card__media img {
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.article-card__media--placeholder {
		aspect-ratio: 16 / 9;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.article-card__media--placeholder svg {
		width: var(--space-8);
		height: var(--space-8);
		fill: var(--color-border-200);
	}

	.article-card__body {
		padding: var(--space-3);
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.article-card__title {
		font-size: var(--font-size-h3);
		margin: 0;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.article-card__title a {
		text-decoration: none;
		color: var(--color-text-heading);
	}

	.article-card__title a:hover,
	.article-card__title a:focus-visible {
		color: var(--color-primary-600);
	}

	/* Simpler whole-card link variant (home page sections, related articles) */
	.article-card__link {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: var(--color-text-heading);
	}

	.article-card__link:hover .article-card__title,
	.article-card__link:focus-visible .article-card__title {
		color: var(--color-primary-600);
	}

	.article-card__categories {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
		margin: 0;
	}

	.category-badge {
		display: inline-flex;
		align-items: center;
		font-size: var(--font-size-meta);
		padding: 2px var(--space-2);
		border-radius: var(--radius-sm);
		background: var(--color-bg-subtle);
		color: var(--color-text-body);
		text-decoration: none;
	}

	.category-badge:hover,
	.category-badge:focus-visible {
		color: var(--color-primary-600);
	}

	.article-card__excerpt {
		margin: 0;
		color: var(--color-text-muted);
		overflow-wrap: break-word;
	}

	.article-card__date {
		display: block;
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
	}

	/* Archive / category / posts-index listing header */
	.archive-header {
		padding-block: var(--space-6);
		border-bottom: 1px solid var(--color-border-200);
	}

	.archive-header__inner,
	.archive-content__inner {
		max-width: var(--content-wide);
		margin-inline: auto;
		padding-inline: var(--space-3);
	}

	.archive-content__inner {
		padding-block: var(--space-6);
	}

	.archive-header__title {
		overflow-wrap: break-word;
	}

	.archive-header__description {
		margin-top: var(--space-2);
		color: var(--color-text-muted);
	}

	.archive-empty {
		padding-block: var(--space-8);
	}

	/* Pagination (core the_posts_pagination output) */
	.pagination {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block: var(--space-6);
	}

	.pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: var(--space-1) var(--space-2);
		border: 1px solid var(--color-border-200);
		border-radius: var(--radius-sm);
		text-decoration: none;
		color: var(--color-text-heading);
	}

	.pagination .page-numbers.current {
		background: var(--color-primary-600);
		border-color: var(--color-primary-600);
		color: var(--color-bg-surface);
	}

	.pagination a.page-numbers:hover,
	.pagination a.page-numbers:focus-visible {
		border-color: var(--color-primary-600);
		color: var(--color-primary-600);
	}

	@media (max-width: 767px) {
		/* Safari/WebKit does not shrink grid/flex items below their content's
		   intrinsic width by default (min-width: auto), so overflow-wrap on
		   the title alone is not always enough to prevent it pushing past
		   the card's right edge on narrow phones (e.g. iPhone SE). Chromium
		   infers this automatically, which is why it doesn't reproduce there. */
		.article-card,
		.article-card__body {
			min-width: 0;
		}

		.article-card__title,
		.article-card__title a {
			overflow-wrap: break-word;
			word-break: break-word;
		}
	}

	@media (min-width: 768px) {
		.article-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1024px) {
		.article-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}