/*
 * DEVORA stage 6 platform rules (docs/stage-6/00-platform.md). Loaded only on a page that renders one of the blocks
 * functions.php devora_css_families() lists for "platform" (the page heroes, breadcrumbs, media, the torn divider,
 * article blocks, page intros, resource lists, the page numbers, the split panel), and in the editor. Tags PH1 to
 * PH12. Each rule names the block limitation it works around (CLAUDE.md hard rule 5); values are theme.json tokens.
 * Where a family spec proposed the same rule under its own tag, the tag is named (VS for 10-volcanic-story, RD for 40,
 * NE for 50, AB for 30). Paths are relative to this file.
 */

/* PH1. Page hero (Internal Hero 719:12408, Section Hero 666:5471; VS1). Core Cover has a 430 minimum height and no
 *      edge control, and its height here is its content's (444 with no trail, 484 with one, 552 with a two-line
 *      title), so the minimum goes. The torn foot (Simple Vector 534:5399, 1440 x 40; 393 x 20 below 600) is one
 *      flat vector, so it is a mask painted in the colour of the band below (PH5), above the image and overlay and
 *      under the text, 1px past each side so its ends never show a pale line. With no featured image the Cover
 *      shows the theme's hero texture (719:12432) rather than a flat block of colour: a prose page or a new page. */
.wp-block-cover.devora-hero__cover { min-height: 0; }
/* PH1a. Core Cover and the image-credit binding collapse the 96 gap and 20 credit row when an attachment has no
 * credit. Keep the Internal Hero's drawn 444/372 height (484/410 with breadcrumbs); longer titles and descriptions
 * can still grow the Cover. Section heroes have their own stats-led height and are excluded. */
.devora-internal-hero .devora-hero__cover { min-height: var(--wp--custom--hero--internal--min-height); }
.devora-internal-hero:has(.devora-breadcrumbs) .devora-hero__cover { min-height: var(--wp--custom--hero--internal--crumb-min-height); }
/* Not behind an opaque overlay (a solid colour at dim 100, no gradient: the Resource Library's navy hero), where the
   texture never showed but was still downloaded and became the page's LCP resource (review 3 to 5). */
.devora-hero__cover:not(:has(> .wp-block-cover__image-background)):not(:has(> .has-background-dim-100:not(.has-background-gradient))) { background: url("../images/hero-texture.webp") center / cover no-repeat; }
.devora-hero--texture .devora-hero__cover { background-image: url("../images/hero-texture-dark.webp"); }
.devora-hero__cover > .wp-block-cover__inner-container { z-index: 2; }
.devora-hero__cover::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline: -0.0625rem;
	bottom: 0;
	height: var(--wp--custom--edge--hero);
	background-color: var(--devora-hero-edge, var(--wp--preset--color--surface));
	-webkit-mask: url("../images/dividers/hero-edge.svg") bottom center / 100% 100% no-repeat;
	mask: url("../images/dividers/hero-edge.svg") bottom center / 100% 100% no-repeat;
	pointer-events: none;
}
@media (width < 600px) {
	/* Core Cover has no responsive focal-point control for its fallback texture. Show the contour detail on Our history. */
	.page-id-56 .devora-internal-hero .devora-hero__cover:not(:has(> .wp-block-cover__image-background)) { background-position: right center; }
	.devora-hero__cover::after {
		-webkit-mask-image: url("../images/dividers/hero-edge-mobile.svg");
		mask-image: url("../images/dividers/hero-edge-mobile.svg");
	}
}
/* Editor only: selecting the Cover draws core's outline on ::after from the top (HM2's note); the edge keeps its foot. */
.block-editor-block-list__layout .devora-hero__cover.block-editor-block-list__block.wp-block-cover::after { top: auto; }
/* The focus ring turns white over the image (HM1's rule for the Home hero): no painted surface class catches it. */
.devora-internal-hero { --devora-ring: var(--wp--preset--color--white); }

