/* ==========================================================================
   Página /como-chegar (nova, plano de SEO 2.14)
   --------------------------------------------------------------------------
   Carregue depois do /css/site.css. Usa os componentes do site (cabeça de
   seção, painel #fafafa, link com seta, botão escuro, imagem com cantos de
   16 px) e só acrescenta a grade desta página:

     título e frase centralizados
     painel: à esquerda os dados (endereço, chegada, estacionamento,
             horário, telefone e WhatsApp) e o botão de agendar;
             à direita as fotos da clínica (uma larga e duas quadradas)
     "Entre em contato" (parte pronta, com o mapa) e rodapé

   No tablet e no celular as fotos descem para baixo dos dados.
   Pontos de quebra iguais aos do site: 1200 e 768 px.
   ========================================================================== */

/* Frase do topo um pouco mais larga que a padrão (400 px) */
.local-topo .cabeca-secao > .local-topo__frase {
  max-width: 480px;
}

/* --------------------------------------------------------------------------
   Painel com os dados e as fotos
   -------------------------------------------------------------------------- */

.local__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}

.local__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  min-width: 0;
}

.local__dados {
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style: none;
}

.local__dado {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto);
}

.local__dado:last-child {
  border-bottom: 1px solid var(--cor-borda);
}

.local__dado > svg {
  flex: none;
  width: 24px;
  height: 24px;
}

.local__dado-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  overflow-wrap: break-word;
}

.local__dado-texto .texto + .texto {
  margin-top: 0;
}

.local__rotulo {
  font-weight: 600;
}

.local__dado-texto .texto a:hover {
  color: var(--cor-oliva);
}

.local__dado-texto .link-seta {
  margin-top: 4px;
}

/* Fotos: a larga em cima, as duas quadradas lado a lado */
.local__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.local__foto--larga {
  grid-column: 1 / -1;
}

@media (max-width: 1199.98px) {
  .local__grade {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 767.98px) {
  .local__grade {
    gap: 32px;
  }

  .local__texto {
    gap: 24px;
  }

  .local__dado {
    gap: 12px;
    padding: 20px 0;
  }

  .local__fotos {
    gap: 12px;
  }
}