/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE — Formulário de contacto e informações de localização
   Grid de 2 colunas: informações à esquerda, formulário à direita
   ═══════════════════════════════════════════════════════════════ */


/* ─── CONTACT GRID ───────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr; /* coluna de info mais estreita que a do formulário */
  gap: var(--space-xl);             /* espaço entre as duas colunas */
  align-items: start;               /* alinha topo-a-topo (não estica as colunas) */
}
/* em mobile passa a coluna única */
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }


/* ─── CONTACT INFO ───────────────────────────────────────────────── */
/* Coluna esquerda: lista de items de contacto (email, telefone, morada) */
.contact-info            { display: flex; flex-direction: column; gap: 1.5rem; }

/* cada item: ícone SVG + bloco de texto lado a lado */
.contact-info__item      { display: flex; align-items: flex-start; gap: 1rem; }
/* ícone laranja; flex-shrink:0 impede compressão; margin-top alinha com o texto */
.contact-info__item svg  { flex-shrink: 0; color: var(--color-accent); margin-top: 3px; }
/* rótulo do campo (ex: "Email") em negrito pequeno */
.contact-info__item strong { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.25rem; }
/* valor do campo (texto ou link) em cor muted */
.contact-info__item p,
.contact-info__item a    { font-size: 0.95rem; color: var(--color-text-muted); }
/* link fica laranja ao hover */
.contact-info__item a:hover { color: var(--color-accent); }

/* ─── CONTACT FORM ───────────────────────────────────────────────── */
/* Coluna direita: caixa branca que contém o formulário */
.contact-form-wrap {
  background: var(--color-white);          /* fundo branco */
  border: 1px solid var(--color-border);   /* borda fina */
  border-radius: var(--radius-xl);         /* cantos muito arredondados */
  padding: clamp(1.5rem, 4vw, 2.5rem);     /* padding responsivo: mín. 24px, máx. 40px */
}

/* formulário em coluna única com espaço entre campos */
.contact-form     { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form button[type="submit"] { margin-top: 0.75rem; } /* espaço extra antes do botão de envio */