/*
 * DEVORA stage 6, family 2: the region pages (docs/stage-6/20-map-and-regions.md 2b, 3B, 6b.9), for
 * templates/single-volcano_region.html and the region patterns. Loaded only on a page that renders one of its classes
 * (functions.php devora_css_families(), "region"), and in the editor; split from the map page's rules (map.css) in the
 * 30 Sep review. Tags RG1 to RG3 (the region template), AI1 to AI4 (the article index, a platform construction, 00 2.5:
 * move it to platform.css when a second family places it), FF1 to FF3 (Facts and figures), NI1 and NI2 (numbered
 * images) and IP1 (the panel image). Paths are relative to this file.
 */

/* RG1. Article layout (Rangitoto 561:7498): the index 380 and the article column 852, 52 apart, the column's left edge
 *      at 432 in the 1284 container, from 1024; below 1024 one column, the index 52 above the article (682:21759). A
 *      Group has no two-track grid with set widths, so the columns are here. Below the full 1284 the index gives way
 *      first, to 30% of the row (380 of 1284 is 29.6%), so the article keeps a reading width at 1024 (588, not 482
 *      beside a fixed 380). The index sticks 24 below the top from 1024 (the header scrolls away), so it follows the
 *      reader down a 5000 px page (7.17, Liz 30 Sep). The rules name the index and the body, not their places: the site
 *      plugin leaves the index out when a post has no sections, and the body then takes the whole row rather than
 *      dropping into the index track and sticking (30 Sep review). */
.devora-region__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--wp--custom--width--index-gap);
}
@media (width >= 1024px) {
	.devora-region__layout:has(> .devora-article-index-nav) {
		grid-template-columns: min(var(--wp--custom--width--index), 30%) minmax(0, var(--wp--custom--width--prose));
		column-gap: var(--wp--custom--width--index-gap);
		justify-content: space-between;
		align-items: start;
	}
	.devora-region__layout > .devora-article-index-nav {
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
	.devora-region__layout > .devora-region__body { grid-column: -2 / -1; }
}

/* RG2. The article column's sections take its full width: the column is a vertical flex (its gap is band-y, which a
 *      section root's margin-top 0 cannot cancel), and a flex item would otherwise shrink to its content. */
.devora-region__body > *,
.devora-region__content > * { width: 100%; }

/* RG3. Anchored headings the index jumps to that sit outside an article block (Facts and figures, Resources) get
 *      PH9's air above them. */
:is(.devora-facts, .devora-resource-list) .wp-block-heading[id] { scroll-margin-block-start: var(--wp--preset--spacing--40); }

/* AI1. Article index (Article Index 666:5011, Rangitoto 668:6906): the pale panel, 8 inside, radius 8, the "Index"
 *      label (Kicker/Small in accent-text, 5.09:1; Figma's sea glass/mid fails) and the list 4 apart, each item 32
 *      tall with 4 / 8 inside and its dot 12 before the text. core Details has no panel, label or list styling. */
.devora-article-index {
	padding: var(--wp--preset--spacing--10);
	border-radius: var(--wp--preset--border-radius--panel);
	background-color: var(--wp--preset--color--surface-subtle);
}
.devora-article-index > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--accent-text);
	font-size: var(--wp--preset--font-size--card-meta);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--kicker-small);
	letter-spacing: var(--wp--custom--letter-spacing--kicker);
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}
.devora-article-index > summary::-webkit-details-marker { display: none; }
.devora-article-index > .devora-article-index__list {
	display: grid;
	gap: calc(var(--wp--preset--spacing--10) / 2);
	margin: calc(var(--wp--preset--spacing--10) / 2) 0 0;
	padding: 0 0 var(--wp--preset--spacing--10);
	list-style: none;
}
.devora-article-index__list > li { margin: 0; }

/* AI2. Items: the dot (16, drawn at 40%) then the section's name in accent-text at Regular (668:6906, 3B.2; the link
 *      element's 600 would leave too little between it and the current item); the current item (the site plugin's
 *      script sets aria-current as the reader scrolls) is bold in accent-text-strong (8.54:1) with the larger dot
 *      (666:4787 against the subtle items). Each label reserves its bold width in a hidden copy (data-label), so the
 *      current item moving never re-wraps a line or shifts the list. Colour only changes, and only without reduced
 *      motion does it fade. */
