/* =========================================================================
   spudart/now-row — one row of a /now page.

   Text with an optional picture beside it. A row with no picture has no
   <figure> at all, so the text simply fills the row: nothing to switch off.

   Flex works cleanly here, unlike inside a list item, because the text is
   wrapped in its own element. Flex on a list item turns every link and <em>
   in the sentence into a separate flex item and tears the paragraph apart.
   ========================================================================= */

.sp-nowrow {
	display: flex;
	align-items: flex-start;
	gap: 1.6rem;
	margin: 0 0 2rem;
}

.sp-nowrow__text {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-nowrow__text > :first-child { margin-top: 0; }
.sp-nowrow__text > :last-child  { margin-bottom: 0; }

.sp-nowrow__media {
	flex: 0 0 var(--sp-nowrow-media, 28%);
	margin: 0;
	/* The text's first line sits a touch below the top of its line box, so an
	   image aligned flush to the top reads as slightly high next to it. */
	margin-top: 0.25em;
}

.sp-nowrow--media-left .sp-nowrow__media { order: -1; }

.sp-nowrow__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sp-radius-sm, 8px);
}

.sp-nowrow__media figcaption {
	margin: 0.45em 0 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--sp-text-light, #5a5a5a);
}

/* Narrow screens: the picture goes under the text rather than beside it, so
   the sentence keeps a readable measure. order:2 puts it there whichever
   side it occupies on a wide screen. */
@media (max-width: 600px) {
	.sp-nowrow {
		flex-direction: column;
		gap: 0;
		margin-bottom: 1.75rem;
	}

	.sp-nowrow__media,
	.sp-nowrow--media-left .sp-nowrow__media {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
		max-width: 340px;
		margin: 0.9rem 0 0;
	}
}

/* In the editor the block is drawn by the same CSS, but the inner blocks sit
   inside the block-editor's own wrapper divs. */
.editor-styles-wrapper .sp-nowrow__text { flex: 1 1 auto; min-width: 0; }