/* ====================================================================
   SHARED TWO-PANE SHELL
   Purpose: define the reusable split-screen layout used by the public
   homepage and hosted auth pages.
   ==================================================================== */

/* 1. Top-level page shell */
body.site-shell-page {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--site-color-panel);
}

.auth-shell,
.site-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
}

/* 2. Left-side content workspace */
.auth-workspace,
.site-workspace {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 42px;
  background: var(--site-color-panel);
}

.auth-stage,
.site-stage {
  width: min(100%, 460px);
  display: flex;
}

/* 3. Right-side branded media panel */
.auth-visual-panel,
.site-visual-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-page-fallback);
}

.auth-visual-panel__video,
.site-visual-panel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1400ms ease;
}

.auth-visual-panel__video.is-visible,
.site-visual-panel__video.is-visible {
  opacity: 1;
}

.auth-visual-panel__logo,
.site-visual-panel__logo {
  position: relative;
  z-index: 1;
  width: min(44vw, 280px);
  max-width: 70%;
  height: auto;
}

/* 4. Responsive shell behavior */
@media (max-width: 980px) {
  .auth-shell,
  .site-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-workspace,
  .site-workspace {
    padding: 36px 26px 28px;
  }

  .auth-visual-panel,
  .site-visual-panel {
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  body.site-shell-page {
    overflow-y: auto;
  }

  .auth-stage,
  .site-stage {
    width: 100%;
  }

  .auth-visual-panel,
  .site-visual-panel {
    min-height: 200px;
  }

  .auth-visual-panel__logo,
  .site-visual-panel__logo {
    width: min(52vw, 208px);
  }
}

/* 5. Reduced motion handling */
@media (prefers-reduced-motion: reduce) {
  .auth-visual-panel__video,
  .site-visual-panel__video {
    display: none;
    transition: none;
  }
}