/*
 * Design System - AELITA
 * components/news-archive.css - news/blog archive editorial shell.
 *
 * Sections: featured lead spacing, section heading ("Останні новини"), the
 * editorial card grid (#news-list) and the scoped focus-visible restore.
 *
 * The card and featured visuals live in news-card.css.
 * Consumes tokens.css / layout.css only. No hex, no shadows.
 * Loaded on blog category archives only (see inc/enqueue.php).
 */

.a-news-page {
	background-color: var(--bg);
}

/* -------------------------------------------------------------------- */
/* Featured lead                                                        */
/* -------------------------------------------------------------------- */
.a-news-lead {
	padding-block: clamp(var(--space-6), 4vw, var(--space-7)) 0;
}

/* -------------------------------------------------------------------- */
/* "Latest news" section                                                */
/* -------------------------------------------------------------------- */
.a-news-archive {
	padding-block: clamp(var(--space-6), 4vw, var(--space-7)) var(--space-8);
}

/* -------------------------------------------------------------------- */
/* Editorial grid (#news-list)                                          */
/* -------------------------------------------------------------------- */
.a-news-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.a-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-7) var(--space-5);
	}
}

@media (min-width: 1200px) {
	.a-news-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.a-news-grid__item {
	display: flex;
}

.a-news-grid__item > .a-news-card {
	flex: 1 1 auto;
}

/* -------------------------------------------------------------------- */
/* Accessibility: restore keyboard focus                                */
/* -------------------------------------------------------------------- */
/* Legacy main.css ships `:focus { outline: none !important }`, which
 * suppresses every focus ring. Scoped to the news surface, an !important
 * declaration is required to win against that legacy !important. */
.a-news-page :focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}