/* ============================================================================
 * page-content-editorial.css — visual editorial no CONTEÚDO das páginas v4.
 * ----------------------------------------------------------------------------
 * Aplicado em .editorial-page (classe na <section id="conteudo">).
 *
 * COBRE 2 templates (frente4 + frente5):
 *   - pagina-default.php: conteúdo em .col-lg-9 (com sidebar) ou .col-lg-12 (full)
 *   - pagina-modelo1.php: conteúdo em .conteudoLateral.col-lg-5 (com sidebar)
 *                        ou .conteudoLateral.col-lg-7 (sem sidebar)
 *
 * NÃO mira .sidebar (estilizada no page-sidebar-dark.css).
 * NÃO mira .imagemLateral (estilizada no bloco final deste arquivo —
 * imagem destacada do modelo1 com h1 sobreposto + overlay).
 *
 * Re-mira os seletores do page-editorial-base.css do v2 (que assume markup
 * .editorial-hero / .editorial-content) pros seletores genéricos que os
 * templates v4 produzem.
 *
 * Specificity: #conteudo.editorial-page.pagina-institucional :is(...) X
 *              = (0,1,3,N) onde :is() conta com a maior specificity dos args
 *              (todos classes = 1). Vence #conteudo.pagina-institucional X
 *              = (0,1,1,1) que pintava h1/h2/h3 em #145480.
 *
 * Tokens --ed-* vêm de page-editorial-base.css (mesmo wrapper .editorial-page).
 * ============================================================================ */

/* =============================================================================
   1. H1 — título da página (the_title() em pagina-default.php).
      No modelo1, o h1 fica dentro de .imagemLateral (sobre a imagem destacada)
      e é estilizado no bloco 9 abaixo (não cai aqui).
   ============================================================================= */
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12) h1 {
    font-family: var(--ed-font-serif);
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--ed-ink);
    margin: 0 0 32px;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12) h1 em {
    font-style: italic;
    color: var(--ed-gold);
}

/* =============================================================================
   2. H2 / H3 / H4 — headings do the_content() (default + modelo1).
   ============================================================================= */
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) h2 {
    font-family: var(--ed-font-serif);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--ed-ink);
    margin: 48px 0 18px;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) h2 em {
    font-style: italic;
    color: var(--ed-gold);
}

#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) h3 {
    font-family: var(--ed-font-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ed-ink);
    margin: 36px 0 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) h3::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--ed-gold);
    flex-shrink: 0;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) h3 em {
    font-style: italic;
    color: var(--ed-gold);
}

#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) h4 {
    font-family: var(--ed-font-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ed-ink);
    margin: 28px 0 10px;
}

/* =============================================================================
   3. Parágrafos e ênfase (strong/b)
   ============================================================================= */
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) p {
    font-family: var(--ed-font-sans);
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    margin: 0 0 16px;
}

#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) :is(strong, b) {
    color: var(--ed-ink);
    font-weight: 600;
}

/* =============================================================================
   4. Normalize — lixo HTML do editor visual WP
      Neutraliza <span style="font-weight: 400"> e headings/p vazios.
   ============================================================================= */
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) span[style*="font-weight: 400"],
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) span[style*="font-weight:400"] {
    font-weight: inherit;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) :is(h2, h3, h4, p):empty {
    display: none;
}

/* =============================================================================
   5. Listas — bullet/marker dourado (linguagem editorial v2)
   ============================================================================= */
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) ul li {
    padding: 8px 0 8px 22px;
    position: relative;
    line-height: 1.7;
    font-family: var(--ed-font-sans);
    font-size: 16px;
    color: #333;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--ed-gold);
    font-size: 20px;
    line-height: 1;
}

#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) ol {
    padding-left: 24px;
    margin: 0 0 18px;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) ol li {
    padding: 6px 0;
    line-height: 1.7;
    font-family: var(--ed-font-sans);
    font-size: 16px;
    color: #333;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) ol li::marker {
    color: var(--ed-gold);
    font-weight: 600;
}

/* =============================================================================
   6. Links inline no conteúdo — underline gold + hover gold
   ============================================================================= */
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) a {
    color: inherit;
    border-bottom: 1px solid var(--ed-gold);
    text-decoration: none;
    transition: color .15s;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) a:hover {
    color: var(--ed-gold);
}

