/* ==========================================================================
   FAIXA DAS ODS NA PÁGINA INTERNA DO PROJETO
   Plano 54, PR 54.1 — `templates/portal/projeto_detalhe.html`
   ==========================================================================

   A faixa "Este projeto conecta o IAC com os ODS" sai logo depois do conteúdo
   do projeto e antes da galeria. Ela é **informativa** e fica separada do
   bloco "Doe Agora": as diretrizes de uso dos ícones da ONU pedem que eles não
   sejam associados a arrecadação de recursos.

   Padrão visual escuro do portal, tipografia branca.

   Plano 54, PR 54.4: o cartão passou ao degradê do portal, `#000f51 →
   #1e3a8a`, o mesmo de todos os blocos da página (antes era `#040e25 →
   --iac-primary → --iac-secondary`); o subtítulo subiu para `#e2e8f0`
   (8,4 : 1 sobre `#1e3a8a`; era branco a 72 %, 6,2 : 1) e o ícone do título
   para `#34d399` (5,4 : 1; o `#10b981` dava 3,5 : 1). A margem de cima do
   bloco saiu: quem espaça os cartões da coluna é `projeto-detalhe.css`.

   O branco é literal (`#ffffff`), e não `var(--iac-white)`, de propósito:
   `chamados/tests/test_paridade_tokens_portal.py` congela quais tokens cada
   tela LÊ, e `projeto_detalhe.html` nunca leu `--iac-white`. Passar a lê-lo
   por causa desta folha faria a tela herdar um nome novo — a catraca da Camada
   9 trata isso como mudança de pixel, e com razão.
   ========================================================================== */

.ods-faixa {
    padding: 2rem 1.75rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #000f51 0%, #1e3a8a 100%);
    box-shadow: 0 12px 36px rgba(0, 15, 81, 0.22);
    color: #ffffff;
}

.ods-faixa-titulo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.35rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
}

.ods-faixa-titulo i {
    color: #34d399;
    font-size: 1.25rem;
}

.ods-faixa-sub {
    margin: 0 0 1.4rem;
    font-size: 0.92rem;
    color: #e2e8f0;
    max-width: 62ch;
}

.ods-faixa-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ods-faixa-item {
    display: block;
    width: 84px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.ods-faixa-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Sem legenda sob o ícone: o próprio ícone oficial já traz o número e o título
   em caixa alta. Quem não vê a imagem recebe a mesma informação pelo `alt`
   ("ODS N — Título"), e quem usa mouse, pelo `title`. */

@media (max-width: 575.98px) {
    .ods-faixa {
        padding: 1.5rem 1.15rem;
    }

    .ods-faixa-item {
        width: 72px;
    }
}