# Hero full-bleed da home Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Fazer a fotografia configurada do hero da home preencher toda a coluna direita abaixo do header, preservando a leitura editorial e o fallback sem foto.

**Architecture:** `x-home.hero` continuará a renderizar as duas variantes. A variante com imagem usará uma grade full-width com a coluna textual ancorada à régua global e a mídia como segundo trilho sem container; a variante tonal permanece contida. Os testes de feature e browser documentam os contratos de markup, tamanho e responsividade.

**Tech Stack:** Laravel Blade, Tailwind CSS 4 utilities, Pest feature/browser tests, Vite.

---

## Chunk 1: Layout e contratos do hero

### Task 1: Cobrir o spread full-bleed

**Files:**
- Modify: `tests/Feature/PublicSite/ImmersivePhotoHeroTest.php`
- Modify: `tests/Browser/HomeEditorialCadenceTest.php`

- [ ] **Step 1: Escrever as expectativas de feature para a variante com foto**

Exigir `data-split-hero`, `data-hero-content`, `data-motion="page-open"`, `data-reveal-group`, `aria-labelledby="hero-heading"`, `loading="eager"`, `fetchpriority="high"` e `sizes="(max-width: 767px) 100vw, 55vw"`. Com `hero_image_path` nulo, exigir `data-tonal-hero`, os mesmos atributos de motion/semântica, ausência de `data-split-hero` e ausência de `<img` dentro de `[data-tonal-hero]`.

- [ ] **Step 2: Estender a verificação browser de geometria**

No viewport 1440×1000, obter os retângulos de `.site-header`, `[data-chapter="hero"]`, `[data-hero-content]` e `[data-split-hero]`; esperar, com tolerância de 1px, que `hero.top === header.bottom`, `media.top === hero.top`, `media.bottom === hero.bottom`, `media.right === innerWidth` e `hero.height === innerHeight - header.height`. No viewport 390×844, comparar `data-split-hero` com `[data-hero-content]`; esperar que a mídia inicie depois do conteúdo, que `width / height` fique entre 0,79 e 0,81, e que não exista overflow horizontal. Antes das duas visitas de fallback, zerar `hero_image_path`; numa visita com reduced motion, esperar conteúdo visível. Em outra com `reducedMotion: no-preference` e `IntersectionObserver` desabilitado antes da navegação, esperar ausência de `data-motion` em `document.documentElement`, cada `[data-motion="page-open"]` com `.is-active`, cada `[data-reveal]` com `.is-revealed` e `aria-labelledby="hero-heading"`.

- [ ] **Step 3: Executar os testes focados e confirmar a falha inicial**

Run: `php artisan test tests/Feature/PublicSite/ImmersivePhotoHeroTest.php && php artisan test tests/Browser/HomeEditorialCadenceTest.php`

Expected: falha nas novas expectativas de geometria/markup até a alteração do componente.

### Task 2: Implementar a grade full-bleed

**Files:**
- Modify: `resources/views/components/home/hero.blade.php`

- [ ] **Step 1: Separar a variante com imagem do container compartilhado**

Substituir `min-h-[100dvh]` do `<section>` por `md:h-[calc(100dvh-5rem)]` quando `hero_image_path` estiver preenchido e renderizar um wrapper `grid min-h-[calc(100dvh-5rem)] md:h-full md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]`. A coluna de texto deve manter `data-reveal-group`, receber `data-hero-content`, ter `padding-left: max(var(--amare-container-padding), calc((100vw - var(--amare-container-max)) / 2 + var(--amare-container-padding)))`, padding direito fluido e centralização vertical.

- [ ] **Step 2: Tornar a mídia contínua**

Aplicar ao bloco `data-split-hero` `overflow-hidden`, `bg-amare-bg-deep`, `md:min-h-full`; abaixo de `md`, aplicar `aspect-[4/5]`. Manter `data-motion-beat="media"`, `data-reveal-media`, `object-cover`, path/alt CMS e mudar `sizes` para `(max-width: 767px) 100vw, 55vw`.

- [ ] **Step 3: Preservar o fallback**

Manter o wrapper tonal existente para hero sem imagem, com `data-tonal-hero`, `data-motion="page-open"` e `data-reveal-group`; não renderizar o bloco de mídia nessa variante.

- [ ] **Step 4: Executar os testes focados e confirmar a passagem**

Run: `php artisan test tests/Feature/PublicSite/ImmersivePhotoHeroTest.php && php artisan test tests/Browser/HomeEditorialCadenceTest.php`

Expected: PASS.

### Task 3: Verificar e registrar

**Files:**
- Modify: `resources/views/components/home/hero.blade.php`
- Modify: `tests/Feature/PublicSite/ImmersivePhotoHeroTest.php`
- Modify: `tests/Browser/HomeEditorialCadenceTest.php`

- [ ] **Step 1: Formatar e executar as verificações proporcionais**

Run: `composer pint && composer phpstan && composer test:feature && composer test:browser && npm run build`

Expected: todos os comandos passam.

- [ ] **Step 2: Inspecionar o diff e registrar**

Run: `git diff --check && git status --short`

Expected: apenas os três arquivos de implementação/testes e a documentação deste plano/especificação aparecem como escopo.

- [ ] **Step 3: Commit**

Run: `git add resources/views/components/home/hero.blade.php tests/Feature/PublicSite/ImmersivePhotoHeroTest.php tests/Browser/HomeEditorialCadenceTest.php docs/superpowers && git commit -m "feat(home): tornar hero fotográfico full-bleed"`

Expected: commit focado, sem artefatos de build ou screenshots.