.devora-article-index__list a {
	display: grid;
	grid-template-columns: var(--wp--custom--button--icon-size) minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--20);
	align-items: start;
	padding: calc(var(--wp--preset--spacing--10) / 2) var(--wp--preset--spacing--10);
	border-radius: var(--wp--preset--border-radius--panel);
	color: var(--wp--preset--color--accent-text);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
}
.devora-article-index__list a::before {
	content: "";
	grid-row: 1 / span 2;
	width: var(--wp--custom--button--icon-size);
	height: calc(1em * var(--wp--custom--line-height--body));
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-circle-subtle.svg") center / var(--wp--custom--button--icon-size) no-repeat;
	mask: url("../icons/arrow-circle-subtle.svg") center / var(--wp--custom--button--icon-size) no-repeat;
}
.devora-article-index__list a::after {
	content: attr(data-label) / "";
	grid-column: 2;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 700;
	pointer-events: none;
	user-select: none;
}
.devora-article-index__list a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-text-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.devora-article-index__list a[aria-current] {
	color: var(--wp--preset--color--accent-text-strong);
	font-weight: 700;
}
.devora-article-index__list a[aria-current]::before {
	-webkit-mask-image: url("../icons/arrow-circle-main.svg");
	mask-image: url("../icons/arrow-circle-main.svg");
}
@media (prefers-reduced-motion: no-preference) {
	.devora-article-index__list a { transition: var(--wp--custom--motion--fast); transition-property: color; }
}

/* AI3. Below 1024 the index is a closed disclosure (682:21760, 353 x 52): the label row carries the plus, the minus
 *      when open, in accent-text-strong. Details has no icon slot. */
.devora-article-index > summary::after {
	content: "";
	flex: none;
	width: var(--wp--custom--button--icon-size);
	height: var(--wp--custom--button--icon-size);
	background-color: var(--wp--preset--color--accent-text-strong);
	-webkit-mask: url("../icons/plus.svg") center / contain no-repeat;
	mask: url("../icons/plus.svg") center / contain no-repeat;
}
.devora-article-index[open] > summary::after {
	-webkit-mask-image: url("../icons/minus.svg");
	mask-image: url("../icons/minus.svg");
}

/* AI4. From 1024 the index is always open, as Figma draws it: the closed <details> content is drawn anyway and the
 *      label is no longer a toggle (no icon, no pointer). Where a browser cannot style ::details-content the site
 *      plugin's script opens it instead (the region map block's lists do the same). */
@media (width >= 1024px) {
	.devora-article-index > summary { cursor: default; pointer-events: none; }
	.devora-article-index > summary::after { content: none; }
	@supports selector(::details-content) {
		.devora-article-index::details-content { content-visibility: visible; }
	}
}

/* FF1. Pill (561:8543): a paragraph as a rounded tag, mist fill (border) with accent-text-strong (7.55:1; Figma's
 *      sea glass/base on mist is 4.50:1, on the line), Caption 14/20, 4 / 12 inside. Its first letter is set as a
 *      capital, so a comparison split from a sentence ("which would fill ...") reads as a tag while the stored words
 *      stay the master's. Paragraph has no pill style. */
.wp-block-paragraph.is-style-pill,
p.is-style-pill {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: calc(var(--wp--preset--spacing--10) / 2) var(--wp--preset--spacing--20);
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--accent-text-strong);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--caption);
}
p.is-style-pill::first-letter { text-transform: uppercase; }

/* FF2. Fact figure row (561:8540): the figure in the heading type at SemiBold with its unit 8 beside it on a shared
 *      baseline. Group's row layout aligns tops or centres, not baselines. */
.devora-fact__figure.is-layout-flex { align-items: baseline; }
.devora-fact__value { font-weight: 600; line-height: var(--wp--custom--line-height--card-title); }
.devora-fact .is-style-kicker-small { margin: 0; }

/* FF3. Fact cards (561:8538; mobile 682:21779): 12 between the parts at 1440, 8 on phones (a token in the gap, which
 *      blockGap cannot carry), and the highlights one per row below 600 while the three small cards stay across. */
.devora-fact.is-layout-flex { gap: var(--wp--custom--fact--gap); }
@media (width < 600px) {
	.devora-facts__highlights.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
}

