/* === Breakpoints padrão Itajaí Vagas ===
   - Mobile:  max-width 599px
   - Tablet:  600px – 1000px
   - Desktop: min-width 1001px
========================================= */

/* === tablet.css — ajustes gerais até 1000px === */

@media (min-width: 768px) and (max-width: 1000px) {

  /* Grid de vagas → 2 colunas */
 .grid {
  display: grid !important;                           /* garante que a grid se mantenha ativa */
  grid-template-columns: repeat(2, 1fr) !important;   /* força 2 colunas */
  gap: 18px;
  width: 95%;
  max-width: 900px;
  margin: 20px auto 0 auto !important;
  box-sizing: border-box;
}


  /* Cabeçalhos menores */
  header h1 {
    font-size: 1.6rem;
  }
  header p {
    font-size: 1rem;
  }

  /* Botões um pouco mais largos */
  .btn,
  .btn.primary,
  .btn.secondary {
    padding: 9px 16px;
    font-size: 15px;
  }

  /* Formulário de cadastro de vaga */
  form input,
  form select,
  form textarea {
    font-size: 0.95rem;
  }

  /* Navbar espaçamento */
  nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Modal e cards com margem mais suave */
  .card {
    margin: 0 auto;
    width: 95%;
  }
}


/* === Força layout de 2 colunas no tablet (769px–1000px) === */
@media (min-width: 600px) and (max-width: 1000px) {
  html body #saida.grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    justify-content: center !important;
    align-items: start !important;
    width: 94% !important;
    max-width: 900px !important;
    margin: 40px auto !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  html body #saida.grid .card {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
  }
}