From 97ebffb70dbb644a83ebb5488bbd34d8b2eab546 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sat, 27 Jun 2026 18:18:15 -0500
Subject: [PATCH] fix: match mobile pull quote design

---
 tests/mobile-homepage.spec.js          | 22 ++++++++++++++++++
 views/blocks/pull-quote/pull-quote.css | 31 ++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js
index d4505ba..7650e3b 100644
--- a/tests/mobile-homepage.spec.js
+++ b/tests/mobile-homepage.spec.js
@@ -95,6 +95,28 @@ test("mobile hero vector covers the 767px composition", async ({ page }) => {
     expect(vector.x + vector.width).toBeGreaterThanOrEqual(760);
 });
 
+test("mobile pull quote matches the reference scale", async ({ page }) => {
+    await page.goto(homepage);
+
+    const quote = await getBox(page.locator(".pull-quote"));
+    const text = await getBox(page.locator(".pull-quote__text"));
+    const vectorImage = page.locator(".pull-quote__vector img");
+    const vector = await getBox(vectorImage);
+
+    expectNear(quote.height, 361, 6);
+    expectNear(text.x - quote.x, 32, 3);
+    expect(text.width).toBeGreaterThanOrEqual(330);
+    expectNear(text.height, 216, 6);
+    expectNear(
+        text.y + text.height / 2,
+        quote.y + (quote.height - 12) / 2,
+        8,
+    );
+    expect(vector.width).toBeGreaterThanOrEqual(470);
+    expect(vector.height).toBeGreaterThan(quote.height);
+    await expect(vectorImage).toHaveCSS("object-position", "3% 42%");
+});
+
 test("mobile recent posts exposes previous and next controls", async ({
     page,
 }) => {
diff --git a/views/blocks/pull-quote/pull-quote.css b/views/blocks/pull-quote/pull-quote.css
index 46168b6..92c8e8e 100644
--- a/views/blocks/pull-quote/pull-quote.css
+++ b/views/blocks/pull-quote/pull-quote.css
@@ -43,3 +43,34 @@
         }
     }
 }
+
+@media (max-width: 767px) {
+    .pull-quote {
+        background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
+        border-bottom-width: 0.75rem;
+        height: clamp(18rem, 89.8vw, 22.5625rem);
+    }
+
+    .pull-quote .pull-quote__vector img {
+        height: 118%;
+        left: -9%;
+        max-width: none;
+        object-fit: fill;
+        object-position: 3% 42%;
+        position: relative;
+        width: 118%;
+    }
+
+    .pull-quote .pull-quote__content {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        padding: 2.5rem 2rem;
+    }
+
+    .pull-quote .pull-quote__text {
+        font-size: clamp(1.25rem, 5.6vw, 1.40625rem);
+        line-height: 1.2;
+        width: 100%;
+    }
+}