/* ==========================================================================
   CASJ — Contato (contato.html)
   Componente Figma: "Contato" (2566:4805)
   ========================================================================== */

body[data-page="contato"] .container-casj { max-width: calc(1280px + 3rem); }

.contato-band { background: #f4f7fc; padding-block: 64px; }

.contato-intro { text-align: center; margin-bottom: 48px; }
.contato-intro__text {
  max-width: 900px;
  margin: 24px auto 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--casj-cinza-texto);
}

/* Unidades (abas) — markup e classes reaproveitados de sobre-tour-virtual.html;
   estilos vêm de tour-virtual.css (.unidades-box, .unidade-tab, .unidades-content,
   .unidade-contato etc.), só o espaçamento abaixo é próprio desta página. */
.unidades-box { margin-bottom: 40px; }

/* Trabalhe conosco */
.trabalhe-card {
  display: grid;
  grid-template-columns: 430fr 850fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 40px;
}
.trabalhe-card__img { aspect-ratio: 430 / 397; border-radius: 10px; overflow: hidden; }
.trabalhe-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 575.98px) {
  .trabalhe-card__img { aspect-ratio: 1 / 1; }
}
.trabalhe-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: #0b192c;
  font-size: 32px;
  line-height: 1.3;
  margin: 12px 0 16px;
}
/* Quebra depois de "missão" só no desktop (o card vira 1 coluna abaixo de
   900px, ver breakpoint mais abaixo — no mobile o texto quebra livre). */
.trabalhe-card__title-break { display: none; }
@media (min-width: 900.02px) {
  .trabalhe-card__title-break { display: block; }
}
.trabalhe-card__text { font-size: 18px; line-height: 1.6; color: var(--casj-cinza-texto); margin-bottom: 20px; }
.trabalhe-card .btn-casj { margin: 0; }

@media (max-width: 900px) {
  .trabalhe-card { grid-template-columns: 1fr; padding: 24px; }
}
/* No mobile some o "card" (fundo branco, borda arredondada, padding) —
   fica só o conteúdo solto na página, como as outras sections. */
@media (max-width: 575.98px) {
  .trabalhe-card { background: transparent; border-radius: 0; padding: 0; }
}

/* Formulário */
.contato-form-section { padding-block: 64px; }
.contato-form-intro { text-align: center; margin-bottom: 40px; }
.contato-form-intro__text {
  max-width: 900px;
  margin: 24px auto 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--casj-cinza-texto);
}

.contato-form { max-width: 1280px; margin-inline: auto; }
.contato-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.contato-form input,
.contato-form textarea {
  width: 100%;
  background: #f4f7fc;
  border: 2px solid #e8f0ff;
  border-radius: 12px;
  padding: 20px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  color: #0b192c;
}
.contato-form input { height: 65px; }
.contato-form input::placeholder,
.contato-form textarea::placeholder { color: #777; }
.contato-form textarea { height: 227px; resize: vertical; margin-bottom: 24px; }
.contato-form__submit { text-align: center; }
@media (max-width: 575.98px) {
  /* Em vez de deixar o texto quebrar linha dentro do botão, encolhe o
     padding lateral (mesma solução usada nos CTAs de Ensino). */
  .contato-form__submit .btn-casj {
    width: 100%;
    padding-inline: 16px;
    white-space: nowrap;
    font-size: clamp(13px, 4.5vw, 20px);
  }
}

@media (max-width: 700px) {
  .contato-form__row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
}

/* Contact Form 7 — reaproveita os estilos acima (o form fica dentro de
   .contato-form); só o feedback de validação/envio é específico do CF7. */
.contato-form .wpcf7-form-control-wrap { display: block; position: relative; }
.contato-form .wpcf7-not-valid { border-color: #dc3545 !important; }
.contato-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #dc3545;
  font-size: 14px;
}
.contato-form .wpcf7-spinner { margin: 0 0 0 12px; }
.contato-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 2px solid var(--casj-azul);
  border-radius: 12px;
  color: var(--casj-azul);
  font-size: 16px;
  text-align: center;
}
.contato-form form.sent .wpcf7-response-output { border-color: #28a745; color: #28a745; }
.contato-form form.failed .wpcf7-response-output,
.contato-form form.invalid .wpcf7-response-output,
.contato-form form.unaccepted .wpcf7-response-output,
.contato-form form.spam .wpcf7-response-output,
.contato-form form.aborted .wpcf7-response-output,
.contato-form form.payment-required .wpcf7-response-output { border-color: #dc3545; color: #dc3545; }