fix: scope mobile media text behavior

tests/mobile-homepage.spec.js

@@ -245,10 +245,15 @@ test("mobile media text matches the 402px reference composition", async ({
 }) => {
     await page.goto(homepage);
 
-    const block = await getBox(page.locator(".media-cols"));
+    const blockLocator = page.locator(
-    const content = await getBox(page.locator(".media-cols .content-wrapper"));
+        ".wp-block-acf-media-text.media-cols.has-two-ctas",
-    const media = await getBox(page.locator(".media-cols > div:first-child"));
+    );
-    const buttons = page.locator(".media-cols .reset .button");
+    const block = await getBox(blockLocator);
+    const content = await getBox(
+        blockLocator.locator(":scope > .content-wrapper"),
+    );
+    const media = await getBox(blockLocator.locator(":scope > .media-wrapper"));
+    const buttons = blockLocator.locator(".reset .button");
     const services = await getBox(buttons.nth(0));
     const about = await getBox(buttons.nth(1));
     const contact = await getBox(page.locator(".contact-block.home-contact"));
@@ -265,6 +270,26 @@ test("mobile media text matches the 402px reference composition", async ({
     expectNear(contact.y - (media.y + media.height), 232, 5);
 });
 
+test("media text keeps content first in the DOM and marks its CTA pair", async ({
+    page,
+}) => {
+    await page.goto(homepage);
+
+    const block = page.locator(".wp-block-acf-media-text.media-cols");
+    const childOrder = await block
+        .locator(":scope > div")
+        .evaluateAll((children) =>
+            children.map((child) =>
+                child.classList.contains("content-wrapper")
+                    ? "content"
+                    : "media",
+            ),
+        );
+
+    expect(childOrder).toEqual(["content", "media"]);
+    await expect(block).toHaveClass(/\bhas-two-ctas\b/);
+});
+
 test("mobile media text remains contained at responsive endpoints", async ({
     page,
 }) => {
@@ -272,13 +297,14 @@ test("mobile media text remains contained at responsive endpoints", async ({
         await page.setViewportSize({ width, height: 900 });
         await page.goto(homepage);
 
+        const block = page.locator(
+            ".wp-block-acf-media-text.media-cols.has-two-ctas",
+        );
         const content = await getBox(
-            page.locator(".media-cols .content-wrapper"),
+            block.locator(":scope > .content-wrapper"),
         );
-        const media = await getBox(
+        const media = await getBox(block.locator(":scope > .media-wrapper"));
-            page.locator(".media-cols > div:first-child"),
+        const buttons = block.locator(".reset .button");
-        );
-        const buttons = page.locator(".media-cols .reset .button");
         const services = await getBox(buttons.nth(0));
         const about = await getBox(buttons.nth(1));
 
@@ -297,12 +323,21 @@ test("media text keeps its configured ordering at 768px", async ({ page }) => {
     await page.setViewportSize({ width: 768, height: 900 });
     await page.goto(homepage);
 
-    const content = await getBox(page.locator(".media-cols .content-wrapper"));
+    const block = page.locator(".wp-block-acf-media-text.media-cols");
-    const media = await getBox(page.locator(".media-cols > div:first-child"));
+    const contentLocator = block.locator(":scope > .content-wrapper");
+    const mediaLocator = block.locator(":scope > .media-wrapper");
+    const content = await getBox(contentLocator);
+    const media = await getBox(mediaLocator);
 
     expect(media.y).toBeLessThan(content.y);
     expectNear(media.x, 70, 3);
     expectNear(media.width, 627, 3);
+    await expect(block).toHaveCSS("padding-top", "0px");
+    await expect(contentLocator.locator(".font-light")).toHaveCSS(
+        "font-size",
+        "18px",
+    );
+    await expect(contentLocator.locator(".reset")).toHaveCSS("display", "flex");
 });
 
 test("mobile recent posts exposes previous and next controls", async ({

views/blocks/media-text/media-text.css

@@ -1,39 +1,42 @@
 @media (max-width: 767px) {
-    .media-cols {
+    .wp-block-acf-media-text.media-cols {
         gap: 3rem;
         grid-template-columns: minmax(0, 1fr);
         padding: 5rem 0 0;
         padding-inline: 0 !important;
     }
 
-    .media-cols > div:first-child {
+    .wp-block-acf-media-text.media-cols > .media-wrapper {
         order: 2;
     }
 
-    .media-cols > div:first-child img {
+    .wp-block-acf-media-text.media-cols > .media-wrapper img {
         display: block;
         height: auto;
         width: 100%;
     }
 
-    .media-cols .content-wrapper {
+    .wp-block-acf-media-text.media-cols > .content-wrapper {
         order: 1;
         padding: 0;
     }
 
-    .media-cols .content-wrapper .font-light {
+    .wp-block-acf-media-text.media-cols > .content-wrapper .font-light {
         font-size: 1rem;
         line-height: 1.5;
     }
 
-    .media-cols .content-wrapper .reset {
+    .wp-block-acf-media-text.media-cols.has-two-ctas > .content-wrapper .reset {
         display: grid;
         gap: 1.375rem;
         grid-template-columns: minmax(0, 148fr) minmax(0, 124fr);
         width: min(100%, 18.375rem);
     }
 
-    .media-cols .content-wrapper .reset .button {
+    .wp-block-acf-media-text.media-cols.has-two-ctas
+        > .content-wrapper
+        .reset
+        .button {
         width: 100%;
     }
 }

views/blocks/media-text/media-text.php

@@ -27,6 +27,10 @@ $mediaClass   = $mediaLeft ? 'order-first' : 'order-last';
 $contentClass = $mediaLeft ? 'order-last pr-8' : 'order-first pl-8';
 $classes      = 'media-cols grid grid-cols-1 lg:grid-cols-2 gap-24 items-center mb-8 p-0 container';
 
+if ( 2 === count( $ctas ) ) {
+	$classes .= ' has-two-ctas';
+}
+
 if ( $isDark ) {
 	$classes .= ' dark text-white';
 }
@@ -41,14 +45,6 @@ if ( $vidBlock && strpos( $vidBlock, '<iframe' ) !== false ) {
 ?>
 
 <div <?php echo wp_kses_post( $wrapper ); ?>>
-	<div class="<?php echo esc_attr( $mediaClass ); ?> <?php echo $vidBlock ? 'aspect-video' : ''; ?>">
-	<?php if ( $vidBlock ) : ?>
-		<?php echo wp_kses( $vidBlock, escEmbeds() ); ?>
-	<?php else : ?>
-		<img src="<?php echo esc_url( $imgBlock['url'] ); ?>" alt="<?php echo esc_attr( $imgBlock['alt'] ); ?>" class="">
-	<?php endif; ?>
-	</div>
-
 	<div class="content-wrapper text-balance <?php echo esc_attr( $contentClass ); ?>">
         <?php if ( ! empty( $heading ) ) : ?>
             <h2 class=""><?php echo esc_html( $heading ); ?></h2>
@@ -96,4 +92,12 @@ if ( $vidBlock && strpos( $vidBlock, '<iframe' ) !== false ) {
             </div>
         <?php endif; ?>
 	</div>
+
+	<div class="media-wrapper <?php echo esc_attr( $mediaClass ); ?> <?php echo $vidBlock ? 'aspect-video' : ''; ?>">
+	<?php if ( $vidBlock ) : ?>
+		<?php echo wp_kses( $vidBlock, escEmbeds() ); ?>
+	<?php else : ?>
+		<img src="<?php echo esc_url( $imgBlock['url'] ); ?>" alt="<?php echo esc_attr( $imgBlock['alt'] ); ?>" class="">
+	<?php endif; ?>
+	</div>
 </div>