/*
 * Ajustes da pgv de SQL que NAO passam pelo SASS.
 *
 * O bundle desta pagina (`sass/css/pg-vendas-sql/style.css`) e gerado por
 * `sass/main/pg-vendas-sql/main.scss`, que importa o layout inteiro do
 * agentes-ia e depois `pages/_pg-vendas-sql.scss` so com a paleta. Herdar o
 * layout traz junto os VAZAMENTOS dele: aquele bundle nasceu de landing solta e
 * tem `body` e `.botao` GLOBAIS, que atingem o header e o rodape do site depois
 * que a pagina ganhou os dois. Este arquivo desfaz isso no escopo `body.pgv-sql`,
 * exatamente como o `pg-vendas-agentes-ia.css` faz no dele.
 *
 * Ele vem DEPOIS do bundle no `<head>` de proposito: e override, e a ordem e o
 * que o faz vencer sem `!important`.
 *
 * ⚠️ Ao mexer no SASS desta pagina, confira aqui tambem — regra que existe nos
 * dois lugares e que so muda em um deixa de valer sem ninguem perceber.
 */

/* ==========================================================================
 * O que o bundle desta pagina VAZA para componentes que nao sao dela
 *
 * A pagina nasceu como landing solta, e o bundle dela tem `body` e `.botao`
 * GLOBAIS. Quando ela ganhou o header e o rodape do site, os dois passaram a
 * atingir componentes compartilhados:
 *
 *   body{text-align:center}   centraliza o rodape do site inteiro
 *   .botao{font-size:1.92rem;padding:1.28rem 2.5rem}
 *                            deixa o "Matricule-se" do header 4px mais alto que
 *                            o do resto do site
 *
 * Os valores abaixo sao os da /comunidade-impressionadora, que e o gabarito que
 * o gate compara — MEDIDOS nela (18px de fonte, 11,5px/21px de padding, raio de
 * pilula), nao inventados.
 * ========================================================================== */

body.pgv-sql .footer,
body.pgv-sql .footer__container,
body.pgv-sql .footer * {
    text-align: left;
}

body.pgv-sql .header__botoes > .botao,
body.pgv-sql .header__botoes > .botao:link,
body.pgv-sql .header__botoes > .botao:visited,
body.pgv-sql .header__botoes > .botao:hover,
body.pgv-sql .header__botoes > .botao:active {
    border-radius: 100vw;
    line-height: 1;
    font-size: 1.8rem;
    padding: 1.15rem 2.1rem;
}

/* ==========================================================================
 * A primeira dobra
 *
 * O CTA do hero tem de caber na primeira tela: e o botao que a pagina existe
 * para oferecer, e quem nao o ve rola por milhares de pixels sem saber que ha um.
 *
 * Medido em 1440x765 antes de mexer: o CTA terminava 121px FORA. A conta,
 * de cima para baixo:
 *
 *   header ............ 106px
 *   padding do hero .... 24px
 *   logo do curso ...... 78px
 *   textos ............ 189px
 *   VIDEO ............. 260px  <-- o elastico
 *   CTA ................ 85px
 *   VAOS .............. 94px   (3 x 31,2px de `gap` do flex do container)
 *
 * 🔴 O maior item que nao e conteudo sao os VAOS, nao a midia — e por isso
 * o corte comeca por eles. Depois vem a altura do video, que e o elastico:
 * ele e decorativo na dobra, e o conteudo dele continua inteiro quando a pagina rola. Texto e CTA nao encolhem.
 *
 * Acima de 800px de altura nada muda: a pagina segue como foi aprovada.
 * ========================================================================== */

@media (max-height: 800px) and (min-width: 769px) {
    body.pgv-sql .hero > .container {
        gap: 1.4rem;
        padding-top: 1.2rem;
    }

    body.pgv-sql .hero .hero__wrapper-video, body.pgv-sql .hero .hero__wrapper-video iframe {
        max-height: 21vh;
    }
}

