/**
 * File:  css/page-editorial-base.css
 * Theme: portalv2.0
 * Criado: 2026-05-27 (Onda 5)  · Atualizado: 2026-05-27 (Fix Onda 5)
 * Backup pré-fix: page-editorial-base.css.bak-pre-fix-onda5-20260527
 *
 * O QUE É
 *   CSS compartilhado pelas páginas editoriais SINGLE-COLUMN (sem sidebar)
 *   da Onda 5. Importado via @import nos stubs css/page-{slug}.css.
 *
 * NAMESPACE
 *   .editorial-page  — wrapper raiz. Escopa TODO o CSS aqui dentro para que
 *                       nenhuma regra vaze para o resto do site (style.css v2
 *                       legado fica intocado).
 *
 * FONTES (Fix 2 — vars CSS em vez de hardcoded)
 *   Variáveis locais escopadas em .editorial-page apontando pras fontes
 *   self-hosted que typography.css carrega. Fallbacks pra Georgia / Helvetica
 *   Neue / Impact garantem legibilidade enquanto o woff2 baixa.
 *   NÃO usa tokens.css globais — esses apontam pra fontes legadas V2
 *   (Georgia + Helvetica Neue), incompatíveis com o visual editorial.
 *
 * MODIFIERS DISPONÍVEIS
 *   .editorial-page--iframe        + .editorial-body--wide
 *   .editorial-content--iframe     → layout pra iframes full-width (nucap-vagas)
 *   .editorial-page--with-sidebar  + .editorial-body--two-col → 2 colunas
 *                                     (conteúdo à esquerda + sidebar à direita;
 *                                     usado em bibliotecas-virtuais)
 *   .editorial-content--legal      → escala documento legal (privacidade)
 *
 * RELACIONADO
 *   - css/page-cpa.css            (mesma linguagem visual, mas COM sidebar interna)
 *   - typography.css              (fonts @font-face globais)
 *   - sections/breadcrumb.php     (breadcrumb partial usado nas 5 pages)
 *
 * @package portalv2
 */

/* =============================================================================
   1. WRAPPER + TOKENS LOCAIS
   ============================================================================= */
