@charset "UTF-8";

/* ============================================================================
   projetos.css — camada da lista de projetos parceiros (projetos.html)
   Carregada DEPOIS de estilos.css e estilos-refino.css, só nesta página.

   Reaproveita o que já existe: .catalog-hero + .catalog-hero-foto (a faixa de
   abertura com foto, a mesma do catálogo e da licença) e .projeto-logo (placa
   branca da marca).

   O que está aqui é só o que não existia: o card horizontal de parceiro.
   Se a proposta for aprovada, funde em estilos.css junto com projeto.css.
   ========================================================================= */

/* Sem o campo de busca do catálogo, a coluna de texto fica mais curta. */
.projetos-hero .catalog-hero-intro p {
  max-width: 58ch;
}

/* ── Card do parceiro ─────────────────────────────────────────────────────── */

.lista-parceiros {
  display: grid;
  gap: 22px;
}

/* Horizontal: marca à esquerda, conteúdo à direita. O card da home é vertical
   e resume; aqui cabe o texto da parceria, os números e as áreas. */
.parceiro {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.parceiro:hover {
  border-color: rgba(0, 128, 128, .34);
  box-shadow: var(--shadow);
}

/* Mesmo gradiente institucional do card da home e da faixa do projeto: a
   identidade da parceria fica na marca, não na cor de fundo. */
.parceiro-marca {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 54%, var(--teal-dark) 100%);
}

.parceiro-marca::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
}

.parceiro-marca .projeto-logo {
  position: relative;
  height: 156px;
  margin-bottom: 0;
  box-shadow: 0 14px 32px rgba(0, 30, 30, .22), inset 0 0 0 1px rgba(0, 63, 63, .08);
}

.parceiro-corpo {
  padding: clamp(22px, 2.6vw, 30px);
}

.parceiro-rotulo {
  display: block;
  color: var(--teal-deep);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow, .09em);
  text-transform: uppercase;
}

.parceiro-corpo h2 {
  margin-top: 8px;
  color: var(--teal-deep);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--track-h2, -.014em);
}

.parceiro-corpo h2 a {
  color: inherit;
  text-decoration: none;
}

.parceiro-corpo h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.parceiro-extenso {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: .9375rem;
  font-weight: 500;
}

.parceiro-lead {
  max-width: 68ch;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.6;
}

/* ── Números do projeto ───────────────────────────────────────────────────── */

/* column-reverse: a marcação mantém dt (rótulo) antes de dd (valor), como a
   semântica de <dl> pede, e a leitura visual começa pelo número. */
.parceiro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.parceiro-stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.parceiro-stats dd {
  margin: 0;
  color: var(--teal-deep);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.parceiro-stats dt {
  color: var(--ink-soft);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Áreas ────────────────────────────────────────────────────────────────── */

/* Etiqueta, não filtro: mesma forma da pill do projeto, sem estado nem clique. */
.parceiro-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.parceiro-areas li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  color: var(--teal-deep);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
}

.parceiro-areas .area-n {
  color: var(--ink-soft);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.parceiro-areas .area-mais {
  color: var(--ink-soft);
  background: transparent;
  border-style: dashed;
}

.parceiro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 22px;
}

/* ── Ajustes por viewport ─────────────────────────────────────────────────── */

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

  .parceiro-marca {
    padding: 22px;
  }

  .parceiro-marca .projeto-logo {
    height: 128px;
  }
}

@media (max-width: 620px) {
  .parceiro-stats {
    gap: 14px 24px;
  }

  .parceiro-stats dd {
    font-size: 1.375rem;
  }

  .parceiro-actions .btn {
    width: 100%;
  }
}