/* PH2. Hero credit (719:12427): the photo-credit icon 20 and 8 before the credit text, white, the HM5 row on a
 *      paragraph (HM5 styles an Image caption; the hero credit is a bound paragraph, 00 2.1). A paragraph bound to a
 *      credit that came back empty prints an empty p until the site plugin drops it: it takes no room. */
.devora-hero-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-hero-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-hero-credit:empty { display: none; }

/* PH3. Breadcrumbs (719:12414; VS4). Core Breadcrumbs has no control for the separator's colour, weight or spacing
 *      (a pseudo-element at 0.7 opacity, 0.5em each side) or the link underline's colour: separators "/" in Manrope
 *      Bold with the kicker tracking in sea glass/tint (border-strong), 10 each side; links white (README L4) with the
 *      1px sea glass/mist underline (border) that turns to the text colour on hover. The current page, where a
 *      filter adds one, is Kicker/Default. Below 600 the row keeps 8 under it (Figma's 30 row at 15/22), as the
 *      section hero's kicker does, since the texts gap drops to 8. */
.devora-breadcrumbs li:not(:last-child)::after {
	margin-inline: var(--wp--preset--spacing--button-gap);
	opacity: 1;
	color: var(--wp--preset--color--border-strong);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--kicker);
}
.devora-breadcrumbs a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--border);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}
.devora-breadcrumbs a:hover { text-decoration-color: currentColor; }
.devora-breadcrumbs [aria-current="page"] {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--kicker);
}
@media (width < 600px) {
	.devora-hero :is(.devora-breadcrumbs, .devora-hero__kicker) { padding-block-end: var(--wp--preset--spacing--10); }
}

/* PH4. Section hero foot (720:24748, mobile 666:5470; VS2): the stats (HM4) and the credit in one row, bottom aligned,
 *      from 600; below it a column, the credit 96 under the stats and the stats 16 apart (HM4 fixes 12 for Home).
 *      Group's flex layout has no per-width direction. HM4's 80% cap keeps Home's stats clear of the skyline; there is
 *      no skyline here. */
.devora-section-hero .wp-block-list.devora-stats { max-width: none; }
@media (width < 600px) {
	.devora-section-hero .devora-section-hero__foot { flex-direction: column; align-items: flex-start; }
	.devora-section-hero .wp-block-list.devora-stats { gap: var(--wp--preset--spacing--30); }
}
/* PH4b. Tablet (10-volcanic-story 3A.8: the foot wraps below about 900, where the stat row needs about 780 plus the
 *       credit). From 600 to 899 the credit drops under the stats and the stats share the row in equal columns, 32
 *       apart, their phrases wrapping inside a column, so three never break 2 + 1 (they did at 768). */
@media (600px <= width < 900px) {
	.devora-section-hero .devora-section-hero__foot { flex-direction: column; align-items: stretch; }
	.devora-section-hero .wp-block-list.devora-stats {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		column-gap: var(--wp--preset--spacing--50);
	}
}

/* PH5. The torn edge takes the colour of the band after the hero (683:28243 surface-subtle over an intro band, white
 *      over an article band, 918:8376), so no page carries a setting to forget. The template hero cannot see the
 *      page content, and a hero in the content cannot see its sibling's colour, so :has() looks: the Page template
 *      form (hero, then Post Content) and the Canvas form (hero, then a band, inside Post Content). White otherwise. */
main:has(> .wp-block-post-content > .has-surface-subtle-background-color:first-child) > .devora-hero,
.wp-block-post-content > .devora-hero:has(+ .has-surface-subtle-background-color) { --devora-hero-edge: var(--wp--preset--color--surface-subtle); }

/* PH6. Media (684:29261; is-style-media on core Image): the 1px overlay border and 8 radius on the image, white behind
 *      it so a letterboxed diagram shows a white frame, as drawn; Image's border support cannot take a custom colour
 *      token and a block style has no border slot. Big and Full media draw 8 above and below (903:8268 p8/0/8/0; VS9);
 *      padding, so it adds to the article's gap rather than replacing it. The video twin (core Video) the same. */
