/*
 * News hub, category archives and search (N-01…N-02; Phase 14): the
 * filters, the search form, the featured card, card excerpts, the
 * pagination and the empty state. Ported from the redesign PoC
 * (css/site.css @ ed0ab9f7, ".filters", ".search", ".news-grid",
 * ".post.featured") using theme.json tokens and base.css aliases only. The
 * cards themselves are post-card.css (Phase 9); the hub's hero and newsletter
 * band are page-sections.css and sections.css. Loaded on the hub, archives,
 * search, single posts and the 404 page (functions.php); the 404 page uses
 * the search form and the links list below.
 *
 * The filters are links (G-12: they change the page on activation only).
 * The PoC's search input has `outline: none`; here the form shows the focus
 * ring (`:focus-within`). Breakpoints follow docs/05 §3.1. Literal values
 * kept from the PoC: 1px borders.
 */

.sc-news-section :where(.wrap) > *,
.sc-news-filters > *,
.sc-news-chips > ul > li {
	margin-block: 0;
}

/* ---------- Filters and search ---------- */

.sc-news-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--news--filters-gap);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wp--custom--news--filters-offset);
}

.sc-news-chips > ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--news--chips-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-news-chips a {
	display: inline-block;
	padding: var(--wp--custom--news--chip-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-pill);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--news-chip);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--button);
	color: var(--c-muted);
	text-decoration: none;
}

.sc-news-chips a:hover {
	border-color: var(--line);
	color: var(--c-text);
}

.sc-news-chips a[aria-current="page"],
.sc-news-chips a[aria-current="page"]:hover {
	border-color: var(--c-orange);
	background: var(--c-orange);
	color: var(--c-on-orange);
}

.sc-news-search {
	position: relative;
	display: flex;
	gap: var(--wp--custom--news--search-gap);
	align-items: center;
	min-width: min(var(--wp--custom--news--search-width), 100%);
	margin: 0;
	padding: var(--wp--custom--news--search-padding);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-pill);
}

.sc-news-search:focus-within {
	outline: 2px solid var(--c-orange-hover);
	outline-offset: 2px;
}

.sc-news-search-icon {
	flex: none;
	width: var(--wp--custom--news--search-icon-size);
	height: var(--wp--custom--news--search-icon-size);
	background-color: var(--c-faint);
	mask: var(--sc-icon-search) center / contain no-repeat;
}

.sc-news-search input {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--custom--font-size--news-search);
	color: var(--c-text);
	outline: none;
}

.sc-news-search input::placeholder {
	color: var(--c-muted);
	opacity: 1;
}

.sc-news-search-submit {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--news-chip);
	font-weight: 600;
	color: var(--c-orange);
	cursor: pointer;
}

/* The form submits with Enter; the button is for pointer and screen-reader
   users and appears when it has focus. */
.sc-news-search-submit:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- 404: search form and main-page links ---------- */

.sc-not-found .sc-news-search {
	max-width: var(--wp--custom--news--search-width);
}

.sc-not-found-links {
	margin-top: var(--wp--custom--news--filters-offset);
}

.sc-not-found-links > ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--news--filters-gap) var(--wp--preset--spacing--l);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Cards ---------- */

.sc-post-card-excerpt {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--wp--custom--font-size--news-excerpt);
	line-height: var(--wp--custom--news--excerpt-line-height);
	color: var(--c-muted);

	/* Cards show a short teaser; the full excerpt stays in the markup. */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wp--custom--news--excerpt-lines);
	line-clamp: var(--wp--custom--news--excerpt-lines);
}

.sc-post-card-featured .sc-post-card-excerpt {
	-webkit-line-clamp: var(--wp--custom--news--excerpt-lines-featured);
	line-clamp: var(--wp--custom--news--excerpt-lines-featured);
}

.sc-post-card-more {
	margin-top: auto;
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--news-more);
	font-weight: 600;
	color: var(--c-orange);
}

.sc-post-card-more::after {
	content: " \2192";
}

/* The hub's first post on page 1 (PoC `.post.featured`). */
.sc-post-grid > .sc-news-featured {
	grid-column: 1 / -1;
}

