feat(ST-1134): LandscapeGuard component (T-319)

Toont rotate-overlay in portrait, niets in landscape. Kinderen blijven altijd
in DOM — geen unmount zodat SSE-streams overleven bij rotatie.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

__tests__/components/mobile/landscape-guard.test.tsx

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, act } from '@testing-library/react'
+import { LandscapeGuard } from '@/components/mobile/landscape-guard'
+
+type Listener = (e: MediaQueryListEvent) => void
+
+function mockMatchMedia(initialPortrait: boolean) {
+  let matches = initialPortrait
+  let listener: Listener | null = null
+
+  const mql = {
+    get matches() { return matches },
+    media: '(orientation: portrait)',
+    onchange: null,
+    addEventListener: (_: string, l: Listener) => { listener = l },
+    removeEventListener: () => { listener = null },
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  }
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    configurable: true,
+    value: () => mql,
+  })
+
+  return {
+    setPortrait(p: boolean) {
+      matches = p
+      if (listener) listener({ matches: p } as MediaQueryListEvent)
+    },
+  }
+}
+
+describe('LandscapeGuard', () => {
+  beforeEach(() => {})
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders children always', () => {
+    mockMatchMedia(false)
+    render(<LandscapeGuard><div>kids</div></LandscapeGuard>)
+    expect(screen.getByText('kids')).toBeTruthy()
+  })
+
+  it('shows overlay in portrait', () => {
+    mockMatchMedia(true)
+    render(<LandscapeGuard><div>kids</div></LandscapeGuard>)
+    expect(screen.getByRole('alert').textContent).toContain('Draai je telefoon naar landscape')
+    // children blijven in DOM (geen unmount → SSE-streams blijven leven)
+    expect(screen.getByText('kids')).toBeTruthy()
+  })
+
+  it('hides overlay in landscape', () => {
+    mockMatchMedia(false)
+    render(<LandscapeGuard><div>kids</div></LandscapeGuard>)
+    expect(screen.queryByRole('alert')).toBeNull()
+  })
+
+  it('toggles overlay on orientation change', () => {
+    const ctl = mockMatchMedia(false)
+    render(<LandscapeGuard><div>kids</div></LandscapeGuard>)
+    expect(screen.queryByRole('alert')).toBeNull()
+    act(() => ctl.setPortrait(true))
+    expect(screen.getByRole('alert')).toBeTruthy()
+    act(() => ctl.setPortrait(false))
+    expect(screen.queryByRole('alert')).toBeNull()
+  })
+})