/*
 * Design System - AELITA
 * components/news-pagination.css - news archive "load more" + pagination.
 *
 * The load-more button reuses the shared .a-button component (button.css).
 * Server pagination (the_posts_pagination) is kept in the DOM for SEO and
 * no-JS, styled as a quiet secondary control.
 *
 * Consumes tokens.css (and .a-button when present). No hex, no !important.
 * Loaded on blog category archives only (see inc/enqueue.php).
 */

/* -------------------------------------------------------------------- */
/* Load more                                                            */
/* -------------------------------------------------------------------- */
.a-news-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	margin-block-start: var(--space-8);
}

.a-news-loadmore .cars-load-more__status {
	margin: 0;
	min-height: var(--space-5);
	font-size: var(--fs-small);
	color: var(--text-secondary);
	text-align: center;
}

/* Newly appended cards fade in (progressive; see news-lazy.js). */
.a-news-card.is-entering {
	opacity: 0;
	transform: translateY(var(--space-2));
	transition:
		opacity var(--dur-overlay) var(--ease-out),
		transform var(--dur-overlay) var(--ease-out);
}

.a-news-card.is-entering.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.a-news-card.is-entering {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Server pagination reuses the shared catalog pagination component
 * (.a-catalog-pagination / catalog-pagination.css) so the news archive matches
 * every other AELITA archive. No news-specific pagination styles here.
 *
 * The shared component centers its inline-block <nav> through the Bootstrap
 * wrapper used on the cars archive; the news wrapper is plain, so it is
 * centered here. */
.a-news-page .a-catalog-pagination {
	text-align: center;
}