/*
 * DEVORA stage 6, family 1: Our volcanic story (docs/stage-6/10-volcanic-story.md 6.4). Loaded only on a page that
 * renders Keep reading, a mini card or a map legend (functions.php devora_css_families()), and in the editor. Tags
 * VS5 (and VS5b) to VS7; VS1, VS4 and VS8 are platform rules (assets/css/platform.css PH1, PH3, PH8), VS2 and VS3 are PH4 and
 * PH5, VS9 is PH6 and the media-gap spacing preset. Paths are relative to this file.
 */

/* VS4b. Saved Keep reading blocks can have an inline zero margin overriding the article band's native block gap.
 * Block supports cannot correct saved instances through a theme rule. Restore the existing section rhythm wherever
 * Keep reading follows another block in an article band; important overrides only that margin. A first block needs no gap. */
.devora-band--article > * + .devora-keep-reading {
	margin-top: var(--wp--preset--spacing--band-y) !important;
}

/* VS5. Mini cards (Keep reading 724:49614; index 945:24542): a wrapping row 12 apart where each card grows from 204, so
 *      five come out at 247.2 across 1284 as drawn, six at 204 and three at 420 (Post Template's grid has one column
 *      count). Each card is 300 tall (240 in the index) with its texts at the top and the hand-drawn arrow (816:22137,
 *      36, decorative) at the foot: a Group has no minimum height token or decoration slot. 24 inside; the card is a
 *      template partial with nothing for the client to set, so the padding is here. */
.devora-mini-cards { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--card-row); }
.devora-mini-cards > li { display: flex; flex: 1 1 var(--wp--custom--card--mini--basis); margin: 0; }

/* VS5b. Keep reading below the full row (review, 30 Sep). Growing from 204 alone left an orphan: six cards went 5 + 1
 *       at 1280, the sixth a 1142 wide panel, and 4 + 2 at 1024; two cards on Present were 636 each. A card never
 *       grows past a third of the row, and when the row is narrower than the wide width (1284, where six fit at 204)
 *       each card starts from that third, so six go 3 + 3 at 1024 to 1439 and at 768, three stay 420 and two are 420
 *       each, as the Future hub draws. The switch is the calc(): (1284 - 100%) is 0 or less once the row is full width
 *       (the 204 basis wins in max()), and large otherwise (the third wins in min()); the third is a hair short of
 *       exact so rounding never pushes the third card onto a new line. */
.devora-keep-reading .devora-mini-cards > li {
	--devora-third: calc((100% - 2 * var(--wp--preset--spacing--card-row)) / 3);
	flex-basis: max(var(--wp--custom--card--mini--basis), min(calc(var(--devora-third) - 0.1px), calc((var(--wp--style--global--wide-size) - 100%) * 999)));
	max-width: var(--devora-third);
}
.devora-mini-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--card--mini--min-height);
	padding: var(--wp--preset--spacing--40);
}
.devora-mini-card > * { margin-block: 0; }
.devora-mini-card--index { min-height: var(--wp--custom--card--mini--index-min-height); }
/* Use a distinct URL for the corrected right arrow so cached diagonal artwork cannot return. */
.devora-mini-card::after {
	content: "";
	flex: none;
	width: var(--wp--custom--card--mini--arrow);
	height: var(--wp--custom--card--mini--arrow);
	background: url("../images/illustrations/arrow-circle-right.svg") center / contain no-repeat;
}
/* VS5c. The decorative background has no native hover or focus state; move its pseudo-element slightly when
 * the stretched card link is used. The existing title underline and focus ring remain the main cues. */
@media (prefers-reduced-motion: no-preference) {
	.devora-mini-card::after { transition: var(--wp--custom--motion--fast); transition-property: transform; }
	.devora-mini-card:is(:hover, :focus-within)::after { transform: translateX(6%) scale(1.06); }
	.devora-mini-card:active::after { transform: translateX(2%) scale(0.98); }
}
.devora-mini-card .wp-block-post-excerpt__excerpt { margin: 0; }
.devora-mini-card:hover .wp-block-post-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* VS6. Below 768 the cards are rows 8 apart (820:30807): padding 16 / 20, texts and the arrow 16 apart, the arrow 48 on
 *      the right, centred; no per-width layout switch on Post Template or Group. */
@media (width < 768px) {
	.devora-mini-cards { flex-direction: column; gap: var(--wp--preset--spacing--10); }
	.devora-mini-cards > li,
	.devora-keep-reading .devora-mini-cards > li { flex-basis: auto; max-width: none; }
	.devora-mini-card {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		min-height: 0;
		padding: var(--wp--custom--tile--row-pad-y) var(--wp--custom--tile--row-pad-x);
	}
	.devora-mini-card::after { width: var(--wp--custom--card--mini--arrow-row); height: var(--wp--custom--card--mini--arrow-row); }
}

