/*
 * DVPN-25 — CSS do site público (`/`, `/eventos`, `/eventos/{slug}`).
 *
 * Reconstrução funcional das cores/tipografia observadas no Golden Master
 * real (DVPN-28) — não é uma reprodução pixel-a-pixel do CSS-in-JS/MUI
 * original (isso seria redesenho de implementação, não de produto; a
 * comparação de screenshot fica a cargo da QA/Chun-Li downstream, INV-008).
 * Paleta: navy #212236 (texto/seções escuras), gradiente ciano->azul
 * #04FFB4 -> #57ACFF (destaque, ex.: `.hero .highlight`, `.talk-card__title`).
 * DVPN-110 — a seção de redes sociais (`.section--highlight`) NÃO usa esse
 * gradiente: é cor sólida `rgb(0, 244, 171)`, confirmado ao vivo contra
 * produção (o achado DVPN-38 que introduziu o gradiente ali parece ter
 * sido um falso-positivo de leitura de screenshot).
 */

:root {
    --brand-gradient: linear-gradient(225.5deg, #04ffb4 9.38%, #57acff 95.68%);
    /*
     * DVPN-27 — `/contato`. Gradiente da 2ª linha do título ("comunidade")
     * e do e-mail, confirmado byte a byte no CSS-in-JS do Golden Master
     * real (`parity-tests/fixtures/html-snapshots/contato.OLD.html`,
     * regras `.css-1depuj7`/`.css-4jtpwd`).
     */
    --brand-gradient-alt: linear-gradient(233.62deg, #1e90ff 17.62%, #e63462 100%);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
    color: #212236;
    line-height: 1.6;
}

a {
    color: inherit;
}

h1, h2, h3, h4, h5 {
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 16px;
}

/*
 * DVPN-96 (achado da Cammy, 21/08/2026) — a regra genérica acima nunca
 * definiu `font-size`, então todo h2 caía no default do navegador
 * (~24px/1.5em) em vez do valor real de produção. Golden Master real
 * confirma que os títulos de seção da home (Sobre, Iniciativas, Eventos,
 * Vagas, Apoio, "Acompanhe nas redes sociais") são font-size:3rem (48px),
 * font-weight:700, line-height:100% em produção — mesmo se lá o elemento
 * real é <h3> (MuiTypography-h3, classes css-1sy9z18/css-rysy5a/
 * css-1kbgnjn em home.OLD.html/eventos.OLD.html/evento-*.OLD.html); a
 * paridade que importa aqui é visual (tamanho/peso), não o nível semântico
 * do heading, que já era <h2> no stack alvo antes deste fix.
 *
 * O h1 real de produção usa um valor DIFERENTE (4.25rem desktop/3.5rem
 * mobile, font-weight:800, classe css-h411c7) — não é o mesmo valor do h2.
 * Nota histórica (não mais atual): quando este comentário foi escrito, o
 * desktop ainda estava em `.hero h1 { font-size: 3rem; }` (não medido
 * contra produção). O desktop foi corrigido pro valor real no DVPN-104
 * (04/09/2026, ver `.hero h1` abaixo, agora `4.25rem`/`line-height:68px`).
 * CORREÇÃO (DVPN-108, 05/09/2026): o mobile já foi corrigido — medição ao
 * vivo (iframe same-origin, viewport 390px) confirma produção em
 * `font-size:56px`/`line-height:56px` (3.5rem/1:1), batendo exatamente com
 * o `.hero h1` dentro do `@media (max-width:720px)` mais abaixo neste
 * arquivo. Nota histórica preservada acima só pelo contexto do desktop.
 *
 * Escopo do seletor: `.section` (já presente em todas as seções da home +
 * `partials/iniciativas.blade.php`, reusada em /eventos, + a seção
 * "Acompanhe nas redes sociais" de /eventos/{slug}, todas confirmadas com
 * o mesmo valor 3rem/700 no Golden Master) — DELIBERADAMENTE não é um h2
 * global: `/contato` usa um h2 REAL diferente em produção
 * (MuiTypography-h2, classe css-1lglwd3, 2.5rem/font-weight:800) para
 * "Membros da organização", cujo wrapper (`section.section--dark`, sem a
 * classe `.section`) não tem paridade de valor com este e fica fora do
 * escopo deste card (DVPN-96 é só a home) — não tocado, não piorado.
 *
 * CORREÇÃO (DVPN-138, 05/09/2026, achado do Fábio: "TODOS os titulos de
 * sessão: wknd, Festival, Hackathon, SESC, Evento, BootCamp, DEVPIRA
 * Live!") — esses são os títulos de categoria da listagem de `/eventos`
 * (`eventos/index.blade.php:18`, `<h3>{{ $categoryName }}</h3>` dentro de
 * `<section class="section">`), que caíam no mesmo fallback genérico sem
 * font-size (18,72px) por serem `<h3>`, não `<h2>` — a regra acima só
 * cobria h2. Medição ao vivo confirma produção usando o MESMO valor
 * (48px/700/line-height:100%) pros h3 de título de seção nos contextos
 * verificados que reusam `.section` (categorias de `/eventos` E `/vagas`,
 * "Sobre o evento"/"Participe"/"Conteúdo"/"Apoio"/"Galeria" de
 * `/eventos/{slug}`, "Acompanhe nas redes sociais" de `/contato` — já
 * citado como 48px/700 no comentário original do DVPN-96 acima) — sem o
 * caso de exceção que motivou escopar só h2 (não existe um h3 dentro de
 * `.section` com valor diferente em produção, diferente do h2 do
 * `/contato` fora de `.section`). Estende o seletor pra h3 também, em
 * vez de duplicar a regra.
 *
 * CORREÇÃO (achado do Chun-Li, revisão independente do PR #61): os
 * headings "Vídeo" e "Galeria" de `/eventos/{slug}` (`eventos/show.blade.php`)
 * são condicionais (`@if`) e nenhuma das 3 amostras do Golden Master
 * usadas no DVPN-25/82 tinha `videoUrl`/galeria populados — não há
 * medição ao vivo DIRETA de como produção renderiza especificamente
 * esses dois. A suposição de que usam o mesmo valor dos demais h3 do
 * mesmo arquivo/estrutura (`<section class="section">`) é razoável, mas
 * não é "confirmado ao vivo" no mesmo sentido dos outros casos listados
 * acima — sinalizando a diferença de confiança em vez de igualar. */
.section h2, .section h3 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 100%;
}

p {
    margin: 0 0 16px;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.site-header .logo {
    display: inline-flex;
    text-decoration: none;
    color: #212236;
}

/* Achado do Fábio (Telegram, 21/08/2026): logo pequeno demais — confirmado
 * ao vivo contra produção, o link/imagem renderiza a 185x77px (não 28px de
 * altura). Ajustado pra bater com o tamanho real observado.
 *
 * Achado do Chun-Li (PR #34): 185x77 (~2.4:1) não bate com o viewBox real
 * de Logo.svg (0 0 435 174, ~2.5:1) — `height:77px;width:auto` deixaria o
 * navegador calcular a largura pela proporção intrínseca do SVG (~192.5px),
 * width diferente do valor 185px medido ao vivo em produção. Fixando os
 * dois eixos (width E height, não só height+auto) pra bater exatamente com
 * a caixa real medida via getBoundingClientRect() em produção, sem
 * depender de como o navegador infere proporção intrínseca vs. atributo. */
.logo__mark {
    width: 185px;
    height: 77px;
    display: block;
}

.main-nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.main-nav a {
    text-decoration: none;
    color: #6F718D;
}

.main-nav a:hover {
    text-decoration: underline;
}

/*
 * DVPN-117 — botão hambúrguer do header mobile. Escondido em desktop (a nav
 * já cabe inline); produção mostra só logo+ícone abaixo do breakpoint mobile
 * do resto do arquivo (`720px`, já usado nas outras media queries deste
 * CSS — screenshot real do Fábio comparado a devpira.com.br confirmou o
 * padrão logo+hambúrguer, não um valor específico de largura de produção,
 * então reusar o breakpoint já estabelecido em vez de inventar um novo).
 */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: #212236;
}

/* A regra do breakpoint mobile do toggle (`.nav-toggle`/`.main-nav`
 * definidos acima) fica dentro do primeiro bloco `@media` mobile já
 * existente no arquivo (perto de `.hero h1`, ~linha 830), não aqui perto
 * da declaração base — achado do Chun-Li (revisão independente,
 * 05/09/2026): mais de um teste em `PublicSiteRoutesTest`/
 * `PublicVacancyRoutesTest` faz busca de texto sem escopo real em
 * `site.css` (primeira ocorrência da condição de breakpoint mobile, ou
 * "não aparece de novo depois de tal seletor") — criar uma ocorrência
 * nova em qualquer outro ponto do arquivo já quebrou 2 desses testes em
 * tentativas anteriores deste card. */

/* DVPN-98 (achado da Cammy, 21/08/2026) — rodapé sem o logo que o header já
 * usa. Mesmo padrão de layout do `.site-header` (flex, logo + nav lado a
 * lado, quebra em telas estreitas), reutilizando as classes `.logo`/
 * `.logo__mark` já existentes em vez de duplicar tamanho/cor num novo
 * seletor. */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 32px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer .logo {
    display: inline-flex;
    text-decoration: none;
    color: #212236;
}

main {
    overflow-x: hidden;
}

.section, .section-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
}

