/* Contato — importa a base global + os componentes que a página usa; o
   resto deste arquivo é só o que é exclusivo do Contato. */
@import url('../global.css');
@import url('../components/header.css');
@import url('../components/footer.css');
@import url('../components/forms.css');

/* placeholder de foto (ainda sem asset real — ex: retratos da equipe);
   sem uso encontrado na página atual (o card "Trabalhe conosco" já usa uma
   foto real) — mantido por precaução (ver relatório final). */
.photo-placeholder {
  background: linear-gradient(135deg, var(--color-placeholder-a), var(--color-placeholder-b));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
  min-height: 200px;
}
/* foto real: mesmo tratamento visual (cantos arredondados), com <img> real dentro */
.photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 200px;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.contato-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--color-gray);
  color: var(--color-white);
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.contato-card .form-field label { color: var(--color-white); }
.contato-card__form,
.contato-card__channels { position: relative; z-index: 1; }
.contato-card__channels h3 {
  color: var(--color-yellow);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 1.1;
  margin-bottom: 16px;
}
.channel-item {
  color: var(--color-yellow);
  font-size: 1.1rem;
  margin-bottom: 12px;
}

/* formulários compactos dos cards de Contato, para não deixar os
   banners altos demais */
.contato-card .form-field,
.trabalhe-card .form-field { margin-bottom: 10px; }
.contato-card .form-field label,
.trabalhe-card .form-field label { font-size: 0.95rem; margin-bottom: 3px; }
.contato-card .form-field input,
.contato-card .form-field select,
.contato-card .form-field textarea,
.trabalhe-card .form-field input,
.trabalhe-card .form-field select,
.trabalhe-card .form-field textarea {
  padding: 8px 18px;
  font-size: 0.9rem;
}
.contato-card .form-field textarea { min-height: 64px; }

/* título gigante "CONTATO" espremido entre os dois cards, como no protótipo */
.contato-bg-title {
  position: relative;
  z-index: 0;
  text-align: right;
  font-size: clamp(3.5rem, 11vw, 11rem);
  margin: 0;
}

.trabalhe-card {
  position: relative;
  z-index: 2;
  background: var(--color-yellow);
  border-radius: var(--radius-xl) 0 var(--radius-xl) 0;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.trabalhe-card h3 { font-style: italic; font-weight: 900; font-size: var(--fs-h1); color: var(--color-gray); }
.trabalhe-card__lead { font-style: italic; font-size: 1.2rem; margin: 6px 0 12px; color: var(--color-gray); }
.trabalhe-card .photo,
.trabalhe-card .photo-placeholder { aspect-ratio: 559/568; }

@media (max-width: 900px) {
  .contato-card, .trabalhe-card { grid-template-columns: 1fr; padding: 26px; }
  .contato-bg-title { margin: 2px 0; }
}