/*
 * Resources family (stage 6 family 5, docs/stage-6/40-resources.md): the Resource Library (page 134), the resource
 * single (templates/single-resource.html) and the fact sheet single (templates/resource-fact-sheet.html). Loaded only
 * when one of the classes listed for "resources" in functions.php devora_css_families() renders, and in the editor.
 * Builds on platform.css (a declared dependency: the hero, breadcrumbs, the torn divider and the resource list rows).
 * Two blocks: the library (RL tags) and the singles (RD tags). Every rule says what core cannot do; values are tokens.
 */

/* === Resource Library === */

/*
 * RL1 Library hero (1122:12061): the texts 528 at the left and the facets 636 at the right from 1024, space-between;
 * below 1024 the facets drop under the texts, up to 636 wide (40 4.2, 393 proposed). Why CSS: a flex Group has no
 * per-width basis, and the hero construction's aside is one Group for every family.
 */
.devora-library-hero .devora-hero__split { align-items: flex-start; }
.devora-library-hero .devora-hero__split > * { flex: 1 1 100%; min-width: 0; }
.devora-library-hero .devora-hero__aside { max-width: var(--wp--custom--width--half); }
@media (min-width: 1024px) {
	/* One row from 1024: the two bases (528 + 636) need 1164 plus the gap, so a wrapping row dropped the facets under
	   the H1 up to about 1350; both shrink instead (review 3 to 5). */
	.devora-library-hero .devora-hero__split { flex-wrap: nowrap; }
	.devora-library-hero .devora-hero__split > :first-child { flex: 0 1 var(--wp--custom--width--narrow); }
	.devora-library-hero .devora-hero__split > .devora-hero__aside { flex: 0 1 var(--wp--custom--width--half); }
}
/* No text shadow on the navy band: Figma's Hero Text effect sits on photographs only (1122:12166 draws none). */
.devora-library-hero .devora-text-shadow { text-shadow: none; }

/*
 * RL2 The search and type fields (Input Field 1122:12171, Dropdown 1122:12175): 56 tall, white, the 1px overlay border,
 * radius 8, padding 16, 16/24 text; the search icon 24 in decor-8 at the left, the chevron 24 in accent-text at the
 * right; placeholder and "All resource output types" in accent-text (5.63:1). Why CSS: WP Grid Builder's own markup
 * and its facet stylesheet (facets.css), which no block setting reaches.
 */
.wpgb-facet.devora-facet > fieldset:is(:last-child, :only-child) { margin: 0; } /* WP Grid Builder leaves 40 under a facet's last fieldset. */
.wpgb-facet.devora-facet--search .wpgb-search-facet,
.wpgb-facet.devora-facet--type .wpgb-select-facet { position: relative; }
.wpgb-facet.devora-facet--search .wpgb-input,
.wpgb-facet.devora-facet--type .wpgb-select {
	box-sizing: border-box;
	width: 100%;
	height: var(--wp--custom--resource--field);
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--color--overlay);
	border-radius: var(--wp--preset--border-radius--panel);
	background-color: var(--wp--preset--color--surface);
	box-shadow: none;
	color: var(--wp--preset--color--primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}
.wpgb-facet.devora-facet--search .wpgb-search-facet .wpgb-input {
	padding-inline: calc(var(--wp--preset--spacing--30) + var(--wp--custom--resource--field-icon) + var(--wp--preset--spacing--20)) var(--wp--preset--spacing--30);
	text-indent: 0;
}
.wpgb-facet.devora-facet--search .wpgb-input::placeholder { color: var(--wp--preset--color--accent-text); opacity: 1; }
.wpgb-facet.devora-facet--search .wpgb-input-icon {
	position: absolute;
	inset-inline-start: var(--wp--preset--spacing--30);
	top: 50%;
	width: var(--wp--custom--resource--field-icon);
	height: var(--wp--custom--resource--field-icon);
	margin: 0;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--wp--preset--color--decor-8);
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}
.wpgb-facet.devora-facet--type .wpgb-select {
	padding-inline: var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--30) + var(--wp--custom--resource--field-icon) + var(--wp--preset--spacing--10));
	/* No block padding: the shared 16 + 16 left a 22 content box for the 24 line, and a select pins an overflowing line
	   to the top and clips it, so "All resource output types" lost its descenders, worse at a larger browser font. The
	   fixed field height centres the line instead (22 October 2026). */
	padding-block: 0;
	appearance: none;
	color: var(--wp--preset--color--accent-text);
	cursor: pointer;
}
/* RL2 selectors carry select.wpgb-select + so they outrank facets.css (0,3,1), which set the controls grey-500 and 0
   from the edge and the chevron 8 inside its own margin: the drawn chevron sits 16 in, in accent-text (review 3 to 5). */
