/* ============================================================
   Auth layout
   ============================================================ */
.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Brand panel ---------- */
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem;
  color: #fff;
  background-image: url('https://ka-group.si/assets/hero-image.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Identical gradient to .hero-overlay on the public site */
  background: linear-gradient(135deg, rgba(34, 108, 203, 0.65) 0%, rgba(127, 168, 142, 0.45) 50%, rgba(250, 246, 239, 0.3) 100%);
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand .eyebrow { color: #D9E7F7; }
.auth-brand .logo-img { height: 44px; }

.auth-brand-body { max-width: 30ch; }
.auth-tagline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.875rem, 2.2vw + 1rem, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 144;
  color: #fff;
}
.auth-brand-lead {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 38ch;
}
.auth-brand-foot { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.82); }
.auth-brand-foot a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.auth-brand-foot a:hover { color: #fff; text-decoration-color: #fff; }

/* ---------- Form panel ---------- */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem var(--pad);
  background: var(--c-bg);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
}
.auth-card-logo { display: none; margin-bottom: 1.75rem; }
.auth-sub { color: var(--c-text-2); font-size: 0.9375rem; margin-top: 0.5rem; margin-bottom: 1.75rem; }

.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.field-head label { margin-bottom: 0.375rem; }
.field-link { font-size: 0.8125rem; text-decoration: none; }
.field-link:hover { text-decoration: underline; }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 2.875rem; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  transition: color var(--t-fast), background var(--t-fast);
}
.password-toggle:hover { color: var(--c-text); background: var(--c-bg-soft); }
.password-toggle svg { width: 18px; height: 18px; stroke-width: 1.5; }

.field-hint { font-size: 0.8125rem; color: var(--c-warn-text); margin-top: 0.375rem; }

.auth-remember { margin: 1.125rem 0 1.375rem; }

.auth-note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
  font-size: 0.8125rem;
  color: var(--c-text-2);
  line-height: 1.55;
}

.auth-legal {
  margin-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--c-text-3);
}
.auth-legal a { color: var(--c-text-3); text-decoration: none; }
.auth-legal a:hover { color: var(--c-text-2); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand {
    min-height: 220px;
    justify-content: flex-end;
    padding: 1.75rem var(--pad);
  }
  .auth-brand .logo { position: absolute; top: 1.5rem; left: var(--pad); }
  .auth-brand-body { max-width: none; }
  .auth-tagline { font-size: 1.75rem; }
  .auth-brand-lead { display: none; }
  .auth-brand-foot { display: none; }
  .auth-panel { padding: 2rem var(--pad) 3rem; align-items: flex-start; }
}

@media (max-width: 640px) {
  html { font-size: 16px; }
  :root { --pad: 1rem; }
  /* Below this width the image band costs more than it gives */
  .auth-brand { display: none; }
  .auth-shell { min-height: 100dvh; }
  .auth-panel { align-items: center; padding: 1.5rem var(--pad) 2.5rem; }
  .auth-card { border: 0; box-shadow: none; background: transparent; padding: 0; max-width: 400px; }
  .auth-card-logo { display: inline-flex; }
  .auth-card h1 { font-size: 1.875rem; }
  .form-field input { background: var(--c-bg-card); }
}