/**
 * PPB Core — Text & image.
 * Block: ppb-text-image
 * Modifiers: --image-left | --image-right
 */

.ppb-text-image {
	width: 100%;
	box-sizing: border-box;
	padding-block: var(--ppb-space-main-gap);
}

.ppb-text-image__inner {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
	box-sizing: border-box;

	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 768px) {
	.ppb-text-image__inner {
		grid-template-columns: 1fr 1fr;
	}

	.ppb-text-image--image-right .ppb-text-image__media {
		order: 2;
	}

	.ppb-text-image--image-right .ppb-text-image__copy {
		order: 1;
	}
}

.ppb-text-image__media {
	/* On mobile, media is always first in source order — keep it visually first too. */
	width: 100%;
}

.ppb-text-image__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ppb-radius-card);
	object-fit: cover;
}

.ppb-text-image__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Copy column uses `.ppb-u-prose` — typography and lists: utilities.css */

/* Match `.ppb-u-prose` on `.ppb-text-image__body` so the CTA lines up with the copy column. */
.ppb-text-image__cta {
	display: flex;
	width: 100%;
	max-width: var(--ppb-measure-prose, 65ch);
	margin-inline: auto;
	justify-content: center;
	box-sizing: border-box;
}

.ppb-text-image__cta--align-left {
	justify-content: flex-start;
}