/* estudio.css: o que dá pra gravar no estúdio, no molde da seção de temas do site do Mel Robbins: o título em duas
   linhas, uma frase e um cartão cinza por tipo de gravação, com o desenho num círculo mostarda. Cada cartão abre uma
   janela (o modal do comum, data-abre-modal) contando como é aquela gravação, com o contato do estúdio.
   Os cartões que deslizam (ofertas.css) usam daqui o desenho de cada tipo de gravação.
   Depende de: base.css (cores, letra e .botao-mostarda). Telefone nas regras soltas, computador no @media do fim. */

.estudio { padding: 48px 0 40px; text-align: center; scroll-margin-top: 16px; }

.estudio__titulo { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }

.estudio__texto { max-width: 56ch; margin: 12px auto 0; font-size: 15px; color: var(--texto-suave); }

.servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }

.servico {
  display: grid; justify-items: center; align-content: center; gap: 12px; width: 100%; min-height: 112px; padding: 20px 10px;
  border: 0; border-radius: var(--raio); background: var(--bloco);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto);
}
.servico:hover { background: var(--bloco-escuro); }

/* o nome numa linha só; os nomes foram escolhidos curtos pra caber no cartão do telefone */
.servico__nome { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.servico__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mostarda); }

.servico__icone::before {
  content: ""; width: 20px; height: 20px; background: var(--preto);
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}

/* o desenho de cada tipo de gravação */
[data-servico="podcast"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8'/%3E%3C/svg%3E"); }
[data-servico="aulas"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2 9 2 12 0v-5M22 9v6'/%3E%3C/svg%3E"); }
[data-servico="chroma"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 20c1-3 3-4 5-4s4 1 5 4'/%3E%3C/svg%3E"); }
[data-servico="ao-vivo"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M8 8a6 6 0 0 0 0 8M16 8a6 6 0 0 1 0 8M5 5a10 10 0 0 0 0 14M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); }
[data-servico="entrevistas"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 4h11v8H8l-3 3v-3H3z'/%3E%3Cpath d='M14 8h7v8h-2v3l-3-3h-5v-4'/%3E%3C/svg%3E"); }
[data-servico="cortes"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='7' r='3'/%3E%3Ccircle cx='6' cy='17' r='3'/%3E%3Cpath d='M8.5 8.5L20 19M8.5 15.5L20 5'/%3E%3C/svg%3E"); }
[data-servico="institucional"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6l8-3 8 3v15M2 21h20M9 9h2M13 9h2M9 13h2M13 13h2M10 21v-4h4v4'/%3E%3C/svg%3E"); }
[data-servico="locucao"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12h1M7 8v8M11 4v16M15 7v10M19 10v4M22 12h-1'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------ a janela de cada gravação */

.servico-janela { display: grid; gap: 18px; max-width: 46ch; }

.servico-janela p { font-size: 16px; line-height: 1.55; }

.servico-janela__contato { justify-self: start; min-height: 44px; padding: 0 22px; text-decoration: none; }
@media (min-width: 900px) {
  .estudio { padding: 72px 0 56px; }
  .estudio__titulo { font-size: 38px; }
  .estudio__texto { margin-top: 14px; font-size: 16px; }
  .servicos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: min(1100px, 100%); margin: 48px auto 0; }
  .servico { min-height: 124px; font-size: 15px; }
}