/* numeros.css: o "por que gravar aqui" num mosaico de blocos, a variação que o dono escolheu em 17/10/2026. A foto do
   estúdio é o bloco grande, com o rótulo, o título e a frase por cima do pé escuro; cada número do estúdio tem o seu
   bloco de uma cor (mostarda, preto, branco com borda) e as quatro vantagens moram num bloco cinza.
   No computador a foto ocupa metade da largura e as duas linhas; os outros quatro fazem um 2 por 2 ao lado. No
   telefone a foto vai em cima, na largura toda, e os quatro blocos ficam 2 por 2 embaixo.
   Depende de: base.css e secoes-do-estudio.css (o rótulo e as estrelas do depoimentos.css). Telefone nas regras
   soltas, computador no @media do fim. */

.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.mosaico__bloco { position: relative; display: grid; align-content: start; gap: 6px; overflow: hidden; margin: 0; padding: 18px; border-radius: 16px; }

/* ------------------------------------------------------------ a foto com o título */

.mosaico__bloco--foto {
  grid-column: 1 / -1; min-height: 380px; align-content: end; padding: 0; isolation: isolate; color: var(--branco);
}
.mosaico__foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.mosaico__bloco--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, .88) 100%);
}
.mosaico__texto { display: grid; gap: 10px; padding: 22px; }
.mosaico__titulo { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.mosaico__frase { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .86); }

/* ------------------------------------------------------------ os números */

.mosaico__numero { display: block; font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.mosaico__nome { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.mosaico__bloco--mostarda { background: var(--mostarda); color: var(--preto); }
.mosaico__bloco--preto { background: var(--preto); color: var(--branco); }
.mosaico__bloco--preto .mosaico__numero { color: var(--mostarda); }
.mosaico__bloco--branco { box-shadow: inset 0 0 0 2px var(--preto); }
.mosaico__bloco--branco .estrelas { font-size: 14px; }

/* ------------------------------------------------------------ as vantagens */

.mosaico__vantagens { gap: 9px; background: var(--bloco); }
.mosaico__vantagens li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.mosaico__vantagens svg { width: 18px; height: 18px; flex: none; color: var(--mostarda-escuro); }

@media (min-width: 900px) {
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 230px); gap: 14px; }
  .mosaico__bloco { padding: 24px; border-radius: 18px; }
  .mosaico__bloco--foto { grid-column: span 2; grid-row: span 2; min-height: 0; padding: 0; }
  .mosaico__texto { gap: 12px; padding: 30px; }
  .mosaico__titulo { font-size: 38px; }
  .mosaico__frase { font-size: 16px; }
  .mosaico__numero { font-size: 68px; }
  .mosaico__nome { margin-top: 8px; font-size: 13px; }
  .mosaico__bloco--branco .estrelas { margin-top: 6px; font-size: 18px; }
  .mosaico__vantagens { gap: 12px; }
  .mosaico__vantagens li { font-size: 15px; gap: 10px; }
  .mosaico__vantagens svg { width: 22px; height: 22px; }
}