/*
 * Layout — 14º Simpósio ACOCCV
 * Apenas layout estrutural (grid, flexbox, containers, espaçamento entre
 * seções, responsividade). Nenhuma aparência visual de componente
 * (cor de fundo decorativa, tipografia de marca, sombra/hover, estados
 * visuais de card) — isso pertence à sessão futura do Creative Designer.
 *
 * Consome EXCLUSIVAMENTE as custom properties já definidas em
 * css/variables.css. Nenhuma variável nova é criada aqui.
 *
 * Estratégia responsiva: MOBILE-FIRST. Estilos base valem para mobile;
 * media queries usam min-width para telas maiores. Breakpoints em px
 * correspondem aos tokens --breakpoint-* de variables.css (custom
 * properties não são interpoladas dentro de @media, por isso os valores
 * numéricos são escritos diretamente, com o token comentado ao lado).
 */

/* ==========================================================================
   1. Reset mínimo estrutural
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

/* Reset de lista para TODO <ul>/<ol> do site, não só dentro de <nav> —
   bug real: os <ul> usados como grade de cards (Público-alvo, Patrocinadores,
   Apoiadora Oficial) mantinham os 40px de padding-left nativo do navegador
   por não estarem dentro de <nav>, deslocando os cards para a direita do
   texto acima deles mesmo com justify-content:start no grid (o padding
   do próprio <ul> é invisível nas ferramentas de grid, mas desloca todo o
   conteúdo interno igual). */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

/* ==========================================================================
   2. Container
   Única fonte de largura máxima por breakpoint (ver docs/arquitetura.md D8).
   ========================================================================== */

/*
 * Padding lateral por breakpoint — NÃO é só um valor fixo de 16px.
 * Motivo (bug real reportado): quando a largura da viewport é igual ou
 * menor que o max-width do breakpoint atual (ex.: viewport exatamente em
 * 1280px, 1180px ou 768px), a margem automática de centralização vira 0 e
 * o único espaço entre o conteúdo e a borda da tela passa a ser esse
 * padding — 16px fica "colado" demais nessas larguras, que são comuns
 * (notebooks, janelas não maximizadas), não uma exceção rara. Por isso o
 * padding cresce nos mesmos breakpoints do max-width, igual ao já feito no
 * header (ver bloco 3 abaixo) — antes só o header tinha esse ajuste, o que
 * criava a inconsistência "Hero parece certo, resto colado" reportada.
 */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-padding-inline); /* 16px — base mobile */
  max-width: var(--container-mobile); /* base mobile */
}

@media (min-width: 481px) { /* --breakpoint-mobile (480px) — acima do mobile estrito */
  .container {
    max-width: var(--container-tablet);
    padding-inline: var(--space-md); /* 24px */
  }
}

@media (min-width: 769px) { /* --breakpoint-tablet (768px) */
  .container {
    max-width: var(--container-tablet);
    padding-inline: var(--space-lg); /* 32px */
  }
}

@media (min-width: 1025px) { /* --breakpoint-notebook (1024px) */
  .container {
    max-width: var(--container-notebook);
    padding-inline: var(--space-xl); /* 48px — mesmo valor do header */
  }
}

@media (min-width: 1280px) { /* --breakpoint-desktop (1280px) — inclusivo, não 1281 */
  .container {
    max-width: var(--container-desktop);
    padding-inline: var(--space-xl); /* 48px — mesmo valor do header */
  }
}

/* ==========================================================================
   3. Header fixo
   ========================================================================== */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
  padding-block: var(--space-sm);
  /* SEM padding-inline e SEM largura máxima própria aqui — o <header> é só
     a faixa full-bleed (fundo). O alinhamento lateral do conteúdo vem do
     .header-inner logo abaixo, que É um .container (mesma classe usada
     por todas as seções). Antes o <header> tinha seu próprio
     padding-inline fixo por breakpoint, o que parecia igual ao das seções
     só até 1280px de viewport — em qualquer monitor mais largo
     (1366/1440/1536/1920, os mais comuns), o <header> ficava preso a 48px
     da borda enquanto as seções (com .container centralizado e teto de
     1280px) abriam bem mais margem, quebrando o alinhamento visual entre
     header e conteúdo. */
}

/* .header-inner herda max-width/padding-inline/margin-inline:auto do
   .container (bloco 2 acima) e só adiciona o layout flex do cabeçalho. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Dimensão explícita da logo — estrutural, não decorativa: sem isso o
   header fixo não tem altura previsível (o arquivo de logo real varia de
   proporção) e o cálculo de padding-top do <main> abaixo fica incorreto. */
.header-inner > a:first-child {
  flex-shrink: 0;
}

.header-inner > a:first-child img {
  height: 2.5rem;
  width: auto;
}

/* O link de CTA (último filho) não pode ser espremido pelo flex-shrink
   junto com a logo — quem deve ceder espaço é o <nav>, via overflow-x
   interno (ver regra "Nav do header" abaixo). */
