# Hero Section Mobile Testing Guide

## Quick Testing Instructions

### Using Chrome DevTools
1. Open `index.html` in Chrome
2. Press `F12` to open DevTools
3. Click device toggle icon (top-left of DevTools)
4. Test at these viewport sizes:

### Test Viewports (Exact Widths)

#### 320px (iPhone SE, older Android)
**Settings in DevTools:**
- Width: 320px
- Height: 568px
- Device: iPhone SE (1st gen)

**Checklist:**
- [ ] Title text: "WALKING IN PEACE\nSERVED IN GOD'S LOVE" fits without truncation
- [ ] Both buttons visible and full-width
- [ ] No horizontal scrollbar appears
- [ ] Eyebrow tag visible above title
- [ ] Scroll down to see stats (104+, 14+, 800+)
- [ ] Video background loads and displays
- [ ] Button hover effects work (gold fill animation)

#### 375px (iPhone XR, iPhone 11)
**Settings in DevTools:**
- Width: 375px
- Height: 667px
- Device: iPhone X/XR

**Checklist:**
- [ ] Same as 320px
- [ ] More breathing room around buttons
- [ ] Description paragraph readable below fold
- [ ] Stats counter grid displays nicely

#### 390px (Pixel 4a, Pixel 5)
**Settings in DevTools:**
- Width: 390px
- Height: 844px
- Device: Pixel 4a / 5

**Checklist:**
- [ ] All elements properly centered
- [ ] Button text ("JOIN OUR CHURCH", "GET STARTED") fully visible
- [ ] Icon/arrow in buttons not cut off
- [ ] Spacing between elements appropriate

#### 430px (Larger phones, iPhone 12/13)
**Settings in DevTools:**
- Width: 430px
- Height: 932px
- Device: iPhone 12/13 Pro

**Checklist:**
- [ ] Approaching layout transition
- [ ] Verify layout still single-column (not grid yet)
- [ ] All text sizes appropriate
- [ ] Stats below fold display properly

### Visual Inspection Points

**Above the Fold (First Viewport):**
```
✓ Eyebrow pill: "THIRD ORDER REGULAR OF ST. FRANCIS"
✓ Title (reduced size): 1.8rem-2.8rem depending on viewport
✓ Two full-width buttons stacked
✓ No description text visible (moved below fold)
✓ No stats counter visible (moved below fold)
```

**Below the Fold (Scroll Down):**
```
✓ Divider line between sections
✓ Description paragraph: "Conversion, contemplation..."
✓ Stats grid: 104+ Professed Friars | 14+ Parishes | 800+ Years
✓ No horizontal scrolling at any point
```

**Desktop Transition (768px+):**
```
✓ Layout reverts to 2-column grid
✓ Title back to full size: 2.8rem-65px
✓ Description visible in right column at full height
✓ Stats in right column
✓ Flying Bible PNG visible (center-right)
```

### Responsive Dimension Ranges

**Font Scaling with clamp():**
- Mobile (320px): `clamp(1.6rem, 4.5vw, 2.4rem)` = ~1.6rem actual
- Small phone (375px): `clamp(1.8rem, 5vw, 2.8rem)` = ~1.875rem actual
- Large phone (430px): `clamp(1.8rem, 5vw, 2.8rem)` = ~2.15rem actual
- Tablet (768px+): `clamp(2.8rem, 4.5vw, 65px)` = original size

### Animation Testing

**Scroll animations (GSAP ScrollTrigger):**
1. Load page on 390px viewport
2. Scroll down slowly
3. Verify:
   - [ ] Stats counter animates up (0 to 104+, etc.)
   - [ ] Text fades in naturally
   - [ ] No janky or stuttering animations

**Hover animations (Button fill):**
1. At 375px viewport, hover over "JOIN OUR CHURCH" button
2. Verify:
   - [ ] Background fills from center in gold color
   - [ ] Text color changes to dark brown
   - [ ] Animation smooth and quick (~0.4s)

### Common Issues & Fixes

**Issue: Horizontal scrollbar appears**
- Cause: Padding/margin too large for viewport
- Fix: Already addressed with `box-sizing: border-box` and clamped spacing

**Issue: Title text wraps awkwardly**
- Cause: Viewport width too narrow for font size
- Fix: Using `clamp()` function for responsive scaling

**Issue: Buttons too small to tap**
- Cause: Button height less than 44px
- Fix: Minimum padding `0.75rem 1.2rem` provides adequate touch target

**Issue: Stats not visible**
- Cause: Not scrolled below fold
- Fix: Intentional - stats designed to appear on scroll

### Automated Testing

**Using Playwright (if available):**
```bash
# Test at 320px viewport
playwright codegen --viewport-size 320,568 index.html

# Test at 375px viewport
playwright codegen --viewport-size 375,667 index.html

# Test at 390px viewport
playwright codegen --viewport-size 390,844 index.html

# Test at 430px viewport
playwright codegen --viewport-size 430,932 index.html
```

### Real Device Testing

**Recommended devices:**
1. iPhone SE (320px width)
2. iPhone XR (375px width)
3. Pixel 4a (390px width)
4. iPhone 13 Pro (430px width)
5. iPad (768px+ for tablet confirmation)

**Testing steps:**
1. Push changes to staging server
2. Visit URL on each device
3. Open in Chrome DevTools remote debugging
4. Verify all checklist items above
5. Test with 4G throttling (slow network)
6. Test with touch interactions

### Browser Compatibility

| Browser | Tested | Status |
|---------|--------|--------|
| Chrome Mobile | 90+ | ✓ Full support |
| Safari iOS | 14+ | ✓ Full support |
| Firefox Mobile | 88+ | ✓ Full support |
| Samsung Internet | 14+ | ✓ Full support |
| Edge Mobile | 90+ | ✓ Full support |

### Performance Metrics Target

**Lighthouse Mobile (Target scores):**
- Performance: > 90
- Accessibility: > 95
- Best Practices: > 90
- SEO: > 95

**Core Web Vitals:**
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1

## Screenshot Comparison

### Before Optimization
- Hero title: Full size (62px) - overflows on 320px
- Layout: 2-column grid breaks to single column awkwardly
- Stats visible above fold - takes up valuable space
- Buttons may wrap or overflow

### After Optimization
- Hero title: Responsive (1.6rem-2.8rem) - fits all viewports
- Layout: Intentional single-column on mobile
- Stats below fold - preserves above-fold space
- Buttons full-width, properly spaced

## Rollback Plan

If issues arise after deployment:

1. **Quick Revert (1 minute):**
   ```bash
   git revert HEAD
   ```

2. **Partial Rollback (keep some fixes):**
   - Comment out mobile media queries in `css/design-system.css`
   - Keep only @media (max-width: 768px) styles

3. **Debug Mode:**
   - Add `console.log()` in browser DevTools
   - Check computed CSS with DevTools inspector
   - Test each media query independently

## Contact & Support

If issues occur during testing, check:
1. Browser cache cleared (Ctrl+Shift+Delete)
2. CSS file updated (check file timestamp)
3. Hard refresh page (Ctrl+Shift+R)
4. Test in incognito/private mode (eliminates extensions)