/**
 * responsive.css — Adaptações por breakpoint.
 *
 * styles.css já entrega o layout de telas pequenas. Aqui só entram regras
 * `min-width`, na ordem crescente, para o layout ganhar colunas conforme
 * sobra largura. Nenhuma regra `max-width`: quem manda é o mobile.
 *
 * Pontos de verificação usados: 360 · 480 · 640 · 768 · 1024 · 1280 · 1440
 */

/* ==============================================================
   ≥ 480px — celulares grandes
   ============================================================== */
@media (min-width: 30em) {
  .hero__stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4) var(--sp-3);
  }

  .cta-band {
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
  }
}

/* ==============================================================
   ≥ 640px — tablets em pé
   ============================================================== */
@media (min-width: 40em) {
  .form { padding: var(--sp-7) var(--sp-6); }

  .form__row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .form__row .field--wide { grid-column: span 1; }
  .form__row .field--xs   { max-width: 9rem; }
  .form__row .field--sm   { max-width: 12rem; }

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

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

  .org-tier__items { grid-template-columns: repeat(2, 1fr); }
  .org-tier--lead .org-tier__items { grid-template-columns: 1fr; }

  .goals__grid { grid-template-columns: repeat(2, 1fr); }
  .goals__grid > :last-child:nth-child(odd) { grid-column: span 2; }

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

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

  .doc-row { grid-template-columns: 14rem auto 1fr; }
  .doc-row__text { grid-column: auto; order: 3; text-align: right; }
  .doc-row__state { order: 2; }

  .site-footer__bottom {
    grid-template-columns: 1fr auto;
    align-items: baseline;
  }

  .site-footer__bottom p:last-child { text-align: right; }

  .to-top { right: var(--sp-6); bottom: var(--sp-6); }
}

/* ==============================================================
   ≥ 768px — tablets deitados
   ============================================================== */
@media (min-width: 48em) {
  .about__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 1fr);
    gap: var(--sp-9);
    align-items: start;
  }

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

  .founder {
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }

  .founder__photo { max-width: none; }

  .section__head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: end;
  }

  .section__head--split .section__intro { justify-self: end; }

  .form-block .form { padding: var(--sp-8) var(--sp-7); }

  .modal__dialog { padding: var(--sp-8) var(--sp-7) var(--sp-7); }

  .statement { padding: var(--sp-8) var(--sp-6); }
}

/* ==============================================================
   ≥ 1024px — desktop
   Aqui a navegação horizontal substitui o menu lateral.
   ============================================================== */
@media (min-width: 64em) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
  .site-header__cta { display: inline-flex; }

  .site-header__inner { padding-block: var(--sp-4); }

  .hero {
    padding-top: calc(var(--sp-11) + 4rem);
    padding-bottom: var(--sp-10);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-9);
    align-items: center;
  }

  .hero__visual { display: grid; }

  .hero__title { font-size: var(--fs-display-1); }

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

  /* A seta de ligação só existe quando os passos estão lado a lado,
     e nunca no último item de cada linha. */
  .flow__step::after { display: block; }
  .flow__step:nth-child(3n)::after { display: none; }

  .org-tier__items { grid-template-columns: repeat(3, 1fr); }
  .org-tier--lead .org-tier__items { grid-template-columns: minmax(0, 32rem); }
  .org-tier--support .org-tier__items { grid-template-columns: repeat(2, 1fr); }

  .goals__grid { grid-template-columns: repeat(3, 1fr); }
  .goals__grid > :last-child:nth-child(odd) { grid-column: auto; }

  .site-footer__top {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }

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

  .timeline {
    padding-left: var(--sp-7);
    gap: var(--sp-6);
  }

  .timeline::before { left: 9px; }
  .phase::before { left: calc(-1 * var(--sp-7) + 3px); width: 14px; height: 14px; }
}

/* ==============================================================
   ≥ 1280px — telas largas
   ============================================================== */
@media (min-width: 80em) {
  .projects { grid-template-columns: repeat(3, 1fr); }

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

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

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

  .hero__chip--a { left: -8%; }
  .hero__chip--b { right: -10%; }
}

/* ==============================================================
   ≥ 1440px — respiro em monitores grandes
   ============================================================== */
@media (min-width: 90em) {
  :root { --container: 82rem; }

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

/* ==============================================================
   TELAS ESTREITAS DE VERDADE (≤ 360px)
   Única exceção à regra mobile-first: em 320-360px alguns
   componentes precisam encolher para não estourar a largura.
   ============================================================== */
@media (max-width: 22.5em) {
  .brand__name { display: none; }
  .theme-toggle { display: none; }
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .checkgrid { grid-template-columns: 1fr; }
  .form { padding: var(--sp-5) var(--sp-4); }
}

/* ==============================================================
   IMPRESSÃO
   O site também é usado como material de apresentação a professores
   e instituições, então precisa sair legível no papel.
   ============================================================== */
@media print {
  :root {
    --surface-page: #fff;
    --surface-1: #fff;
    --surface-2: #fff;
    --text-strong: #000;
    --text-body: #1a1a1a;
    --text-muted: #444;
    --border: #bbb;
  }

  .site-header,
  .drawer,
  .to-top,
  .modal,
  .hero__backdrop,
  .section__texture,
  .projects__filters,
  .form__footer,
  .theme-toggle { display: none !important; }

  .is-inverse { color-scheme: light; }

  .hero, .section, .continuity, .transparency, .form-block {
    padding-block: 1.5rem;
    background: #fff !important;
    color: #000 !important;
  }

  .faq__panel { height: auto !important; }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: #555;
  }

  .pillar, .project, .goal, .profile { break-inside: avoid; }
}