.wpgb-facet.devora-facet--type select.wpgb-select + .wpgb-select-controls {
	position: absolute;
	inset-block: 0;
	inset-inline: auto var(--wp--preset--spacing--30);
	display: flex;
	align-items: center;
	height: auto;
	pointer-events: none;
	color: var(--wp--preset--color--accent-text);
}
.wpgb-facet.devora-facet--type .wpgb-select-separator { display: none; }
.wpgb-facet.devora-facet--type select.wpgb-select + .wpgb-select-controls .wpgb-select-toggle {
	width: var(--wp--custom--resource--field-icon);
	height: var(--wp--custom--resource--field-icon);
	margin: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}
.wpgb-facet.devora-facet--search .wpgb-clear-button {
	position: absolute;
	inset-inline-end: var(--wp--preset--spacing--20);
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--accent-text);
}
.wpgb-facet.devora-facet--search .wpgb-clear-button svg { fill: none; stroke: currentColor; stroke-width: 2; }
/*
 * RL2b The search field's Clear button (shown once there are words): WP Grid Builder sets `outline: none` on it and
 * only greys the icon on focus (rgb 150 on white, under 3:1), so a keyboard user could not see it. It sits inside the
 * white field, where the hero's white ring would vanish, so it takes the navy ring (A1's colour, 15:1 on white) drawn
 * just inside its box (assembly pass, 30 Sep).
 */
.wpgb-facet.devora-facet--search .wpgb-clear-button:focus-visible {
	outline: var(--wp--custom--focus--ring) solid var(--wp--preset--color--primary);
	outline-offset: calc(var(--wp--custom--focus--ring) * -1);
	color: var(--wp--preset--color--accent-text);
}
/* The site's focus ring (A1) on the fields, tiles and page numbers: WP Grid Builder draws its own 1.5px system outline. */
.wpgb-facet.devora-facet :is(ul li .wpgb-button, .wpgb-pagination li a, .wpgb-input, .wpgb-select):focus-visible {
	outline: var(--wp--custom--focus--ring) solid var(--devora-ring, var(--wp--preset--color--primary));
	outline-offset: 2px;
}

/*
 * RL3 Topic tiles (Featured Content 1122:4099, tiles 1122:4114): the topic facet's buttons as seven equal tiles 12
 * apart from 1024 (128 tall, 1px border, radius 8, padding 20 / 12 / 16, the illustration 36 over the label, ExtraBold
 * 14/20 accent-text); below 1024 one row that scrolls sideways, tiles 144 wide (40 7.10). "All topics" selected
 * (1122:4109): accent-subtle fill, 2px accent-text border, label accent-text-strong; any selected tile takes the same
 * look from aria-pressed. Hover and focus (not drawn, 40 7.20): the border in accent-text on white. Why CSS: WP Grid
 * Builder's button markup.
 */
