/* ==========================================================================
   nossos-projetos.css — página Nossos projetos (antiga "O que fazemos", page ID 46)
   ========================================================================== */

.programas {
  padding-block: var(--esp-16) var(--esp-20);
  background-color: var(--nexa-branco);
}

.programas__titulo {
  padding-top: var(--esp-8);
}

.programas__intro {
  width: 65%;
  margin-inline: auto;
  padding-bottom: var(--esp-12);
}

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

.programas .projeto-card {
  display: flex;
}

/* Botões dos cards: lado a lado no desktop, empilhados a partir do laptop */
.programas .projeto__acoes .botao {
  font-size: 18px;
  font-weight: var(--peso-forte);
  padding: 8px 28px;
}

/* Só os cards comuns empilham os botões; o card em destaque tem ação única. */
@media (max-width: 1366px) {
  .programas .projeto-card .projeto__acoes {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 767px) {
  .programas { padding-block: var(--esp-10); }
  .programas__grade { grid-template-columns: 1fr; }
  .programas__intro {
    width: 100%;
    text-align: justify;
    padding-bottom: var(--esp-5);
  }
  .programas .projeto__acoes .botao { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Projetos executados em rede
   Bloco secundário: são projetos de parceria, não da execução direta da NEXA.
   Fundo distinto e cards mais enxutos deixam essa diferença legível.
   -------------------------------------------------------------------------- */

.rede {
  padding-block: var(--esp-16) var(--esp-20);
  background-color: #F4FBFD;
}

.rede__intro {
  width: 65%;
  margin-inline: auto;
  padding-bottom: var(--esp-10);
}

.rede__grade {
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rede__categoria {
  align-self: flex-start;
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nexa-ciano-aa);
}

.rede__parceria {
  margin-top: auto;
  padding-top: var(--esp-3);
  font-size: var(--texto-pequeno);
  color: var(--nexa-verde-aa);
  font-weight: var(--peso-medio);
}

@media (max-width: 1024px) {
  .rede__grade {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .rede {
    padding-block: var(--esp-10);
  }

  .rede__intro {
    width: 100%;
    text-align: justify;
    padding-bottom: var(--esp-5);
  }
}