# Mobile Vector Replacement

## Goal

Swap the existing mobile vector sources in the homepage hero, pull quote, contact block, and our-work block for the artist-supplied `static/img/mobile-*-vector.svg` files. Each new SVG is drawn at the 402px mobile baseline so it doesn't need a desktop-vector clip-path trick to look right.

## Approach

- Treat each block separately. Same desktop element, an additional mobile element, CSS show/hide.
- Preserve all desktop and tablet-above-767 behavior.
- Lazy-load the new `<img>` elements the same way the desktop sources are loaded.

## Per Block

### Hero

- New partial `views/partials/hero-vector-mobile.php` renders an `<img class="hero-vector--mobile">` referencing `static/img/mobile-hero-vector.svg`.
- `homepage-hero.php` loads both partials inside the existing `.heroVector .vector` container.
- `homepage-hero.css` hides the desktop SVG and shows the mobile `<img>` below 768px. The existing vector positioning rules still apply to the wrapper.

### Pull Quote

- `pull-quote.php` swaps the existing PNG source for `static/img/mobile-pullquote-vector.svg` at the existing `.pull-quote__vector--mobile` slot.
- CSS unchanged. The element already had `display: none` at desktop and `object-fit: cover` at mobile.

### Contact Block

- `contact-block.php` adds an `<img class="contact-block__linework contact-block__linework--mobile">` next to the existing SVG partial.
- `contact-block.css` hides the desktop SVG and shows the mobile `<img>` at mobile. The mobile `<img>` fills the card width (the new SVG is 342×187, ratio matches the card).
- The reusable contact linework ratio assertion updates from `628/282` to `342/187`.
- The linework geometry assertion updates to expect `y ≈ 299`, `height ≈ 188`, `width = card.width`.

### Our Work

- `our-work.php` replaces the clip-path composition (CSS `--our-work-vector-image` + `::before`/`::after` background images) with a real `<img>` referencing `static/img/mobile-work-vector.svg`.
- `our-work.css` drops the `vector-mobile-clip` rules and the two `::before/::after` background layers. Mobile vector is now a single image covering the block.
- The linework composition test updates to assert against the `<img>` (visible, has the right `currentSrc`) instead of the CSS background-image layers.

## Verification

- `npm run build` then `npx playwright test --reporter=line` — 36/36 pass.
- The contact linework test waits for the lazy-loaded `<img>` to finish loading before measuring its bounding rect.
- PHPCS clean on changed files. Pre-existing `lib/activation.php` CRLF error is untouched.
- `git diff --check` clean.
- `composer validate --no-check-publish` passes.

## Acceptance Criteria

1. Below 768px the hero, pull quote, contact block, and our-work block render the artist-supplied mobile vectors.
2. At 768px and above the original desktop SVGs (or PNG for the original pullquote) render unchanged.
3. Existing responsive geometry tests pass with the updated ratios and positions.