.wpgb-facet.devora-facet--topic .wpgb-button-facet > ul {
	display: flex;
	gap: var(--wp--preset--spacing--card-row);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wpgb-facet.devora-facet--topic .wpgb-button-facet > ul > li { flex: 1 1 0; min-width: 0; margin: 0; }
.wpgb-facet.devora-facet--topic .wpgb-button {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	height: 100%;
	min-height: var(--wp--custom--resource--tile-min-height);
	margin: 0;
	padding: var(--wp--custom--resource--tile-pad);
	border: 0;
	border-radius: var(--wp--preset--border-radius--panel);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border); /* Figma draws the stroke inside the 128 tile. */
	color: var(--wp--preset--color--accent-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--caption);
	text-align: center;
	cursor: pointer;
}
.wpgb-facet.devora-facet--topic .wpgb-button-label {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--caption);
}
.wpgb-facet.devora-facet--topic .devora-facet-illustration {
	width: var(--wp--custom--resource--facet-illustration);
	height: var(--wp--custom--resource--facet-illustration);
}
.wpgb-facet.devora-facet--topic .wpgb-button:is(:hover, :focus-visible) {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-text);
	background-color: var(--wp--preset--color--surface);
}
/* "All topics" has no illustration, so its label sits in the middle of the tile (1122:4109). */
.wpgb-facet.devora-facet--topic .wpgb-button:not(:has(.devora-facet-illustration)) { justify-content: center; }
.wpgb-facet.devora-facet--topic .wpgb-button[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-text); /* The drawn 2px border, inside the tile. */
	background-color: var(--wp--preset--color--accent-subtle);
	color: var(--wp--preset--color--accent-text-strong);
}
.wpgb-facet.devora-facet--topic .wpgb-button :is(.wpgb-button-count, input) { display: none; }
@media (width < 1024px) {
	.wpgb-facet.devora-facet--topic .wpgb-button-facet > ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline-end: calc(-1 * var(--wp--custom--width--gutter));
		padding-inline-end: var(--wp--custom--width--gutter);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.wpgb-facet.devora-facet--topic .wpgb-button-facet > ul > li { flex: 0 0 var(--wp--custom--resource--tile-mobile); scroll-snap-align: start; }
}

/*
 * RL4 Result rows (Card Long 1123:13027 on 1122:4135): from 1024 three tracks, the chip column 280, the text and the
 * View column 172 at the right, 12 apart and baseline aligned; padding 24 / 32 on a 1px border rule, the first row with
 * a rule above it too. Below 1024 one column (chip, title, authors, summary, then View at its own width). Why CSS: a
 * Post Template item has no fixed-track columns, and Columns cannot sit inside a Query's item with a 280 track.
 */
.devora-resource-library__rows { margin: 0; padding: 0; list-style: none; }
.devora-resource-library__rows > li { margin: 0; }
.devora-resource-library__rows > li:first-child .devora-resource-card { border-top: 1px solid var(--wp--preset--color--border); }
.devora-resource-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--custom--resource--row-pad-top) var(--wp--custom--resource--row-pad-bottom);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.devora-resource-card > * { margin: 0 !important; } /* The flow layout's block gap would stack on top of the grid gap. */
@media (min-width: 1024px) {
	.devora-resource-card {
		grid-template-columns: var(--wp--custom--resource--chip) minmax(0, 1fr) var(--wp--custom--resource--action);
		align-items: baseline;
	}
	.devora-resource-card__type { padding-block: var(--wp--preset--spacing--10); }
	/* Grid baseline alignment includes the chip icon; lift the text column by the existing small spacing token. */
	.devora-resource-card__main { position: relative; inset-block-start: calc(-1 * var(--wp--preset--spacing--10)); }
	.devora-resource-card__action { justify-content: flex-end; }
}
/*
 * RL4a The result count over the rows ("Showing 1 to 10 of 67 resources", WP Grid Builder's result count facet, a
 * polite status region from devora-site inc/library.php): small, muted, 16 above the first row's rule. Not drawn in
 * Figma; shown since 22 October 2026 (Gareth) so a search says how much it found. With no results the facet carries the
 * same sentence as the list's no-results line, so it hides visually then and stays in the accessibility tree for the
 * announcement. Why CSS: the facet's own markup, which no block setting reaches, and the no-results state is the
 * Query's, not the facet's.
 */
