# Responsive

Mobile-first layout using Tailwind default breakpoints.

## Breakpoints

| Name | Min width | Typical device |
| --- | --- | --- |
| default | 0 | Mobile phones |
| `sm` | 640px | Large phones / small tablets |
| `md` | 768px | Tablets |
| `lg` | 1024px | Laptops |
| `xl` | 1280px | Desktops |
| `2xl` | 1536px | Large desktops |

Project usage notes:

- **Header desktop nav** appears at `xl` (not `lg`) to protect crowded Persian labels.
- **Section padding** steps at `md` (`py-16` → `md:py-20`).
- **Hero top padding** steps at `md` (`pt-24` → `md:pt-36`).

## Layout adaptations

| Concern | Mobile | Desktop |
| --- | --- | --- |
| Container gutter | `px-6` | same |
| Max width | `76.8rem` | same |
| Section Y | 64px | 80px |
| Grids | 1 col | 2–4 cols |
| Nav | Sheet menu | Inline `NavigationMenu` |
| Forms (newsletter) | Stacked | Horizontal `sm:flex-row` |

## Typography scaling

Scale variants already encode responsive steps (e.g. `h2`: `text-2xl md:text-3xl lg:text-4xl`). Prefer those over manual overrides.

Inputs use `text-base md:text-sm` to prevent iOS focus zoom.

## Spacing adaptations

- Increase gaps at larger breakpoints (`gap-10 lg:gap-16`) using the spacing scale.
- Do not shrink container padding on mobile below `px-6`.
- Collapse multi-column footers to `grid-cols-2` before `sm:grid-cols-4`.

## Touch & pointer

- Minimum target ~40px for primary icon buttons (`size="icon"` → 40px).
- Keep tap areas separated (`gap-1.5`–`gap-2` in toolbars).

## Overflow

- Test at 320–360px widths for Persian word wrapping.
- No horizontal page scroll; clip section decorations.
- Tables: wrap in horizontal scroll regions (blog tables already do).

## QA matrix (minimum)

- 375×812 (mobile)
- 768×1024 (tablet)
- 1280×800 (desktop)
- Light + dark on each

## Related

- [layout.md](./layout.md)
- [typography.md](./typography.md)
- [navbar.md](./navbar.md)