/* ==========================================================================
   VALSTR — Login Page (layout only)
   NOTE: This file assumes styles.css is also loaded first.
   ========================================================================== */

/* Page background treatment for the split hero look */
body.login-bg{
  background:
    linear-gradient(180deg,#050a33 0%, #0b0f3e 22%, #0b0f3e 22%) no-repeat,
    var(--bg);
}

/* Split layout */
.auth-shell{
  min-height:100svh;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:32px;
  align-items:stretch;
  padding:28px;
}

/* Left “brand” pane */
.brand-pane{
  border-radius:22px;
  background: radial-gradient(1000px 400px at -10% -10%, rgba(43,107,255,.35), transparent 45%),
              #050a33;
  color:#eaf0ff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px;
  box-shadow: var(--shadow);
}
.brand{display:flex; align-items:center; gap:14px}
.logo-login{height:84px; width:auto; display:block; filter: drop-shadow(0 4px 16px rgba(0,0,0,.25));}

.hero-copy{padding:10px 6px 0}
.hero-copy h1{margin:0 0 8px; font-size:40px; letter-spacing:.2px}
.hero-copy p{margin:0; color:#ccd7ff; max-width:40ch; line-height:1.5}

.legal{opacity:.8}

/* Right auth card (uses global .card styles) */
.auth-card{
  max-width:520px; width:100%;
  margin:auto;
  padding:28px; /* keep padding explicit here */
}

/* Empty Caspio container (inherits global .embed-box if you want) */
.embed-box{
  margin-top:16px;
  min-height: 240px;
  border: 2px dashed var(--ring);
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-style:italic;
}

/* Responsive */
@media (max-width: 980px){
  .auth-shell{
    grid-template-columns:1fr;
    padding:18px;
  }
  .brand-pane{height:220px; padding:20px}
  .hero-copy h1{font-size:28px}
  .auth-card{margin-top:-40px}
}