/* ==========================================================================
   BAIC + PROESTE (a parceria)
   Logo abaixo da hero, no fundo claro padrão do site (--bg-light). A composição é só tipográfica: o
   título é montado com os logos oficiais (BAIC, um "+" e PROESTE) e o
   destaque é a frase de impacto, grande, centralizada e entre aspas. Os dois ficam agrupados no centro de uma tela.
   O js/partnership.js quebra a frase em letras, que ganham cor conforme o
   scroll (sem travar a página). Sem JS/GSAP ou com movimento reduzido, tudo
   aparece pronto.
   ========================================================================== */
.partnership {
  --logo-h: clamp(22px, 2.2vw + 14px, 58px); /* altura das maiúsculas dos dois logos no título */

  /* cores */
  --p-bg: var(--bg-light);
  --p-ink: var(--color-black);          /* cor final da frase */
  --p-accent: var(--color-red);         /* aspas e trecho em destaque */
  --p-faint: rgba(29, 29, 27, 0.1);     /* cor inicial das letras, antes do scroll (lida pelo JS) */
  --p-plus: var(--color-graphite);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 8svh, 104px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(72px, 10svh, 128px) var(--gutter);
  overflow: hidden; /* a entrada do título não vaza para as laterais */
  background-color: var(--p-bg);
  color: var(--p-ink);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Título: BAIC + PROESTE com os logos
   -------------------------------------------------------------------------- */
.partnership__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--logo-h) * 0.6);
  margin: 0;
  line-height: 1;
}

.partnership__brand {
  display: block;
  flex: none;
}

.partnership__brand img {
  width: auto;
  height: var(--logo-h);
}

/* o viewBox do PROESTE inclui a sobra do "O" (83,45 contra 79,63 das outras letras):
   ampliado nessa proporção, as maiúsculas ficam da mesma altura das do BAIC */
.partnership__brand--proeste img {
  height: calc(var(--logo-h) * 1.048);
}

/* "+" desenhado com duas barras (não é texto: fica sempre centrado entre os logos) */
.partnership__plus {
  --bar: calc(var(--logo-h) * 0.14);

  flex: none;
  width: calc(var(--logo-h) * 0.7);
  height: calc(var(--logo-h) * 0.7);
  background:
    linear-gradient(var(--p-plus), var(--p-plus)) center / 100% var(--bar) no-repeat,
    linear-gradient(var(--p-plus), var(--p-plus)) center / var(--bar) 100% no-repeat;
}

/* --------------------------------------------------------------------------
   Frase de impacto
   -------------------------------------------------------------------------- */
.partnership__quote {
  width: 100%;
  max-width: 17em; /* em "em": as quebras de linha ficam iguais em qualquer tela larga */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* cresce com a largura, mas nunca passa de 8,6% da altura (título e frase cabem numa tela) */
  font-size: min(clamp(29px, 5.2vw + 4px, 104px), 8.6svh);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.partnership__text {
  margin: 0;
}

.partnership__accent {
  color: var(--p-accent);
}

/* criados pelo JS: palavras não se partem entre linhas; cada letra ganha cor sozinha */
.partnership__word {
  white-space: nowrap;
}

.partnership__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .partnership {
    /* título empilhado (BAIC / + / PROESTE): o PROESTE (6.755 x --logo-h de largura) quase na largura toda,
       com as maiúsculas dos logos bem maiores que as da frase (~2,5x) */
    --logo-h: min(calc((100vw - 2 * var(--gutter)) / 7), 56px);

    gap: clamp(32px, 6svh, 56px);
  }

  .partnership__title {
    flex-direction: column;
    gap: calc(var(--logo-h) * 0.3);
  }

  /* coluna estreita: sem balancear, as linhas ficam mais cheias. 7.2vw = 7 linhas de 360 a 414 px de largura,
     com "o que há de melhor" (o trecho em vermelho) inteiro numa linha; com 9vw eram 10 */
  .partnership__quote {
    font-size: min(clamp(24px, 7.2vw, 44px), 8.6svh);
    text-wrap: pretty;
  }
}