/* mf-image-and-text.css */

/* Mobile body padding */
@media (max-width: 39.999em) {
	mmx-image-and-text [slot="subheading"],
	mmx-image-and-text [slot="heading"],
	mmx-image-and-text [slot="body"],
	mmx-image-and-text [slot="button"] {
		padding-left: var(--mf-body-mobile-padding, 0);
		padding-right: var(--mf-body-mobile-padding, 0);
	}
}

/* ── Mobile: Side by Side ─────────────────────────────── */
/* Override the shadow DOM's mobile stacking by setting the grid
   template column variable — CSS custom props cross shadow boundaries */
@media (max-width: 39.999em) {
	mmx-image-and-text[data-mobile-layout="columns"] {
		--mmx-hero__grid-template-columns: auto var(--mmx-hero__content-width, 50%) !important;
	}

	/* When image is on the right (content-location="left") */
	mmx-image-and-text[data-mobile-layout="columns"][data-content-location="left"] {
		--mmx-hero__grid-template-columns: var(--mmx-hero__content-width, 50%) auto !important;
	}
}

/* ── Desktop: Stack ───────────────────────────────────── */
@media (min-width: 40em) {
	mmx-image-and-text[data-desktop-layout="stack"] {
		--mmx-hero__grid-template-columns: 1fr !important;
	}
}