# P3: Grids, Target-Size, e Layout

seeds: `sucesu-36ce`

## Fix 1: Cards com alturas desiguais (grids serrilhados)

**Problema**: `.news-card-items` dentro da mesma `.row` têm alturas diferentes (28-36px) porque o texto do summary/descrição varia. O Bootstrap `row` + `col-md-*` cria colunas de igual largura, mas os cards dentro têm altura ditada pelo conteúdo.

**Solução**: Fazer os cards usarem flexbox vertical com altura 100% e o parágrafo absorver o espaço extra.

### Arquivo 1: `public/assets/css/modules/noticias/portal-noticias.css`

Adicionar ao final do arquivo:

```css
/* Equalização de altura dos cards na mesma row */
.news-card-items {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.news-card-items .news-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.news-card-items .news-content p {
    flex: 1 0 auto;
}
```

### Arquivo 2: `public/assets/css/modules/agenda/portal-agenda.css`

Adicionar ao final do arquivo (mesmo código):

```css
/* Equalização de altura dos cards na mesma row */
.news-card-items {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.news-card-items .news-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.news-card-items .news-content p {
    flex: 1 0 auto;
}
```

### Verificação

Este CSS garante:
- Todos os cards na mesma row esticam para a altura do card mais alto
- A imagem mantém aspecto (sem distorção — `img-fluid` + altura implícita)
- O parágrafo do summary absorve o espaço excedente
- O link "Leia Mais" / "Saiba mais" fica alinhado na base de todos os cards

**Nota**: cards das homepages `/` (sections/news.blade.php, sections/events.blade.php) também usam `.news-card-items` e herdam este fix automaticamente.

---

## Fix 2: Botões de fonte A+/A- na barra de acessibilidade (20.8px < 24px)

**Arquivo**: `V2/layouts/portal/header/accessibility/bar-buttons.blade.php`
**Linhas**: 14-17

**Antes**:
```blade
<button type="button" class="btn btn-link js-btn-font-decrease border-0"
        aria-label="Diminuir tamanho da fonte" title="Diminuir Fonte"
        style="color: rgb(255,255,255); text-decoration: none; padding: 2px 8px;">A-</button>
<button type="button" class="btn btn-link js-btn-font-increase border-0"
        aria-label="Aumentar tamanho da fonte" title="Aumentar Fonte"
        style="color: rgb(255,255,255); text-decoration: none; padding: 2px 8px;">A+</button>
```

**Depois**:
```blade
<button type="button" class="btn btn-link js-btn-font-decrease border-0"
        aria-label="Diminuir tamanho da fonte" title="Diminuir Fonte"
        style="color: rgb(255,255,255); text-decoration: none; padding: 4px 10px; min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center;">A-</button>
<button type="button" class="btn btn-link js-btn-font-increase border-0"
        aria-label="Aumentar tamanho da fonte" title="Aumentar Fonte"
        style="color: rgb(255,255,255); text-decoration: none; padding: 4px 10px; min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center;">A+</button>
```

**Verificação**: `min-width: 28px; min-height: 28px;` garante target ≥ 24px (WCAG 2.5.8), mesmo quando o conteúdo "A-" é renderizado com fonte pequena.

---

## Fix 3: Overlap de -24px entre seções de filtro na /agenda

**Arquivo**: `V2/Modules/Publicacoes/Agenda/Views/portal/index.blade.php`

**Diagnóstico**: O sniff_page detectou que o container dentro de `section.news-section` tem `top: 776.27px` enquanto a própria section tem `top: 800.27px`, indicando um offset de -24px.

**Verificação no código** (index.blade.php):

Estrutura real do arquivo:
```
L42-53: breadcrumb-wrapper
L56:   <section class="section-padding">       ← seção de filtros com padding
L106:  <section class="news-section section-padding fix pt-0">  ← seção de cards, pt-0 remove padding-top
```

O `pt-0` na linha 106 é a causa do overlap: ele remove o `padding-top` da `section-padding` (normalmente 120px), fazendo a seção de cards colar na seção de filtros. O overlap de 24px é a diferença entre o padding esperado e o padding real. A classe `fix` em `main.min.css` pode conter um `overflow: hidden` ou clearfix relacionado.

**Solução**: remover `pt-0` (deixar o padding-top normal entre seções) ou, se o efeito colado é intencional, compensar com `position: relative; z-index: 2` no container.

```blade
<!-- Linha 106 — opção A: restaurar padding normal -->
<section class="news-section section-padding fix">
    <div class="container">
        <!-- ... -->
    </div>
</section>

<!-- Linha 106 — opção B: manter colado mas com z-index -->
<section class="news-section section-padding fix pt-0" style="position: relative; z-index: 2;">
    <div class="container">
        <!-- ... -->
    </div>
</section>
```

**Recomendação**: Opção A (restaurar padding). Duas seções coladas sem separação visual confundem o scroll.

---

## Fix 4: Falsos positivos (documentados, sem ação)

### H1 na /regional/sucesu-para
`V2/Modules/Conexoes/UnidadeRegional/Views/portal/show.blade.php:57`:
```blade
<h1 class="fw-bold mb-1">{{ $unidade->name }}</h1>
```
O `<h1>` existe. O sniff_page com depth insuficiente não capturou o texto por estar dentro de uma estrutura `div.d-flex > div > h1` com depth > 3. **Nenhuma correção necessária.**

### Breadcrumb H1 "contrast unmeasurable"
`public/assets/sucesu/css/main.min.css:3646` — `::before` pseudo com gradient azul escuro + opacity 0.75 se aplica a TODAS as páginas. O sniff não mede contraste sobre `background-image`. O texto `color: var(--white)` sobre o gradient `rgba(0,13,38,0.69)` é legível. **Nenhuma correção necessária.**

### Radii divergentes (44px, 12px, 13px, 16px vs --theme-radius: 4px)
Radii são escolhas de design do tema SUCESU e não bugs. Componentes Bootstrap 5 (`.btn`, `.card`, `.form-control`) já usam `--theme-radius` via `normalize.blade.php`. **Nenhuma correção necessária.**

### Busca UX diferente entre /noticias (icon clear) e /agenda (botão "Buscar")
/noticias usa filtragem 100% client-side (Map/Set em memória) → botão clear instantâneo faz sentido.
/agenda usa server-side (GET params + paginação) → botão "Buscar" para submit faz sentido.
**Comportamento diferente justificado pela arquitetura de filtro. Nenhuma correção necessária.**