/*
 * DNews 2.0 archives, search, 404, author and game hub (design spec sections
 * 11, 12 and 15). Page head (title, count, filter chips), the empty-state box
 * and its red button, the author header, the game hub (cover, facts, review
 * box, bulletin rows). Chips and the section bar come from sections.css; the
 * card from cards.css. Roles and tokens only. Loaded with the Query block.
 */
.dnews-list {
	margin: 0;
}

.dnews-list.dnews-list > * {
	margin-block: 0;
}

/*
 * The signed-off look has no extra gap above the pagination inside a list (the
 * grid's own spacing is the gap). pagination.css gives the row a 32px top
 * margin at the same specificity as the reset above, so source order decided:
 * dev printed archive.css last (0), staging's combined CSS printed
 * pagination.css last (32). Three classes make the 0 win in either order.
 */
.dnews-list.dnews-list > .dnews-pagination {
	margin-block-start: 0;
}

/*
 * Archive frame (dnews 2.0, Owner decision 2026-10-29): breadcrumb and the head
 * (.dnews-archive-head: title, count, description, filter chips, or the game
 * hub) span the whole container; the main + sidebar split starts below them,
 * level with the first row of cards. The head is ONE wrapper so a full-width
 * banner can replace the title block later without another restructure. Every
 * reset is doubled or tripled: core's block-gap rules tie a single class and
 * win when core's inline styles print after this file (staging).
 */
.dnews-container.dnews-page.dnews-page > .dnews-archive-head {
	margin-block: 0;
}

.dnews-container.dnews-page.dnews-page > .dnews-archive-head + .dnews-split {
	margin-block-start: var(--wp--preset--spacing--space-6);
}

.dnews-archive-head.dnews-archive-head > * {
	margin-block: 0;
}

.dnews-archive-head.dnews-archive-head > .dnews-archive__count {
	margin-block-start: var(--wp--preset--spacing--space-1);
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
}

.dnews-archive-head.dnews-archive-head > .dnews-archive__description {
	margin-block-start: var(--wp--preset--spacing--space-2);
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--base);
}

.dnews-archive-head.dnews-archive-head > .dnews-search-form {
	margin-block: var(--wp--preset--spacing--space-4);
}

.dnews-archive-head.dnews-archive-head > .dnews-author-head {
	margin-block-end: var(--wp--preset--spacing--space-4);
}

/* Filter groups: small caps label, slim pill chips; a group is one row. */
.dnews-archive-head.dnews-archive-head > .dnews-filters {
	display: grid;
	gap: var(--wp--preset--spacing--space-1);
	margin-block-start: var(--wp--preset--spacing--space-3);
}

.dnews-archive-head.dnews-archive-head > .dnews-hub {
	margin-block-start: var(--wp--preset--spacing--space-3);
}

.dnews-filters__group {
	display: block;
}

.dnews-filters__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
}

@media (min-width: 668px) {

	.dnews-filters__group {
		display: flex;
		align-items: flex-start;
	}

	.dnews-filters__chips {
		flex: 1 1 0;
	}

	/* The label centres on the first chip row (44px chips). */
	.dnews-filters__label {
		display: flex;
		align-items: center;
		min-height: 44px; /* Exempt from the spacing scale: matches the 44px chip. */
	}
}

