/*
 * DEVORA stage 6 family 4, News and events (docs/stage-6/50-news-events.md): the listing page 130, the news single
 * (templates/single.html) and the event single (templates/single-event.html). Loaded only on a page that renders one of
 * the blocks functions.php devora_css_families() lists for "news", and in the editor. Tags NE2 to NE11 (NE1, the chips,
 * is the site plugin's devora/news-filter style.css; NE6 is PH7, NE8 is PH10 and NE9 is PH8 in platform.css). Each rule
 * names the block limitation it works around (CLAUDE.md hard rule 5); values are theme.json tokens.
 */

/* NE2. Stories grid (1214:11001): three across from 1024, two from 600, one below, 12 apart both ways. Post Template's
 *      grid takes one column count at every width (7.1.2 has no per-width count), so the counts below 1024 are here.
 *      Each card fills its cell, so a row's cards share the tallest card's height with Read more at the foot (HM12's
 *      card rules); nothing is clamped (Gareth, 30 Sep: cards grow to the tallest summary). */
.devora-stories__grid.wp-block-post-template > li { display: flex; margin: 0; }
@media (width < 1024px) {
	.devora-stories__grid.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width < 600px) {
	.devora-stories__grid.wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
}
.devora-card__excerpt > .wp-block-post-excerpt__excerpt { margin: 0; }

/* Core's featured-image ratio is saved on each block. Preserve the branded fallback's full 3:2 composition
 * in the single hero; listing cards use their consistent 16:9 crop below. */
.devora-hero__image:has(.devora-event-placeholder) { aspect-ratio: 3 / 2; }
.devora-hero__image img.devora-event-placeholder { aspect-ratio: 3 / 2 !important; object-fit: contain; }

/* NE2b. Saved Featured Image blocks and the plugin fallback can carry their own inline ratio. Enforce the
 * same 16:9 frame for every news/event listing card, regardless of the uploaded file's dimensions. */
:is(.devora-news-card, .devora-event-card) > .wp-block-post-featured-image {
	width: 100%;
	aspect-ratio: 16 / 9 !important;
}
:is(.devora-news-card, .devora-event-card) > .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover;
}

/* NE3. Page numbers: moved to platform.css PH11 on 1 October (the search and tag archives use the same paginator). */

/* NE4. The upcoming event card (News Card - Long 1214:11154): the image 372 wide beside the text from 782 (a grid card's
 *      image width: a third of the 1284 row less its gaps and the card's padding), stacked full width below. Group's
 *      flex row has no per-width direction. The name is an H3 link with no underline at rest, underlined on hover and
 *      focus, as the card titles. */
.devora-event-card > .devora-event-card__image {
	flex: 0 0 calc((var(--wp--custom--width--wide) - 2 * var(--wp--preset--spacing--card-row)) / 3 - 2 * var(--wp--custom--card--news--pad));
	margin: 0;
}
.devora-event-card > .devora-event-card__main { flex: 1 1 0; min-width: 0; }
.devora-event-card .wp-block-post-title a { text-decoration: none; }
.devora-event-card .wp-block-post-title a:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (width < 782px) {
	.devora-event-card { flex-direction: column; align-items: stretch; }
	.devora-event-card > .devora-event-card__image { flex-basis: auto; }
}

/* NE5. Event meta (1214:11169, 1271:30572): the main value Body/Bold in accent-text, then its "(New Zealand)" or
 *      "(details)" in Body/Regular text-muted (Figma's sea glass mid is 2.48:1 on beige mist). The site plugin builds the
 *      value with that span; a paragraph has no second colour. The details card's rows: the 24 icon (decor-8, decorative)
 *      12 before the value, top aligned; core Icon has no size preset. A Register row the site plugin emptied (no link,
 *      or the event has ended) takes no room. */
.devora-meta__main { margin: 0; }
.devora-meta__extra { color: var(--wp--preset--color--text-muted); font-weight: 400; }
.devora-event-details__row .wp-block-icon { flex: none; line-height: 0; }
.devora-event-details__row .wp-block-icon svg { width: var(--wp--custom--card--event--icon); height: var(--wp--custom--card--event--icon); }
.devora-event-details__row > p { min-height: var(--wp--custom--card--event--icon); }
:is(.devora-event-card, .devora-event-details) .wp-block-buttons:not(:has(a)) { display: none; }

