/*
 * core/post-featured-image's border support is marked
 * __experimentalSkipSerialization in its own block.json, so a
 * style.border.radius attribute on it does not serialize into the saved
 * markup — this genuinely needs real CSS, same as core/search's
 * border-radius in archive-listing-header.css.
 *
 * story-card.php (boxed): top corners only, matching the card's own
 * radius since the image sits flush at the top of the card.
 */
.story-card .wp-block-post-featured-image img {
	border-radius: var(--wp--preset--border-radius--100) var(--wp--preset--border-radius--100) 0 0;
}

/*
 * WordPress core's own wp-includes/css/dist/block-library/theme.css sets
 * :where(.wp-block-group.has-background) { padding: 1.25em 2.375em; } —
 * a low-specificity default meant for background groups used as generic
 * content sections. story-card.php sets backgroundColor to get the card's
 * white fill, not that spacing, so it's zeroed out here; story-card__media
 * and story-card__content already carry their own deliberate padding.
 * story-card-editorial.php never sets a backgroundColor, so it never gets
 * the has-background class and doesn't need this override.
 */
.story-card.has-background {
	padding: 0;
}

/*
 * story-card-editorial.php: all four corners, since this card has no
 * background of its own — the image is a rounded "island" inset by
 * story-card__media's own padding, not a photo flush against the card's
 * edges.
 */
.story-card-editorial .wp-block-post-featured-image img {
	border-radius: var(--wp--preset--border-radius--300);
}

/*
 * The badge overlay is conditional (spotlight-badge.php renders nothing
 * for a post with no special_project term), present in every story-card
 * variant since 2026-09-01 — Zared confirmed the badge is a property of
 * the post, not of which row/grid it renders in (story-card-featured.php,
 * the old badge-always-shown variant, was retired). Floats over the
 * image's top-left corner. core/group has no "position" style attribute,
 * so this needs real CSS — .story-card__media is the positioned ancestor
 * every variant shares.
 *
 * The featured image is absolutely positioned to bleed to story-card__media's
 * true edge, ignoring any padding on that wrapper — confirmed against
 * Figma's own Card/Blog component (node 234:6732;50:6815): the image
 * there is "absolute inset-0", while the badge is a plain in-flow child
 * that respects the frame's padding. Badge and image sharing the same
 * padding-based inset made them land flush against each other instead of
 * the badge floating 10px in from the image's own edge — story-card.php's
 * media wrapper (no padding to begin with) never had this bug, only
 * story-card-editorial.php/project-entry.php did. aspect-ratio moves from
 * the image (now stretched via inset:0) to the wrapper itself, so it
 * doesn't collapse once the image is taken out of flow.
 *
 * overflow:hidden also contains a broken/missing image to this box: a
 * failed image falls back to its raw width/height HTML attributes
 * (often large, oversized crops), and with overflow:visible up the
 * ancestor chain that box bleeds straight through the rest of the
 * page — not just a local-dev demo-content risk, any deleted/failed
 * media file on staging or live would do the same without this.
 */
.story-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.story-card__media .story-card__featured-image {
	position: absolute;
	inset: 0;
}

.story-card__badge-overlay {
	position: absolute;
	top: var(--wp--preset--spacing--10);
	left: var(--wp--preset--spacing--10);
	z-index: 1;
}

/*
 * CSS Grid's default align-items:stretch makes every card in a
 * post-template row match the row's tallest card (e.g. one with a much
 * longer excerpt) — with no block attribute to opt a grid item out of
 * that (same gap as columnStart/rowSpan, confirmed in tasks.md task
 * 2.9). The stretch cascades into story-card__media's aspect-ratio
 * figure, blowing its image out to the row's full height instead of
 * its own 3/2 ratio. Each card sizes to its own content instead.
 */
.story-card,
.story-card-editorial {
	align-self: start;
}

/*
 * Card and hero-lead excerpts inherit the sitewide black; body copy is
 * neutral-900. Set once here instead of per template (BugHerd #46).
 */
.story-card__content .wp-block-post-excerpt,
.hero-lead-story__row .wp-block-post-excerpt {
	color: var(--wp--preset--color--neutral-900);
}