.header-inner > a:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ==========================================================================
   4. Nav do header
   ========================================================================== */

/* O <nav> precisa ser o único item flex do header que efetivamente cede
   espaço: min-width:0 é o que permite a um item flex encolher além do seu
   conteúdo mínimo, delegando o overflow para a rolagem interna do <ul>
   em vez de o navegador tentar quebrar o texto dos links. */
header nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

header nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  overflow-x: auto;
  /* Scrollbar do overflow-x escondida (continua rolável por toque/drag em
     mobile), só o indicador visual nativo do navegador some — era ele que
     aparecia como uma seta/ícone de rolagem ao lado do CTA no desktop. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* versões antigas de Edge/IE */
  /* Menu mobile: comportamento provisório sem JS — hamburger entra na sessão de Engenharia */
}

header nav ul::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari */
}

header nav ul li {
  flex: 0 0 auto;
}

header nav ul li a {
  white-space: nowrap;
}

/* Menu mobile (hambúrguer) — controlado por js/main.js (initMobileNav).
   Abaixo de 1024px o nav vira um bloco vertical fechado por padrão,
   alternado via [hidden] pelo JS. No desktop (min-width: 1024px), o nav
   é sempre exibido em flex, ignorando o [hidden] deixado pelo JS — é a
   forma mais simples e robusta de não depender do JS "adivinhar" que
   cruzou o breakpoint em tempo real. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Bug real encontrado na auditoria de responsividade (Sessão 16): com
     position:absolute, o containing block do nav é .header-inner
     (position:relative), que segue a largura do .container (680px no
     tablet, por exemplo) — não a largura da viewport. Resultado: o painel
     do menu mobile parava ~44px antes da borda direita da tela (medido:
     724px de 768px), enquanto a barra do header (header::before) é
     full-bleed, criando uma inconsistência visual (painel "capado" de um
     lado). Fix: position:fixed em vez de absolute — o header não tem
     filter/backdrop-filter/transform (só o ::before tem), então position:
     fixed no nav usa a viewport inteira como containing block normalmente,
     sem cair na armadilha documentada no projeto. `top` precisa do valor
     em px (4.5rem = mesma altura do header, replicando main{padding-top}
     acima) em vez de 100%, que só existe para position:absolute/relative. */
  header nav {
    position: fixed;
    top: 4.5rem;
    left: 0;
    width: 100%;
    overflow: visible;
  }

  header nav ul {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
  }
}

@media (min-width: 1024px) { /* --breakpoint-notebook (1024px) */
  header nav {
    display: flex !important; /* ignora [hidden] de propósito — no desktop
      o nav é sempre visível; só o menu mobile usa [hidden], controlado
      pelo JS abaixo de 1024px (ver comentário acima). */
    /* Centraliza o <ul> dentro da largura real do <nav> (que cresce via
       flex:1 1 auto para preencher o espaço entre logo e CTA). O
       justify-content:center do <ul> (bloco "Nav do header" abaixo) só
       centralizaria os links DENTRO da própria largura do ul — que é
       sempre do tamanho exato do seu conteúdo (shrink-to-fit), então
       nunca sobra espaço ali pra centralizar nada. O espaço vazio real
       fica entre o ul e a borda do nav, um nível acima — por isso o
       menu aparecia colado à esquerda em vez de centralizado. */
    justify-content: center;
  }
}

/* ==========================================================================
   5. Main — autoridade única de espaçamento vertical entre seções
   ========================================================================== */

main {
  display: flex;
  flex-direction: column;
  /* SEM gap aqui — as seções têm fundo full-bleed alternado (ver
     css/theme.css, bloco 4), então um gap entre elas apareceria como uma
     tarja em branco entre cores de fundo diferentes. A ÚNICA autoridade de
     espaçamento entre seções é o padding-block de cada <section> abaixo;
     gap + padding somados foi exatamente o bug reportado (espaçamento
     gigante e inconsistente) — nunca reintroduzir os dois ao mesmo tempo. */
  padding-top: 4.5rem;
  /* padding-top calculado para bater exatamente com a altura real do header
     fixo: logo com 2.5rem de altura (ver regra "header > a:first-child img")
     + 2× var(--space-sm) de padding-block do header = 4.5rem. Como a altura
     da logo agora é fixa por regra explícita (não mais dependente das
     proporções do arquivo de imagem), essa soma é estável em todos os
     breakpoints — se o padding-block do header mudar, este valor precisa
     ser recalculado junto. */
}

/* As <section> NÃO recebem margin-top/bottom — o padding-block de cada uma
   é a única fonte de espaçamento vertical entre elas (mesma regra de
   autoridade única de docs/arquitetura.md D8, aplicada aqui a nível de
   seções, com `main` sem gap — ver comentário acima). */
