/* ==========================================================================
   PÁGINA DA NOTÍCIA — FOTOS AO LONGO DA MATÉRIA E INTERTÍTULO (PLANO 61)
   `templates/portal/noticia_detalhe.html`, carregada DEPOIS do `<style>` da
   tela (que ficou como estava: a paridade dos tokens do Portal o congela).

   O que mora aqui
   ---------------
   * `.intertitulo` — o `<h3 class="intertitulo">` que o editor em blocos
     grava. Ele já herda de `.article-body h3` (Outfit, 700, branco); aqui
     fica um pouco menor que um título de seção e colado no texto de baixo,
     que é o texto dele.
   * `.noticia-foto-no-texto` — a foto que o corpo da matéria recebe entre os
     parágrafos (a mesma da galeria do fim; o clique abre o `<dialog>` no
     índice dela). Ela mora dentro do cartão azul do texto.

   Contraste (fórmula WCAG 2.x, pior ponto do degradê do cartão, `#0D3272`)
   ----------------------------------------------------------------------
   - legenda `#cbd5e1` sobre `#0D3272` ........................ 8,24:1
   - intertítulo `#ffffff` (herdado) sobre `#0D3272` .......... 12,24:1
   (medidos também no navegador, com `getComputedStyle` — ver o handoff)

   Sem `:root` e sem token novo: só lê `--transition` e `--iac-cyan-400`,
   que a página já declarava. Nenhum `!important`.
   ========================================================================== */

.article-body .intertitulo {
    font-size: 1.45rem;
    line-height: 1.35;
    margin-top: 2.25rem;
    margin-bottom: 0.7rem;
}

.article-body > .intertitulo:first-child {
    margin-top: 0;
}

/* ───────────────────────── Foto no meio do texto ───────────────────────── */
.noticia-foto-no-texto {
    margin: 2rem 0;
}

.noticia-foto-no-texto__botao {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    overflow: hidden;
    background: #020817;
    cursor: zoom-in;
    transition: var(--transition);
}

/* A foto inteira, sem corte: retrato ganha faixa escura dos lados em vez de
   perder a cabeça de quem está nela. */
.noticia-foto-no-texto__botao img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
}

.noticia-foto-no-texto__botao:hover,
.noticia-foto-no-texto__botao:focus-visible {
    border-color: var(--iac-cyan-400);
    box-shadow: 0 14px 30px rgba(2, 8, 23, 0.45);
    transform: translateY(-2px);
}

.noticia-foto-no-texto__botao:focus-visible {
    outline: 3px solid var(--iac-cyan-400);
    outline-offset: 3px;
}

.noticia-foto-no-texto figcaption {
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.5;
    padding: 0.6rem 0.25rem 0;
}

@media (max-width: 768px) {
    .article-body .intertitulo {
        font-size: 1.3rem;
    }

    .noticia-foto-no-texto {
        margin: 1.5rem 0;
    }

    .noticia-foto-no-texto__botao {
        border-radius: 14px;
    }

    .noticia-foto-no-texto__botao img {
        max-height: 420px;
    }
}