/* ==========================================================================
   LAYOUT: Auth (split-screen)
   Left: logo, headline, auth card. Right: full-bleed media panel.
   Used by login.php; built to be reusable if more auth pages are added.
   ========================================================================== */

.auth-page{
  display: flex;
  min-height: 100vh;
  background: var(--color-bg);
}

/* ---- Left: logo + form ---- */
.auth-left{
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-7);
}

.auth-topbar{
  flex-shrink: 0;
}

.auth-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6) 0;
}

.auth-headline{
  font-size: var(--text-3xl);
  max-width: 520px;
  margin: 0 auto var(--space-3);
}

.auth-subtitle{
  color: var(--color-text-muted);
  font-size: var(--text-md);
  margin: 0 auto var(--space-6);
  max-width: 420px;
}

.auth-card{
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.auth-card-footer{
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: var(--leading-normal);
}

/* ---- Right: media panel ---- */
.auth-right{
  flex: 1 1 46%;
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
  display: flex;
}

.auth-media{
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border);
}

.auth-media video,
.auth-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* Quiet placeholder shown behind/under the video until it loads,
   and permanently if the video source 404s — never a broken-media icon. */
.auth-media-fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  background: var(--color-bg-inset);
}

@media (max-width: 900px){
  .auth-right{
    display: none;
  }

  .auth-left{
    flex: 1 1 100%;
    padding: var(--space-5);
  }

  .auth-headline{
    font-size: var(--text-2xl);
  }
}