.wp-block-image.is-style-media img,
.wp-block-video.devora-video video {
	box-sizing: border-box;
	border: 1px solid var(--wp--custom--color--overlay);
	border-radius: var(--wp--preset--border-radius--panel);
	background-color: var(--wp--preset--color--surface);
}
.wp-block-image.is-style-media:is(.devora-media--big, .devora-media--full) { padding-block: var(--wp--preset--spacing--10); }
/* Big and Full media fill their column (852 or 1284) whatever the file's own width: core Image shows a file narrower than
 *    the column at its natural width, and a builder-made Big image carries no width (the column is the width). */
.wp-block-image.is-style-media:is(.devora-media--big, .devora-media--full) img { width: 100%; }
.wp-block-video.devora-video video { display: block; width: 100%; height: auto; }
/* PH6b. The site plugin's video block (devora/video) is its own figure, not core Image, so the Media block style and
 *       its Big and Full sizes cannot reach it. In an article column or an Article band it draws the same 8 above and
 *       below as the Big and Full poster images it replaced (903:8268; 14 YouTube posters, 3 Oct). Our people's
 *       column videos sit in their own group and stay flush (1314:27125). */
:is(.devora-article, .devora-band--article) > .wp-block-devora-video { padding-block: var(--wp--preset--spacing--10); }

/* PH7. Torn line (1122:11663, 1248:20185; RD5, NE6): is-style-torn on core Separator, which has no shape control. The
 *      footer's torn line drawing (paper-torn-line.svg, F2) as a mask 20 tall across the column, in blue/tint
 *      (text-inverse-muted, decoration). */
.wp-block-separator.is-style-torn {
	width: 100%;
	max-width: none;
	height: var(--wp--custom--edge--line);
	border: 0;
	opacity: 1;
	background-color: var(--wp--preset--color--text-inverse-muted);
	-webkit-mask: url("../images/dividers/paper-torn-line.svg") center / 100% 100% no-repeat;
	mask: url("../images/dividers/paper-torn-line.svg") center / 100% 100% no-repeat;
}
/* Core Separator has no responsive shape height: halve the torn line's vertical stretch on phones. */
@media (width < 600px) {
	.wp-block-separator.is-style-torn { height: var(--wp--custom--edge--line-mobile); }
}

/* PH8. Resource rows (Items Block 945:24589, 1122:11712; VS8, RR1, RD7, NE9): the circled arrow 32 (drawn two-tone,
 *      decorative) 16 before the title, top aligned; Post Title has no icon slot. The link is accent-text with no
 *      underline at rest (a list of links, so colour is not the only cue it is a link: 1.4.1 is about links in
 *      running text) and accent-strong underlined on hover and focus (Figma's teal/strong is 4.39:1 on white).
 *      An empty list is left out of the page, heading and all: the section root carries the site plugin's
 *      devoraShowIf "query" condition (00 4f). The :has() rule at the end is only a fallback for a section placed
 *      without that condition. */
.devora-resource-list__items > li { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--30); }
.devora-resource-list__items > 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-resource-item { margin: 0; }
.devora-resource-item a { color: var(--wp--preset--color--accent-text); text-decoration: none; }
.devora-resource-item a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.devora-resource-list:not(:has(.wp-block-post-template)) { display: none; }

/* PH9. Article sections: an H2 carries an anchor for in-page links (the Landforms index, the region index), and the
 *      header scrolls away, so the landing needs only a little air above the heading, not the header's height. */
.devora-article > .wp-block-heading[id] { scroll-margin-block-start: var(--wp--preset--spacing--40); }

/* PH10. Details table (patterns/details-table.php; News Detail 1248:20199, Event Detail 1249:20746, Resource Detail
 *       1122:11676; NE8, RD3): the rows 73 tall (24 above and below, the 1px rule under each), the label in its 204
 *       column, label and value on one baseline. Group's flex layout offers top, centre or bottom, not baseline. Post
 *       Terms prints a separator between tags that a gap cannot replace, so the separator goes and the tags sit 16 apart
 *       (8 between wrapped lines). Below 600 the label sits over the value, 4 apart; the label's fixed flex size is a
 *       width, so it is let go there (in a column it would set the height). */