.dnews-filters__label {
	flex: 0 0 auto;
	min-width: 76px; /* Exempt from the spacing scale: aligns the two chip rows. */
	margin: 0 var(--wp--preset--spacing--space-2) 0 0;
	color: var(--wp--preset--color--muted-text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: var(--wp--custom--type--verdict--weight);
	letter-spacing: var(--wp--custom--type--tag--tracking);
	text-transform: uppercase;
}

.dnews-list.dnews-list > .dnews-grid,
.dnews-list.dnews-list > .wp-block-post-template {
	margin-block-start: var(--wp--preset--spacing--space-4);
}

/*
 * On an archive the grid is the list's first child and the split's gap is the
 * only space above it. Scoped to the split that follows the archive head:
 * archive.css also loads on Home, whose section lists keep their 16px.
 */
.dnews-archive-head + .dnews-split > .dnews-split__main > .dnews-list.dnews-list > .dnews-grid:first-child,
.dnews-archive-head + .dnews-split > .dnews-split__main > .dnews-list.dnews-list > .wp-block-post-template:first-child {
	margin-block-start: 0;
}

/* Empty state: muted box, heading, one sentence, one button. */
.dnews-empty {
	padding: var(--wp--preset--spacing--space-7) var(--wp--preset--spacing--space-4);
	border-radius: var(--wp--custom--radius--box);
	background: var(--wp--preset--color--surface-muted);
	text-align: center;
}

.dnews-empty.dnews-empty > * {
	margin-block: 0;
}

.dnews-empty h1,
.dnews-empty h2,
.dnews-empty .dnews-empty__title {
	margin-block-end: var(--wp--preset--spacing--space-2);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.3;
}

.dnews-empty p {
	max-width: 42ch;
	margin: 0 auto var(--wp--preset--spacing--space-4);
}

/*
 * The search empty state's "All articles by platform" row: label above the
 * chips, centered like the rest of the box.
 */
.dnews-empty .dnews-filters {
	margin-block-start: var(--wp--preset--spacing--space-6);
}

.dnews-empty .dnews-filters__group {
	display: block;
}

/*
 * "Browse by genre" on the search pages: 18 chips are a heavy row on a phone
 * (about 240px at 360px), so the group is display: none under 768px and the
 * drawer's Genres accordion carries the same links there. From 768px it is a
 * labelled row like the platform one (block inside the empty state).
 */
.dnews-filters__group.dnews-filters__group--genre {
	display: none;
}

@media (min-width: 768px) {

	.dnews-filters__group.dnews-filters__group--genre {
		display: flex;
		align-items: flex-start;
	}

	.dnews-empty .dnews-filters__group.dnews-filters__group--genre {
		display: block;
	}
}

.dnews-empty .dnews-filters__label {
	justify-content: center;
	margin: 0;
}

.dnews-empty .dnews-filters__chips {
	justify-content: center;
}

.dnews-empty .wp-block-buttons {
	justify-content: center;
}

/* The red primary button (Read the review, Clear filter, Latest reviews). */
a.dnews-button,
.dnews-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* Exempt from the spacing scale: 44px touch target. */
	padding: 0 var(--wp--preset--spacing--space-5);
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--on-accent-solid);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700; /* Exempt: button weight from the design. */
	line-height: 1;
	text-decoration: none;
}

a.dnews-button:hover,
.dnews-button .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--on-accent-solid);
	filter: var(--wp--custom--state--active);
}

/* 404: the search field sits above the empty box. */
.dnews-main .dnews-search-form {
	max-width: 560px; /* Exempt from the spacing scale: field width from the design. */
	margin-block: var(--wp--preset--spacing--space-4);
}

.dnews-empty--404 {
	margin-block-end: var(--wp--preset--spacing--space-7);
}

/* Author header: avatar, name, biography. */
.dnews-author-head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-5);
	margin-block-end: var(--wp--preset--spacing--space-4);
}

.dnews-author-head__avatar {
	flex: 0 0 auto;
	border-radius: 100%;
}

.dnews-author-head__name {
	margin: 0 0 var(--wp--preset--spacing--space-1);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lead-title);
	font-weight: var(--wp--custom--type--lead-title--weight);
	line-height: 1.15;
}

.dnews-author-head__bio {
	margin: 0;
	color: var(--wp--preset--color--muted-text);
}

/* Game hub: 3:4 cover (96px, 160px from 668px) beside the facts. */
.dnews-hub {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--space-4);
	align-items: start;
	margin-block: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-7);
}

.dnews-hub:has(> .dnews-hub-cover) {
	grid-template-columns: 96px minmax(0, 1fr); /* Exempt from the spacing scale: cover width from the design. */
}

@media (min-width: 668px) {

	.dnews-hub:has(> .dnews-hub-cover) {
		grid-template-columns: 160px minmax(0, 1fr); /* Exempt from the spacing scale: cover width from the design. */
		gap: var(--wp--preset--spacing--space-6);
	}
}

.dnews-hub.dnews-hub > *,
.dnews-hub__info.dnews-hub__info > * {
	margin-block: 0;
}

.dnews-hub-cover {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--image);
	background: var(--wp--preset--color--surface-muted);
	aspect-ratio: 3 / 4;
}

.dnews-hub .dnews-hub__cover {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--wp--custom--radius--image);
	object-fit: cover;
}

.dnews-hub__platforms.dnews-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--space-2);
	margin-block-start: var(--wp--preset--spacing--space-2);
}