.wpgb-facet.devora-facet--count {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--caption);
}
.devora-resource-library:has(.devora-resource-library__empty) .wpgb-facet.devora-facet--count {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Inline, not core's inline-block: an inline-block reports its last line as its baseline, so a wrapped title pulled the
   chip and View down to its last line; Figma sets both level with the first (1122:4135, review 3 to 5). */
.devora-resource-card__title a { display: inline; color: inherit; text-decoration: none; }
.devora-resource-card__title a:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.devora-resource-card__title { line-height: var(--wp--custom--line-height--heading); letter-spacing: var(--wp--custom--letter-spacing--heading); overflow-wrap: anywhere; }
.devora-resource-card__summary p { margin: 0; }
.devora-resource-card__action .wp-block-button__link { white-space: nowrap; }

/*
 * RL5 The output type chip on a row and on the facts strip (Card Long I1122:4135;1123:13011, strip 1122:11645): the
 * type's icon 24 before the name, 12 apart, in its family's colours (custom.chip; HM16 does the same for the Home
 * tiles). The site plugin writes --devora-type-icon and devora-chip--{family} on the Post Terms block. Why CSS: the
 * icons are single-colour currentColor drawings, so each is a mask; Post Terms has no icon slot.
 */
.devora-type-chip { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.devora-type-chip::before {
	content: "";
	flex: none;
	order: -1;
	width: var(--wp--custom--resource--strip-icon);
	height: var(--wp--custom--resource--strip-icon);
	background-color: var(--devora-type-colour, var(--wp--preset--color--accent-text));
	-webkit-mask: var(--devora-type-icon, url("../icons/output-type-placeholder.svg")) center / contain no-repeat;
	mask: var(--devora-type-icon, url("../icons/output-type-placeholder.svg")) center / contain no-repeat;
}
.devora-type-chip--strip::before { order: 1; }
.devora-type-chip a { color: var(--devora-type-label, currentColor); text-decoration: none; }
.devora-type-chip a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 0.2em; }
.devora-type-chip--row.devora-chip--category-1 { --devora-type-colour: var(--wp--custom--chip--category-1--icon); --devora-type-label: var(--wp--custom--chip--category-1--label); }
.devora-type-chip--row.devora-chip--category-2 { --devora-type-colour: var(--wp--custom--chip--category-2--icon); --devora-type-label: var(--wp--custom--chip--category-2--label); }
.devora-type-chip--row.devora-chip--category-3 { --devora-type-colour: var(--wp--custom--chip--category-3--icon); --devora-type-label: var(--wp--custom--chip--category-3--label); }
.devora-type-chip--row.devora-chip--category-4 { --devora-type-colour: var(--wp--custom--chip--category-4--icon); --devora-type-label: var(--wp--custom--chip--category-4--label); }
.devora-type-chip--strip.devora-chip--category-1 { --devora-type-colour: var(--wp--custom--chip--category-1--icon); }
.devora-type-chip--strip.devora-chip--category-2 { --devora-type-colour: var(--wp--custom--chip--category-2--icon); }
.devora-type-chip--strip.devora-chip--category-3 { --devora-type-colour: var(--wp--custom--chip--category-3--icon); }
.devora-type-chip--strip.devora-chip--category-4 { --devora-type-colour: var(--wp--custom--chip--category-4--icon); }

/*
 * RL6 Pagination (Paginator 1195:37799): squares 48 (40 below 600), radius 4, 12 apart, centred 48 under the list; the
 * current page accent-text with a white label (5.63:1), the others surface-subtle with an accent-text label; previous
 * and next as arrows, their words kept for screen readers (the site plugin names the links). WP Grid Builder omits
 * Previous on page 1 (40 7.19). Why CSS: WP Grid Builder's pagination markup.
 */
.wpgb-facet.devora-facet--page { margin-block-start: var(--wp--preset--spacing--70); }
.wpgb-facet.devora-facet--page .wpgb-pagination-facet { display: flex; justify-content: center; }
.wpgb-facet.devora-facet--page .wpgb-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wpgb-facet.devora-facet--page .wpgb-pagination li.wpgb-page { height: auto; min-width: 0; margin: 0; line-height: 1; }
.wpgb-facet.devora-facet--page .wpgb-pagination li :is(a, .wpgb-dots-page) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--resource--page);
	height: var(--wp--custom--resource--page);
	padding-inline: var(--wp--preset--spacing--20);
	border-radius: var(--wp--preset--border-radius--small);
	background-color: var(--wp--preset--color--surface-subtle);
	color: var(--wp--preset--color--accent-text);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}
.wpgb-facet.devora-facet--page .wpgb-pagination li .wpgb-dots-page { background: none; }
.wpgb-facet.devora-facet--page .wpgb-pagination li a:hover { background-color: var(--wp--preset--color--accent-subtle); }
.wpgb-facet.devora-facet--page .wpgb-pagination li a[aria-current] { background-color: var(--wp--preset--color--accent-text); color: var(--wp--preset--color--white); }
.wpgb-facet.devora-facet--page .wpgb-pagination li:is(.wpgb-page-prev, .wpgb-page-next) a { font-size: 0; } /* The words stay for screen readers (aria-label); the arrow shows. */
.wpgb-facet.devora-facet--page .wpgb-pagination li:is(.wpgb-page-prev, .wpgb-page-next) a::before {
	content: "";
	width: var(--wp--preset--spacing--30);
	height: var(--wp--preset--spacing--30);
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}
.wpgb-facet.devora-facet--page .wpgb-pagination li.wpgb-page-prev a::before {
	-webkit-mask-image: url("../icons/arrow-left.svg");
	mask-image: url("../icons/arrow-left.svg");
}
@media (width < 600px) {
	.wpgb-facet.devora-facet--page .wpgb-pagination li :is(a, .wpgb-dots-page) { min-width: var(--wp--custom--resource--page-small); height: var(--wp--custom--resource--page-small); }
}