.devora-details__row { align-items: baseline; }
.devora-details__row > * { margin-block: 0; }
.devora-details__terms { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30); }
.devora-details__terms .wp-block-post-terms__separator { display: none; }
@media (width < 600px) {
	.devora-details__row.devora-details__row { flex-direction: column; gap: calc(var(--wp--preset--spacing--10) / 2); }
	.devora-details__row > .devora-details__label { flex-basis: auto; }
}

/* PH11 (was NE3). Page numbers, the site paginator (Paginator 1214:11008; 1195:37799). Used by page 130 and, since
 *      1 October, the search and tag archives (they had core's bare numbers and a "Next Page" text link: review 3 to
 *      5) and the library when WP Grid Builder is off: 48 squares 12 apart (40 and 8 below 600), radius 4; the current page filled
 *      sea glass (accent-text, white label, 5.63:1), the others teal wash (surface-subtle) with the label in accent-text
 *      (5.22:1; Figma's teal/base is 2.71:1), ExtraBold. Core's Query Pagination draws plain links with no box and puts
 *      Previous and Next arrows in as text glyphs, so the boxes are drawn here and each glyph is swapped for the theme's
 *      16 arrow as a mask in the label colour (the link keeps core's "Previous Page" and "Next Page" names). Core leaves
 *      Previous out on page 1 and Next out on the last page, where Figma dims them: accepted (50 3.5). */
.devora-pagination.wp-block-query-pagination,
.devora-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--custom--pagination--gap);
	margin-block-end: 0;
}
.devora-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--pagination--size);
	height: var(--wp--custom--pagination--size);
	margin: 0;
	padding-inline: var(--wp--preset--spacing--10);
	border-radius: var(--wp--preset--border-radius--small);
	background-color: var(--wp--preset--color--surface-subtle);
	color: var(--wp--preset--color--accent-text);
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}
.devora-pagination a:is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover { background-color: var(--wp--preset--color--accent-subtle); }
.devora-pagination .page-numbers.current { background-color: var(--wp--preset--color--accent-text); color: var(--wp--preset--color--white); }
.devora-pagination .page-numbers.dots { background-color: transparent; }
.devora-pagination :is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) {
	display: block;
	width: var(--wp--preset--spacing--30);
	height: var(--wp--preset--spacing--30);
	margin: 0;
	overflow: hidden;
	color: transparent;
	background-color: var(--wp--preset--color--accent-text);
	-webkit-mask: url("../icons/arrow-left.svg") center / contain no-repeat;
	mask: url("../icons/arrow-left.svg") center / contain no-repeat;
}
.devora-pagination .wp-block-query-pagination-next-arrow {
	-webkit-mask-image: url("../icons/arrow-right.svg");
	mask-image: url("../icons/arrow-right.svg");
}

/*
 * PH12 (was AB1) Split panel (patterns/split-panel.php; Figma Banner 732:7520, Form 732:7564; shared by About, Contact
 * and the News & Events banner, so a platform rule since 1 October): the heading column keeps 40 clear on its right
 * beside the other column (732:7521: 528 with 40 right padding, the text 488). Why CSS: a Group's padding is
 * one value at every width, and stacked below 1024 the heading must run the full width.
 */
@media (min-width: 1024px) {
	.devora-split-panel__heading {
		padding-right: var(--wp--preset--spacing--60);
	}
}

/*
 * PH12a (was AB2) Split panel on navy: links in the body and the heading take the dark band colours (DL2 covers links in
 * text-inverse text; this panel's text is text-inverse-muted, which DL2 does not name). Why CSS: core has no link colour
 * per text colour.
 */
.devora-split-panel.has-surface-inverse-background-color p a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--text-inverse);
	text-decoration-color: var(--wp--custom--color--link-underline-inverse);
}