/* =============================================================================
   7. Imagens — alignleft / alignright / aligncenter do editor WP
   ============================================================================= */
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) img {
    max-width: 100%;
    height: auto;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) .alignleft {
    float: left;
    margin: 0 22px 12px 0;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) .alignright {
    float: right;
    margin: 0 0 12px 22px;
}
#conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) .aligncenter {
    display: block;
    margin: 18px auto;
}

/* =============================================================================
   8. Responsivo
   ============================================================================= */
@media (max-width: 1024px) {
    #conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12) h1 {
        font-size: 38px;
    }
    #conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) h2 {
        font-size: 26px;
    }
}
@media (max-width: 600px) {
    #conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12) h1 {
        font-size: 30px;
    }
    #conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) p {
        font-size: 15px;
    }
    #conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) h2 {
        font-size: 22px;
    }
    #conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) h3 {
        font-size: 18px;
    }
    #conteudo.editorial-page.pagina-institucional :is(.col-lg-9, .col-lg-12, .col-lg-5, .col-lg-7, .conteudoLateral) :is(.alignleft, .alignright) {
        float: none;
        display: block;
        margin: 0 auto 14px;
    }
}

/* =============================================================================
   9. pagina-modelo1 — .imagemLateral + h1 sobre imagem destacada (frente5).
      A view do pagina-modelo1.php emite:
        <div class="lazy imagemLateral col-lg-4|5" style="background-image: url(...)">
            <h1>...</h1>
        </div>
      O h1 fica POR CIMA da imagem. Aplicamos overlay sutil pra contraste e
      tipografia editorial (Source Serif 4 branco).
      Style.css legado tem .pagina-modelo1 .imagemLateral { padding: 130px 0 0 25px }
      sem !important — vencido via specificity sem escopar :not. O h1 do legado
      tem font-size:40px !important, mas foi escopado com :not(.editorial-page)
      em style.css na frente5; aqui reaplicamos color:#fff e novo font-size.
   ============================================================================= */
.editorial-page.pagina-modelo1 .imagemLateral {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 320px;
    padding: 48px 32px;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}
/* Overlay gradiente (bottom-up) pra contraste do h1 sobre imagens claras. */
.editorial-page.pagina-modelo1 .imagemLateral::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
    pointer-events: none;
}
/* h1 editorial dentro da imagemLateral — Source Serif branco, sem !important.
   Specificity (0,0,3,1) vence .pagina-modelo1 .imagemLateral h1 (0,0,2,1) — o
   !important do legado foi neutralizado em style.css com :not(.editorial-page). */
.editorial-page.pagina-modelo1 .imagemLateral h1 {
    position: relative;             /* fica sobre o overlay */
    z-index: 1;
    color: #fff;
    font-family: var(--ed-font-serif);
    font-size: 42px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0;
}
.editorial-page.pagina-modelo1 .imagemLateral h1 em {
    font-style: italic;
    color: var(--ed-gold);
}

/* Conteúdo lateral do modelo1 — remove o padding 130px legado, usa editorial. */
.editorial-page.pagina-modelo1 .conteudoLateral {
    padding: 48px 32px;
}

@media (max-width: 1024px) {
    .editorial-page.pagina-modelo1 .imagemLateral {
        min-height: 260px;
        padding: 36px 24px;
    }
    .editorial-page.pagina-modelo1 .imagemLateral h1 {
        font-size: 32px;
    }
    .editorial-page.pagina-modelo1 .conteudoLateral {
        padding: 36px 24px;
    }
}
@media (max-width: 600px) {
    .editorial-page.pagina-modelo1 .imagemLateral h1 {
        font-size: 26px;
    }
}

