/* =============================================================================
   LOBATO MACHADO — página de contato
   Complementa style.css. Só o que é exclusivo desta tela.

   01. Topo
   02. Layout
   05. Cartão do formulário
   06. Canais por setor
   07. Escritório
   08. Responsivo
   ========================================================================== */

/* ─────────────────────────────────────────────────────────── 01. TOPO */
.pagina-contato { background: var(--surface); }
.contato { padding-top: var(--header-h); }

.contato__topo {
  background: var(--bordo);
  color: var(--ink);
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem);
}
.contato__topo .migalhas { color: var(--ink-50); margin-bottom: 1.25rem; }
.contato__topo .migalhas a { color: var(--vinho-detalhe); }

.contato__titulo {
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  max-width: 20ch; text-wrap: balance;
}

/* ────────────────────────────────────────────────────────── 02. LAYOUT
   Sem o bloco de motivos/passos ao lado (removido a pedido), o formulário
   fica sozinho e centralizado, com o mesmo respiro acima e abaixo. */
.contato__layout {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.contato__layout--solo { display: flex; justify-content: center; }
.contato__lateral--solo { width: 100%; max-width: 560px; }

/* ────────────────────────────────────── 05. CARTÃO DO FORMULÁRIO */
.cartao-form {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.cartao-form__topo { padding: 1.35rem 1.5rem 1rem; border-bottom: 1px solid var(--line-soft); }
.cartao-form__titulo { font-size: 1.25rem; }
.cartao-form__sub { margin-top: .35rem; font-size: .88rem; color: var(--ink-50); }

/* Mesmo padrão compacto da ficha: sem rótulos acima, respiro mínimo */
.form-contato { display: grid; gap: .5rem; padding: 1.25rem 1.5rem 1.5rem; }
.form-contato .field { gap: 0; }
.form-contato .field__input { padding: .75rem .95rem; font-size: .95rem; }
.form-contato textarea.field__input { resize: vertical; min-height: 104px; line-height: 1.5; }
.form-contato .field__error { min-height: 0; margin-top: .2rem; font-size: .78rem; }
.form-contato .field__error:empty { display: none; }
.form-contato .btn { margin-top: .3rem; }
.form-contato .form-status:empty { display: none; }

.cartao-form__ou {
  text-align: center; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-30);
  margin-block: .35rem;
}

/* ──────────────────────────────────────── 06. CANAIS POR SETOR */
.grade-canais {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--gap);
}
.canal {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.canal:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.canal__icone {
  width: 44px; height: 44px; border-radius: var(--r);
  display: grid; place-items: center; font-size: 1.3rem;
  background: var(--bordo-100); color: var(--ink);
  margin-bottom: .35rem;
}
.canal__icone--wpp { background: rgba(31, 175, 84, .12); color: var(--wpp); }
.canal__titulo { font-size: 1.02rem; }
.canal__desc { font-size: .9rem; color: var(--ink-50); flex: 1; }
.canal__link {
  font-weight: 800; color: var(--ink); font-size: 1.02rem;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  word-break: break-word;
}
.canal__link:hover { color: var(--bordo-700); }
/* Endereço de e-mail é longo: fonte menor + nowrap evita quebrar em duas linhas */
.canal__link--email { font-size: .78rem; letter-spacing: -.01em; white-space: nowrap; }

/* ────────────────────────────────────────────── 07. ESCRITÓRIO */
.escritorio__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center;
}
.escritorio__endereco {
  display: flex; gap: .7rem; align-items: flex-start;
  font-style: normal; line-height: 1.6; color: var(--ink-70);
  margin-block: 1.5rem;
}
.escritorio__endereco svg { font-size: 1.35rem; color: var(--ink); flex: none; margin-top: 2px; }
.escritorio__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.escritorio__midia img {
  width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-2);
  aspect-ratio: 16 / 10; object-fit: cover;
}

/* ─────────────────────────────────────────────── 08. RESPONSIVO */
@media (max-width: 1024px) {
  .escritorio__grid { grid-template-columns: 1fr; }
  .escritorio__midia { order: -1; }
}

@media (max-width: 700px) {
  .canal { padding: 1.25rem; }
  .cartao-form__topo, .form-contato { padding-inline: 1.15rem; }
}