/**
 * Worker-produced posts on the front end (s14). Enqueued only on their
 * singular view by Post_View, which is the scope: no rule here depends on
 * a theme hook. Until v0.57.0 every rule hung off a `jb-post` body class,
 * and Pro Billiards' theme prints a bare <body> (no body_class()), so the
 * whole file loaded and matched nothing. Each rule now keys on markup only
 * worker content carries (the quick-answer class, core image blocks). The
 * one generated value is --jb-brand, the client's primary brand color, set
 * on :root by Post_View::enqueue_styles().
 */

/* Quick-answer block. The worker emits a bare className (s10: model-emitted
   inline styles crashed the block). !important on the padding only: a theme
   rule still won in the field (v0.29.7 verification), and the point of the
   block is text NOT sitting on the border. The color-mix() tint degrades to
   no background on old browsers; the border survives. */
p.quick-answer-block {
	border: 2px solid var( --jb-brand );
	border-radius: 8px;
	background: color-mix( in srgb, var( --jb-brand ) 8%, transparent );
	padding: 1.75rem 2rem !important;
}

/* Floats never overlap and never cross into the next section: a photo or a
   heading that follows a floated photo starts below it. Without this, a left
   and a right photo faced each other and squeezed the text and headings
   between them. The writer cannot see rendered heights; layout can. Keyed
   on image blocks, never bare .alignleft/.alignright, which themes use in
   their own chrome (Pro Billiards' style.css defines both). */
.wp-block-image:is( .alignleft, .alignright ) ~ :is( .wp-block-image.alignleft, .wp-block-image.alignright, h2, h3, h4 ) {
	clear: both;
}

/* Phones. A 360px photo leaves no room for text beside it, and core's image
   CSS has no small-screen rule (verified, WP 7.1.3), so floated photos stack,
   centered, with the text below. */
@media ( max-width: 600px ) {
	figure.wp-block-image:is( .alignleft, .alignright ) {
		float: none;
		margin-inline: auto;
	}
}

/* Captions read as part of their photo, not as body text: smaller, muted
   (the theme's own text color, softened), tight under the image. Old
   browsers without color-mix() keep the theme's caption color. */
figure.wp-block-image figcaption {
	margin-top: 0.5em;
	font-size: 0.875em;
	line-height: 1.45;
	color: color-mix( in srgb, currentColor 72%, transparent );
}