/* VS7. Map legend (926:7057; is-style-legend on core List): no bullets, a 16 triangle per row in the key colour of its
 *      item class (is-legend-1 to -5, custom.legend.*), 12 before the label, rows 4 apart; the white one with a thin
 *      black edge. List items have no marker colour or shape control. The triangle names its colour to a screen
 *      reader (alternative text on the generated content), so the key works without colour vision (1.4.1); a browser
 *      without that syntax keeps the first declaration and the label alone. */
.wp-block-list.is-style-legend { list-style: none; padding-inline-start: 0; }
.wp-block-list.is-style-legend > li { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.wp-block-list.is-style-legend > li + li { margin-top: var(--wp--custom--legend--gap); }
.wp-block-list.is-style-legend > li::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-inline: calc(var(--wp--custom--legend--marker) / 2) solid transparent;
	border-block-end: var(--wp--custom--legend--marker) solid var(--devora-legend, currentColor);
}
.wp-block-list.is-style-legend > .is-legend-1 { --devora-legend: var(--wp--custom--legend--1); }
.wp-block-list.is-style-legend > .is-legend-2 { --devora-legend: var(--wp--custom--legend--2); }
.wp-block-list.is-style-legend > .is-legend-3 { --devora-legend: var(--wp--custom--legend--3); }
.wp-block-list.is-style-legend > .is-legend-4 { --devora-legend: var(--wp--custom--legend--4); }
.wp-block-list.is-style-legend > .is-legend-5 { --devora-legend: var(--wp--custom--legend--5); }
.wp-block-list.is-style-legend > .is-legend-5::before { filter: drop-shadow(0 0 0.5px var(--wp--preset--color--black)); }
.wp-block-list.is-style-legend > .is-legend-1::before { content: ""; content: "" / "Red: "; }
.wp-block-list.is-style-legend > .is-legend-2::before { content: ""; content: "" / "Yellow: "; }
.wp-block-list.is-style-legend > .is-legend-3::before { content: ""; content: "" / "Green: "; }
.wp-block-list.is-style-legend > .is-legend-4::before { content: ""; content: "" / "Blue: "; }
.wp-block-list.is-style-legend > .is-legend-5::before { content: ""; content: "" / "White: "; }

/* === Story: hubs === */
/* The three hub pages, 115, 123 and 126 (10-volcanic-story 3A; Present and Future from the same patterns). Tags VS10
 * on; the Section Hero, the bands and Keep reading are platform rules or VS5 and VS6 above. */

/* VS10. Figure card (724:50308, mobile 820:30774; patterns/figure-card.php): the picture 60 below the statement and
 *       lead at 1440 and 20 on phones (custom.card.figure.gap); core drops a blockGap value that holds a custom
 *       property, so the gap is set here. The texts run the card's full 1068 as drawn (724:50319 is 1068 wide and two
 *       lines tall; the spec's 744 measure reads the frame's right padding, which no text node uses). The picture sits
 *       flush in the card: the 8 above and below that Big media draw in an article column (PH6) is not in this frame
 *       (724:50309 is 390 + 12 + 20). */
.devora-figure-card > .devora-figure-card__texts + * { margin-block-start: var(--wp--custom--card--figure--gap); }
.devora-figure-card > .wp-block-image.is-style-media { padding-block: 0; }

/* VS11. The link in the figure card's statement (724:50319, "distributed volcanic field"): the site link style, as in
 *       the body (DL1's rule included), at the statement's own weight. core/heading's theme.json style gives heading
 *       links the heading colour and no underline (for linked titles), as HM7b found for Home's panel H2. */
.devora-figure-card h2 a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-text);
	font-weight: inherit;
	text-decoration: underline 1px var(--wp--preset--color--border-strong);
	text-underline-offset: 0.2em;
}
.devora-figure-card h2 a:where(:not(.wp-element-button)):is(:hover, :focus) { color: var(--wp--preset--color--accent-text-strong); text-decoration-color: currentColor; }

/* === Story: children === */
/* The child pages, 116 to 122, 124, 125 and 127 to 129 (10-volcanic-story 3B, 3C, 4). Tags VS20 on, clear of the hubs'
 * VS10 series; the heroes, bands, article blocks, media rows and resource lists are platform rules (PH). */

/* VS20. In-page index cards (945:24542; patterns/mini-cards.php): the same card as Keep reading (VS5) laid out by a Group
 *       row rather than a Post Template list, so each card takes VS5's 204 basis itself (three come out at 276 across
 *       852, as drawn) and drops it below 768, where the row turns into a column and a basis would be a height (VS6).
 *       The title is a paragraph link, so it takes Keep reading's hover underline too. */
.devora-mini-cards > .devora-mini-card { flex: 1 1 var(--wp--custom--card--mini--basis); }
.devora-mini-card:hover .devora-card__link a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (width < 768px) {
	.devora-mini-cards > .devora-mini-card { flex-basis: auto; }
}