/* ==========================================================================
   LAYOUT.CSS
   Só estruturas genéricas reutilizáveis: container e section. Nenhum
   componente (header, footer, botão, card...) e nenhuma regra de página
   específica mora aqui — isso vive em components/ e pages/. Mobile-first
   (base 320px, min-width media queries pra cima, breakpoints documentados
   em tokens.css).
   ========================================================================== */

/* Container — fonte única: docs/Design_System_Landing_Page.xlsx, linha
   "CONTAINER" (aba Design System). Padding lateral escalona em 4 degraus:
   20px (mobile) → 32px (768) → 40px (1024, igual em 1280) → 80px (1440).
   Max-width segue --container-max (1200px) até cresce pra 1280px em 1440. */
.container {
  width: min(calc(100% - 40px), var(--container-max));
  margin-inline: auto;
}

@media (min-width: 768px) {
  .container {
    width: min(calc(100% - 64px), var(--container-max));
  }
}

@media (min-width: 1024px) {
  .container {
    width: min(calc(100% - 80px), var(--container-max));
  }
}

@media (min-width: 1440px) {
  .container {
    width: min(calc(100% - 160px), 1280px);
  }
}

/* SEÇÃO BASE — reutilizável por qualquer seção de conteúdo. Padding vertical
   segue a escala de 05-skill-landing-pages-uxui.md seção 9 (só padding-block:
   a margem lateral já vem do .container). */
.section {
  padding-block: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center; /* counterAxis CENTER no Figma = centralizado horizontal */
  gap: var(--space-7); /* aproxima o gap real do Figma (40px) dentro da escala única */
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-9);
  }
}

.section--dark {
  background: var(--bg-black);
  color: var(--icon-white); /* NÃO --text-white, ver docs/01-design-system.md seção 7 */
}

.section--light {
  background: var(--bg-primary);
  color: var(--text-black);
}