/* ==========================================================================
   layout.css
   Topbar, containers, grid, secoes, rodape.
   Sistema_de_Estilos.md:21 "layout.css | Sidebar, topbar, grid, containers"
   Breakpoints: Responsividade_Sempre.md:30-45 (880 / 720 / 520)
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* --- Topbar ------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  /* Padrao_Elevacao_Zindex.md:32 ".topbar { z-index: var(--z-sticky); }" */
  z-index: var(--z-sticky);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  background: rgba(13, 15, 18, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* --- Secoes ------------------------------------------------------------- */

.secao {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--borda);
}

.secao-primeira {
  border-top: 0;
  padding-top: var(--sp-7);
}

/* --- Secao clara ---------------------------------------------------------
   UMA secao so na pagina inteira, por decisao do Joviano em 06/08/2026:
   "20% branca e 80% dark". A primeira tentativa usou duas secoes claras e
   base #E0E0E0 chapado, e ele reprovou na hora. Agora e branco de verdade
   com um respiro cinza sutil nas pontas.

   06_Identidade_Visual_DataEvo.md:55 "Tons base (fundo/superficie): cinza
   claro #E0E0E0, branco #FFFFFF, gradiente #E0E0E0 -> #FFFFFF". O gradiente
   entra na direcao contraria, do branco pro cinza, porque a secao vem depois
   de um bloco escuro e precisa abrir clara, nao fechar.

   O logotipo NAO aparece em fundo claro: so existe a versao de texto branco,
   e :17 marca a monocromatica como uso restrito. Topbar e rodape ficam
   escuros de proposito, e a marca vive so neles.
   ------------------------------------------------------------------------- */
.secao-clara {
  position: relative;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 117, 0, .07), transparent 70%),
    linear-gradient(180deg, var(--claro-superficie) 0%, var(--claro-superficie) 62%, var(--claro-bg) 100%);
  border-top: 0;
  color: var(--claro-texto);
}

/* Emenda entre o escuro e o claro. Sem isto a troca vira um corte reto no meio
   da pagina, que foi parte do que ficou feio na primeira tentativa. */
.secao-clara::before,
.secao-clara::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* 40px, e nao 56px. O padding da secao cai para 48px (--sp-7) abaixo de
     880px, e com 56px o gradiente invadia os primeiros 8px do conteudo.
     Medido no navegador: folga de -8px em 360px. Com 40px sobra 8px de folga
     no menor caso, e nao e preciso z-index nenhum para resolver. */
  height: 40px;
  pointer-events: none;
}

.secao-clara::before {
  top: 0;
  background: linear-gradient(180deg, rgba(13, 15, 18, .16), transparent);
}

.secao-clara::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(13, 15, 18, .16), transparent);
}

/* Sem z-index aqui. Os gradientes de emenda tem 56px de altura e a secao tem
   72px de padding, entao eles terminam antes de o conteudo comecar: nao ha o
   que cobrir. O `pointer-events: none` acima ja garante que nao roubam clique.
   Padrao_Elevacao_Zindex.md:12 nao admite numero solto, e a saida certa era
   remover a necessidade, nao inventar um token para o caso. */
.secao-clara > .container {
  position: relative;
}

.secao-clara h1,
.secao-clara h2,
.secao-clara h3 {
  color: var(--claro-texto);
}

.secao-clara .secao-cab p,
.secao-clara .cd-texto {
  color: var(--claro-texto-dim);
}

.secao-cab {
  max-width: 680px;
  margin-bottom: var(--sp-6);
}

.secao-cab h2 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-3);
}

.secao-cab p {
  color: var(--text-dim);
  font-size: var(--fs-lg);
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
}

/* Glow laranja: 06_Identidade_Visual_DataEvo.md:83
   "Efeitos: glow laranja/branco, lens flare sutil" */
.hero::before {
  content: "";
  position: absolute;
  top: -320px;
  left: 50%;
  width: 900px;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--accent-soft), transparent 68%);
  pointer-events: none;
}

.hero .container {
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-8) 0;
}

.hero h1 {
  font-size: var(--fs-hero);
  margin: var(--sp-4) 0 var(--sp-4);
}

.hero-sub {
  font-size: var(--fs-lg);
  color: var(--text-dim);
  max-width: 54ch;
  margin-bottom: var(--sp-6);
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --- Grids -------------------------------------------------------------- */
/* Padrao_Box_Card.md:57 "TODOS devem ter a MESMA ALTURA"
   Padrao_Box_Card.md:62-72 grid + align-items: stretch + height 100% */

.grid {
  display: grid;
  gap: var(--sp-4);
  align-items: stretch;
  /* align-items: stretch iguala a altura DENTRO de uma linha. Quando a grid
     quebra em duas linhas, a segunda ficava mais baixa que a primeira, e a
     regra nao admite isso: Padrao_Box_Card.md:57 "TODOS devem ter a MESMA
     ALTURA". grid-auto-rows: 1fr iguala tambem entre linhas.
     Flagrado medindo no navegador: grid-4 tinha 239px na primeira linha e
     219px na segunda. */
  grid-auto-rows: 1fr;
}

.grid > * {
  height: 100%;
}

/* O `min(Xpx, 100%)` dentro do minmax nao e firula: sem ele, um minimo maior
   que o espaco disponivel faz a coluna estourar o container em vez de encolher.
   Medido em 360px: a grid-2 com minimo de 330px empurrava os cards para 330px
   dentro de um container de 328px, e eles ficavam 2px mais largos que todo o
   resto da pagina. */
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: var(--sp-5);
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* Dois numeros so. Eram quatro (secoes, formacoes, aulas, horas) e o Joviano
   cortou em 06/08/2026: "pode falar so isso e a quantidade de horas". */
.grid-num {
  grid-template-columns: repeat(2, 1fr);
  max-width: 520px;
}

.grid-antes-agora {
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

/* --- Rodape ------------------------------------------------------------- */

.rodape {
  border-top: 1px solid var(--borda);
  padding: var(--sp-7) 0 var(--sp-6);
  background: var(--bg-elev);
}

.rodape-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--borda);
}

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* ==========================================================================
   Responsivo. Responsividade_Sempre.md:9 "Toda tela funciona no celular"
   ========================================================================== */

@media (max-width: 1024px) {
  .hero h1 {
    font-size: var(--fs-4xl);
  }
}

/* Breakpoint principal, Responsividade_Sempre.md:32 */
@media (max-width: 880px) {
  .container {
    padding: 0 var(--sp-4);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding: var(--sp-7) 0;
  }

  .secao {
    padding: var(--sp-7) 0;
  }

  .secao-cab h2 {
    font-size: var(--fs-2xl);
  }

  .grid-num {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-antes-agora {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* Responsividade_Sempre.md:37 */
@media (max-width: 720px) {
  .hero h1 {
    font-size: var(--fs-3xl);
  }

  .hero-sub {
    font-size: var(--fs-base);
  }

  .hero-acoes {
    flex-direction: column;
    align-items: stretch;
  }

  .rodape-topo,
  .rodape-base {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Responsividade_Sempre.md:42 */
@media (max-width: 520px) {
  .hero h1 {
    font-size: 28px;
  }

  .secao-cab h2 {
    font-size: var(--fs-xl);
  }
}