/*
 * rooster/figure (now a variant of the library: BRIEF-2026-11-01-BLOCK-LIBRARY.md) (BRIEF-2026-11-01-LANDINGS-BY-TEMPLATE.md, order 2): the legacy Rooster One landing's framed figure
 * (themes/om-portal-theme/templates/landing-rooster-one.php, `.r1-fig`), complete on its own: the frame (14 px corners,
 * a hairline, 10 px inside, the card surface), the picture at its width with 8 px corners, the caption 12.5 px under
 * it. Colours are the template's own palette as custom tokens (`--wp--custom--rooster-one--*`) with the legacy's light
 * and dark values as fallbacks. Compiled by build/blocks-css.mjs.
 */

@import "../../theme.css";

/*
 * The Rooster One template's palette, defined here for this recipe (the legacy's light and dark pairs): nothing
 * reads an undefined custom property. `:where()`: a block's tone (its own sheet) re-maps the brand over it.
 */
:where(.rooster-figure) {
	--wp--custom--rooster-one--line: light-dark(#d5dbe3, rgb(255 255 255 / 12%));
	--wp--custom--rooster-one--surface: light-dark(#ffffff, rgb(255 255 255 / 4%));
	--wp--custom--rooster-one--mute: light-dark(#5b6168, #d3d6d9);
}

.rooster-figure {
	box-sizing: border-box;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--wp--custom--rooster-one--line);
	border-radius: 14px;
	background: var(--wp--custom--rooster-one--surface);
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: normal;
	word-break: normal;
}

.rooster-figure .rooster-figure__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	border-radius: 8px;
}

.rooster-figure .rooster-figure__caption {
	margin: 0;
	padding: 12px 10px 4px;
	font-size: 12.5px;
	line-height: 1.55;
	text-align: left;
	color: var(--wp--custom--rooster-one--mute);
}