/* Staff sign-in. Adapted from Figma 442:5914 (Hotel Partner Login) — the
   Admin/Organizer set has no auth frame of its own.

   Colour values are tokens only: a hex outside eventkrowd_theme.css is a bug
   this project has a test for. The hero tint is the brand ramp at 50% over the
   photograph, which is how the design gets its blue wash. */

.sign-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: 100dvh;
}

.sign-in__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 4rem;
  background: var(--wa-color-surface-lowered);
}

.sign-in__logo {
  width: 220px;
  height: 55px;
  object-fit: contain;
}

.sign-in__intro {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sign-in__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wa-color-text-normal);
}

.sign-in__subtitle {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wa-color-text-quiet);
}

.sign-in__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 26rem;
}

/* Web Awesome controls are styled by attribute and custom property, never by a
   class reaching into the shadow root. Width is set on the host, which works. */
.sign-in__submit {
  width: 100%;
  margin-block-start: 0.5rem;
}

.sign-in__legal {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--wa-color-text-quiet);
}

.sign-in__legal-brand {
  color: var(--wa-color-text-link);
}

/* The design layers a photograph in `overlay` blend over a brand gradient, then
   tints the result. A single flat wash reads grey instead of blue, so the
   layers are kept separate: gradient on the element, photo on ::before in
   overlay, tint on ::after. */
.sign-in__hero {
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(
    circle at 50% 120%,
    var(--wa-color-brand-60),
    var(--wa-color-brand-40)
  );
}

.sign-in__hero::before,
.sign-in__hero::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sign-in__hero::before {
  /* ../ is load-bearing: Propshaft resolves url() relative to THIS file's own
     directory, so a bare "sign-in-hero.png" is looked up as
     layouts/sign-in-hero.png, silently left unrewritten, and 404s. Same class
     of trap as @import, which views.md already documents. */
  background-image: url("/assets/sign-in-hero-301c04e0.png");
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;
}

.sign-in__hero::after {
  background: var(--ek-color-sign-in-tint);
}

/* The photograph is decoration: below the fold it costs bandwidth and says
   nothing, so the panel takes the whole screen. */
@media (max-width: 60rem) {
  .sign-in {
    grid-template-columns: 1fr;
  }

  .sign-in__hero {
    display: none;
  }

  .sign-in__panel {
    padding: 2rem 1.5rem;
  }
}