/* Enlinka split-screen auth layout (login / registration / recovery /
 * verification / error / consent / logout). Left violet brand panel +
 * right form column. Below the tablet breakpoint the brand panel is
 * hidden and the form column fills the screen (the card carries the logo). */

.enlinka-auth {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

/* ------------------------------------------------------- Brand panel */
.enlinka-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 4rem;
  color: #ffffff;
  background:
    radial-gradient(
      120% 120% at 15% 10%,
      var(--enlinka-brand-from) 0%,
      var(--enlinka-brand-to) 70%
    ),
    var(--enlinka-brand-to);
}

/* soft decorative glow overlay */
.enlinka-brand-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      40% 40% at 85% 20%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      35% 35% at 10% 90%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0) 100%
    );
}

.enlinka-brand-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 26rem;
}

.enlinka-brand-mark {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.enlinka-brand-mark img {
  display: block;
}
.enlinka-brand-wordmark {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.enlinka-brand-eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  margin-bottom: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.enlinka-brand-title {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.enlinka-brand-subtitle {
  margin: 0.875rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.enlinka-brand-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
}
.enlinka-brand-points li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.enlinka-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.75rem;
  flex: 0 0 auto;
}

/* -------------------------------------------------------- Form column */
.enlinka-auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem 2.5rem;
  background-color: var(--ory-theme-background-canvas);
}

.enlinka-auth-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  width: 100%;
}

/* Enlinka branding footer (replaces "Protected by Ory") */
.enlinka-branding {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ory-theme-foreground-subtle);
}
.enlinka-branding img {
  display: block;
  opacity: 0.9;
}

/* ---------------------------------------------------------- Responsive */
/* Hide the brand panel on tablet/mobile; form column takes the full width.
 * The auth card already renders the Enlinka logo (cardImage), so the brand
 * is still present on the right. */
@media screen and (max-width: 64em) {
  .enlinka-auth {
    grid-template-columns: 1fr;
  }
  .enlinka-brand {
    display: none;
  }
}

/* Phone (<= 40em): go full-bleed. No card chrome — the form fills the whole
 * screen (full width + height) so it reads as the screen itself, not a card. */
@media screen and (max-width: 40em) {
  .enlinka-auth-body {
    padding: 0;
    /* match the card surface so there's no visible card edge */
    background-color: var(--ory-theme-background-surface);
  }
  .enlinka-auth-inner {
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh; /* account for mobile browser chrome */
    justify-content: center;
    gap: 2rem;
    padding: 2.5rem 1.5rem;
    box-sizing: border-box;
  }
  /* stretch the card to full width... */
  .enlinka-auth-body div[class*="ory_elements__card__"] {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* ...and strip its card appearance (border / radius / shadow / padding) */
  .enlinka-auth-body div[class*="ory_elements__card_size_"] {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
}