.sc-post-card.sc-post-card-featured {
	display: grid;
	grid-template-columns: var(--wp--custom--news--featured-columns);
}

.sc-post-card-featured .sc-post-card-media {
	aspect-ratio: auto;
	min-height: var(--wp--custom--news--featured-media-height);
}

.sc-post-card-featured .sc-post-card-title {
	font-size: var(--wp--custom--font-size--h-3-large);
}

/* No card sits alone on the last row: when the cards do not fill the rows
   (listing pages have 10 posts: 1 + 3 + 3 + 3 in three columns), the first
   card spans the top row in the featured card's layout, so the newest post
   leads and the reading order is the visual order. The page sizes and URLs
   stay those of production. On the hub's first page the card after the
   featured post is the first card. */
@media (min-width: 901px) {

	.sc-news-grid > .sc-news-featured + li:nth-last-child(3n + 1),
	.sc-news-grid > li:first-child:not(.sc-news-featured):nth-last-child(3n + 1) {
		grid-column: 1 / -1;
	}

	.sc-news-grid > .sc-news-featured + li:nth-last-child(3n + 1) > .sc-post-card,
	.sc-news-grid > li:first-child:not(.sc-news-featured):nth-last-child(3n + 1) > .sc-post-card {
		display: grid;
		grid-template-columns: var(--wp--custom--news--featured-columns);
	}

	.sc-news-grid > .sc-news-featured + li:nth-last-child(3n + 1) .sc-post-card-media,
	.sc-news-grid > li:first-child:not(.sc-news-featured):nth-last-child(3n + 1) .sc-post-card-media {
		aspect-ratio: auto;
		min-height: var(--wp--custom--news--featured-media-height);
	}
}

/* md: two columns. */
@media (min-width: 761px) and (max-width: 900px) {

	.sc-news-grid > .sc-news-featured + li:nth-last-child(odd),
	.sc-news-grid > li:first-child:not(.sc-news-featured):nth-last-child(odd) {
		grid-column: 1 / -1;
	}

	.sc-news-grid > .sc-news-featured + li:nth-last-child(odd) > .sc-post-card,
	.sc-news-grid > li:first-child:not(.sc-news-featured):nth-last-child(odd) > .sc-post-card {
		display: grid;
		grid-template-columns: var(--wp--custom--news--featured-columns);
	}

	.sc-news-grid > .sc-news-featured + li:nth-last-child(odd) .sc-post-card-media,
	.sc-news-grid > li:first-child:not(.sc-news-featured):nth-last-child(odd) .sc-post-card-media {
		aspect-ratio: auto;
		min-height: var(--wp--custom--news--featured-media-height);
	}
}

/* ---------- Pagination and empty state ---------- */

.sc-pagination {
	margin-top: var(--wp--custom--news--pagination-offset);
}

.sc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--news--pagination-gap);
	align-items: center;
	justify-content: center;
}

.sc-pagination .page-numbers {
	display: inline-flex;
	padding: var(--wp--custom--news--chip-padding);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-family: var(--f-display);
	font-size: var(--wp--custom--font-size--news-chip);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--button);
	color: var(--c-text);
	text-decoration: none;
}

.sc-pagination a.page-numbers:hover {
	border-color: var(--c-orange);
}

.sc-pagination .page-numbers.current {
	border-color: var(--c-orange);
	background: var(--c-orange);
	color: var(--c-on-orange);
}

.sc-pagination .page-numbers.dots {
	border-color: transparent;
}

.sc-news-empty {
	margin-top: var(--wp--custom--news--empty-offset);
	color: var(--c-muted);
}

@media (prefers-reduced-motion: no-preference) {

	.sc-news-chips a,
	.sc-pagination .page-numbers {
		transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
	}
}

/* sm (PoC: 760px) */
@media (max-width: 760px) {

	.sc-post-card.sc-post-card-featured {
		grid-template-columns: 1fr;
	}

	.sc-post-card-featured .sc-post-card-media {
		min-height: var(--wp--custom--news--featured-media-height-small);
	}
}