/**
 * Content synced from WeTown arrives as plain HTML (bare <img>, not image
 * blocks), so a block theme does not constrain it: only .wp-block-image img
 * gets max-width in core styles. Keep every image inside the content column.
 */

.entry-content img,
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.entry-content iframe,
.wp-block-post-content iframe {
	max-width: 100%;
}

/* Logos inside the body (see includes/body-images.php): consecutive image-only
   paragraphs classified as logos become one centred row of small, cropped
   logos. The span crops the image to its real content using the box fractions
   (--l, --t, --w, --h) and the aspect ratio (--ar) set inline. */

.wetown-logo-row {
	--wetown-logo-h: 88px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px 48px;
	margin: 2em 0 1em;
}

.wetown-logo {
	/* --k (inline, from the content aspect ratio) makes wide strips lower and
	   compact logos taller, so every logo covers a similar area. */
	--lh: calc(var(--wetown-logo-h) * var(--k, 1));
	display: block;
	flex: 0 0 auto;
	height: var(--lh);
	width: calc(var(--lh) * var(--ar) * var(--w) / var(--h));
	overflow: hidden;
}

.entry-content .wetown-logo img,
.wp-block-post-content .wetown-logo img {
	display: block;
	max-width: none;
	width: auto;
	height: calc(var(--lh) / var(--h));
	margin: calc(-1 * var(--lh) / var(--h) * var(--t)) 0 0 calc(-1 * var(--lh) / var(--h) * var(--ar) * var(--l));
}

@media (max-width: 600px) {
	.wetown-logo-row {
		--wetown-logo-h: 64px;
		gap: 16px 32px;
	}
}