## Context

As imagens de abertura por rota, `ResponsiveImage`, texto alternativo obrigatório e fallback tonal já existem. O componente público atual, porém, põe o texto sobre a fotografia e a home mantém duas colunas iguais. A referência aprovada pede uma abertura editorial legível, reutilizável e linear sem JavaScript.

## Goals / Non-Goals

**Goals:**

- Reunir as cinco aberturas narrativas em um único componente Blade de spread 5/7.
- Limitar a coluna de leitura a 470 px e manter títulos com quebra normal, sem clipping ou overflow.
- Preservar a ordem DOM texto → mídia em mobile, mídia responsiva, foco, motion progressivo e fallback tonal.

**Non-Goals:**

- Alterar campos CMS, uploads, dados, rotas, cópia, SEO/Open Graph, contato, privacidade, erros ou dependências.
- Criar ou atualizar snapshots, introduzir imagens externas ou transformar a rota de protótipo em funcionalidade de produção.

## Decisions

### Um componente compartilhado recebe todo o conteúdo de abertura

`x-public.photo-hero` passa a renderizar texto, slot opcional e mídia tanto para as páginas institucionais quanto para a home. A home delega o seu conteúdo ao componente para impedir que os contratos de proporção, fallback e carregamento se separem. Duplicar uma segunda implementação da home foi descartado por já ter produzido divergência 50/50.

### Grade CSS 5/7 acima de `lg`; fluxo normal abaixo dela

No desktop, uma grade de doze colunas entrega 5/12 ao campo de texto e 7/12 à mídia. No mobile e tablet, a ordem do DOM produz texto seguido pela imagem de proporção 4/5. Posicionamento absoluto e painel sobre a foto foram descartados porque reduzem a largura de leitura previsível e dificultam a contenção do texto.

### Mídia de hero continua prioritária e dimensionada pela área real

A única imagem de abertura mantém `loading=eager`, `fetchpriority=high`, `object-cover` e o componente responsivo existente. Seu `sizes` informa `100vw` abaixo de `lg` e aproximadamente `58vw` acima dele, em vez dos antigos `50vw`/`100vw` indiscriminados. O fallback não emite imagem quando o campo está vazio.

### Motion preserva o conteúdo legível desde o HTML

Os atributos existentes de `page-open` e beats de mídia/título/CTA permanecem. Nenhum texto fica escondido por opacidade; movimento reduzido e ausência de JavaScript exibem o estado final.

## Risks / Trade-offs

- [Uma imagem de origem estreita pode recortar conteúdo importante em 7/12] → `object-cover` preserva o contrato atual; curadoria/crop da mídia continua sendo responsabilidade editorial.
- [Conteúdo de título excepcionalmente longo pode pressionar a coluna] → limite de leitura, quebra normal e testes de ausência de overflow evitam palavras cortadas.
- [Breakpoint pode atualizar depois de resize em browser test] → os testes aguardam dois frames de animação antes de medir a mídia.

## Migration Plan

Não há migração de dados. O deploy troca apenas markup e classes; o rollback do commit restaura a abertura anterior. Rotas sem imagem continuam no fallback tonal já previsto.

## Open Questions

Nenhuma. Fotografias autorizadas de produção continuam uma dependência de conteúdo, não desta mudança.