/* =========================================================
   RESPONSIVE.CSS
   Mobile first: todo o CSS-base (demais arquivos) descreve o
   layout mobile (0–639px). Este arquivo concentra os ajustes
   progressivos por breakpoint (docs/design-system.md §7/§11).

   Breakpoints:
     tablet    ≥ 640px
     notebook  ≥ 1024px
     desktop   ≥ 1280px
     desktop-xl≥ 1536px
   ========================================================= */

/* Menu mobile visível apenas abaixo de 1024px */
@media (max-width: 1023.98px) {
  .navbar__links,
  .navbar__actions .btn {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }
}

/* =========================================================
   TABLET — ≥ 640px
   ========================================================= */
@media (min-width: 640px) {
  :root {
    --container-padding: var(--space-6);
  }

  .grid {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-5, 1.25rem);
  }

  .section {
    padding-block: var(--space-16);
  }

  .hero {
    min-height: 80vh;
  }

  .hero__actions {
    flex-wrap: nowrap;
  }

  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

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

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

  .partners__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

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

  .final-cta__actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* =========================================================
   NOTEBOOK — ≥ 1024px
   ========================================================= */
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-8);
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-6);
  }

  .section {
    padding-block: var(--space-20);
  }

  .navbar__links {
    display: flex;
  }

  .navbar__actions .btn {
    display: inline-flex;
  }

  .navbar__toggle {
    display: none;
  }

  .hero {
    min-height: 88vh;
  }

  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .hero__scroll-cue {
    display: flex;
  }

  .about__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Alternância de layout entre seções: "Sobre" tem texto à esquerda e
     imagem à direita (ordem natural do DOM); "Como Funciona" inverte
     visualmente (via `order`, sem alterar a ordem lógica/leitura por
     teclado ou leitor de tela) para variar o ritmo entre seções. */
  .how-it-works__grid {
    grid-template-columns: 1fr 1fr;
  }

  .how-it-works__grid > *:first-child {
    order: 2;
  }
  .how-it-works__grid > *:last-child {
    order: 1;
  }

  .participate__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .partners__grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .contact__grid {
    grid-template-columns: 1fr 1.2fr;
  }
}

/* =========================================================
   DESKTOP — ≥ 1280px
   ========================================================= */
@media (min-width: 1280px) {
  :root {
    --container-padding: var(--space-10);
  }

  .section {
    padding-block: var(--space-24);
  }

  .hero__title {
    max-width: 640px;
  }
}

/* =========================================================
   DESKTOP XL — ≥ 1536px
   ========================================================= */
@media (min-width: 1536px) {
  :root {
    --container-padding: var(--space-12);
  }
}

/* =========================================================
   Toast / componentes com posicionamento fixo — ajuste tablet+
   ========================================================= */
@media (min-width: 640px) {
  .toast {
    max-width: 380px;
  }
}