.dnews-hub .dnews-pill,
.dnews-hubreview .dnews-pill {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: var(--wp--custom--type--meta--weight);
}

.dnews-hub .dnews-pill + .dnews-pill::before {
	content: "\00b7";
	margin-inline: 5px; /* Exempt from the spacing scale: dot separator. */
}

.dnews-facts {
	display: grid;
	gap: 2px var(--wp--preset--spacing--space-5); /* Exempt from the spacing scale: 2px row gap from the design. */
	margin-block-start: var(--wp--preset--spacing--space-3);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 668px) {

	.dnews-facts {
		grid-template-columns: repeat(2, auto);
		justify-content: start;
	}
}

/* Doubled: core flex gap ties one class and wins if printed later. */
.dnews-fact.dnews-fact {
	display: flex;
	gap: var(--wp--preset--spacing--space-2);
}

.dnews-fact.dnews-fact > * {
	margin: 0;
}

.dnews-fact:has(.dnews-fact__value:empty) {
	display: none;
}

.dnews-fact__label {
	min-width: 84px; /* Exempt from the spacing scale: aligns the values. */
	color: var(--wp--preset--color--muted-text);
}

.dnews-fact__value {
	color: var(--wp--preset--color--heading);
}

/* Our review: muted box, accent-solid border; No review yet is plain. */
.dnews-hubreview {
	display: grid;
	gap: var(--wp--preset--spacing--space-3);
	margin-block-end: var(--wp--preset--spacing--space-7);
	padding: var(--wp--preset--spacing--space-4) calc(var(--wp--preset--spacing--space-4) + 2px);
	border: 2px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--box);
	background: var(--wp--preset--color--surface-muted);
}

.dnews-hubreview--has {
	border-color: var(--wp--preset--color--accent-solid);
}

.dnews-hubreview > * {
	margin: 0;
}

.dnews-hubreview h2 {
	font-size: var(--wp--preset--font-size--h-4);
}

.dnews-hubreview .dnews-card__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--wp--preset--spacing--space-2);
}

.dnews-hubreview .dnews-verdict {
	display: inline-block;
	padding: 1px 10px; /* Exempt from the spacing scale: pill padding from the design. */
	border: 1.5px solid currentcolor; /* Exempt from the spacing scale: the 1.5px ring. */
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: var(--wp--custom--type--verdict--weight);
	line-height: 1.6;
}

.dnews-hubreview .dnews-verdict--must-play {
	color: var(--dnews-verdict-must-play-ink);
}

.dnews-hubreview .dnews-verdict--recommended {
	color: var(--dnews-verdict-recommended-ink);
}

.dnews-hubreview .dnews-verdict--wait-for-sale {
	color: var(--dnews-verdict-wait-for-sale-ink);
}

.dnews-hubreview .dnews-verdict--skip {
	color: var(--dnews-verdict-skip-ink);
}

/* Mentioned in bulletins: teal-bordered rows like the Home strip. */
.dnews-hubbull {
	margin-block-start: var(--wp--preset--spacing--space-7);
}

.dnews-hubbull__list {
	display: grid;
	gap: var(--wp--preset--spacing--space-3);
}

.dnews-hubbull__list a {
	display: block;
	min-height: 44px; /* Exempt from the spacing scale: 44px touch target. */
	padding: var(--wp--preset--spacing--space-4) calc(var(--wp--preset--spacing--space-4) + 2px);
	border: 2px solid var(--wp--custom--tag--bulletin--bg);
	border-radius: var(--wp--custom--radius--box);
	background: var(--wp--preset--color--surface-muted);
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.dnews-hubbull__list a:hover {
	border-color: var(--wp--preset--color--accent-text);
}

.dnews-hubbull__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--space-3);
	margin-block-end: var(--wp--preset--spacing--space-2);
}

.dnews-hubbull__list p {
	margin: 0;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600; /* Exempt: row weight from the design. */
	line-height: 1.35;
}

