/*
  Login page. Below 992px the photo fills the screen behind the sign-in card.
  The body class login--3c positions the coast photo (saved mirrored, so the
  ocean is on its right-hand side, next to the login).
*/

/* Dark teal, deepening to the right, to sit with the ocean in the photo. */
body {
  background: linear-gradient(90deg, #3d5c5e 0%, #2a4446 40%, #1a2e30 75%, #122224 100%);
  font-family: Arial, sans-serif;
}

.login-image img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: 75% center;
}

/* The card keeps its full 480px width; it only gets narrower when the screen
   itself is narrower than that (phones). */
.login-form-section {
  width: 480px;
  max-width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55) !important;  /* overrides Bootstrap .shadow */
}

/* Desktop focal points (≥992px, side-by-side split) */
/* 100% anchors the photo's right edge, the ocean, next to the login, with as
   much of it in view as the crop allows. */
.login--3c .login-image img { object-position: 100% center; }

/* Desktop (≥992px): photo on the left, login on the right. The login column is
   a third of the screen, but never narrower than the full card needs: 480px
   card + 2 x 16px card margin (mx-3) + 2 x 12px column padding = 536px. The
   photo takes the rest, so on narrower desktops the photo gives way, not the
   card. On wide screens the split is two-thirds / one-third.
   The photo is solid up to 65% of its width, then turns gradually transparent,
   reaching the dark teal page background exactly at its edge. The opacity is
   1 - smoothstep(t), sampled every 10% of that band: it starts and ends with
   no change of slope, so the eye sees no line in the fade (a straight fade, or
   one made of a few straight segments, shows a line where the slope changes). */
@media (min-width: 992px) {
  .row.w-100 > .login-image {
    --login-fade: linear-gradient(
      to right,
      rgba(0, 0, 0, 1)    65%,
      rgba(0, 0, 0, .972) 68.5%,
      rgba(0, 0, 0, .896) 72%,
      rgba(0, 0, 0, .784) 75.5%,
      rgba(0, 0, 0, .648) 79%,
      rgba(0, 0, 0, .5)   82.5%,
      rgba(0, 0, 0, .352) 86%,
      rgba(0, 0, 0, .216) 89.5%,
      rgba(0, 0, 0, .104) 93%,
      rgba(0, 0, 0, .028) 96.5%,
      rgba(0, 0, 0, 0)    100%
    );
    flex: 1 1 0;                        /* takes what the login column leaves */
    width: auto;                        /* overrides col-lg-7 / col-xl-8 */
    min-width: 0;
    -webkit-mask-image: var(--login-fade);
    mask-image: var(--login-fade);
  }

  .row.w-100 > .login-image + div {
    flex: 0 0 auto;
    width: max(100% / 3, 536px);        /* overrides col-lg-5 / col-xl-4 */
  }
}

/* ---------- Tablet + phone (<992px): photo full-bleed behind the card ---------- */
@media (max-width: 991.98px) {
  .login-image {
    display: block !important;          /* overrides d-none */
    position: fixed;
    width: 100% !important;             /* overrides col-md-6's 50% */
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .login-image img { height: 100%; object-position: center; }

  .row.w-100 { margin: 0; }
  .row.w-100 > .col-md-6:last-child {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    padding: 1.5rem 0;
  }

  .login-form-section {
    border-radius: .5rem !important;
  }

  .login--3c .login-image img { object-position: 65% center; }
}

/* ---------- Phone (<576px) ---------- */
@media (max-width: 575.98px) {
  .login-form-section { padding: 1.5rem !important; }
  .login-form-section .form-control,
  .login-form-section .btn { min-height: 44px; }   /* touch targets */

  .login--3c .login-image img { object-position: 70% center; }
}