/* Login layout only — colours, type and form styles come from style.css */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

/* ---------- Art side: the print with the framed name ---------- */
.art { position: relative; overflow: hidden; min-height: 320px; }
.art > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
.name {
  position: absolute; top: 6%; left: 6%;
  height: min(52%, 470px); aspect-ratio: 240 / 600;
  filter: drop-shadow(0 14px 22px rgba(8, 14, 20, .45)) drop-shadow(0 2px 3px rgba(8, 14, 20, .3));
}

/* ---------- Form side ---------- */
.form-panel { display: grid; place-items: center; padding: 56px 24px; }
.login { width: 100%; max-width: 360px; display: grid; gap: 20px; }
.login header { margin-bottom: 8px; }
.login button.primary { margin-top: 6px; }
.login .flash { margin: 0; }

/* ---------- Phone: print on top, form below ---------- */
@media (max-width: 760px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: 46vh 1fr; }
  .name { height: 77%; top: 7%; left: 5%; }
  .form-panel { place-items: start center; padding: 36px 20px 72px; }
  .login h1 { font-size: 2rem; }
}