/**
 * Component: a photo with the page content flowing around it (About Us
 * intro, Attorney Profile header). Mobile: the photo full width above the
 * text. Tablet (48em): floated at the start, beside the first paragraphs.
 * Callers set the frame on their class: --firm-media-flow-ratio,
 * --firm-media-flow-width (a share of the column, from tablet) and
 * --firm-media-flow-background (behind a missing or loading photo).
 */

.media-flow::after {
	content: "";
	display: table;
	clear: both;
}

.media-flow__media {
	position: relative;
	aspect-ratio: var(--firm-media-flow-ratio, 1);
	margin-block-end: var(--wp--preset--spacing--50);
	overflow: hidden;
	background: var(--firm-media-flow-background, var(--wp--preset--color--surface));
}

.media-flow__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 0; /* Figma crops portraits from the top. */
}

/* tablet: the photo beside the first paragraphs. */
@media (min-width: 48em) {
	.media-flow__media {
		float: inline-start;
		inline-size: var(--firm-media-flow-width);
		margin-inline-end: var(--wp--preset--spacing--50);
	}
}

/* A content placeholder (editors only) sits beside the photo, not under it. */
.media-flow > .firm-pending {
	display: flow-root;
}