/* ───────────────────────────────────────────────────────────────
   bpc-content-part — responsividade de imagens

   No editor, o autor insere imagens soltas (<img> com float align*)
   dentro de um mesmo <p>. No desktop o float as alinha lado a lado;
   no mobile, sem tratamento, elas quebram. Aqui transformamos o
   parágrafo de imagens numa grade flexível de 2 colunas no mobile.
   ─────────────────────────────────────────────────────────────── */

/* Imagens responsivas por padrão */
.bpc-content-part img {
	max-width: 100%;
	height: auto;
}

/* Galerias nativas do WP (caso sejam usadas em algum post) */
.bpc-content-part .gallery,
.bpc-content-part .wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}

.bpc-content-part .gallery-item,
.bpc-content-part .wp-block-gallery .wp-block-image,
.bpc-content-part .wp-block-gallery figure {
	flex: 1 1 30%;
	min-width: 0;
	margin: 0;
}

/* ── MOBILE: imagens lado a lado em 2 colunas ───────────────── */
@media (max-width: 767px) {

	/* Parágrafos que contêm imagens viram grade flexível */
	.bpc-content-part p:has(img) {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: center;
		margin-bottom: 16px;
	}

	/* Imagens alinhadas (float) → 2 por linha, com altura uniforme */
	.bpc-content-part p img.alignleft,
	.bpc-content-part p img.alignright,
	.bpc-content-part p img.alignnone {
		float: none;
		margin: 0;
		flex: 1 1 calc(50% - 6px);
		max-width: calc(50% - 6px);
		width: auto;
		height: 190px;
		object-fit: cover;
		border-radius: 6px;
	}

	/* Imagem isolada centralizada (aligncenter) ocupa a linha toda */
	.bpc-content-part p img.aligncenter {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	/* Galerias nativas: 2 colunas no mobile */
	.bpc-content-part .gallery-item,
	.bpc-content-part .wp-block-gallery .wp-block-image,
	.bpc-content-part .wp-block-gallery figure {
		flex: 1 1 calc(50% - 8px);
	}

	/* Fallback p/ navegadores sem :has() — mantém 2 colunas via float */
	@supports not (selector(:has(*))) {
		.bpc-content-part p img.alignleft,
		.bpc-content-part p img.alignright,
		.bpc-content-part p img.alignnone {
			float: left;
			width: calc(50% - 6px);
			max-width: calc(50% - 6px);
			margin: 0 6px 6px 0;
		}
	}
}