/* =============================================================================
   10. FALLBACK editorial — pra templates SEM <section id="conteudo">.
       Wave 2.5 + Wave 3 da frente6: vários templates landing/custom adicionaram
       a classe .editorial-page em sections com id próprio (qual-curso,
       simule-desconto, contexto-lgpd, section-home, principal, contexto-20anos,
       header-inovacoes, conteudo-estudos, etc.). Pra eles, os seletores acima
       (que exigem #conteudo) não disparam. Esse bloco fornece visual editorial
       mínimo via .editorial-page (specificity 0,0,1,1) pros elementos comuns.
       Onde tem #conteudo, as regras acima ganham por specificity (0,1,3,N).
       Onde NÃO tem #conteudo, este fallback aplica sem conflito com legado azul
       (#conteudo.pagina-institucional X = #145480), porque o legado também mira
       #conteudo. Sem !important. */
.editorial-page h1 {
    font-family: var(--ed-font-serif);
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--ed-ink);
    margin: 0 0 32px;
}
.editorial-page h2 {
    font-family: var(--ed-font-serif);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--ed-ink);
    margin: 40px 0 16px;
}
.editorial-page h3 {
    font-family: var(--ed-font-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ed-ink);
    margin: 32px 0 14px;
}
.editorial-page h4 {
    font-family: var(--ed-font-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ed-ink);
    margin: 24px 0 10px;
}
.editorial-page p {
    font-family: var(--ed-font-sans);
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    margin: 0 0 16px;
}
.editorial-page :is(strong, b) {
    color: var(--ed-ink);
    font-weight: 600;
}
.editorial-page ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.editorial-page ul > li {
    padding: 8px 0 8px 22px;
    position: relative;
    line-height: 1.7;
    font-family: var(--ed-font-sans);
    font-size: 16px;
    color: #333;
}
.editorial-page ul > li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--ed-gold);
    font-size: 20px;
    line-height: 1;
}
.editorial-page ol {
    padding-left: 24px;
    margin: 0 0 18px;
}
.editorial-page ol > li {
    padding: 6px 0;
    line-height: 1.7;
    font-family: var(--ed-font-sans);
    font-size: 16px;
    color: #333;
}
.editorial-page ol > li::marker {
    color: var(--ed-gold);
    font-weight: 600;
}
.editorial-page a {
    color: inherit;
    border-bottom: 1px solid var(--ed-gold);
    text-decoration: none;
    transition: color .15s;
}
.editorial-page a:hover {
    color: var(--ed-gold);
}
.editorial-page img {
    max-width: 100%;
    height: auto;
}

/* Exclusões: regras com specificity maior (sidebar, imagemLateral, botões,
   nesta-pagina-titulo) já vencem este fallback automaticamente. */

/* =============================================================================
   TOP GAP — páginas editoriais SEM hero (2026-05-29)
   A style.css legada põe #conteudo{padding:180px 0 50px} (resquício do header
   antigo não-fixed). Mas o header editorial .v2-hdr é position:fixed e o body
   já tem padding-top:80px pra compensar — então os 180px viram um vão enorme
   no topo. Aqui reduzo só o caso editorial-sem-hero (não toca páginas legadas,
   nem o hero header0, nem o full-width header-1).
   Specificity (1,3,0) > #conteudo (1,0,0); carrega depois da style.css.
   ============================================================================= */
#conteudo.editorial-page:not(.header0):not(.header-1) {
    padding-top: 40px;
}
@media (max-width: 991px) {
    #conteudo.editorial-page:not(.header0):not(.header-1) {
        padding-top: 24px;
    }
}

/* =============================================================================
 * HERO DAS PAGES — diminui o <header id="pagina-default"> usado pelos modelos
 * pagina-default.php e pagina-modelo1.php (quando o campo Toolset
 * sessao-topo-da-pagina-ativa = true). Mesma técnica do /clipping/ (frente11):
 * o style.css legado linha 358 setava height:100vh + max-height:700px nesse
 * markup, deixando o hero gigante. Aqui forçamos altura compacta com
 * specificity igual + ordem de carregamento + !important pra vencer.
 *
 * Escopo body.page = só nas pages (não afeta archive/single/home).
 * ============================================================================ */
body.page header#pagina-default .carousel-item {
    height: 280px !important;
    max-height: 280px !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
body.page header#pagina-default .carousel-caption {
    bottom: 30% !important;
}
@media (max-width: 700px) {
    body.page header#pagina-default .carousel-item {
        height: 180px !important;
        max-height: 180px !important;
    }
}