.section--dark {
    background: #212236;
    color: #fff;
    max-width: 100%;
    padding: 48px 24px;
}

.section--dark h2 {
    color: #fff;
}

.section--highlight {
    /* DVPN-110 — o achado DVPN-38 (21/08/2026) usou comparação de
     * screenshot pra concluir que era o gradiente ciano/menta do hero
     * (`--brand-gradient`); medição ao vivo (`getComputedStyle`, Cammy
     * 04/09/2026 + reconfirmado pelo orquestrador na mesma sessão) contra
     * produção (`www.devpira.com.br`, `.MuiBox-root css-15mmmua`) mostra
     * que é uma cor SÓLIDA, `rgb(0, 244, 171)` — sem `background-image`.
     * O achado do DVPN-38 parece ter sido um falso-positivo de leitura de
     * screenshot (mesma categoria de erro documentada no DVPN-102). */
    background: rgb(0, 244, 171);
    color: #212236;
    max-width: 100%;
    padding: 48px 24px;
}

.hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* DVPN-34 — ilustração real do hero (`/images/Intro.svg`), baixada de
 * produção (www.devpira.com.br); ausente na reconstrução funcional inicial
 * do layout (DVPN-25/28). Ver docs/discovery pra achados de asset. */
/* DVPN-105 (achado Cammy, 04/09/2026) — investigação real via DOM ao vivo
 * de produção (não suposição): o <img> do hero em produção tem
 * computedStyle width:544px explícito (não é um container mais largo
 * espremendo um width:100%; é o próprio elemento com width fixo maior).
 * 420px aqui era outro placeholder de medição da reconstrução inicial
 * (DVPN-34), não o valor real. */
.hero__illustration {
    max-width: 100%;
    width: 544px;
    height: auto;
    flex: 0 1 auto;
}

/* DVPN-104 (achado Cammy, 04/09/2026) — h1 real de produção (classe
 * css-h411c7) é font-size:4.25rem (68px) desktop com line-height:68px
 * (proporção 1:1, não o line-height:1.15 herdado da regra genérica
 * h1-h5), confirmado via getComputedStyle contra produção real. O valor
 * anterior aqui (3rem/48px, sem override de line-height) era um
 * placeholder da reconstrução funcional inicial (DVPN-25), não uma
 * medição real. O comentário do DVPN-96 acima já sinalizava esse gap sem
 * corrigi-lo (fora do escopo daquele card) — este é o fix. */
.hero h1 {
    font-size: 4.25rem;
    line-height: 68px;
}

/* Achado DVPN-35 (comparação Golden Master OLD x NEW): o container externo
 * já batia (max-width:1200px em ambos, confirmado via grep no HTML real de
 * produção) — o gap real era a coluna de texto do hero sem largura máxima,
 * deixando as linhas mais longas que em produção. Produção usa 546px
 * (classe MUI .css-lp5kvf, flex column, mesma estrutura de h1+p+cta-group). */
.hero__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 546px;
    flex: 1 1 420px;
}

/* DVPN-34 — seção "Sobre o DEVPIRA": ilustração real (`/images/About.svg`,
 * baixada de produção) à esquerda do texto, layout equivalente ao Golden
 * Master OLD (`parity-tests/fixtures/html-snapshots/home.OLD.html`). */
.section--sobre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

/* DVPN-105 (achado Cammy, 04/09/2026) — investigação real via DOM ao vivo
 * de produção: `.sobre__illustration` (About.svg, "troca de mensagens") e
 * `.iniciativas__illustration` (Initiatives.png, colagem de iniciativas)
 * ficam no MESMO MuiGrid-item (classe idêntica `MuiGrid-grid-md-6
 * css-iol86l`) das duas seções de duas-colunas de produção, e ambos os
 * <img> têm computedStyle width:451px explícito — é a causa raiz
 * compartilhada que a Cammy suspeitava, agora confirmada (não é um
 * container mais estreito espremendo width:100%, é o mesmo width fixo
 * usado nos dois). Unificado numa única regra em vez de duplicar o
 * mesmo valor duas vezes. O hero (`.hero__illustration` acima) NÃO faz
 * parte deste grupo — é uma seção estruturalmente diferente (flex row
 * de topo, não uma `.section` de duas colunas) e produção confirma um
 * width diferente pra ele (544px, já corrigido acima). 340px aqui era
 * placeholder da reconstrução inicial (DVPN-34/93), não medição real. */
