/* ==========================================================================
   Seção 07 — Empresas e instituições que já trabalharam com Iona
   Figma: node 296:4759 (1512 × 972)
   Animações no padrão da seção 01 (reveal.js): título palavra por palavra,
   divisórias desenhadas da esquerda para a direita e, em cada faixa, os
   logos subindo em sequência.
   ========================================================================== */

.clients {
  --fp: max(0.6px, calc(100vw / var(--frame)));
  --logo-fp: var(--fp); /* escala dos logos (menor no mobile) */
  padding: calc(150 * var(--fp)) 0 calc(145 * var(--fp));
  background: var(--c-cream);
  color: #000;
}

.clients__title {
  max-width: calc(757 * var(--fp));
  margin: 0 var(--pad);
  font-family: var(--font-display);
  font-size: calc(56 * var(--fp));
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #000;
}

.clients__grid {
  margin: calc(70 * var(--fp)) var(--pad) 0;
}

/* Divisória (--rule animada pelo reveal.js) */
.clients__rule {
  position: relative;
  display: block;
  height: 0; /* como no Figma: a linha não ocupa altura */
}
.clients__rule::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--c-muted);
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}

/* Faixa com 5 logos, cada um centralizado na sua coluna */
.clients__row {
  display: flex;
  box-sizing: border-box;
  height: calc(152 * var(--fp)); /* 16 + 120 + 16 */
  margin: 0;
  padding: calc(16 * var(--fp)) 0;
  list-style: none;
}
.clients__row li {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 0;
}
.clients__row img {
  width: calc(var(--w) * var(--logo-fp));
  max-width: 90%;
  height: auto;
}
/* --w-m (opcional): largura própria no mobile, para logos que ficam
   pequenos demais na grade de 3 colunas (ex.: Marketing Network Brasil) */
@media (max-width: 767px) {
  .clients__row img {
    width: calc(var(--w-m, var(--w)) * var(--logo-fp));
  }
}

/* ---------- Mobile: 3 logos por linha ---------- */
@media (max-width: 767px) {
  .clients {
    --fp: 1px;
    --logo-fp: 0.55px;
    padding: 72px 0;
  }
  .clients__title {
    max-width: none;
    font-size: 30px;
    text-wrap: balance;
  }
  /* Os 15 logos numa grade única de 3 colunas × 5 linhas, todos alinhados
     (as três faixas do desktop viram uma lista contínua) */
  .clients__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 40px;
  }
  .clients__row {
    display: contents;
  }
  .clients__row li {
    height: 80px;
  }
  /* Sem divisórias no celular (12/11/2026, a pedido; antes ficavam só a
     de cima e a de baixo, porque as do meio cortariam a grade) */
  .clients__rule {
    display: none;
  }
}