/* NE7. The single's article (News Detail 1248:20182 and 1248:20188; Event Detail 1271:30124): paragraphs 16 apart (the
 *      Post Content gap), images, embeds, videos and column rows 36 above and below, headings 36 above and 24 below,
 *      an H2 at Heading/H4 28/36 in text-body. Core's flow layout has one gap for every child. Images in a story take
 *      the Media frame (PH6's 1px overlay border and radius 8) and fill the 852 column; a caption is Caption 14/20 in
 *      text-muted, 12 under the image. Stories come from the old site's HTML, so none carries our block styles. */
.devora-single__body > :is(figure, .wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-columns, .wp-block-gallery, .wp-block-table):not(:first-child),
.devora-single__body > :is(figure, .wp-block-image, .wp-block-embed, .wp-block-video, .wp-block-columns, .wp-block-gallery, .wp-block-table) + *,
.devora-single__body > :is(h2, h3, h4):not(:first-child) { margin-block-start: var(--wp--preset--spacing--media-gap); }
.devora-single__body > :is(h2, h3, h4) + * { margin-block-start: var(--wp--preset--spacing--40); }
.devora-single__body > h2 {
	color: var(--wp--preset--color--text-body);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: var(--wp--custom--line-height--card-title);
}
.devora-single__body .wp-block-image img {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--custom--color--overlay);
	border-radius: var(--wp--preset--border-radius--panel);
}
.devora-single__body :is(.wp-block-image, .wp-block-embed, .wp-block-video) .wp-element-caption {
	margin-block: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--caption);
}
.devora-single__body .wp-block-embed iframe { display: block; width: 100%; border-radius: var(--wp--preset--border-radius--panel); }
.devora-lead .wp-block-post-excerpt__excerpt { margin: 0; }

/* NE10. The single hero's image column (Small Media 684:31582 on 1248:20569): the title 660 and the image 528, 96 apart,
 *       top aligned, the image in the Media frame. The hero construction's aside row wraps and spaces its columns
 *       apart (for the library's facets); a story wants a fixed image column and the title filling the rest. Below
 *       782 the image drops under the title, 24 apart. With no image (Post Featured Image prints nothing) the column
 *       goes and the title takes the width. */
:is(.devora-hero--news, .devora-hero--event) .devora-hero__split { flex-wrap: nowrap; justify-content: flex-start; gap: var(--wp--custom--hero--single--gap); }
:is(.devora-hero--news, .devora-hero--event) .devora-hero__split > :first-child { flex: 1 1 0; min-width: 0; }
:is(.devora-hero--news, .devora-hero--event) .devora-hero__aside { flex: 0 0 var(--wp--custom--width--narrow); max-width: 100%; }
:is(.devora-hero--news, .devora-hero--event) .devora-hero__aside:not(:has(img)) { display: none; }
.devora-hero__image { margin: 0; }
.devora-hero__image img {
	box-sizing: border-box;
	border: 1px solid var(--wp--custom--color--overlay);
	border-radius: var(--wp--preset--border-radius--panel);
}
@media (width < 782px) {
	:is(.devora-hero--news, .devora-hero--event) .devora-hero__split { flex-direction: column; align-items: stretch; }
	:is(.devora-hero--news, .devora-hero--event) .devora-hero__aside { flex-basis: auto; }
}

/* NE6. The torn divider in the singles' 852 column (1248:20185, 1249:20732): PH7 lets the line fill its container
 *      (max-width none, for a divider inside an article block), but here it sits straight in the band, whose
 *      constrained layout sets the 852 column as each child's max width; PH7's none would take it to the 1284. */
.devora-single__band > .wp-block-separator.is-style-torn { max-width: var(--wp--custom--width--prose); }

/* NE4b. The upcoming card's name is Heading/H3 in blue/deep (1214:11159): the site's link colour would paint it teal,
 *       and Post Title's link colour setting cannot be scoped to one card. The meta row wraps on phones with 8 between
 *       its lines, not the 32 between its items (Group's flex gap is one value for both axes). */
.devora-event-card .wp-block-post-title a { color: inherit; }
.devora-event-card .devora-event-card__meta { row-gap: var(--wp--preset--spacing--10); }