/* como-chegar.css: onde fica o estúdio, no molde do "No coração do Rio, perto de você." do Studio CB, numa seção cinza.
   À esquerda, o título, o endereço com o botão de copiar, os jeitos de chegar (metrô, ônibus, carro, portaria) e os
   botões que abrem o Waze, o Uber e o Google Maps (a ideia do Podfactory); à direita, o mapa.
   Depende de: base.css e secoes-do-estudio.css. Telefone nas regras soltas, computador no @media do fim. */

.chegar__dentro { display: grid; gap: 28px; }

.chegar__texto { display: grid; gap: 20px; align-content: start; }
.chegar__texto .secao-estudio__cabeca { margin-bottom: 0; }

.chegar__endereco { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.chegar__endereco address { font-size: 16px; font-weight: 700; font-style: normal; }

.chegar__copiar {
  min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--branco); font-size: 13px; font-weight: 700;
}
.chegar__copiar:hover { background: var(--bloco-escuro); }

.chegar__jeitos { display: grid; gap: 10px; font-size: 14px; line-height: 1.5; }
.chegar__jeitos strong { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.chegar__jeitos span { color: var(--texto-suave); }

.chegar__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* no fundo cinza o botão cinza some: aqui ele é branco */
.chegar__botoes .botao-cinza { background: var(--branco); }
.chegar__botoes .botao-cinza:hover { background: var(--bloco-escuro); }

.chegar__mapa {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: var(--raio);
  background: var(--bloco-escuro);
}

.chegar__nota { margin-top: 8px; font-size: 12px; color: var(--texto-suave); }

@media (min-width: 900px) {
  .chegar__dentro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .chegar__jeitos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .chegar__mapa { aspect-ratio: 16 / 11; }
}