/* =========================================================
   PÁGINA INSTITUCIONAL DINÂMICA — pagina.css v4.0
   assets/css/pagina.css
   Estiliza as classes usadas em pagina.php:
   .pagina-conteudo, .pagina-imagem, .pagina-texto
   O título da página usa o componente compartilhado
   .cabecalho-interno (definido em design-system.css, também
   usado por noticia.php) — não fica mais duplicado aqui.
========================================================= */

/* ---------------------------------------------------------
   TEMPLATE "LATERAL" — imagem ao lado do texto
--------------------------------------------------------- */

.pagina-lateral-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
    align-items:start;
}

.pagina-lateral-grid .pagina-imagem{
    margin-bottom:0;
    border:6px solid var(--color-white);
    box-shadow:var(--shadow-lg);
    outline:1px solid var(--color-border);
}

@media(min-width:900px){

    .pagina-lateral-grid{
        grid-template-columns:minmax(300px, 380px) 1fr;
        gap:56px;
    }
}

/* ---------------------------------------------------------
   TEMPLATE "DESTAQUE" — imagem grande no corpo do conteúdo
   Antes era uma foto atrás do título (removida a pedido do
   Luciano — o título agora é sempre o .cabecalho-interno
   padrão, sem foto/cor de fundo). A diferenciação do
   "simples" passou a ser o tamanho/proporção da imagem:
   mais alta, cantos maiores, sombra mais forte — uma "foto de
   revista" em vez de uma thumb contida.
--------------------------------------------------------- */

.pagina-imagem-destaque{
    margin-bottom:44px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
}

.pagina-imagem-destaque img{
    max-height:560px;
}

/* ---------------------------------------------------------
   CONTEÚDO
--------------------------------------------------------- */

.pagina-conteudo{
    padding-block:0 60px;
}

.pagina-imagem{
    width:100%;
    margin-bottom:40px;
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:var(--shadow-md);
}

.pagina-imagem img{
    width:100%;
    height:auto;
    max-height:460px;
    object-fit:cover;
    display:block;
}

/* Texto ocupa a largura máxima do .container (= MAIN),
   igual à regra já aplicada em noticia.css. */
.pagina-texto{
    max-width:100%;
    color:var(--color-text);
    font-size:17px;
    line-height:1.75;
}

.pagina-texto h2,
.pagina-texto h3{
    color:var(--color-title);
    font-weight:var(--fw-title);
    letter-spacing:var(--ls-title);
    margin-top:40px;
    margin-bottom:16px;
}

.pagina-texto h2{
    font-size:26px;
}

.pagina-texto h3{
    font-size:20px;
}

.pagina-texto p{
    margin-bottom:20px;
}

/* letra capitular no primeiro parágrafo — toque editorial nos
   templates "lateral" e "destaque" (nos dois, o texto já ganhou
   mais respiro visual; a capitular reforça a sensação de "matéria
   de revista" em vez de bloco de texto cru). */
.pagina-template-lateral .pagina-texto > p:first-of-type::first-letter,
.pagina-template-destaque .pagina-texto > p:first-of-type::first-letter{
    float:left;
    font-family:inherit;
    font-weight:var(--fw-title);
    font-size:64px;
    line-height:.85;
    padding:4px 8px 0 0;
    color:var(--color-primary);
}

.pagina-texto a{
    color:var(--color-primary);
    text-decoration:underline;
    transition:var(--transition-fast);
}

.pagina-texto a:hover{
    color:var(--color-hover);
}

.pagina-texto ul,
.pagina-texto ol{
    margin:0 0 20px 0;
    padding:0;
}

.pagina-texto ol{
    margin-left:24px;
}

.pagina-texto li{
    margin-bottom:8px;
}

/* Bullet customizado (lista não-ordenada): substitui o disco padrão
   do navegador por um ícone de check na cor primária do projeto —
   pedido do Luciano pra ficar "mais bonito" (2026-08-04, página LGPD,
   mas vale pra qualquer <ul> de página institucional). */
.pagina-texto ul{
    list-style:none;
}

.pagina-texto ul li{
    position:relative;
    padding-left:30px;
}

.pagina-texto ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--color-primary);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

.pagina-texto blockquote{
    margin:28px 0;
    padding:18px 24px;
    border-left:4px solid var(--color-primary);
    background:#f8fafc;
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    color:var(--color-title);
    font-style:italic;
}

.pagina-texto img{
    max-width:100%;
    height:auto;
    border-radius:var(--radius-sm);
}

/* ---------------------------------------------------------
   ACESSO RESTRITO (2026-08-22, pedido do Enockes/Luciano)
   Antes, uma página/link com nível de acesso ficava totalmente
   ESCONDIDO do menu pra quem não podia vê-la — ninguém nem sabia que
   existia (ver includes/menu_site.php). Agora o link aparece pra todo
   mundo, e é aqui, dentro do conteúdo (ver pagina.php, $acessoNegado),
   que a restrição de verdade acontece: quem não está logado vê um
   convite pra entrar; quem já está logado mas sem nível suficiente vê
   um aviso de "sem autorização" — sem revelar o conteúdo real da
   página em nenhum dos dois casos.
--------------------------------------------------------- */

.pagina-acesso-restrito{
    max-width:560px;
    margin:0 auto;
    padding:48px 32px;
    text-align:center;
    background:#f8fafc;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
}

.pagina-acesso-restrito i{
    font-size:40px;
    color:var(--color-primary);
    margin-bottom:20px;
}

.pagina-acesso-restrito p{
    color:var(--color-text);
    font-size:16px;
    line-height:1.6;
    margin-bottom:12px;
}

.pagina-acesso-restrito button{
    margin-top:16px;
    padding:12px 28px;
    border:none;
    border-radius:var(--radius-sm);
    background:var(--color-primary);
    color:var(--color-white);
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    transition:var(--transition-fast);
}

.pagina-acesso-restrito button:hover{
    background:var(--color-hover);
}

/* ---------------------------------------------------------
   RESPONSIVO
--------------------------------------------------------- */

@media(max-width:768px){

    .pagina-conteudo{
        padding-block:0 40px;
    }

    .pagina-imagem img{
        max-height:280px;
    }

    .pagina-imagem-destaque img{
        max-height:320px;
    }

    .pagina-texto{
        font-size:16px;
    }
}

/* 2026-10-08 (revisão mobile): tabelas coladas no conteúdo das páginas
   (ex: Política de Privacidade e Cookies) passam da largura da tela no
   celular — rolam na horizontal dentro do próprio conteúdo, sem esticar
   a página inteira. */
@media(max-width:768px){
    .pagina-texto table{
        display:block;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}