/*
 * RL7 The list while WP Grid Builder fetches (not drawn, 40 7.20): its own fade, kept; the no-results line gets the row
 * padding so it does not sit on the facets. Why CSS: third-party state classes.
 */
.devora-resource-library__empty { margin: 0; padding-block: var(--wp--custom--resource--row-pad-top); border-block: 1px solid var(--wp--preset--color--border); }

/* === Resource and fact sheet singles === */

/*
 * RD1 A long title (over 120 characters; the site plugin adds devora-title--long) at the heading size, 44/48 at 1440
 * (40 7.6: the longest real title is 372 characters, ten lines at 64). Why CSS: Post Title has one size.
 */
.devora-hero--resource .wp-block-post-title.devora-title--long {
	font-size: var(--wp--preset--font-size--heading);
	line-height: var(--wp--custom--line-height--heading);
}
/* RD1a Past 200 characters (devora-title--very-long) a step smaller again below 768, at the card title size: the
   371-character title filled more than a 390 screen at the heading size (19 lines, the hero 925 on an 844 viewport;
   review 3 to 5). */
@media (width < 768px) {
	.devora-hero--resource .wp-block-post-title.devora-title--very-long { font-size: var(--wp--preset--font-size--card-title); }
}
.devora-hero--resource .wp-block-post-title { overflow-wrap: anywhere; }
/* The title runs the full 1284 (1122:11625), not the page hero's 1068, and the torn edge takes the facts strip's colour
   (1122:11633 is filled surface-subtle): PH5 looks for a band inside Post Content, and a single has none. */
.devora-hero--resource .devora-hero__content .wp-block-post-title.alignwide { max-width: var(--wp--custom--width--wide); }
.devora-hero--resource:has(+ .devora-resource-meta) { --devora-hero-edge: var(--wp--preset--color--surface-subtle); }

/*
 * RD2 Facts strip (1122:11636): columns 312 wide, 12 apart, label over value 4 apart, the output type icon 24 after its
 * name and the topic illustration 28 after the topics, both 12 from the text; two columns below 1024. Why CSS: a flex
 * Group's children have no fixed width that changes by viewport, and Post Terms has no icon slot.
 */
/* Columns share the row up to 312 each, so three (and Figma's four, once topics are filled) hold one row from 1024
   instead of wrapping at 3 x 312 + gaps (review 3 to 5). */