section {
  padding-block: var(--space-2xl);
  /* Expectativa: o conteúdo interno de cada <section> deve estar envolvido
     por um elemento com classe .container para centralizar e limitar a
     largura. O HTML do protótipo ainda não tem essa classe aplicada — será
     adicionada em sessão futura do Engenheiro/Creative Designer. Por ora,
     o seletor de elemento `section` cobre a verificação estrutural sem
     exigir edição do HTML nesta sessão. */

  /* Bug real encontrado na auditoria de responsividade (Sessão 16): sem
     scroll-margin-top, clicar em qualquer link âncora do menu (#sobre-evento,
     #programacao etc.) posiciona o topo da seção exatamente sob o header
     fixo, escondendo até ~9px do heading atrás dele — medido com
     Playwright, header tem 73px de altura estável em TODOS os breakpoints
     (375 a 1920px), então um único valor cobre mobile/tablet/desktop.
     Mesmo valor de `main { padding-top }` acima, única fonte de verdade
     para a altura do header — se ela mudar, recalcular os dois juntos. */
  scroll-margin-top: 4.5rem;
}

@media (min-width: 1025px) { /* --breakpoint-notebook (1024px) */
  section {
    padding-block: var(--space-3xl);
  }
}

/* ==========================================================================
   6. Grids estruturais — listas de itens
   ========================================================================== */

/* Público-alvo */
#publico-alvo ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

/* Bug real encontrado na auditoria de responsividade (Sessão 16): as regras
   de grid abaixo foram escritas para uma versão antiga do HTML da Galeria,
   em que as fotos eram <figure> filhas diretas de <section id="galeria">.
   A seção foi reestruturada (ver css/theme.css, bloco 12: full-bleed, um
   único wrapper .galeria-strip com display:grid próprio) e essas regras
   deveriam ter sido removidas junto — em vez disso, ficaram aplicando
   display:grid ao <section id="galeria"> com um único filho real
   (.galeria-strip). Isso não quebrava nada sozinho (auto-fit com 1 item
   ocupa 100% da largura por coincidência), até a media query abaixo
   (bloco 768-1024px) forçar explicitamente `repeat(2, 1fr)` no mesmo
   seletor #galeria — aí sim, com 2 colunas reais e só 1 item, o
   .galeria-strip passou a ocupar apenas ~50% da largura (medido: 372px de
   768px), quebrando a galeria full-bleed exatamente na faixa tablet.
   Removido por completo: sem uso, e o layout real da Galeria já vive
   inteiramente em css/theme.css (.galeria-strip). */

/* Patrocinadores — colunas de largura FIXA (não 1fr) + justify-content:start.
   Com 1fr, o auto-fit espalha o espaço sobrando entre os itens existentes
   (2 no "Apoiadora Oficial", 5 nos "Patrocinadores"), esticando cada card
   e deixando as logos centralizadas num vão gigante em vez de coladas à
   esquerda. Largura fixa mantém o tamanho do card estável e faz sobrar
   espaço vazio à direita (não distribuído), como pedido.
   5 colunas fixas (não auto-fill) porque o número de patrocinadores é
   estável — testado: auto-fill arredondava para 4 colunas em vez de 5
   mesmo com espaço de sobra (1046px cabendo em 1084px), então o cálculo
   automático não é confiável aqui; 5 colunas explícitas cabem em ambos os
   containers dessa faixa (1180px e 1280px). */
.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(5, 190px);
  justify-content: start;
  gap: var(--space-md);
}

/* Apoiadora Oficial voltou a usar o mesmo cartão de largura fixa dos
   Patrocinadores — a versão esticada (1fr) foi testada e não ficou boa
   visualmente, revertida a pedido. .sponsors-grid-featured não precisa
   mais de override nenhum, herda tudo de .sponsors-grid. */

@media (max-width: 767px) { /* abaixo de --breakpoint-tablet (768px) */
  #publico-alvo ul,
  .sponsors-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1024px) { /* --breakpoint-tablet até --breakpoint-notebook */
  #publico-alvo ul,
  .sponsors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   7. Programação — fluxo de bloco com autoridade única de espaçamento
   ========================================================================== */

#programacao {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

/* SEM padding-inline aqui — os filhos diretos do footer agora são todos
   .container (mesma classe usada pelas seções), que já trazem seu próprio
   padding responsivo. Padding no <footer> também somaria com o padding de
   cada .container filho (a mesma dupla autoridade já corrigida em sessões
   anteriores no header e nas seções). display/flex-direction/gap ficam a
   cargo do css/theme.css (camada visual), não daqui. */
footer {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl); /* --space-2xl era grande demais, --space-lg ficou curto demais — meio-termo */
}

/* ==========================================================================
   9. Botão flutuante do WhatsApp
   ========================================================================== */

body > div:has(> a) {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: var(--z-whatsapp-button);
}