.dnews-hubbull .dnews-badge--bulletin {
	display: inline-block;
	padding: 2px 9px; /* Exempt from the spacing scale: tag padding from the design. */
	border-radius: var(--wp--custom--radius--tag);
	background: var(--wp--custom--tag--bulletin--bg);
	color: var(--wp--custom--tag--bulletin--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: var(--wp--custom--type--tag--weight);
	letter-spacing: var(--wp--custom--type--tag--tracking);
	line-height: 1.5;
	text-transform: uppercase;
}

@media print {

	.dnews-pagination,
	.dnews-filters {
		display: none;
	}
}

/* Bulletin archive: one teal-bordered row per issue, linked as a whole. */
.dnews-bulletin-list {
	display: grid;
	gap: var(--wp--preset--spacing--space-3);
	margin: var(--wp--preset--spacing--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.dnews-bulletin-list > li {
	margin: 0;
}

.dnews-bulletin-row.dnews-bulletin-row {
	position: relative;
	padding: var(--wp--preset--spacing--space-4) calc(var(--wp--preset--spacing--space-4) + 2px);
	border: 2px solid var(--wp--custom--tag--bulletin--bg);
	border-radius: var(--wp--custom--radius--box);
	background: var(--wp--preset--color--surface-muted);
}

.dnews-bulletin-row.dnews-bulletin-row:hover {
	border-color: var(--wp--preset--color--accent-text);
}

.dnews-bulletin-row.dnews-bulletin-row > * {
	margin-block: 0;
}

.dnews-bulletin-row__head.dnews-bulletin-row__head {
	align-items: center;
	gap: var(--wp--preset--spacing--space-3);
	margin-block-end: var(--wp--preset--spacing--space-2);
}

.dnews-bulletin-row__head > * {
	margin: 0;
}

.dnews-bulletin-row .dnews-badge--bulletin {
	display: inline-block;
	padding: 2px 9px; /* Exempt from the spacing scale: tag padding from the design. */
}

.dnews-bulletin-row .dnews-bulletin-row__title {
	flex: 1 1 14em;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: var(--wp--custom--type--heading--weight);
	line-height: 1.3;
}

.dnews-bulletin-row__title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.dnews-bulletin-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dnews-bulletin-row__title a:focus-visible {
	outline: 0;
}

.dnews-bulletin-row:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--heading);
	outline-offset: 3px; /* Exempt from the spacing scale: focus ring room. */
}

.dnews-bulletin-count {
	margin: 0;
	color: var(--wp--preset--color--accent-text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: var(--wp--custom--type--nav--weight);
}

.dnews-bulletin-row__date {
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600; /* Exempt: row weight from the design. */
}

/*
 * Sentence case: theme.json uppercases every core/post-date and core prints
 * that rule after this file at one-class specificity. Doubled class wins.
 */
.dnews-bulletin-row__date.dnews-bulletin-row__date {
	text-transform: none;
}

/*
 * Archive banner bar (dnews 2.0, art by Maya): a decorative 8-bit strip
 * between the blurb and the filter chips. Two images are printed (light and
 * night art, about 2 KB each); the same two selector forms dark.css uses pick
 * one, so the manual toggle works. Native 570 x 80 art: 80px tall on phones
 * (exactly 1.0x, crisp), 160px from 992px (2x at the 1140px container), cover
 * crop anchored to the bottom so the ground line stays put, pixelated scaling
 * at any DPR. Tripled class selectors: core's block-gap rules tie a double
 * class when they print after this file (staging). The sky colour behind the
 * image is the art's own, so nothing flashes before decode.
 */
.dnews-archive-head__bar.dnews-archive-head__bar.dnews-archive-head__bar {
	box-sizing: border-box;
	height: 80px; /* Exempt from the spacing scale: the art's native height (1.0x). */
	margin-block: var(--wp--preset--spacing--space-6) var(--wp--preset--spacing--space-5);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--image);
	background: var(--wp--custom--archive-bar--sky);
}

/* Last in its frame (tag, author, bulletin): no gap on top of the split's. */
.dnews-archive-head__bar.dnews-archive-head__bar.dnews-archive-head__bar:last-child {
	margin-block-end: 0;
}

.dnews-archive-head__bar .dnews-archive-head__bar-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 100%;
	image-rendering: pixelated;
}

.dnews-archive-head__bar .dnews-archive-head__bar-img--dark {
	display: none;
}

@media (min-width: 992px) {

	.dnews-archive-head__bar.dnews-archive-head__bar.dnews-archive-head__bar {
		height: 160px; /* Exempt from the spacing scale: 2x the art's native height. */
	}
}

