/* ==========================================================================
   site-logo-wall.css: logo wall com card de destaque.
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

/* 10.9 Logo wall — duas linhas de 137px; o destaque ocupa as duas. Sem a
   altura de linha fixa, quatro logos viravam quatro colunas de 275px vazias. */
.st-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 310px; grid-auto-rows: 137px; gap: 4px; }

.st-logos__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 137px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.st-logos__img { height: 22px; width: auto; opacity: .55; transition: opacity .3s ease; }

.st-logos__cell:hover .st-logos__img { opacity: 1; }

.st-logos__cap { font-size: 12px; line-height: 16px; color: var(--text-muted); text-align: center; }

.st-logos__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  grid-column: 5;
  grid-row: 1 / span 2;
  padding: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, var(--aud-1), color-mix(in oklab, var(--aud-1) 30%, var(--aud-deep)));
}

.st-logos__feature-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }

.st-logos__feature-n { font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.02em; }

.st-logos__feature-desc { margin-top: 4px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .85); }

@media (max-width: 1100px) {
  /* Linha que cresce com o destaque: presa em 137px, o card de 200px vazava
     da propria linha e comia o respiro de baixo da secao (no celular passava
     da borda e a secao seguinte cortava o card e o botao). */
  .st-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(137px, auto); }

  .st-logos__feature { grid-column: span 4; grid-row: auto; min-height: 200px; }
}

@media (max-width: 768px) {
  .st-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .st-logos__feature { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 480px) {
  .st-logos { grid-template-columns: minmax(0, 1fr); }

  .st-logos__feature { grid-column: span 1; grid-row: auto; }
}