# Mobile-first requirements

**Primary device is the phone.** *You get in the car and start travelling —
you need it with you.* Mobile is not a responsive afterthought; the product
is designed phone-first and scaled up to desktop.

## The on-the-go use case (drives these)
- **Geolocation / near-me**: "use my location" → attractions sorted by
  distance, distance shown on every card.
- **Map & directions**: every attraction has a tap-to-navigate button that
  opens the native maps app (Google/Apple) with the attraction's coords.
- **Glanceable**: ratings, distance and key facilities readable at arm's
  length; large tap targets (min 44px); thumb-reachable controls.
- **Fast on mobile data**: SSR + small JS bundles, lazy-loaded images,
  cached tiles where possible.
- **Practical info up top**: opening hours ("Open now / Closed"), price,
  parking, toilets — what you need *before* you set off.

## Layout
- Single-column, vertical scroll; home-page rows swipe horizontally.
- **Filters as a bottom-sheet** on mobile (not a sidebar); chips for the
  common ones inline.
- Sticky search/location bar so you can re-search from anywhere.
- Map view toggle on search results (list ⇄ map).

## Performance & accessibility
- Mobile-first responsive from 360px up; test at 360/390/414 widths first.
- Lighthouse mobile budget: fast LCP, no layout shift.
- Accessible (semantic, keyboard, contrast) — also serves the SEND persona.
- Design tokens only (gyrum design discipline); no raw colour/font-size
  literals — rem-based scaling for legibility.

## Future (v3)
- PWA / "add to home screen" + light offline (cached recent + favourites)
  so it works with patchy signal mid-journey.