/* ==========================================================================
   Responsabilidade Social — Figma: nodes 3104-264 (desktop) e 3082-653 (mobile).

   Escrito mobile-first: o frame mobile empilha tudo em uma coluna; o desktop
   abre o intro em duas colunas e as listas em três.

   Os cards das ações e do ESG reaproveitam .card / .card__media / .card__body de
   components.css — aqui só entram as cores por eixo e o que não existe em
   nenhuma outra página (faixa de números, selos, vão do intro).
   ========================================================================== */

/* ==========================================================================
   Intro
   ========================================================================== */

.resp-intro__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 64rem) {
  .resp-intro__grid {
    gap: var(--sp-10);
    /* 558px de texto + 483px de vão, como nas páginas de unidade. */
    grid-template-columns: minmax(0, 1fr) 483px;
    align-items: start;
  }
}

.resp-intro__texto {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  max-width: 32em;
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

/* Foto principal na proporção do espaço previsto no layout. */
.resp-intro__media {
  aspect-ratio: 483 / 365;
  background: var(--gray-400);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Nosso Compromisso ESG — faixa verde-menta
   ========================================================================== */

.esg {
  background: var(--band-mint);
}

/* Os três cards são brancos sobre a faixa, com o vão cinza no topo. */
.esg__list .card {
  background: var(--white);
}

.esg__nome {
  font-size: var(--fs-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Números que representam nosso alcance — faixa escura, grade 3x2
   ========================================================================== */

.numeros {
  background: var(--surface-darker);
}

.numeros__titulo {
  color: var(--white);
}

.numeros__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .numeros__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .numeros__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Um tom acima do fundo da faixa (gray-800 sobre gray-900), como o cartão de
   horário das páginas de unidade. */
.numero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-dark);
  border-radius: var(--radius-md);
}

/**
 * 32px em negrito conta como texto grande, então o verde da marca (4,17:1 sobre
 * o cartão) cumpre o mínimo de 3:1 do AA. Não vale reduzir esse tamanho sem
 * trocar a cor.
 */
.numero__valor {
  color: var(--us-green);
  font-size: clamp(1.75rem, 1.5rem + 1vw, var(--fs-h2));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.numero__texto {
  color: var(--gray-200);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}

/* ==========================================================================
   Ações que transformam vidas

   Cada eixo ESG tem sua cor: ela pinta o selo sobre a foto, o link "Saiba Mais"
   e a aba correspondente. Uma variável (--c) por card resolve os três.
   ========================================================================== */

.acao--social      { --c: var(--us-sky); }
.acao--ambiental   { --c: var(--us-green); }
.acao--governanca  { --c: var(--us-purple); }

/* O selo fica sobre a foto, no canto superior direito, como no frame. */
.acao__eixo {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
}

.acao__nome {
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* .link-arrow segue --color-link; aqui ele segue a cor do eixo. */
.acao .link-arrow {
  color: var(--c);
}

/**
 * Abas na cor do próprio eixo: contorno quando inativa, preenchida quando
 * ativa (--tab-active é o gancho de .tabs__tab[aria-selected="true"]).
 */
.acoes__tab--social      { --c: var(--us-sky); }
.acoes__tab--ambiental   { --c: var(--us-green); }
.acoes__tab--governanca  { --c: var(--us-purple); }

.acoes__tab--social,
.acoes__tab--ambiental,
.acoes__tab--governanca {
  --tab-active: var(--c);
  color: var(--c);
  border-color: var(--c);
}

/**
 * O `:not([aria-selected="true"])` aqui não é sobre a aba ativa — é para EMPATAR a
 * especificidade da regra genérica de hover em components.css, que ganhou o mesmo
 * `:not()` para não apagar o rótulo da aba ativa.
 *
 * Sem isso a genérica passa a vencer (uma classe mais um atributo mais uma
 * pseudo-classe contra uma classe mais uma pseudo-classe) e pinta o rótulo com o
 * laranja da marca. Laranja sobre o verde do eixo Ambiental dá 1,06:1 — texto
 * ilegível. Com o `:not()`, as duas regras empatam em especificidade e esta vence
 * por vir depois na cascata, que é o que o arquivo de página deve fazer.
 */
.acoes__tab--social:not([aria-selected="true"]):hover,
.acoes__tab--ambiental:not([aria-selected="true"]):hover,
.acoes__tab--governanca:not([aria-selected="true"]):hover {
  color: var(--white);
  background: var(--c);
  border-color: var(--c);
}

/**
 * .card é display:flex, e isso vence o atributo [hidden] — sem esta regra o
 * filtro das abas marcaria os cards como escondidos sem tirá-los da tela. É o
 * mesmo motivo de .curso[hidden] em components.css.
 */
.acao[hidden] {
  display: none;
}

.acoes__vazio {
  margin-top: var(--sp-6);
  color: var(--color-text-muted);
  text-align: center;
}

/* ==========================================================================
   Reconhecimentos e Certificações — quatro selos numa linha
   ========================================================================== */

.reconhecimentos__grid {
  display: grid;
  gap: var(--sp-8) var(--sp-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 64rem) {
  .reconhecimentos__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Quadrado cinza: no frame o selo de cada prêmio ainda não foi colocado. */
.reconhecimento__selo {
  width: 5.75rem;
  aspect-ratio: 1;
  margin-bottom: var(--sp-4);
  background: var(--gray-200);
}

.reconhecimento__nome {
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reconhecimento__texto {
  margin-top: var(--sp-3);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-md);
}