/* NI1. Numbered images (564:3027): three across at every width, each image in a 260 x 210 frame on white (Figma's
 *      uniform crop, 564:3097 to 564:3099; contained, so a drawing is never cut and the bottoms line up) with radius 4,
 *      and its number in a 24 circle (accent-text with white, 5.63:1; Figma's sea glass/mid fails) 12 in from its top
 *      left, counted by CSS so a fourth image numbers itself. Below 600 the panel pads 8 with 8 between (692:42529: 108
 *      wide images in a 353 panel), not the desktop 20 and 16. Gallery has no numbering, no shared frame and sizes its
 *      images for a flex row, so the row becomes a grid here (the doubled :not() outranks core's width rule). */
.wp-block-gallery.has-nested-images.devora-numbered-images {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	--devora-stage-gap: var(--wp--preset--spacing--30);
	gap: var(--devora-stage-gap);
	padding: var(--wp--custom--region--panel-pad) var(--wp--custom--region--panel-pad) 0;
	counter-reset: devora-stage;
}
@media (width < 600px) {
	.wp-block-gallery.has-nested-images.devora-numbered-images {
		--wp--custom--region--panel-pad: var(--wp--preset--spacing--10);
		--devora-stage-gap: var(--wp--preset--spacing--10);
	}
}
.wp-block-gallery.has-nested-images.devora-numbered-images figure.wp-block-image:not(#individual-image):not(#devora) {
	position: relative;
	width: 100%;
	margin: 0;
	border-radius: var(--wp--preset--border-radius--small);
	background-color: var(--wp--preset--color--surface);
	counter-increment: devora-stage;
}
.wp-block-gallery.has-nested-images.devora-numbered-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--wp--custom--region--stage-ratio);
	object-fit: contain;
	border-radius: var(--wp--preset--border-radius--small);
}
.devora-numbered-images figure.wp-block-image::after {
	content: counter(devora-stage);
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	display: grid;
	place-items: center;
	width: var(--wp--preset--spacing--40);
	height: var(--wp--preset--spacing--40);
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-text);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--card-meta);
	font-weight: 700;
	line-height: 1;
}

/* NI2. The panel behind the images (564:3028: surface-subtle, 20 inside, radius 8), with the credit 12 under it at its
 *      left edge (564:3030), not inside it. The figcaption is inside the Gallery, so the panel is a layer: an absolutely
 *      positioned grid child takes the grid area it names as its box, so the layer covers the image rows exactly, plus
 *      the panel's padding, whatever the credit's length (a two-line credit ran into a panel sized from one line, 30 Sep
 *      review). The credit takes the row after the images: two rows once a fourth image wraps. */
.devora-numbered-images::before {
	content: "";
	position: absolute;
	z-index: -1;
	grid-column: 1 / -1;
	grid-row: 1 / 2;
	inset: calc(-1 * var(--wp--custom--region--panel-pad));
	border-radius: var(--wp--preset--border-radius--panel);
	background-color: var(--wp--preset--color--surface-subtle);
}
.wp-block-gallery.has-nested-images.devora-numbered-images > .blocks-gallery-caption {
	grid-row: 2;
	grid-column: 1 / -1;
	margin: calc(var(--wp--custom--region--panel-pad) + var(--wp--preset--spacing--20) - var(--devora-stage-gap)) 0 0 calc(-1 * var(--wp--custom--region--panel-pad));
	text-align: start;
}
.devora-numbered-images:has(> figure:nth-of-type(4))::before { grid-row: 1 / 3; }
.wp-block-gallery.has-nested-images.devora-numbered-images:has(> figure:nth-of-type(4)) > .blocks-gallery-caption { grid-row: 3; }

/* IP1. Panel image (564:3112): a diagram at its own ratio, 320 tall and centred on the pale panel with 40 above and
 *      below (400 in all), radius 8, the credit 12 under the panel at its left edge. Image has no panel style. The panel
 *      is the img itself (its padding and background, the drawing contained in it), so the credit below can wrap to any
 *      length (30 Sep review: a panel layer sized from a one-line credit ran into a two-line one). */
.wp-block-image.is-style-panel img {
	box-sizing: content-box;
	width: 100%;
	max-width: none;
	height: var(--wp--custom--region--panel-image);
	padding-block: var(--wp--preset--spacing--60);
	border-radius: var(--wp--preset--border-radius--panel);
	background-color: var(--wp--preset--color--surface-subtle);
	object-fit: contain;
}
.wp-block-image.is-style-panel .wp-element-caption { margin-block-start: var(--wp--preset--spacing--20); }