@media screen and (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) .dnews-archive-head__bar.dnews-archive-head__bar.dnews-archive-head__bar {
		background: var(--wp--custom--archive-bar--sky-dark);
	}

	:root:not([data-theme="light"]) .dnews-archive-head__bar .dnews-archive-head__bar-img--light {
		display: none;
	}

	:root:not([data-theme="light"]) .dnews-archive-head__bar .dnews-archive-head__bar-img--dark {
		display: block;
	}
}

@media screen {

	:root[data-theme="dark"] .dnews-archive-head__bar.dnews-archive-head__bar.dnews-archive-head__bar {
		background: var(--wp--custom--archive-bar--sky-dark);
	}

	:root[data-theme="dark"] .dnews-archive-head__bar .dnews-archive-head__bar-img--light {
		display: none;
	}

	:root[data-theme="dark"] .dnews-archive-head__bar .dnews-archive-head__bar-img--dark {
		display: block;
	}
}

/*
 * Banner overlay (desktop, Owner decision 2026-11-01, option A): from 992px the
 * h1 and the clamped description sit ON the bar, left-aligned on a
 * left-to-right dark scrim at content width, and the filter chips stay right
 * below. It is CSS grid overlap only: the DOM order stays breadcrumb, h1,
 * description, bar, chips, so the h1 is still the first heading and the bar
 * stays decorative. It applies only to a head that holds BOTH the title and the
 * bar (:has), so the author head (avatar and bio), the date archives and the
 * index (no bar), search and the game hub are untouched. Colors come from the
 * archiveBar tokens (`panel`, `scrim.*`), never literal. The text is white in
 * both modes because the scrim is dark in both. Below 992px nothing changes.
 * forced-colors and prefers-contrast: more are excluded by the media query
 * itself, so those users keep today's stacked head (title, description, bar
 * with its border, chips) and the scrim, white text and panel never apply.
 * Specificity: the head resets are `.head.head > *` and the bar margins are
 * tripled classes, so every rule here adds the head class three times plus the
 * :has() checks.
 */
@media (min-width: 992px) and (not (forced-colors: active)) and (not (prefers-contrast: more)) {

	.dnews-archive-head.dnews-archive-head.dnews-archive-head:has(> .dnews-archive__title):has(> .dnews-archive-head__bar) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
	}

	.dnews-archive-head.dnews-archive-head.dnews-archive-head:has(> .dnews-archive-head__bar) > .dnews-archive__title {
		grid-area: 1 / 1;
		align-self: end;
		position: relative;
		z-index: 2;
		margin: 0;
		padding: var(--wp--preset--spacing--space-4) var(--wp--preset--spacing--space-7) 0;
		color: var(--wp--preset--color--on-chrome);
	}

	.dnews-archive-head.dnews-archive-head.dnews-archive-head:has(> .dnews-archive-head__bar) > .dnews-archive__description {
		grid-area: 2 / 1;
		align-self: start;
		position: relative;
		z-index: 2;
		max-width: 480px; /* Exempt from the spacing scale: about 60 characters a line. */
		margin: var(--wp--preset--spacing--space-2) 0 0;
		padding: 0 var(--wp--preset--spacing--space-7) var(--wp--preset--spacing--space-4);
		color: var(--wp--preset--color--on-chrome);
	}

	/* The clamp sits on the inner paragraph. */
	.dnews-archive-head.dnews-archive-head.dnews-archive-head:has(> .dnews-archive-head__bar) > .dnews-archive__description p {
		display: -webkit-box;
		margin: 0;
		overflow: hidden;
		color: var(--wp--preset--color--on-chrome);
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.dnews-archive-head.dnews-archive-head.dnews-archive-head:has(> .dnews-archive__title) > .dnews-archive-head__bar.dnews-archive-head__bar.dnews-archive-head__bar {
		grid-area: 1 / 1 / 3 / 2;
		position: relative;
		z-index: 0;
		height: auto;
		min-height: 160px; /* Exempt from the spacing scale: the bar's 2x height. */
		margin: 0;
		background: var(--wp--custom--archive-bar--panel);
	}

	.dnews-archive-head.dnews-archive-head.dnews-archive-head:has(> .dnews-archive__title) > .dnews-archive-head__bar::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: var(--wp--custom--archive-bar--scrim);
	}

	.dnews-archive-head.dnews-archive-head.dnews-archive-head:has(> .dnews-archive-head__bar) > .dnews-filters {
		grid-row: 3;
	}
}