.devora-resource-meta__row > .devora-meta-col { flex: 1 1 0; min-width: 0; max-width: var(--wp--custom--width--card); display: flex; flex-direction: column; gap: var(--wp--custom--resource--strip-gap); }
.devora-resource-meta__row > .devora-meta-col > * { margin: 0; }
.devora-meta-col__value { line-height: var(--wp--custom--line-height--lead); }
.devora-meta-col__value a { color: inherit; text-decoration: none; }
.devora-meta-col__value a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 0.2em; }
.devora-topic-terms.has-topic-illustration { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.devora-topic-terms.has-topic-illustration::after {
	content: "";
	flex: none;
	width: var(--wp--custom--resource--strip-illustration);
	height: var(--wp--custom--resource--strip-illustration);
	background: var(--devora-topic-illustration) center / contain no-repeat;
}
/* Two columns below 1024 (was 768): four columns at 768 would be 163 wide, too narrow for "Communities & Infrastructure"
   beside its illustration; 768 to 1023 keeps the 2 + 1 it had at 312 (review 3 to 5). */
@media (width < 1024px) {
	.devora-resource-meta__row > .devora-meta-col { flex: 0 0 calc(50% - var(--wp--preset--spacing--card-row) / 2); }
}

/*
 * RD3 Details rows (Table 1122:11676): a 1px border rule above the table and under every row, rows 24 above and below,
 * the label 204 beside the value 12 apart and baseline aligned; below 768 the label sits over the value, 4 apart, rows
 * 16 above and below. Why CSS: a Group row has no fixed label column that stacks by viewport, and core Table cannot
 * take bound cells.
 */
.devora-resource-details__table { border-top: 1px solid var(--wp--preset--color--border); }
.devora-detail-row {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--card-row);
	margin: 0 !important; /* The table's rows touch; a flow gap would open between the rules. */
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.devora-detail-row > * { margin: 0 !important; } /* Label and value sit side by side, not stacked with a flow gap. */
.devora-detail-row__label { flex: 0 0 var(--wp--custom--width--label); }
.devora-detail-row__value { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.devora-detail-row__value a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
@media (width < 768px) {
	.devora-detail-row { flex-direction: column; gap: var(--wp--custom--resource--strip-gap); padding-block: var(--wp--preset--spacing--30); }
	.devora-detail-row__label { flex-basis: auto; }
}

/*
 * RD4 Tags in the Details row (1122:11688): 16 apart, wrapping, the separator a space core prints between the links.
 * Why CSS: Post Terms has no gap.
 */
.devora-detail-tags { display: flex; flex-wrap: wrap; column-gap: var(--wp--preset--spacing--30); row-gap: var(--wp--preset--spacing--10); }
.devora-detail-tags .wp-block-post-terms__separator { display: none; }

/*
 * RD5 Block headings and the text blocks (1122:11666 and the rest): heading to text 12 (the Group gap), and the column's
 * text in the site link style; the credit row under the media (Big Media credit, I1122:11669;683:29198) with the
 * photo-credit icon 20 and 8 before it, text-muted. Why CSS: a paragraph has no icon slot (HM5 styles an Image caption).
 */
.devora-resource-block > * { margin-block: 0; }
.devora-resource-credit {
	position: relative;
	min-height: var(--wp--custom--credit--icon);
	padding-inline-start: calc(var(--wp--custom--credit--icon) + var(--wp--preset--spacing--10));
	line-height: var(--wp--custom--line-height--caption);
}
.devora-resource-credit::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: var(--wp--custom--credit--icon);
	height: var(--wp--custom--credit--icon);
	background-color: currentColor;
	-webkit-mask: url("../icons/photo-credit.svg") center / contain no-repeat;
	mask: url("../icons/photo-credit.svg") center / contain no-repeat;
}
.devora-resource-credit:empty { display: none; }

/*
 * RD6 Media and the fact sheet cover (Media/Big Media 1122:11669, cover 1195:38503): the 1px overlay border, radius 8,
 * white behind the image, 8 above and below (PH6's frame, for a Featured Image rather than an Image). Why CSS: Featured
 * Image's border support cannot take a custom colour token.
 */
.devora-resource-media__image { margin: 0; padding-block: var(--wp--preset--spacing--10); }
.devora-resource-media__image img {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--wp--custom--color--overlay);
	border-radius: var(--wp--preset--border-radius--panel);
	background-color: var(--wp--preset--color--surface);
}

/*
 * RD7 Copy citation (Button / Link Secondary 1122:11673): the site plugin shows it once its script runs; the link
 * secondary style sits flush left. Citation text wraps its long URLs. Why CSS: progressive enhancement state.
 */
.devora-citation { overflow-wrap: anywhere; }
.devora-resource-citation .wp-block-buttons { margin-block-start: 0; }

/*
 * RD8 The body when a resource has one (3.3.6): the column's paragraphs 16 apart, as article text. Why CSS: Post Content
 * in a template takes the flow gap of the column (32), which is the block rhythm, not the paragraph rhythm.
 */
.devora-resource-content > * + * { margin-block-start: var(--wp--preset--spacing--30); }

/*
 * RL8 The fact sheet carousel's arrow buttons at the foot of the library (the Home section as it is, 1195:37738): 48
 * square, as on Home. Core 7.1's Buttons stylesheet sets every button link in a Buttons block to width 100% at the same
 * specificity as HM13, and on this page it prints after style.css, so the arrows stretched to 131. Why CSS: load order
 * between core's block stylesheet and the theme's is not ours to set.
 */
.devora-band .devora-carousel__nav .wp-block-button__link { width: var(--wp--custom--carousel--button); }
/* The automatic rotation control needs its text width instead of the arrow button width. */
.devora-band .devora-carousel__nav .devora-carousel__pause .wp-block-button__link { width: auto; }