.sobre__illustration,
.iniciativas__illustration {
    max-width: 100%;
    width: 451px;
    height: auto;
    flex: 0 1 auto;
}

.sobre__text {
    flex: 1 1 420px;
    max-width: 560px;
}

.sobre__text h2, .sobre__text p {
    margin-bottom: 16px;
}

.sobre__text p:last-child {
    margin-bottom: 0;
}

/* Achado do Fábio (Telegram, 21/08/2026) — mesmo padrão de duas colunas do
 * .section--sobre acima, mas com a ordem invertida (texto primeiro, depois
 * ilustração), igual à ordem real de produção pra este bloco. */
.section--iniciativas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.iniciativas__text {
    flex: 1 1 420px;
    max-width: 560px;
}

.iniciativas__text h2, .iniciativas__text p {
    margin-bottom: 16px;
}

.iniciativas__text p:last-child {
    margin-bottom: 0;
}

/* DVPN-105 — `.iniciativas__illustration` foi unificada com
 * `.sobre__illustration` acima (width:451px compartilhado, mesma causa
 * raiz); a declaração fica lá, não duplicada aqui. */

/* DVPN-93 (achado da Cammy, 21/08/2026) — seção "Eventos" da home sem a
 * coluna de ilustração (`/images/Events.png`, baixada de produção). Golden
 * Master real (`home.OLD.html`) confirma a imagem como primeiro grid item
 * (md-6, antes do texto) — mesmo padrão de duas colunas já usado em
 * `.section--sobre`/`.section--iniciativas`, mas sem inverter a ordem (a
 * imagem já vem primeiro no DOM de produção, igual ao `.section--sobre`). */
.eventos__columns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.eventos__illustration {
    max-width: 100%;
    width: 564px;
    height: auto;
    flex: 0 1 auto;
}

.eventos__text {
    flex: 1 1 420px;
    max-width: 560px;
}

.eventos__text h2, .eventos__text p {
    margin-bottom: 16px;
}

.eventos__text p:last-child {
    margin-bottom: 0;
}

/* DVPN-95 (achado da Cammy, 21/08/2026) — seção "Vagas de emprego" da home
 * sem a ilustração (`/images/JobsHeader/Fly.svg`, baixada de produção).
 * Golden Master real (`home.OLD.html`) confirma o texto como primeiro grid
 * item (md-6), seguido da ilustração — mesma ordem de `.section--iniciativas`
 * (texto primeiro), diferente de `.section--sobre`/`.section--dark`
 * (Eventos, imagem primeiro). */
.section--vagas {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 48px;
    flex-wrap: wrap;
}

/* DVPN-179 — achado do Fábio comparando devpira.com.br (legado) x STG lado
 * a lado: com `justify-content: center` (valor original desta regra, igual
 * a `.section--sobre`/`.section--iniciativas`/`.eventos__columns`/
 * `.section--social`), o conteúdo desta seção (texto 560px + gap 48px +
 * ilustração 451px = 1059px) não preenche os 1152px úteis do container —
 * a sobra de 93px é repartida igualmente pros dois lados pelo `center`,
 * empurrando o texto ~46,5px pra direita. Medido ao vivo
 * (getBoundingClientRect nas duas páginas) que o legado renderiza esta
 * seção flush-left, sem essa centralização — daí `flex-start` aqui.
 * NÃO REPLICAR esta mudança nas outras 4 seções sem medir cada uma contra
 * o Golden Master do legado primeiro — elas têm conteúdo mais largo, que
 * pode preencher o container por completo (sobra ~0, sem efeito visível
 * do `center`) ou pode ter o próprio Golden Master realmente centralizado;
 * não dá pra assumir que é o mesmo bug só porque é a mesma propriedade. */

.vagas__text {
    flex: 1 1 420px;
    max-width: 560px;
}

.vagas__text h2, .vagas__text p {
    margin-bottom: 16px;
}

.vagas__text p:last-child {
    margin-bottom: 0;
}

.vagas__illustration {
    max-width: 100%;
    /* DVPN-102: reproduz a área 451 x 397 do wrapper da produção. */
    width: 451px;
    aspect-ratio: 451 / 397;
    height: auto;
    flex: 0 1 auto;
}

/* Achado do Fábio (Telegram, 21/08/2026) — .section--highlight já cuidava da
 * cor de fundo; aqui só o layout de duas colunas (texto+links à esquerda,
 * ilustração à direita), mesmo padrão de .section--sobre/.section--iniciativas. */
.section--social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.social__text {
    flex: 1 1 420px;
    max-width: 560px;
}

/* DVPN-107 (achado Cammy, 04/09/2026) — produção renderiza Social.svg no
 * seu tamanho natural (359x332, sem constraint de largura), confirmado
 * via naturalWidth/Height idênticos ao asset servido em STG (mesmo
 * arquivo). 260px era width menor que o natural, não medição real. */
.social__illustration {
    max-width: 100%;
    width: 359px;
    height: auto;
    flex: 0 1 auto;
}

/* Achado da revisão de código: `gap: 24px` acima já espaça h1/p/.cta-group
 * — as margens default desses elementos (h1/p margin-bottom:16px,
 * .cta-group margin-top:16px) se somavam ao gap em vez de serem
 * substituídas por ele (flexbox não colapsa gap com margin), dobrando o
 * espaçamento real (40px/56px em vez dos 24px pretendidos). Zera as
 * margens só dentro do hero, onde o gap já faz esse trabalho. */
.hero__text > * {
    margin: 0;
}

