/* ==========================================================================
   Widget: Contato (bloco 12)
   Depende de ellos-ds.css e base.css.

   Duas colunas: canais à esquerda, formulário à direita. Sem formulário, os
   canais ocupam a largura de leitura e a seção continua de pé — WhatsApp e
   telefone já cumprem a função do bloco.
   ========================================================================== */

.ew-contato { min-width: 0; }

.ew-contato__inner {
  display: grid;
  gap: var(--ec-sp-7);
  align-items: start;
  padding-inline: var(--ec-gutter);
}

@media (min-width: 900px) {
  .ew-contato__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Sem a coluna do formulário o texto não deve esticar pela tela inteira:
   linha longa demais cansa antes de terminar. */
.ew-contato__inner--solo { max-width: 46rem; }

.ew-contato__copy { min-width: 0; }

/* --------------------------------------------------------------------------
   Coluna que acompanha a rolagem
   -------------------------------------------------------------------------- */

/* Formulário longo empurra WhatsApp e telefone para fora da tela justamente
   enquanto a pessoa preenche — e quem desiste do formulário no meio já não
   tem para onde olhar. Fixada, a coluna continua ali até o fim.

   Três condições, todas necessárias:

   min-width 900px  — abaixo disso o bloco é uma coluna só, e não há do que
                      se descolar. Sticky ali só criaria um pedaço de tela
                      travado.
   min-height 640px — a coluna precisa caber na tela. Mais alta que a
                      viewport, o sticky prende o topo e o fim nunca é
                      alcançado: os últimos canais somem para sempre, que é
                      pior que o problema original.
   align-items:start — já estava na grade, e é requisito: com stretch a
                      coluna teria a altura do formulário e nunca rolaria
                      dentro do próprio espaço.

   position: sticky depende de nenhum ancestral ter overflow diferente de
   visible. O Elementor às vezes deixa overflow: hidden na seção para conter
   animação — se a coluna não grudar, é o primeiro lugar para olhar. */
@media (min-width: 900px) and (min-height: 640px) {
  .ew-contato__copy--fixa {
    position: sticky;
    /* Duas parcelas: a altura do cabeçalho fixo, medida em tempo de execução
       por contato.js, mais a folga escolhida no editor. Sem o JS a primeira
       variável não existe, o fallback é zero e sobra só a folga. */
    top: calc(var(--ew-sticky-header, 0px) + var(--ew-sticky-topo, 2rem));
    /* A folga embaixo evita que a coluna encoste no rodapé da seção no
       último trecho da rolagem. */
    padding-bottom: var(--ec-sp-4);
  }

  /* Modo manual: a distância do editor é o valor final, sem soma.

     A medição automática acerta na maioria dos temas, mas depende da
     marcação — logo que transborda da barra, cabeçalho em duas camadas,
     menu que troca de altura ao rolar. Quando erra, erra em silêncio, e
     quem monta a página fica ajustando um número que não é o número que
     importa. Aqui o que se digita é o que se vê. */
  .ew-contato__copy--fixa-manual {
    top: var(--ew-sticky-topo, 2rem);
  }
}
.ew-contato__title { margin: 0 0 var(--ec-sp-4); }
.ew-contato__lead { margin: 0; }

/* --------------------------------------------------------------------------
   Canais
   -------------------------------------------------------------------------- */

.ew-contato__canais {
  list-style: none;
  margin: var(--ec-sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ec-sp-4);
}

.ew-contato__canal {
  display: flex;
  align-items: flex-start;
  gap: var(--ec-sp-3);
  min-width: 0;
}

.ew-contato__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ec-r-sm);
  background: color-mix(in srgb, var(--ec-blue-600) 12%, transparent);
  color: var(--ec-blue-600);
}
.ew-contato__icone svg { width: 1.25rem; height: 1.25rem; }

.ec-on-dark .ew-contato__icone {
  background: rgba(255, 255, 255, .12);
  color: var(--ec-white);
}

.ew-contato__dados {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ew-contato__dados b {
  font-size: var(--ec-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .62;
}
.ew-contato__dados a,
.ew-contato__dados span {
  font-size: var(--ec-fs-body);
  line-height: 1.45;
  /* Endereço e e-mail longos quebram; só `anywhere` reduz o min-content, e
     sem isso a coluna do grid é empurrada para além da tela. */
  overflow-wrap: anywhere;
}

/* 0,3,1 para vencer o Kit do Elementor, que escreve `.elementor-kit-N a`
   com 0,2,0 e sequestra a cor de qualquer link. */
.ec-scope a.ew-contato__link.ew-contato__link,
.ew-contato .ew-contato__dados a { color: inherit; text-decoration: none; }
.ew-contato .ew-contato__dados a:hover,
.ew-contato .ew-contato__dados a:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Redes
   -------------------------------------------------------------------------- */

.ew-contato__redes {
  list-style: none;
  margin: var(--ec-sp-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-sp-3);
}

.ew-contato__redes a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  color: inherit;
  transition: background var(--ec-dur) var(--ec-ease),
              border-color var(--ec-dur) var(--ec-ease);
}
.ew-contato__redes a:hover,
.ew-contato__redes a:focus-visible {
  background: color-mix(in srgb, var(--ec-blue-600) 12%, transparent);
  border-color: var(--ec-blue-600);
}
.ew-contato__redes svg { width: 1.25rem; height: 1.25rem; }

.ec-on-dark .ew-contato__redes a:hover,
.ec-on-dark .ew-contato__redes a:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Formulário

   O conteúdo aqui é de outro plugin: o cartão dá moldura e respiro, e nada
   além disso. Estilizar campo de terceiro daqui seria disputa de CSS a cada
   atualização dele.
   -------------------------------------------------------------------------- */

.ew-contato__form {
  min-width: 0;
  padding: var(--ec-sp-6);
  border-radius: var(--ec-r-lg);
  background: var(--ec-white);
  color: var(--ec-ink-900);
  box-shadow: var(--ec-shadow-card);
}

/* Sem cartão: o formulário senta direto no fundo da seção. Serve a fundo
   escuro, e é o que faz o contrato de esquema valer alguma coisa — com o
   cartão branco por baixo, o formulário é sempre uma ilha clara.

   Sem padding nem sombra, e não com fundo transparente por cima do cartão:
   `background: transparent` deixaria a sombra e o recuo, e o formulário
   flutuaria numa moldura invisível. */
.ew-contato__form--nu {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none;
}

.ew-contato__form-title {
  font-family: var(--ec-font-display);
  text-transform: uppercase;
  font-size: var(--ec-fs-d3);
  line-height: 1;
  letter-spacing: var(--ec-ls-display);
  margin: 0 0 var(--ec-sp-5);
  overflow-wrap: anywhere;
}

/* Tom fixo do título da coluna.

   Regra própria, e não a de `base.css`: aquela pede `.ew-title` junto, e essa
   classe é justamente a que o controle de cor personalizada da seção usa como
   alvo. Título de formulário com `.ew-title` seria repintado junto com o
   título da seção, e o controle daqui pareceria não fazer nada. */
.ew-contato__form-title.ew-title--red   { color: var(--ec-red-500); }
.ew-contato__form-title.ew-title--blue  { color: var(--ec-blue-900); }
.ew-contato__form-title.ew-title--white { color: var(--ec-white); }
.ew-contato__form-title.ew-title--ink   { color: var(--ec-ink-900); }

.ew-contato__lgpd {
  margin: var(--ec-sp-4) 0 0;
  font-size: var(--ec-fs-xs);
  line-height: 1.5;
  color: var(--ec-ink-400);
}