.editorial-page {
    /* Cores institucionais editoriais */
    --ed-gold:  #C49A20;
    --ed-cream: #faf9f6;
    --ed-ink:   #111;
    --ed-muted: #6b6b6b;
    --ed-line:  #e5e2dc;

    /* Fontes locais — apontam pras self-hosted (Source Serif 4 / Inter / Bebas Neue)
       com fallbacks system. NÃO usa Google Fonts. NÃO usa tokens.css globais. */
    --ed-font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
    --ed-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --ed-font-display: 'Bebas Neue', Impact, sans-serif;

    background: var(--ed-cream);
    color: var(--ed-ink);
    font-family: var(--ed-font-sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.65;
    font-size: 16px;
    scroll-behavior: smooth;
}
.editorial-page * { box-sizing: border-box; }

/* =============================================================================
   2. HERO  — caixa preta com eyebrow gold, h1 grande serif, lead opcional
   ============================================================================= */
.editorial-page .editorial-hero {
    background: #000;
    color: #fff;
    padding: 140px 64px 120px;
    text-align: center;
}
/* Eyebrow: pequena tag em Bebas Neue dourada, identifica a seção */
.editorial-page .editorial-eyebrow {
    font-family: var(--ed-font-display);
    font-size: 13px;
    letter-spacing: .25em;
    color: var(--ed-gold);
    margin-bottom: 18px;
    text-transform: uppercase;
}
/* Título editorial: Source Serif 4 grande, weight 500 (não bold) */
.editorial-page .editorial-hero h1 {
    font-family: var(--ed-font-serif);
    font-size: 64px;
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.05;
    max-width: 1000px;
    margin: 0 auto;
    color: #fff;
}
.editorial-page .editorial-hero h1 em { font-style: italic; color: var(--ed-gold); }

/* Lead opcional: italic serif menor (só renderiza se has_excerpt() no template) */
.editorial-page .editorial-lead {
    font-family: var(--ed-font-serif);
    font-style: italic;
    font-size: 20px;
    color: #cfcfcf;
    max-width: 680px;
    margin: 24px auto 0;
    line-height: 1.5;
}

/* =============================================================================
   3. BODY  — container externo com padding e largura
   ============================================================================= */
.editorial-page .editorial-body {
    padding: 80px 64px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Modifier 2 colunas: conteúdo (1fr) + sidebar fixa (280px) à direita */
.editorial-page .editorial-body--two-col {
    max-width: 1280px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 64px;
    align-items: start;
}

/* =============================================================================
   4. CONTENT  — wrapper do the_content() com tipografia e normalize
   ============================================================================= */
.editorial-page .editorial-content {
    max-width: 820px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.75;
    color: #333;
}
/* Quando dentro de 2-col, o content ocupa a coluna toda (não centraliza mais) */
.editorial-page .editorial-body--two-col .editorial-content {
    margin: 0;
    max-width: none;
}

.editorial-page .editorial-content > * + * { margin-top: 18px; }
.editorial-page .editorial-content p { margin: 0 0 16px; }
.editorial-page .editorial-content strong,
.editorial-page .editorial-content b { color: #000; font-weight: 600; }

/* HEADINGS H2 — divisor de seção dentro do content */
.editorial-page .editorial-content h2 {
    font-family: var(--ed-font-serif);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: #000;
    margin: 48px 0 18px;
}
.editorial-page .editorial-content h2 em { font-style: italic; color: var(--ed-gold); }

/* HEADINGS H3 — sub-seção. Linha dourada à esquerda como marca visual */
.editorial-page .editorial-content h3 {
    font-family: var(--ed-font-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #000;
    margin: 36px 0 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.editorial-page .editorial-content h3::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--ed-gold);
    flex-shrink: 0;
}
.editorial-page .editorial-content h3 strong,
.editorial-page .editorial-content h3 b { font-weight: 500; }
.editorial-page .editorial-content h3 em { font-style: italic; color: var(--ed-gold); }

/* HEADINGS H4 — menor, sem ornamento */
.editorial-page .editorial-content h4 {
    font-family: var(--ed-font-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #000;
    margin: 28px 0 10px;
}

/* -----------------------------------------------------------------------------
   4.1  THE_CONTENT NORMALIZE
        Neutraliza lixo de HTML do editor visual WP:
          - span style="font-weight: 400"  (override do peso herdado)
          - h2/h3/h4/p vazios               (lixo de espaçamento)
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-content span[style*="font-weight: 400"],
.editorial-page .editorial-content span[style*="font-weight:400"] { font-weight: inherit !important; }
.editorial-page .editorial-content h2:empty,
.editorial-page .editorial-content h3:empty,
.editorial-page .editorial-content h4:empty,
.editorial-page .editorial-content p:empty { display: none; }

/* -----------------------------------------------------------------------------
   4.2  LISTAS
        UL → bullets dourados (•) sem padding default
        OL → numeração com ::marker dourado
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.editorial-page .editorial-content ul li {
    padding: 8px 0 8px 22px;
    position: relative;
    line-height: 1.7;
}
.editorial-page .editorial-content ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--ed-gold);
    font-size: 20px;
    line-height: 1;
}
.editorial-page .editorial-content ol {
    padding-left: 24px;
    margin: 0 0 18px;
}
.editorial-page .editorial-content ol li {
    padding: 6px 0;
    line-height: 1.7;
}
.editorial-page .editorial-content ol li::marker { color: var(--ed-gold); font-weight: 600; }

/* -----------------------------------------------------------------------------
   4.3  LINKS inline — underline dourado, vira gold no hover
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-content a {
    color: inherit;
    border-bottom: 1px solid var(--ed-gold);
    transition: color .15s;
}
.editorial-page .editorial-content a:hover { color: var(--ed-gold); }

/* -----------------------------------------------------------------------------
   4.4  IMAGENS — float align* tradicional do WP
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-content img {
    max-width: 100%;
    height: auto;
}
.editorial-page .editorial-content .alignleft  { float: left;  margin: 0 22px 12px 0; }
.editorial-page .editorial-content .alignright { float: right; margin: 0 0 12px 22px; }
.editorial-page .editorial-content .aligncenter { display: block; margin: 18px auto; }

/* -----------------------------------------------------------------------------
   4.5  IFRAMES — full-width, altura mínima razoável
        (overrides específicos vão pra cada page-{slug}.css)
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-content iframe {
    width: 100%;
    max-width: 100%;
    border: 0;
    min-height: 600px;
    display: block;
}

/* =============================================================================
   5. SIDEBAR EDITORIAL (.editorial-side)  — usado no modifier 2-col
        Aplicado por sections/institucional/biblioteca-sidebar.php e quaisquer
        outras sidebars que adotarem essa classe.
   ============================================================================= */
.editorial-page .editorial-side {
    position: sticky;
    top: 24px;
    background: #fff;
    border: 1px solid var(--ed-line);
    padding: 28px 28px 24px;
}
.editorial-page .editorial-side h4 {
    font-family: var(--ed-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin: 0 0 18px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.editorial-page .editorial-side ul { list-style: none; margin: 0; padding: 0; }
.editorial-page .editorial-side ul li { padding: 7px 0; }
.editorial-page .editorial-side ul li a {
    color: #000;
    font-size: 14px;
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
    display: inline;
    transition: color .15s, border-color .15s;
    text-decoration: none;
}
.editorial-page .editorial-side ul li a:hover,
.editorial-page .editorial-side ul li a.is-active {
    color: var(--ed-gold);
    border-color: var(--ed-gold);
}
.editorial-page .editorial-side ul li a.is-active { font-weight: 500; }

/* =============================================================================
   6. COMPONENTES REUSÁVEIS (Onda 3 — 2026-05-27)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   6.1  ACCORDION EDITORIAL (.editorial-faq)
        Usado em pages com FAQ: faq, aluno-fies, aluno-nao-fies.
        Linguagem da seção FAQ do hub /como-ingressar/ no V3:
        item bordado, botão grande serifado, ícone + que rotaciona pra ×.
        Funciona com data-attribute (.is-open via JS) OU detail/summary nativo.
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-faq {
    margin: 32px 0 0;
    border-top: 1px solid var(--ed-line);
}
.editorial-page .editorial-faq .faq-item {
    border-bottom: 1px solid var(--ed-line);
}
.editorial-page .editorial-faq .faq-q {
    width: 100%;
    padding: 22px 8px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--ed-font-serif);
    font-weight: 500;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.3;
    color: #111;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    transition: color .2s;
}
.editorial-page .editorial-faq .faq-q:hover { color: var(--ed-gold); }
.editorial-page .editorial-faq .faq-q-icon {
    width: 28px;
    height: 28px;
    border: 1px solid var(--ed-line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--ed-font-sans);
    font-size: 18px;
    font-weight: 300;
    color: #111;
    transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.editorial-page .editorial-faq .faq-item.is-open .faq-q-icon {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: rotate(45deg);
}
.editorial-page .editorial-faq .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s ease;
    padding: 0 8px;
}
.editorial-page .editorial-faq .faq-item.is-open .faq-a {
    max-height: 1200px;
    padding: 0 8px 22px;
}
.editorial-page .editorial-faq .faq-a p {
    font-family: var(--ed-font-sans);
    font-size: 15px;
    line-height: 1.7;
    color: #4a4a46;
    margin: 0 0 10px;
}
.editorial-page .editorial-faq .faq-a p:last-child { margin-bottom: 0; }
.editorial-page .editorial-faq .faq-a a { color: inherit; border-bottom: 1px solid var(--ed-gold); }
.editorial-page .editorial-faq .faq-a a:hover { color: var(--ed-gold); }

/* -----------------------------------------------------------------------------
   6.2  CARDS GRID GENÉRICO (.editorial-cards)
        Grid responsivo 3 colunas pra cards visuais (unidades, projetos, etc).
        Cada card: tag opcional + título + descrição + contato/CTA.
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 32px 0 0;
}
.editorial-page .editorial-cards .ed-card {
    background: #fff;
    border: 1px solid var(--ed-line);
    padding: 28px 30px;
    transition: border-color .2s, transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.editorial-page .editorial-cards .ed-card:hover {
    border-color: #111;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.editorial-page .editorial-cards .ed-card-tag {
    font-family: var(--ed-font-display);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ed-gold);
}
.editorial-page .editorial-cards .ed-card h3 {
    font-family: var(--ed-font-serif);
    font-size: 22px;
    font-weight: 500;
    color: #000;
    margin: 0;
    display: block;
}
.editorial-page .editorial-cards .ed-card h3::before { display: none; }
.editorial-page .editorial-cards .ed-card p {
    font-family: var(--ed-font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: #4a4a46;
    margin: 0;
}
.editorial-page .editorial-cards .ed-card a {
    color: inherit;
    border-bottom: 1px solid var(--ed-gold);
    font-size: 14px;
}
.editorial-page .editorial-cards .ed-card a:hover { color: var(--ed-gold); }

/* -----------------------------------------------------------------------------
   6.3  CTA DARK (.editorial-cta-dark)
        Faixa preta com eyebrow + título + parágrafo + botão pílula gold.
        Usado em faq (WhatsApp), jornadasqueinspiram (compartilhar), aluno-fies.
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-cta-dark {
    background: #000;
    color: #fff;
    padding: 64px 56px;
    text-align: center;
    margin: 64px 0 0;
}
.editorial-page .editorial-cta-dark .cta-eyebrow {
    font-family: var(--ed-font-display);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ed-gold);
    margin-bottom: 14px;
    display: inline-block;
}
.editorial-page .editorial-cta-dark h2 {
    font-family: var(--ed-font-serif);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 14px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.editorial-page .editorial-cta-dark h2 em { font-style: italic; color: var(--ed-gold); }
.editorial-page .editorial-cta-dark p {
    font-family: var(--ed-font-serif);
    font-style: italic;
    font-size: 16px;
    color: #bbb;
    max-width: 540px;
    margin: 0 auto 28px;
    line-height: 1.55;
}
.editorial-page .editorial-cta-dark .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ed-gold);
    color: #000 !important;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--ed-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 0;
    text-decoration: none;
    transition: background .15s;
}
.editorial-page .editorial-cta-dark .cta-btn:hover { background: #fff; }

/* -----------------------------------------------------------------------------
   6.4  BUTTONS GRID (.editorial-buttons-grid)
        Botões grandes lado a lado pra escolha binária/ternária
        (traduzindo-o-fies → ALUNO FIES / AINDA NÃO FIES; treineiro → Teste ENEM / Vestibular).
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin: 40px 0 0;
}
.editorial-page .editorial-buttons-grid .ed-btn-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 42px 24px;
    background: #fff;
    border: 1px solid var(--ed-line);
    color: #000;
    font-family: var(--ed-font-serif);
    font-size: 22px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
    text-align: center;
    line-height: 1.2;
}
.editorial-page .editorial-buttons-grid .ed-btn-big:hover {
    background: #000;
    color: var(--ed-gold);
    border-color: #000;
    transform: translateY(-3px);
}
.editorial-page .editorial-buttons-grid .ed-btn-big small {
    display: block;
    font-family: var(--ed-font-display);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ed-gold);
    font-weight: 400;
}

/* -----------------------------------------------------------------------------
   6.5  SECTION HEAD (.editorial-section-head)
        Cabeçalho de seção dentro do body — eyebrow + h2 + descrição opcional.
        Usado entre os blocos das pages mais ricas (fale-conosco, lapis, jornadas).
   ----------------------------------------------------------------------------- */
.editorial-page .editorial-section-head {
    margin-bottom: 32px;
    max-width: 820px;
}
.editorial-page .editorial-section-head .sec-eyebrow {
    font-family: var(--ed-font-display);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ed-gold);
    margin-bottom: 12px;
    display: inline-block;
}
.editorial-page .editorial-section-head h2 {
    font-family: var(--ed-font-serif);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: #000;
    margin: 0 0 14px;
}
.editorial-page .editorial-section-head h2 em { font-style: italic; color: var(--ed-gold); }
.editorial-page .editorial-section-head .sec-desc {
    font-family: var(--ed-font-serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: #4a4a46;
    margin: 0;
}

/* =============================================================================
   7. RESPONSIVE
        Breakpoints: 1024px (tablet) e 600px (mobile)
        Hero ganha mais top-padding em <1024 pra compensar header fixed.
        2 colunas empilham (sidebar vira bloco no topo).
   ============================================================================= */
@media (max-width: 1024px) {
    .editorial-page .editorial-hero { padding: 200px 24px 80px; }
    .editorial-page .editorial-hero h1 { font-size: 44px; }
    .editorial-page .editorial-body { padding: 56px 24px; }
    .editorial-page .editorial-body--two-col {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .editorial-page .editorial-side { position: static; order: 2; }
    .editorial-page .editorial-content h2 { font-size: 26px; }
    .editorial-page .editorial-cards { grid-template-columns: 1fr; }
    .editorial-page .editorial-cta-dark { padding: 48px 24px; }
    .editorial-page .editorial-cta-dark h2 { font-size: 26px; }
}
@media (max-width: 600px) {
    .editorial-page .editorial-hero { padding: 190px 20px 60px; }
    .editorial-page .editorial-hero h1 { font-size: 32px; }
    .editorial-page .editorial-lead { font-size: 16px; }
    .editorial-page .editorial-body { padding: 40px 20px; }
    .editorial-page .editorial-content { font-size: 15px; }
    .editorial-page .editorial-content h2 { font-size: 22px; }
    .editorial-page .editorial-content h3 { font-size: 18px; }
    .editorial-page .editorial-content .alignleft,
    .editorial-page .editorial-content .alignright {
        float: none;
        display: block;
        margin: 0 auto 14px;
    }
}