/* Contacto - Elevate Solutions (Épico 7)
   Layout de 2 colunas (formulário + info direta) - mobile-first: uma só
   coluna empilhada até 900px (o breakpoint já usado no resto do site para
   grelhas principais, ex: .hero-grid em home.css), 2 colunas lado a lado
   a partir daí. O formulário fica mais largo (1.3fr) do que o painel de
   info (1fr) - é a ação principal da página.

   Redesenhado (2ª versão): a v1 tinha gap:64px FIXO entre os dois painéis
   em qualquer largura, e só o formulário tinha fundo/borda de cartão - em
   coluna única (mobile), isso deixava uma faixa vazia de 64px entre o fim
   de um cartão visível e texto "solto" sem cartão nenhum, sem nada a ligar
   os dois visualmente. Agora os dois painéis partilham o mesmo tratamento
   de cartão (.contact-panel) e o gap encolhe em mobile. */
.contact-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .contact-grid {
    gap: var(--space-8);
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }
}

/* min-width:0 - mesma causa já documentada abaixo para .contact-info-text e
   em components.css para .field: são itens de uma grid (.contact-grid) e por
   omissão min-width é "auto", que se recusa a encolher abaixo da largura do
   conteúdo interno. Sem isto, em ecrãs estreitos (320px) o formulário e o
   painel de info não encolhiam para caber na faixa da grid, empurrando a
   secção inteira para fora do viewport (scroll horizontal na página toda). */
.contact-form-panel,
.contact-info-panel {
  min-width: 0;
  background: var(--navy-700);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
@media (min-width: 700px) {
  .contact-form-panel,
  .contact-info-panel { padding: var(--space-7); }
}

/* .field/input/textarea (components.css) foram desenhados para fundo
   claro (border neutral-200, background white) - este formulário vive em
   fundo escuro (o resto do site é todo tema escuro, ver theme-dark.css),
   por isso precisa do seu próprio tratamento aqui, não no ficheiro
   partilhado (só esta página tem um formulário destes). */
.contact-form-panel .field label { color: var(--white); }
.contact-form-panel .field input,
.contact-form-panel .field textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--white);
}
.contact-form-panel .field input::placeholder,
.contact-form-panel .field textarea::placeholder { color: var(--text-on-dark-muted); }
.contact-form-panel .field input:focus,
.contact-form-panel .field textarea:focus { border-color: var(--sky-500); }
.contact-form-panel .field .hint { color: var(--text-on-dark-muted); }
.contact-form-panel .field.has-error input,
.contact-form-panel .field.has-error textarea { border-color: var(--error); }

.contact-form-panel textarea { resize: vertical; min-height: 140px; }

/* 2 campos por linha em ecrãs largos (nome+email, telefone+assunto) -
   mensagem ocupa sempre a linha toda (.field-full). Empilhado em coluna
   única abaixo de 700px, mesmo critério do resto do site. */
.contact-form-row {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .contact-form-row { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

.contact-info-panel h2 { color: var(--white); margin-bottom: var(--space-2); }
.contact-info-panel > p { color: var(--text-on-dark-muted); margin-bottom: var(--space-6); }

.contact-info-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.contact-info-item { display: flex; align-items: flex-start; gap: var(--space-4); }
/* Causa real do transbordo horizontal só nesta página (visto pelo
   utilizador em 320px): "elevatewebsolutions.pt@gmail.com" é uma única
   string sem espaços, sem ponto de quebra natural. Dentro de uma linha
   flex (.contact-info-item), o item de texto tem por omissão
   min-width:auto - o browser recusa-se a encolhê-lo abaixo da largura do
   conteúdo por quebrar, empurrando a página inteira para a direita (o
   gap da esquerda mantém-se, o da direita desaparece). min-width:0
   permite encolher; overflow-wrap:break-word (abaixo) permite à própria
   string quebrar quando precisar. */
.contact-info-text { min-width: 0; }
.contact-info-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(93, 195, 240, 0.14);
  color: var(--sky-500);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-icon svg { width: var(--icon-md); height: var(--icon-md); }
.contact-info-item h3 {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-1);
}
.contact-info-item p,
.contact-info-item a {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-300);
  text-decoration: none;
  overflow-wrap: break-word;
}
.contact-info-item a:hover { color: var(--sky-500); }

/* Botão de submeter com estado de carregamento (Épico 7 - AC exige
   confirmação clara após o envio). O spinner só existe visualmente
   enquanto .is-loading está presente (assets/js/main.js); aria-live no
   .form-status (components.css/HTML) é o que garante que leitores de ecrã
   também são avisados, não só quem vê o ecrã. */
.contact-submit { position: relative; }
/* Alvo de toque maior e consistente com o resto do site em mobile (ex: os
   botões de .btn-group já ficam a 100% até 557px). */
@media (max-width: 557px) {
  .contact-submit { width: 100%; justify-content: center; }
}
.contact-submit .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: currentColor;
  border-radius: 50%;
}
.contact-submit.is-loading { pointer-events: none; opacity: 0.75; }
.contact-submit.is-loading .spinner { display: inline-block; animation: contact-spin 0.6s linear infinite; }
.contact-submit.is-loading .btn-label { opacity: 0.85; }
@keyframes contact-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .contact-submit.is-loading .spinner { animation: none; }
}