/* ============================
   LAYOUT AUTH - DESKTOP
============================= */

.auth-page {
  min-height: calc(100vh - 72px); /* abaixo do navbar */
}

.auth-page__row {
  min-height: calc(100vh - 72px);
}

.auth-page__form-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-card {
  max-width: 420px;
  width: 100%;
  padding: 40px 16px;
}


/* ============================
   IMAGEM - DESKTOP
============================= */

.auth-page__image-col {
  position: relative;
  overflow: hidden;
}

.auth-hero {
  position: absolute;
  inset: 0;
  background-image: url('/images/auth-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ============================
   MOBILE BEHAVIOR:
   - imagem vem ANTES do formulário
   - footer sumiu (por lógica no layout)
============================= */

@media (max-width: 991.98px) {

  .auth-page {
    min-height: auto;
  }

  .auth-page__row {
    display: flex;
    flex-direction: column; /* <-- ESSA LINHA COLOCA A IMAGEM ANTES DO FORM */
    min-height: auto;
  }

  /* Mostra imagem no mobile */
  .auth-page__image-col {
    position: relative;
    order: -1; /* <-- IMAGEM VEM PRIMEIRO */
    display: block !important;
    height: 260px; /* altura ideal no mobile */
  }

  .auth-hero {
    position: absolute;
    inset: 0;
  }

  /* Form abaixo da imagem */
  .auth-card {
    margin-top: 24px;
    margin-bottom: 40px;
    padding: 24px 16px;
  }
}