fix: match mobile Our Work design

tests/mobile-homepage.spec.js

@@ -451,6 +451,91 @@ test("mobile contact card render remains stable", async ({ page }) => {
     );
 });
 
+test("mobile Our Work contains both reference images", async ({ page }) => {
+    await page.goto(homepage);
+
+    const block = await getBox(page.locator(".our-work"));
+    const left = await getBox(page.locator(".our-work__media--left"));
+    const bottom = await getBox(page.locator(".our-work__media--bottom"));
+    const vector = await getBox(page.locator(".our-work__vector img"));
+
+    expectNear(block.height, 888, 12);
+    expectNear(left.width, 189, 5);
+    expect(bottom.width).toBeGreaterThanOrEqual(335);
+    expect(bottom.x).toBeGreaterThanOrEqual(60);
+    expect(bottom.x + bottom.width).toBeLessThanOrEqual(402);
+    expectNear(vector.width, 474, 4);
+    expectNear(vector.y - block.y, 160, 3);
+});
+
+test("mobile Our Work follows the reference content and overlap order", async ({
+    page,
+}) => {
+    await page.goto(homepage);
+
+    const block = await getBox(page.locator(".our-work"));
+    const content = await getBox(page.locator(".our-work__content"));
+    const left = await getBox(page.locator(".our-work__media--left"));
+    const bottom = await getBox(page.locator(".our-work__media--bottom"));
+    const paragraph = page.locator(".our-work__content p");
+    const paragraphBox = await getBox(paragraph);
+    const buttons = page.locator(".our-work .button");
+    const primary = await getBox(buttons.nth(0));
+    const secondary = await getBox(buttons.nth(1));
+
+    expectNear(content.x - block.x, 32, 3);
+    expectNear(content.y - block.y, 68, 8);
+    expectNear(paragraphBox.y - block.y, 146, 4);
+    expect(content.y).toBeLessThan(left.y);
+    expectNear(left.y - block.y, 428, 12);
+    expectNear(bottom.y - block.y, 595, 12);
+    expectNear(primary.y, secondary.y, 2);
+    expectNear(primary.y - block.y, 321, 4);
+    expectNear(primary.height, 44, 2);
+    expectNear(secondary.height, 44, 2);
+    await expect(paragraph).toHaveCSS("text-wrap", "wrap");
+});
+
+test("mobile Our Work remains contained at responsive endpoints", async ({
+    page,
+}) => {
+    for (const width of [320, 767]) {
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto(homepage);
+
+        const block = await getBox(page.locator(".our-work"));
+        const left = await getBox(page.locator(".our-work__media--left"));
+        const bottom = await getBox(page.locator(".our-work__media--bottom"));
+        const buttons = page.locator(".our-work .button");
+        const primary = await getBox(buttons.nth(0));
+        const secondary = await getBox(buttons.nth(1));
+
+        for (const item of [left, bottom, primary, secondary]) {
+            expect(item.x).toBeGreaterThanOrEqual(block.x);
+            expect(item.x + item.width).toBeLessThanOrEqual(
+                block.x + block.width,
+            );
+        }
+
+        expectNear(primary.y, secondary.y, 2);
+        expect(left.y).toBeLessThan(bottom.y);
+    }
+});
+
+test("Our Work restores its tablet layout at 768px", async ({ page }) => {
+    await page.setViewportSize({ width: 768, height: 900 });
+    await page.goto(homepage);
+
+    const block = page.locator(".our-work");
+    const inner = block.locator(".our-work__inner");
+    const vector = block.locator(".our-work__vector img");
+
+    await expect(block).toHaveCSS("min-height", "0px");
+    await expect(block).toHaveCSS("padding-top", "64px");
+    await expect(inner).toHaveCSS("padding-left", "38.4px");
+    await expect(vector).toHaveCSS("width", "768px");
+});
+
 test("mobile recent posts exposes previous and next controls", async ({
     page,
 }) => {

views/blocks/our-work/our-work.css

@@ -1,8 +1,7 @@
 /* Our Work block styles */
 
 .our-work {
-    background:
+    background: linear-gradient(
-        linear-gradient(
         90deg,
         var(--color-cwc-blue-01) 0%,
         var(--color-cwc-blue-02) 52%,
@@ -56,7 +55,7 @@
 
 .our-work__content {
     grid-area: content;
-    margin-lefT: 4rem;
+    margin-left: 4rem;
     max-width: 46.75rem;
 }
 
@@ -190,23 +189,35 @@
     }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 767px) {
     .our-work {
         margin-bottom: 2rem;
-        padding-top: 3.25rem;
+        min-height: clamp(44rem, 220.9vw, 55.5rem);
+        padding-top: 4.25rem;
+    }
+
+    .our-work__vector img {
+        height: 118%;
+        max-width: none;
+        object-fit: cover;
+        object-position: 85% center;
+        transform: translateY(clamp(8rem, 39.8vw, 10rem));
+        width: 118%;
     }
 
     .our-work__inner {
-        gap: 1.4rem;
+        gap: 0;
+        padding-inline: 2rem !important;
     }
 
     .our-work__content {
-        max-width: 20rem;
+        margin-inline: 0;
+        max-width: 21rem;
         text-align: left;
     }
 
     .our-work__content .acf-innerblocks-container {
-        gap: 1rem;
+        gap: 2.125rem;
     }
 
     .our-work__content h1,
@@ -215,43 +226,59 @@
     .our-work__content h4,
     .our-work__content h5,
     .our-work__content h6 {
-        font-size: clamp(2rem, 9vw, 2.45rem);
+        font-size: clamp(2.5rem, 11vw, 2.75rem);
     }
 
     .our-work__content p {
-        font-size: var(--text-14px);
+        font-size: var(--text-16px);
-        line-height: 1.35;
+        line-height: 1.45;
+        text-wrap: wrap;
     }
 
     .our-work__content .wp-block-acf-buttons > div {
-        gap: 0.75rem;
+        flex-wrap: nowrap;
+        gap: 2rem;
         justify-content: flex-start;
     }
 
+    .our-work__content x-button {
+        flex: 1 1 0;
+        min-width: 0;
+    }
+
     .our-work__content .button {
-        font-size: var(--text-14px);
+        font-size: var(--text-18px);
-        min-height: 2.25rem;
+        min-height: 2.75rem;
-        min-width: 6.35rem;
+        min-width: 0;
-        padding: 0.5rem 0.8rem;
+        padding: 0.65rem 1rem;
+        white-space: nowrap;
+        width: 100%;
     }
 
     .our-work__media--left {
         justify-self: start;
-        margin: 0 0 -3.25rem;
+        margin: 4rem 0 0;
-        max-width: 9.5rem;
+        max-width: 11.8125rem;
         position: relative;
+        width: 55.9%;
         z-index: 2;
     }
 
     .our-work__media--bottom {
         justify-self: end;
-        margin-bottom: -2.35rem;
+        margin: -3.5rem 0 0;
-        max-width: 20.5rem;
+        max-width: none;
-        width: calc(100% - 2.25rem);
+        position: relative;
+        transform: translateX(2rem);
+        width: 100%;
+        z-index: 1;
     }
 
     .our-work:not(.has-left-image) .our-work__media--bottom {
-        justify-self: center;
         width: 100%;
     }
+
+    .our-work__image {
+        object-fit: contain;
+    }
 }