/*
 * DEVORA stage 6 utility templates (docs/stage-6/00-platform.md 1c and 1d, README L1 and L17): search results, the
 * 404 page, the tag archive and the index fallback. Loaded only on a page that renders one of the classes
 * functions.php devora_css_families() lists for "utility" (the utility band and the listing rows), and in the
 * editor. Tags UT1 to UT6. Each rule names the block limitation it works around (CLAUDE.md hard rule 5); values are
 * theme.json tokens. The hero is the platform's (PH1 to PH5). Paths are relative to this file.
 */

/* UT1. Listing row (Card Long, UI Kit 1123:13027, without its View button): what it is and its date in a left
 *      column the card width (the Card Long chip column), the title and excerpt beside it, capped at the prose
 *      measure so an excerpt never runs the full 1284. Core Group has no two-track grid with a fixed first track
 *      (its grid layout makes equal columns), so the row is a grid here from 782 up and a stack below, where the
 *      flow gap (spacing 20) sits between the label block and the title. In the grid the flow margin goes. */
.devora-listing__items { margin: 0; padding: 0; list-style: none; }
@media (width >= 782px) {
	.devora-listing__row {
		display: grid;
		grid-template-columns: var(--wp--custom--width--card) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}
	.devora-listing__row > * { margin-block: 0; }
}
.devora-listing__text { max-width: var(--wp--custom--width--prose); }
.devora-listing__excerpt p { margin: 0; }

/* UT2. The type label's dot (Card Long's chip, 1123:13027): a small disc before the label in the chip family's icon
 *      colour for a resource (the site plugin adds devora-chip--{family} from the output type, as on the library's
 *      tiles, HM16), accent for everything else. A Paragraph has no marker slot. Decorative: the label is the text. */
.devora-listing__type { display: flex; align-items: center; gap: var(--wp--preset--spacing--10); }
.devora-listing__type::before {
	content: "";
	flex: none;
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background-color: var(--devora-type-colour, var(--wp--preset--color--accent));
}
.devora-listing .devora-chip--category-1 { --devora-type-colour: var(--wp--custom--chip--category-1--icon); }
.devora-listing .devora-chip--category-2 { --devora-type-colour: var(--wp--custom--chip--category-2--icon); }
.devora-listing .devora-chip--category-3 { --devora-type-colour: var(--wp--custom--chip--category-3--icon); }
.devora-listing .devora-chip--category-4 { --devora-type-colour: var(--wp--custom--chip--category-4--icon); }

/* UT3. The row title is a heading link in a list of links: the heading's own colour with no underline at rest, the
 *      underline on hover and focus (PH8's rule for resource rows). Core Post Title has no link hover control. */
.devora-listing__title a { color: inherit; text-decoration: none; }
.devora-listing__title a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* UT4. The search form at the narrow measure. Core Search's width control writes a fixed px width with no maximum,
 *      which overflows a phone, so the cap is a max-width here. */
.devora-utility__search { max-width: var(--wp--custom--width--narrow); }

/* UT5. Helpful links (404, and search with no results): the resource row's circled arrow (PH8, one asset) before
 *      each link, accent-text with no underline at rest, underlined on hover and focus. Core List has no marker
 *      image control. */
.devora-utility__links {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--resource--gap);
	margin-block-end: 0;
	padding: 0;
	list-style: none;
}
.devora-utility__links > li { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.devora-utility__links > li::before {
	content: "";
	flex: none;
	width: var(--wp--custom--resource--icon);
	height: var(--wp--custom--resource--icon);
	background: url("../icons/arrow-circle-related.svg") center / contain no-repeat;
}
.devora-utility__links a {
	color: var(--wp--preset--color--accent-text);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--lead);
	text-decoration: none;
}
.devora-utility__links a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* UT6. Pagination: retired 1 October. The listing pagination carries devora-pagination and takes the site paginator,
 *      platform.css PH11 (review 3 to 5: one site, one paginator). */