/* ============================================================================
   page-contato.css - Emma Café Bistrot
   Contato/localização na mesma linguagem do cardápio impresso: fundo
   chapado, rótulo de bloco em vinho (uppercase, tracking largo), dado em
   preto suave. Zero card, zero borda entre blocos, zero moldura no mapa,
   zero radius, zero sombra, zero botão pill - links de contato são texto.
   LAYOUT (2026-07-16): duas colunas no desktop — textos alinhados à
   esquerda, mapa à direita acompanhando a altura; empilha no mobile.
   Consome tokens de design-system.css. Feito por Frame Tecnologia.
   ============================================================================ */

.contato{
  max-width:1120px;
  padding-block:clamp(3rem,8vw,5rem) clamp(4rem,10vw,7rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:stretch;
  text-align:left;
}

/* Coluna esquerda: título + subtítulo + ficha */
.contato__info{
  display:flex;
  flex-direction:column;
}

/* ─── Título da página ─── */
.contato__topo{
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
.contato__titulo{
  margin:0;
  font-weight:var(--peso-negrito);
  font-size:clamp(2rem,6vw,3rem);
  line-height:1;
  letter-spacing:var(--tracking-logo);
  color:var(--vinho);
}
.contato__sub{
  margin:clamp(1.25rem,3vw,1.75rem) 0 0;
  font-family:var(--fonte-italica);
  font-style:italic;
  font-weight:var(--peso-regular);
  font-size:1.1rem;
  line-height:1.5;
  color:var(--texto);
  max-width:46ch;
}

/* ─── Ficha: blocos empilhados, sem linha divisória entre eles ─── */
.contato__ficha{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:clamp(2.25rem,5vw,3rem);
}

.contato__rotulo{
  margin:0 0 .6rem;
  font-weight:var(--peso-regular);
  font-size:var(--tam-rotulo);
  letter-spacing:var(--tracking-largo);
  text-transform:uppercase;
  color:var(--vinho);
}

.contato__dado{
  margin:0;
  font-style:normal;
  font-size:1.05rem;
  color:var(--texto);
}
.contato__obs{
  display:block;
  margin-top:.35rem;
  font-size:.85rem;
  color:var(--texto-muted);
}
.contato__estacionamento{ margin-top:.5rem; }

.contato__links{ margin:.35rem 0 0 }
.contato__link{
  display:inline-block;
  margin-top:.5rem;
  font-weight:var(--peso-medio);
  color:var(--vinho);
  text-underline-offset:3px;
}
.contato__sep{
  display:inline-block;
  margin:0 .5rem;
  color:var(--texto-muted);
}

/* ─── Mapa: sem moldura, sem sombra, sem radius; ocupa a coluna direita e
   acompanha a altura da coluna de textos ─── */
.contato__mapa{
  margin:0;
  width:100%;
  display:flex;
  flex-direction:column;
}
.contato__mapa iframe{
  display:block;
  width:100%;
  flex:1 1 auto;
  min-height:360px;
}
.contato__mapa-legenda{
  margin-top:.75rem;
  font-size:.85rem;
  color:var(--texto-muted);
}

/* ─── Mobile: empilha em coluna única, mapa abaixo dos textos ─── */
@media (max-width:860px){
  .contato{
    grid-template-columns:1fr;
    max-width:640px;
    gap:clamp(3rem,8vw,4rem);
    align-items:start;
  }
}

/* ─── FAQ oculto (aguardando aprovação da cliente) ───────────────────────────
   Controlado por $EMMA['faq_visivel'] (includes/config.php). Enquanto false,
   contato.php renderiza esta seção com a classe .is-oculto + aria-hidden, e o
   JSON-LD FAQPage (includes/schema.php) NÃO é emitido. display:none tira o
   bloco do fluxo e da árvore de acessibilidade — o conteúdo não deve ser
   anunciado a leitor de tela enquanto não estiver aprovado. FAQ oculto e
   FAQPage andam juntos: nunca reative um sem o outro (cloaking).
   ────────────────────────────────────────────────────────────────────────── */
.contato-faq.is-oculto{
  display:none;
}