.hero .highlight {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cta-group {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    border: 1px solid rgba(33, 34, 54, .3);
    cursor: pointer;
}

.button--primary {
    background: #212236;
    color: #fff;
}

.button--secondary {
    background: #fff;
    color: #212236;
}

.button--outline {
    background: transparent;
    border-color: #fff;
    color: inherit;
}

.event-grid, .gallery-grid, .partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/*
 * DVPN-109 — produção tem container de 1200px com padding lateral de
 * 24px e gutters de 30px entre os cards. As colunas MUI incluem esse
 * gutter: em 1440px medem 295.5px, mas o card visível mede 265.5px.
 * O grid abaixo reproduz a geometria visível sem wrappers de padding.
 * A fileira desktop começa em 900px; abaixo preservamos o grid existente.
 */
@media (min-width: 900px) {
    .section--dark > .event-grid {
        max-width: 1152px;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 30px;
    }
}

/*
 * DVPN-77 (achado da Cammy, 20/08/2026) — `.event-card` é item de um grid
 * (`.event-grid`, `align-items` default `stretch`), mas sem `height:100%`
 * explícito e sem o corpo crescendo pra preencher o espaço sobrando na
 * coluna flex, o card só ficava tão alto quanto o próprio conteúdo — o
 * botão "Mais" colava direto embaixo da descrição em vez de ficar ancorado
 * no rodapé do card como em produção (Card MUI que estica pra preencher a
 * linha do grid). `height:100%` no item + `.event-card__body` como
 * flex-item que cresce (`flex:1 1 auto`) e `margin-top:auto` no botão
 * ancoram o CTA no rodapé — sem `justify-content:space-between` no corpo
 * inteiro, que espalharia espaço também entre título/descrição/data e
 * mudaria a leitura do card (redesenho não pedido). Sem mexer em
 * paleta/borda/tipografia.
 */
/*
 * DVPN-94 (achado da Cammy, 21/08/2026) — cor errada: era fundo branco com
 * texto navy, produção real é fundo escuro `rgb(43, 44, 62)` (~#2b2c3e) com
 * texto branco (confirmado no Golden Master real, `home.OLD.html`, regra
 * `.css-rfj3r4`: `background:#2B2C3E`, sem `border`; título/descrição/data
 * `.css-1awbiz`/`.css-163o32j`/`.css-jytpbi`, todos `color:#fff`). A borda
 * cinza clara (`#e2e2e8`, pensada pra um card branco) foi removida junto —
 * ficaria incorretamente visível contra o fundo escuro e produção não tem
 * nenhuma borda nesse card; mesma investigação/evidência do achado
 * principal, não um ajuste separado sem base.
 */
.event-card {
    border-radius: 8px;
    overflow: hidden;
    background: rgb(43, 44, 62);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.event-card__banner {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.event-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
}

.event-card__body > .button {
    margin-top: auto;
}

/* DVPN-106 (achado Cammy, 04/09/2026) — produção real (`.css-1awbiz`)
 * usa font-size:20px/line-height:32px pro título do card, confirmado via
 * getComputedStyle. Raiz zero (`body`) não tem nenhuma redefinição de
 * font-size (confirmado via grep neste arquivo), então 1rem = 16px real
 * do browser: 1.25rem = 20px, 2rem = 32px — bate exatamente com produção
 * sem precisar de conversão diferente. Verificado ao vivo que /eventos
 * (variante `.event-card--listing`, DVPN-99) usa a MESMA tipografia de
 * título em produção (`.css-1e9xpr8`, também 20px/32px) — não precisa de
 * override próprio pra essa variante, o fix aqui cobre as duas. */
.event-card__title {
    font-size: 1.25rem;
    line-height: 2rem;
    margin: 0;
}

/* DVPN-94 — mesmo achado do card acima: descrição/data também são
 * `color:#fff` em produção real (`.css-163o32j`/`.css-jytpbi`), não o
 * cinza `#6f718d` (pensado pro fundo branco anterior); herdam de
 * `.event-card` mas essa regra sobrescrevia com o cinza. */
.event-card__description, .event-card__date {
    margin: 0;
    font-size: .9rem;
    color: #fff;
}

/* DVPN-99 — /eventos has the white listing card from the production visual
 * context. Keep this variant explicit because the same partial is used by
 * the home, whose dark #2B2C3E card is a separate preserved context. */
.event-card--listing {
    border-radius: 10px;
    background: #fff;
    color: #212236;
    box-shadow: 0 4px 24px rgba(30, 144, 255, .14);
}

.event-card--listing .event-card__banner {
    height: 159px;
}

.event-card--listing .event-card__description,
.event-card--listing .event-card__date {
    color: #212236;
}

.event-card--listing .button--primary {
    background: transparent;
    border: 1px solid #212236;
    color: #212236;
}

.social-links {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/*
 * DVPN-97 (achado da Cammy, 21/08/2026) — o texto literal do nome de cada
 * rede ("Discord ", "Facebook " etc.) antes do `<span>` do handle foi
 * removido de `partials/social-links.blade.php` (produção só mostra o
 * @handle, sem o nome da rede — confirmado no Golden Master real,
 * `home.OLD.html`: entre o ícone e "/DEVPIRA" não há texto de nome de
 * rede nenhum). `text-transform:lowercase` abaixo replica a mesma regra
 * MUI real (`.css-xu9g1m`: `text-transform:uppercase` sobrescrita por
 * `text-transform:lowercase` mais específica/tardia) — produção renderiza
 * "/devpira" em minúsculas visualmente, apesar do texto no DOM ser
 * "/DEVPIRA" (maiúsculas); o efeito é só de apresentação (CSS), não uma
 * mudança do dado em si.
 */
.social-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(33, 34, 54, .3);
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    color: #212236;
    text-transform: lowercase;
}

.social-links__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
}

/* DVPN-115 — hero de `/eventos/{slug}` usava a imagem do banner do
 * evento como fundo em tela cheia (`.event-hero__banner`). Medido ao
 * vivo em 2 eventos diferentes (global-azure, devpira-festival-2024):
 * produção NÃO mostra imagem nenhuma aqui, é sempre o MESMO gradiente
 * fixo (não varia por evento) — `linear-gradient(85.31deg, #c3defa 0%,
 * #04ffb4 75.32%)`. Parte REIMPLEMENT do achado (fundo) aplicada aqui;
 * a parte RETIRE_REQUIRES_HUMAN_APPROVAL (se/onde o campo `banner`
 * deveria aparecer em algum outro ponto da página individual) segue em
 * aberto no card — não decidida silenciosamente, só ocultada deste
 * ponto específico onde produção comprovadamente não a usa. */
.event-hero {
    position: relative;
    background: linear-gradient(85.31deg, #c3defa 0%, #04ffb4 75.32%);
}

.event-hero__banner {
    display: none;
}

.breadcrumb {
    color: #6f718d;
    margin-bottom: 8px;
}

.event-detail {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
}

.event-detail__field {
    margin-bottom: 24px;
}

.event-detail__field h4 {
    color: #ff2d78;
    font-size: 1rem;
    margin-bottom: 4px;
}

.track {
    margin-bottom: 32px;
}

/*
 * DVPN-76 (achado da Cammy, 20/08/2026) — `.talk-card` reconstrói
 * (funcionalmente, não pixel-a-pixel — mesmo critério já usado em
 * `.member-card`) o card com foto de fundo real do palestrante + overlay
 * gradiente + badge de horário + título/nome/cargo sobrepostos, confirmado
 * byte a byte no Golden Master real
 * (`parity-tests/fixtures/html-snapshots/evento-festival2025.OLD.html`,
 * regras `.css-1vo0elz` background:white url(...) center/cover,
 * `.css-56bchw` overlay `linear-gradient(180.06deg, rgba(33,34,54,.15)
 * .05%, #212236 74.97%)` height 362px width 254px, `.css-sfzzo7`/
 * `.css-vw6pw3` badge de horário e `.css-173yoy4` corpo com gap 8px). Sem
 * `speakerPortrait`, a view cai no mesmo placeholder local genérico já
 * usado por `.member-card` (`/images/member-placeholder.svg`) — nunca uma
 * URL externa quebrada, nunca um card sem imagem de fundo.
 */
.talk-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    margin-top: 16px;
}

.talk-card {
    position: relative;
    width: 254px;
    height: 362px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #3a3b57;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* DVPN-89 — o fallback SVG precisa caber inteiro no card; retratos reais
 * continuam preenchendo a área com `cover`, definido em `.talk-card`. */
.talk-card--placeholder {
    background-color: #3a3b57;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.talk-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180.06deg, rgba(33, 34, 54, .15) .05%, #212236 74.97%);
}

.talk-card__time-row {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 16px;
}

.talk-card__time {
    background-color: #fff;
    color: #000;
    padding: 5px;
    border-radius: 10px;
    font-weight: 700;
}

.talk-card__body {
    position: relative;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.talk-card__title {
    margin: 0;
    font-size: 1.1rem;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.talk-card__speaker {
    margin: 0;
    font-size: 1rem;
    color: #fff;
}

.talk-card__job {
    margin: 0;
    font-size: .9rem;
    color: #fff;
}

.partner-category {
    margin-bottom: 24px;
}

.partner-grid img {
    max-width: 100%;
    max-height: 80px;
}

.event-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

@media (max-width: 720px) {
    .event-detail {
        grid-template-columns: 1fr;
    }

    /* DVPN-108 — discovery do DVPN-104 resolvido: medição ao vivo contra
     * produção (`www.devpira.com.br`, viewport 390px, classe MUI real
     * `css-h411c7`) confirma `font-size: 3.5rem` (56px) / `line-height: 56px`
     * (razão 1:1, mesmo padrão do desktop) — o comentário do DVPN-96 estava
     * correto, o valor `2.25rem`/`line-height:1.15` que o DVPN-104 preservou
     * aqui (só pra não vazar o line-height fixo do desktop) na verdade
     * NUNCA bateu com produção; ninguém tinha medido mobile ao vivo até
     * agora. */
    .hero h1 {
        font-size: 3.5rem;
        line-height: 56px;
    }

    /* CORREÇÃO (DVPN-134, 05/09/2026, decisão do Fábio: "replicar
     * produção") — medição ao vivo (`www.devpira.com.br`, viewport
     * 390px) mostra que o `<span>` destacado ("conecta pessoas") dentro
     * do h1 renderiza `font-size:68px; line-height:68px`, MAIOR que os
     * 56px do resto do h1 na MESMA produção — provável bug de produção
     * (o componente de destaque não recebeu o mesmo breakpoint
     * responsivo que o h1 pai, ficando travado no valor desktop). Fábio
     * decidiu replicar esse comportamento real em vez de manter os 56px
     * consistentes que o STG tinha antes. */
    .hero .highlight {
        font-size: 68px;
        line-height: 68px;
    }

    /* DVPN-102 — produção também exibe Fly.svg no mobile. A ilustração
     * de Vagas herda a regra base e empilha abaixo do texto. Medições e
     * diferenças de dimensões: docs/evidence/2026-09-05-dvpn-102/README.md. */
    .vagas__illustration {
        max-width: calc(100% - 16px);
    }

    /* DVPN-93 — produção serve Events.png a 326x222 em mobile (vs. 564x404
     * desktop); mesma imagem (não há um segundo asset), só reduzida. */
    .eventos__illustration {
        width: 326px;
    }

    /*
     * DVPN-117 — colapso do header mobile (botão hambúrguer). Regras
     * adicionadas DENTRO deste bloco mobile já existente, de propósito, em
     * vez de abrir uma nova ocorrência da mesma condição de breakpoint em
     * outro ponto do arquivo (achado do Ken numa rodada anterior deste
     * mesmo card, revisão independente, 05/09/2026): mais de um teste
     * neste arquivo faz busca de texto sem escopo real em `site.css` — um
     * a partir da PRIMEIRA vez que essa condição de breakpoint aparece
     * (`hero_h1_uses_the_68px_font_size_and_line_height_confirmed_by_dvpn_104`),
     * outro verificando que essa mesma condição NÃO aparece em nenhum
     * ponto depois de `.section-hero--vagas-listing`
     * (`PublicVacancyRoutesTest::vagas_hero_preserves_desktop_illustration...`).
     * Criar uma ocorrência nova em QUALQUER outro lugar do arquivo corre o
     * risco de quebrar um dos dois (já quebrou os dois, em tentativas
     * anteriores). Adicionar as regras dentro de um bloco que já existe
     * não muda a contagem/posição de ocorrências da condição em si — só
     * acrescenta seletores novos dentro de uma chave que já estava lá.
     */
    .site-header {
        position: relative;
    }

    .nav-toggle {
        display: flex;
    }

    /* A nav some por padrão e vira um painel dropdown abaixo do header
     * quando `.is-open` é ligado pelo JS (public/js/site.js). `position:
     * absolute` relativo ao `.site-header` (position:relative acima) pra
     * não empurrar o `<main>` quando fechada. */
    .site-header .main-nav {
        display: none;
    }

    /* CORREÇÃO (DVPN-133, 05/09/2026, achado da Cammy + decisão do Fábio:
     * "replicar produção") — o painel original aqui era full-width
     * (`left:0; right:0`), ocupando a tela toda abaixo do header. Medição
     * ao vivo contra produção (clique real no botão hambúrguer, viewport
     * 390px) mostrou um dropdown compacto ancorado ao BOTÃO (MUI Menu),
     * não um painel full-width: `right` do menu = `right` do botão
     * (mesmo valor do `padding-right:24px` do `.site-header`, linha 96),
     * `top` = base do botão (bate com `top:100%` já existente, sem
     * mudança). `border-radius:4px` e a sombra de elevação 8 do MUI
     * (`0 5px 5px -3px / 0 8px 10px 1px / 0 3px 14px 2px`, rgba(0,0,0,
     * .2/.14/.12)) substituem a sombra genérica anterior. Largura vira
     * `auto` (conteúdo, não mais 100%), com `min-width` próximo do
     * medido (~102px) pra não ficar estreito demais com um só link
     * comprido. Borda entre links removida (produção não tem). */
    .site-header .main-nav.is-open {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 100%;
        left: auto;
        right: 24px;
        width: auto;
        min-width: 110px;
        background: #fff;
        border-radius: 4px;
        padding: 8px 0;
        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
        z-index: 10;
    }

    .site-header .main-nav.is-open a {
        padding: 6px 16px;
    }

    /*
     * DVPN-118 — rodapé mobile: produção empilha os 5 links em coluna
     * única (confirmado ao vivo via iframe same-origin em
     * www.devpira.com.br, ver comentário do Ryu no card + screenshot real
     * do Fábio "Rodapé da Golden Master"); `.main-nav` (compartilhada com
     * o header) é `flex-wrap:wrap`, que aqui produzia 2 colunas em vez de
     * 1. Escopado só a `.site-footer .main-nav` — não mexe no header
     * (DVPN-117, hambúrguer, escopo/card separado).
     *
     * DVPN-119 (achado do Chun-Li na revisão do DVPN-118) — o gap
     * original (24px, herdado de `.main-nav`) não batia com os 45px
     * medidos ao vivo entre os links empilhados em produção; `gap: 45px`
     * explícito aqui fecha esse gap de medição na mesma passada, em vez
     * de deixar pra uma rodada separada.
     *
     * CORREÇÃO (DVPN-132, 05/09/2026, decisão do Fábio: "replicar
     * produção") — o `gap:45px` acima batia com a distância topo-a-topo
     * MEDIDA em produção, mas o MECANISMO real de produção não é um gap
     * isolado: cada link tem `margin:12px 0` + `line-height:normal`
     * (~21px de conteúdo), sem gap nenhum no container. Aplicar "45px"
     * como gap puro numa caixa de link maior (a base global `body{
     * line-height:1.6}`, linha ~35, deixava o link em ~25,6px de altura,
     * não ~21px) produzia 71px topo-a-topo no candidato, não os 45px de
     * produção. `gap` removido daqui (volta a 0, sem valor = inerte);
     * espaçamento passa a vir inteiramente do `margin` do link abaixo,
     * igual produção. */
    .site-footer .main-nav {
        flex-direction: column;
    }

    .site-footer .main-nav a {
        margin: 12px 0;
        line-height: normal;
    }

    /* CORREÇÃO (DVPN-131, 05/09/2026, achado do Fábio — 2 screenshots reais
     * do celular dele comparando STG x produção, `.site-footer` continuava
     * de fora do escopo do DVPN-118/119). Aqueles cards corrigiram só o
     * `<nav>` DE DENTRO (virou coluna, gap 45px certo) mas nunca o
     * CONTAINER `.site-footer` em si, que herdava a regra base (linha 183,
     * `display:flex` em ROW, `justify-content:space-between`) pensada só
     * pro desktop (logo à esquerda, nav à direita). No mobile isso fazia
     * logo e nav virarem 2 itens lado a lado (`space-between` empurrando o
     * nav pra ponta direita), o logo centralizado verticalmente contra a
     * altura toda do nav — nunca uma coluna única como produção.
     *
     * Medição ao vivo confirmou produção (`www.devpira.com.br`, viewport
     * 390px, `getComputedStyle`/`getBoundingClientRect`): logo e nav são
     * uma ÚNICA coluna, ambos alinhados à esquerda (mesmo `x`), logo em
     * cima, nav embaixo, ~20px de gap entre o fim do logo e o início do
     * primeiro link. `align-items:flex-start` sobrescreve o `center` da
     * regra base (que centralizaria os itens horizontalmente numa coluna,
     * errado); `gap:20px` sobrescreve o `16px` da regra base pro valor
     * medido ao vivo. `justify-content`/`flex-wrap` da regra base ficam
     * inertes em coluna com 2 itens só, não precisam de override. */
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    /* CORREÇÃO (DVPN-135, 05/09/2026, achado do Fábio: "imagem do rodapé
     * (pessoa dentro do celular) tamanho errado e não encosta na parte de
     * baixo do retângulo") — medição ao vivo (iframe same-origin, viewport
     * 390px, www.devpira.com.br) confirma que o container verde
     * (`.section--highlight` real de produção) tem `padding:0` nesse
     * breakpoint — a ilustração ocupa a largura/altura toda até a borda,
     * sem sobra. `.section--highlight` aqui usa `padding:48px 24px`
     * (linha ~233) uniformemente em todo viewport (sem override mobile
     * até agora) — os 48px de padding-bottom são exatamente o gap medido
     * (48px) entre o fim da ilustração e o fim do retângulo no STG.
     *
     * Em vez de zerar o padding da seção inteira (afetaria o espaçamento
     * do texto acima também, não medido/não pedido), aplica margin-bottom
     * negativo só na ilustração, do mesmo valor do padding-bottom da
     * seção — puxa a imagem pra fora do padding, mantendo o texto
     * intocado. Técnica padrão de "sangria" de imagem dentro de um
     * container com padding. */
    .social__illustration {
        margin-bottom: -48px;
    }

    /* CORREÇÃO (DVPN-136, 05/09/2026, achado do Fábio: screenshot real do
     * celular mostrando os botões de rede social soltos/estreitos dentro
     * do container). `.social-links` (base, linha ~638) é `display:flex;
     * flex-wrap:wrap` sem largura fixa nos itens — no mobile isso deixa o
     * navegador decidir quantos botões cabem por linha (2, no caso),
     * dando o efeito de "grid solto". Medição ao vivo (iframe same-origin,
     * viewport 390px, www.devpira.com.br) confirma produção: lista em
     * coluna única (`flex-direction:column; gap:24px`), cada botão
     * ocupando a largura cheia do container, conteúdo centralizado
     * (`justify-content:center`), SEM borda (só fundo branco + padding
     * 6px 16px — a borda de 1px que a regra base usa aqui não existe em
     * produção neste viewport mobile — desktop não reconferido, por isso o override fica escopado aqui dentro do media query, não na regra base. */
    .social-links {
        flex-direction: column;
        gap: 24px;
    }

    .social-links a {
        width: 100%;
        justify-content: center;
        padding: 6px 16px;
        border: none;
    }
}


/*
 * DVPN-27 — `/contato`.
 */
.contact-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}

.contact-hero__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 546px;
}

.contact-hero__text > * {
    margin: 0;
}

/* DVPN-114 — font-size já batia com produção (3rem/48px); só o
 * line-height divergia (herdava 1.15 do fallback genérico h1-h5, 55.2px)
 * em vez da razão 1:1 real (48px), medida ao vivo em desktop e mobile. */
.contact-hero__title {
    font-size: 3rem;
    line-height: 48px;
}

.contact-hero__highlight {
    display: block;
    font-size: 4rem;
    letter-spacing: -0.045em;
    background: var(--brand-gradient-alt);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.contact-hero__email {
    font-weight: 700;
    text-decoration: none;
    background: var(--brand-gradient-alt);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.contact-hero__icon {
    display: flex;
    justify-content: center;
}

.contact-hero__icon img {
    width: 160px;
    height: 160px;
    max-width: 100%;
}

/*
 * `.member-card` reconstrói (funcionalmente, não pixel-a-pixel — mesmo
 * critério já usado no resto deste arquivo) o cartão escuro com foto de
 * fundo + overlay gradiente + nome/cargo/botão observado no Golden Master
 * real (`.css-q4mxcs`: `linear-gradient(180.06deg, rgba(33,34,54,.15)
 * .05%, #212236 74.97%)`). Nome usa o mesmo gradiente ciano->azul já usado
 * em `.hero .highlight` (`--brand-gradient`).
 */
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 24px;
}

.member-card {
    position: relative;
    height: 360px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #3a3b57;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/*
 * DVPN-81 (achado de baixa confiança da Cammy, 20/08/2026, confirmado pelo
 * Fábio via Telegram em 21/08/2026) — `background-size:cover` é correto pra
 * foto real (preenche o card recortando), mas esticava/cortava de forma
 * estranha o ícone SVG simples do placeholder genérico
 * (`/images/member-placeholder.svg`, usado quando o membro não tem foto).
 * `.member-card--placeholder` (ver contato/index.blade.php) restringe o
 * ajuste só a esse caso: `contain` sem repetir, centralizado, com a mesma
 * `background-color` do card preenchendo a área ao redor (sem "bordas"
 * visíveis). Fotos reais continuam com `cover` — não alterado.
 */
.member-card--placeholder {
    background-size: contain;
    background-repeat: no-repeat;
}

.member-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180.06deg, rgba(33, 34, 54, .15) .05%, #212236 74.97%);
}

.member-card__body {
    position: relative;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-card__name {
    margin: 0;
    font-size: 1.1rem;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.member-card__job {
    margin: 0;
    font-size: .9rem;
    color: #fff;
}

.member-card .button--outline {
    align-self: flex-start;
}

@media (max-width: 720px) {
    .contact-hero {
        grid-template-columns: 1fr;
    }

    .contact-hero__icon {
        order: -1;
    }

    /* DVPN-146 (achado do Fábio, 07/09/2026, foto de /contato em PRD
     * mobile) — sem este override, "comunidade" (4rem/64px fixo) cortava
     * a palavra pra fora da tela. Medido ao vivo em produção mobile
     * (390px, iframe same-origin): 60px/60px cabe exatamente nos 339px de
     * largura do container, confirmado 2x. */
    .contact-hero__highlight {
        font-size: 60px;
        line-height: 60px;
    }
}

/*
 * DVPN-26 — `/vagas`, `/vagas/nova`. Gradiente do hero e do nome da empresa
 * confirmados byte a byte no CSS-in-JS do Golden Master real
 * (`parity-tests/fixtures/html-snapshots/vagas.OLD.html`, regras
 * `.css-5h6s6w` e `.css-1smzhv5`) — não são cores inventadas.
 */
/* DVPN-34 — banner de `/eventos` (faixa navy + ilustração de foguete).
 * Cor de fundo (#3f4052) e gradiente do texto em destaque (#e63462 ->
 * #1e90ff, 233.62deg) confirmados byte a byte no CSS-in-JS do Golden
 * Master real (`.css-hxtyfq`/`.css-cnk2s6` em
 * `parity-tests/fixtures/html-snapshots/eventos.OLD.html`). Ilustrações
 * (`Background.svg`, `Rocket.svg`) baixadas de produção. */
.section-hero--eventos {
    background: #3f4052;
    color: #fff;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 320px;
    padding-top: 56px;
    padding-bottom: 56px;
}

/* DVPN-112 — produção mantém min-height:320px no mobile (sem gap ali,
 * medido ao vivo), mas cresce pra 560px no desktop; aqui o hero ficava
 * travado em 320px nas duas faixas, subdimensionando a ilustração do
 * foguete (`background-size:contain` do .section-hero__illustration). */
@media (min-width: 721px) {
    .section-hero--eventos {
        min-height: 560px;
    }
}

/* DVPN-111 — h1 de `/eventos` não tinha font-size/line-height próprios,
 * caía no fallback genérico h1-h5 (32px/1.15). Valores medidos ao vivo
 * contra produção (`MuiTypography-h1`): 68px/68px desktop, 56px/56px
 * mobile — diferentes dos valores do `.hero h1` da Home (DVPN-104,
 * 4.25rem/68px desktop mas 2.25rem/36px mobile), por isso um seletor
 * próprio em vez de reaproveitar `.hero h1`. */
.section-hero--eventos h1 {
    color: #fff;
    position: relative;
    z-index: 1;
    font-size: 4.25rem;
    line-height: 68px;
}

.section-hero__accent {
    background: linear-gradient(233.62deg, #e63462 17.62%, #1e90ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-hero__illustration {
    position: absolute;
    right: -40px;
    top: 0;
    bottom: 0;
    width: 46%;
    min-width: 320px;
    background-image: url('/images/EventHeader/Background.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
}

/* CORREÇÃO (DVPN-137, 05/09/2026, achado do Fábio: "ilustração do foguete
 * totalmente diferente entre os 2 ambientes") — mesmo arquivo SVG nos
 * dois ambientes (`Rocket.svg`/`Background.svg`, confirmado por URL), o
 * problema é proporção do container. Antes, `inset:0` fazia o foguete
 * preencher 100% da caixa de `.section-hero__illustration` (seu pai
 * posicionado, já que os dois têm o mesmo retângulo medido). Medição ao
 * vivo (`www.devpira.com.br/eventos`, desktop): container do fundo
 * 740x560px, container do foguete 625x560px — o foguete ocupa só ~84,5%
 * da largura do fundo, não 100%. `width:84.5%` + `right:0` (mesma âncora
 * `background-position:center right` de antes) reproduz essa proporção,
 * mantendo a altura cheia (`top:0; bottom:0`). Não verificado em mobile
 * (elemento já é `display:none` abaixo de 720px, ver bloco mobile
 * abaixo — não afetado por esta mudança). */
.section-hero__illustration-rocket {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 84.5%;
    background-image: url('/images/EventHeader/Rocket.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
}

@media (max-width: 720px) {
    .section-hero__illustration {
        display: none;
    }

    /* DVPN-111 — valor mobile do h1, medido ao vivo contra produção
     * (3.5rem/56px, MuiTypography-h1 em viewport 390px). */
    .section-hero--eventos h1 {
        font-size: 3.5rem;
        line-height: 56px;
    }
}

.section-hero--vagas {
    background: linear-gradient(45deg, #e63462, #1e90ff);
    color: #fff;
    max-width: 100%;
}

.section-hero--vagas h1,
.section-hero--vagas p {
    color: #fff;
}

/* DVPN-113 — h1 de /vagas e /vagas/nova (mesmo seletor, mesmo hero
 * compartilhado) não tinha font-size/line-height próprios, caía no
 * fallback genérico h1-h5 (32px/1.15). Produção usa 48px/48px (razão
 * 1:1) em desktop E mobile — sem variação por breakpoint, diferente do
 * hero de /eventos (DVPN-111). */
.section-hero--vagas h1 {
    font-size: 3rem;
    line-height: 48px;
}

/* DVPN-100 — estrutura de duas colunas + ilustração Fly.svg.
 * CORREÇÃO (DVPN-144, 06/09/2026): este comentário afirmava que era
 * "layout exclusivo da listagem /vagas" — premissa incorreta, medição
 * ao vivo confirmou a mesma estrutura em produção também em
 * `/vagas/nova` (agora replicada lá, ver `vagas/nova.blade.php`). O
 * nome da classe (`--listing`) ficou historicamente impreciso, mas
 * renomear agora tem custo/risco maior que o benefício — não é mais
 * literalmente "só a listagem", e sim "hero de duas colunas do fluxo
 * de vagas". */
.section-hero--vagas-listing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.section-hero--vagas-listing .section-hero__content {
    /* DVPN-142 (achado da Cammy) — sem `align-items`, o valor default
     * `stretch` do flex-column fazia o botão "Enviar uma vaga" esticar a
     * 100% da largura do container em vez de encolher ao conteúdo (medido
     * ao vivo: 1425px desktop / 323px mobile, contra ~168px no Golden
     * Master). Mesmo padrão já corrigido em `.member-card .button--outline`
     * (ver abaixo). */
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
}

.section-hero--vagas-listing .section-hero__jobs-illustration {
    /* Golden Master: Fly.svg fica ausente visualmente abaixo de 600px e
     * aparece a partir do breakpoint sm (min-width: 600px). */
    display: none;
    flex: 0 1 400px;
    height: auto;
    max-width: 400px;
    width: 100%;
}

@media (min-width: 600px) {
    .section-hero--vagas-listing {
        flex-direction: row;
    }

    .section-hero--vagas-listing .section-hero__jobs-illustration {
        display: block;
    }
}

@media (max-width: 599px) {
    .section-hero--vagas-listing {
        flex-direction: column;
        align-items: stretch;
    }

    /* Golden Master mobile não renderiza Fly.svg; preserve esse comportamento
     * em vez de comprimir a ilustração desktop para dentro do hero. */
    .section-hero--vagas-listing .section-hero__jobs-illustration {
        display: none;
    }
}

.vacancy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/*
 * DVPN-77 (achado da Cammy, 20/08/2026) — confirmado byte a byte no Golden
 * Master real (`parity-tests/fixtures/html-snapshots/vagas.OLD.html`,
 * classe `.css-176ganr`): o card de vaga em produção é um único container
 * flex-column (`<h4>título</h4><p>descrição</p><h6>empresa?</h6><a><button>
 * .../a>` como filhos diretos, igual à nossa marcação em
 * `resources/views/partials/vacancy-card.blade.php`) com
 * `min-height:282px` e `justify-content:space-between` aplicado direto —
 * sem wrapper intermediário. Sem esses dois, o card só ficava tão alto
 * quanto o próprio conteúdo, colando o botão de inscrição direto embaixo da
 * empresa/descrição em vagas com texto curto. Mantemos `gap:8px` como piso
 * mínimo de respiro (não existe em produção, que deixa os elementos
 * encostados quando o conteúdo já preenche os 282px) — desvio deliberado e
 * documentado: evita textos colados quando a descrição é longa, sem mudar
 * paleta/borda/tipografia (reconstrução funcional, não pixel-a-pixel, mesmo
 * critério já usado no resto deste arquivo).
 */
/*
 * DVPN-101 (Cammy, 22/08/2026) — acabamento confirmado byte a byte no
 * Golden Master real (vagas.OLD.html, classe `.css-1ylsq9g` do container
 * MUI Paper e `.css-1vatgb`/`.css-vh3tej` do título/descrição): sem
 * border, border-radius:10px, box-shadow azul suave e tipografia
 * Inter/Roboto explícita (o stack global do body já começa com Inter,
 * mas a descrição precisa do family override pra garantir Roboto mesmo
 * se a ordem do stack mudar). Font-size do título na produção real está
 * sem unidade (`font-size:1.25`, bug de CSS-in-JS que o browser ignora,
 * herdando o tamanho do elemento pai) — REIMPLEMENT pro valor com
 * intenção clara (1.25rem), não o bug. Mesmo tipo de decisão já tomada
 * no DVPN-36 pro carregamento da fonte Inter. A descrição tem uma
 * declaração `font-size` duplicada na produção real (1rem depois
 * sobrescrito por 0.875rem no mesmo bloco CSS-in-JS — o valor que
 * realmente renderiza pro visitante é 0.875rem) — decisão humana do
 * Fábio (03/09/2026): usar 1rem (a intenção original, não a
 * sobrescrita acidental).
 */
/*
 * DVPN-86 (achado do Chun-Li, PR #30/DVPN-77; decisão do Fábio via
 * Telegram, 05/09/2026: corrigir via CSS) — `justify-content:
 * space-between` direto no card espalha TODOS os filhos diretos entre si,
 * não só ancora o último. `vacancy-card.blade.php` só renderiza o título
 * (h4) incondicionalmente; descrição/empresa/botão são cada um
 * independentemente `@if`. Uma vaga com só título+descrição (sem empresa
 * E sem link válido — caso alcançável pelo CRUD do admin, mesmo não
 * ocorrendo nos 15 dados reais herdados do Contentful) espalhava só 2
 * elementos pelos 282px de altura do card — gap grande, visualmente
 * estranho. Trade-off já registrado no card: isso se afasta do
 * byte-a-byte confirmado contra produção (`.css-176ganr` usa
 * space-between direto de verdade, sem wrapper isolando o espaçamento
 * como o `.event-card` irmão tem) — aceito conscientemente, prioriza
 * robustez contra o CRUD novo do admin sobre fidelidade literal a um
 * mecanismo que a curadoria do Contentful nunca exercitou.
 */
.vacancy-card {
    border-radius: 10px;
    background: #fff;
    color: #212236;
    padding: 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 282px;
    box-shadow: 0 4px 24px rgba(30, 144, 255, .14);
}

/* Ancora só o botão no rodapé (mesmo padrão já usado em
 * `.event-card__body > .button`), independente de quantos dos elementos
 * opcionais acima (descrição/empresa) estão presentes. */
.vacancy-card > .button--primary {
    margin-top: auto;
}

.vacancy-card__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    /* Sem este override, herda line-height:1.15 da regra genérica de heading
     * (h1-h5, linha ~39) em vez do line-height:100% real do Golden Master
     * (.css-1vatgb) — mesmo tipo de gap que o DVPN-96 já corrigiu pro h2 da
     * home. Achado do Chun-Li na revisão do DVPN-101 (03/09/2026). */
    line-height: 100%;
    margin: 0;
}

.vacancy-card__description {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 160%;
    color: #212236;
}

.vacancy-card__company {
    margin: 0;
    font-size: .85rem;
    background: linear-gradient(233.62deg, #1e90ff 17.62%, #e63462 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vacancy-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
    margin-top: 24px;
}

.vacancy-form label {
    font-weight: 600;
}

.vacancy-form input[type="text"] {
    padding: 12px 16px;
    border: 1px solid rgba(33, 34, 54, .3);
    border-radius: 4px;
    font: inherit;
    width: 100%;
}

.vacancy-form__location {
    border: 0;
    padding: 0;
    margin: 0;
}

.vacancy-form__location legend {
    font-weight: 600;
    padding: 0;
    margin-bottom: 8px;
}

.vacancy-form__location > div {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.vacancy-form__location label {
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.form-status {
    max-width: 1200px;
    margin: 16px auto 0;
    padding: 0 24px;
    color: #0a7a3f;
}

.form-errors {
    max-width: 1200px;
    margin: 16px auto 0;
    padding: 0 24px;
    color: #c0392b;
}