@media (max-height: 660px) and (min-width: 769px) {
    body.pgv-sql .hero > .container {
        gap: 1rem;
        padding-top: 0.8rem;
    }

    body.pgv-sql .hero .hero__wrapper-video, body.pgv-sql .hero .hero__wrapper-video iframe {
        max-height: 17vh;
    }

    /*
     * `clamp` em vez de valor fixo: a faixa de altura e continua, e um degrau
     * seco aparece como salto de tipografia ao redimensionar.
     *
     * 🔴 O seletor mira a CLASSE do titulo do hero, e nunca `h1` por elemento.
     * Escrito como `.hero h1`, ele casava "o que por acaso for h1 aqui dentro" —
     * e no dia em que o `<h1>` passou a ser o NOME DO CURSO (para a pagina se
     * anunciar pelo produto, e nao pela headline), a regra sumiu do titulo e foi
     * encolher o nome do curso. O CTA saiu 73px para fora da primeira dobra em
     * 1366x768, e nada no HTML mudou de tamanho: o `curl` nao ve, o `php -l`
     * passa, e so o gate que mede geometria acusa.
     */
    body.pgv-sql .hero .hero__h1--destaque-completo {
        font-size: clamp(2.8rem, 5.2vh, 3.98rem);
    }
}

/* No mobile o vao pesa igual, e a midia ja e menor. */
@media (max-width: 768px) and (max-height: 860px) {
    body.pgv-sql .hero > .container {
        gap: 1.4rem;
        padding-top: 1rem;
    }

    body.pgv-sql .hero .hero__wrapper-video, body.pgv-sql .hero .hero__wrapper-video iframe {
        max-height: 22vh;
    }
}

/* ==========================================================================
 * O CTA do fim do FAQ
 *
 * O partial do FAQ e do TRONCO e serve nove pgv, entao ele carimba
 * `font-weight:700` no `.botao` — numero que veio das paginas de referencia.
 * Aqui todo CTA e 600, e o de baixo saia mais gordo que os outros seis da
 * mesma pagina. O peso desce no FILHO, que e quem escreve o texto: mexer no
 * `.botao` competiria com o fallback do partial em vez de so vencer nele.
 * ========================================================================== */

body.pgv-sql .secao.faq .botao .botao__interno {
    font-weight: 600;
}

/* ==========================================================================
 * O cartao do FAQ
 *
 * O FAQ saia como um bloco CLARO no meio de uma pagina preta: o bundle desta
 * pagina ainda carrega `.accordeon-item{background:#e1e7f4}` e
 * `.accordeon-title{color:#000}` do acordeao antigo, que tinha cartao claro.
 * Duas provas de que o claro e sobra, e nao escolha: o partial do FAQ desenha a
 * borda do item em `rgba(255,255,255,.12)` — branco translucido so faz sentido
 * sobre fundo escuro, e sobre o #e1e7f4 ela e invisivel —, e o acordeao da
 * PROPRIA pagina (a lista de agentes, e a ementa) e transparente com texto
 * branco.
 *
 * O tom vem do gabarito do tronco (`.vc-bloco--superficie`), que e a superficie
 * escura padrao das pgv; nao e numero novo. O `color` volta a `inherit` porque
 * quem manda cor no partial vem em `:where()` e perde de qualquer
 * `.accordeon-title`.
 * ========================================================================== */

body.pgv-sql .secao.faq .accordeon-item {
    background-color: rgba(255, 255, 255, 0.03);
}

body.pgv-sql .secao.faq .accordeon-title {
    color: inherit;
}

/* ==========================================================================
 * A seta do acordeao de agentes, no celular
 *
 * O titulo e um flex `space-between` e a seta e um `::after` estatico, sem
 * folga nenhuma entre os dois. Em 412px a linha mais longa chegava a 6px da
 * borda e o `▼` (~11px) entrava por cima da ultima palavra — "Agente de
 * Preenchimento de CRM▼". Medido em Chrome real nos oito titulos da lista: a
 * folga ia de 6px a 13px.
 *
 * `column-gap` e nao `padding-right`: o padding sobraria como buraco a direita
 * da seta, e o que falta e distancia ENTRE os dois itens do flex.
 * ========================================================================== */

body.pgv-sql .acordeao-html .accordeon-title {
    column-gap: 1.2rem;
}