/*
 * BARBEARIA GUARARAPES — V32
 * Capa e acesso interno responsivos em celular/tablet, inclusive em paisagem.
 */

/* Tablet e celular em paisagem: a fotografia vira a base da tela e o acesso
   permanece inteiro, sem empurrar conteúdo para fora da área visível. */
@media (orientation: landscape) and (pointer: coarse),
       (max-width: 1180px) and (orientation: landscape) {
  .login-page {
    position: relative !important;
    isolation: isolate !important;
    display: block !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    background: #02050a !important;
  }

  .login-visual {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100svh !important;
    z-index: 0 !important;
  }

  .login-visual > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 61% center !important;
  }

  .login-visual__shade {
    background:
      linear-gradient(90deg, rgba(1,4,8,.18) 0%, rgba(1,4,8,.28) 42%, rgba(1,4,8,.86) 69%, rgba(1,4,8,.97) 100%),
      linear-gradient(0deg, rgba(1,4,8,.72), transparent 48%) !important;
  }

  .login-visual__brand {
    top: 24px !important;
    left: 26px !important;
    right: calc(min(48vw, 620px) + 42px) !important;
  }

  .login-visual__brand > span {
    display: none !important;
  }

  .login-visual__message {
    left: 32px !important;
    right: auto !important;
    bottom: 30px !important;
    width: min(43vw, 590px) !important;
  }

  .login-visual__message h1 {
    margin: 9px 0 8px !important;
    font-size: clamp(34px, 4.1vw, 58px) !important;
    line-height: .98 !important;
  }

  .login-visual__message p {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  .login-visual__message > div {
    display: none !important;
  }

  .login-panel {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow-y: auto !important;
    padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) 50% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .login-box {
    width: min(100%, 510px) !important;
    max-height: calc(100svh - 36px) !important;
    overflow-y: auto !important;
    padding: clamp(20px, 3vh, 34px) clamp(20px, 2.5vw, 34px) !important;
    border-radius: 24px !important;
    background: linear-gradient(150deg, rgba(10,21,36,.96), rgba(4,9,17,.98)) !important;
    border: 1px solid rgba(78,220,255,.22) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.62), 0 0 38px rgba(45,202,255,.08) !important;
    backdrop-filter: blur(18px) !important;
  }

  .login-box h2 {
    font-size: clamp(28px, 3vw, 42px) !important;
  }

  .login-box > p {
    margin-bottom: 14px !important;
  }

  .login-box form > label {
    margin-top: 10px !important;
  }

  .login-box form > label > div {
    min-height: 48px !important;
  }

  .login-submit {
    min-height: 48px !important;
  }

  .demo-access,
  .login-footer {
    margin-top: 12px !important;
  }

  .login-back-choice {
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    left: max(16px, env(safe-area-inset-left)) !important;
    z-index: 5 !important;
  }

  .login-panel__mobile-brand {
    display: none !important;
  }

  .install-app--team-entry {
    margin-top: 12px !important;
  }
}

/* Celular em pé: foto primeiro e formulário abaixo, sem o nome cobrir a imagem. */
@media (max-width: 760px) and (orientation: portrait) {
  .login-page {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  .login-visual {
    position: relative !important;
    inset: auto !important;
    height: 42svh !important;
    min-height: 280px !important;
  }

  .login-visual > img {
    object-position: 62% center !important;
  }

  .login-visual__shade {
    background: linear-gradient(0deg, #02050a 0%, rgba(2,5,10,.20) 54%, rgba(2,5,10,.08) 100%) !important;
  }

  .login-visual__brand {
    top: 18px !important;
    left: 16px !important;
    right: 16px !important;
  }

  .login-visual__message {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
  }

  .login-visual__message > span,
  .login-visual__message > p,
  .login-visual__message > div {
    display: none !important;
  }

  .login-visual__message h1 {
    max-width: 290px !important;
    margin: 0 !important;
    font-size: clamp(29px, 9vw, 40px) !important;
    line-height: 1 !important;
  }

  .login-panel {
    position: relative !important;
    min-height: 58svh !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 48px 12px calc(26px + env(safe-area-inset-bottom)) !important;
  }

  .login-box {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Telefones baixos em paisagem: reduz apenas textos decorativos, nunca o formulário. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 620px) {
  .login-visual__message {
    display: none !important;
  }

  .login-visual__brand {
    right: calc(min(51vw, 560px) + 24px) !important;
  }

  .login-panel {
    padding-left: 47% !important;
  }

  .login-box {
    width: min(100%, 500px) !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .demo-access {
    display: none !important;
  }
}