/* ==========================================================================
   Member Login — /portals/member/ (templates/template-member-login.php)
   Figma 12514:7425. Spec: roadmap/phase-06-member-portal/artifacts/page-member-login-spec.md
   One page block, Section_Login 12514:7656. Inputs reuse .form-input (forms.css), the
   buttons reuse .btn--primary and .btn--link.btn--tangerine (buttons.css).
   Desktop-first: every media query is max-width and follows the desktop rules.
   ========================================================================== */

/* Block 3 — Section_Login. Figma stacks IMAGE, a white MULTIPLY fill (an identity, so not
   drawn) and a top-to-bottom navy gradient; the gradient is painted over the photo here. */
.member-login {
  padding: 112px 80px;                  /* Figma 12514:7657 pad T=112 R=80 B=112 L=80 */
  background-color: var(--color-navy);  /* shown until the photo loads */
  background-image:
    linear-gradient(180deg, rgba(11, 22, 40, 0.98) 0%, rgba(11, 22, 40, 0.75) 50%, rgba(11, 22, 40, 0.9) 100%), /* Figma 12514:7656 GRADIENT_LINEAR #0b1628 a=0.98@0, a=0.75@0.5, a=0.9@1, handles (0.5,0)->(0.5,1) */
    var(--member-login-image, none);    /* Figma 12514:7656 IMAGE scaleMode=FILL */
  background-position: center;
  background-size: cover;               /* Figma 12514:7656 scaleMode=FILL */
  background-repeat: no-repeat;
}

.member-login__inner {
  display: flex;
  gap: 64px;                            /* Figma 12514:7658 HORIZONTAL gap=64 */
  max-width: 1280px;                    /* Figma 12514:7658 w=1280 */
  margin: 0 auto;
}

/* Left column — heading pinned top, promo box pinned bottom. */
.member-login__intro {
  display: flex;
  flex: 1 1 calc(50% - 32px);           /* Figma 12514:7659 sizingH=FILL (608 of 1280 = half after the 64 gap); an exact basis, so nothing shrinks and the card's padding cannot tip the split */
  flex-direction: column;
  justify-content: space-between;       /* Figma 12514:7659 primary=SPACE_BETWEEN */
  gap: 8px;                             /* Figma 12514:7659 gap=8 */
  min-width: 0;
}

.member-login__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;                            /* Figma 12514:7660 gap=12 */
}

/* .h2 / .h3 carry the size, line-height and mobile step; the frame draws both lines Roman. */
.member-login__title {
  margin: 0;
  font-weight: var(--font-weight-normal); /* Figma 12514:7664 FrutigerLTStd-Roman 44/48.4 weight=400 */
  color: var(--color-white);            /* Figma 12514:7664 #ffffff */
}

.member-login__subtitle {
  margin: 0;
  font-weight: var(--font-weight-normal); /* Figma 12515:8196 FrutigerLTStd-Roman 36/43.2 weight=400 */
  letter-spacing: -0.01em;              /* Figma 12515:8196 LS=-0.36 on 36 */
  color: var(--color-tangerine);        /* Figma 12515:8196 #ff6600 */
}

.member-login__promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;              /* Figma 12515:8198 counter=MIN */
  gap: 8px;                             /* Figma 12515:8198 gap=8 */
  width: 429px;                         /* Figma 12515:8198 w=429 sizingH=FIXED */
  max-width: 100%;
  padding: 24px;                        /* Figma 12515:8198 pad 24 */
  background-color: var(--color-navy);  /* Figma 12515:8198 #0b1628 */
  border-radius: var(--radius-sm);      /* Figma 12515:8198 cornerRadius 4 */
}

.member-login__promo-title {
  margin: 0;
  font-size: 20px;                      /* Figma 12515:8199 FrutigerLTStd-Bold 20 */
  line-height: 1.3;                     /* Figma 12515:8199 LH 26 / 20 */
  font-weight: var(--font-weight-bold); /* Figma 12515:8199 weight=700 */
  letter-spacing: 0;
  color: var(--color-white);            /* Figma 12515:8199 #ffffff */
}

.member-login__promo-body {
  margin: 0;
  font-size: 16px;                      /* Figma 12515:8200 FrutigerLTStd-Roman 16 */
  line-height: 1.4;                     /* Figma 12515:8200 LH 22.4 / 16 */
  color: var(--color-white);            /* Figma 12515:8200 #ffffff */
}

/* Figma 10343:75217 Style=Link draws no underline and no block padding, unlike the .btn--link
   base; with the padding gone the arrow needs no optical shift either. */
.member-login__promo-link {
  --btn-optical-shift: 0px;
  padding: 0;                           /* Figma 12515:8202 pad 0, h=24 */
  border-width: 0;                      /* Figma 12515:8202 171x24 — the .btn base's 2px transparent border would add 4px each way */
  gap: 8px;                             /* Figma 12515:8202 gap=8 */
  line-height: 1.5;                     /* Figma I12515:8202;10343:75218 LH 24 / 16 */
  text-decoration: none;                /* Figma I12515:8202;10343:75218 no textDecoration */
  white-space: normal;
}

/* Right column — the white form card. */
.member-login__card {
  display: flex;
  flex: 1 1 calc(50% - 32px);           /* Figma 12515:8124 sizingH=FILL (608 of 1280); see .member-login__intro */
  flex-direction: column;
  justify-content: center;              /* Figma 12515:8124 primary=CENTER */
  align-items: center;                  /* Figma 12515:8124 counter=CENTER */
  min-width: 0;
  padding: 36px;                        /* Figma 12515:8124 pad 36 */
  background-color: var(--color-white); /* Figma 12515:8124 #ffffff */
  border-radius: var(--radius-sm);      /* Figma 12515:8124 cornerRadius 4 */
}

.member-login__card-content {
  display: flex;
  flex-direction: column;
  align-items: center;                  /* Figma 12514:8097 counter=CENTER */
  gap: 32px;                            /* Figma 12514:8097 gap=32 */
  width: 100%;                          /* Figma 12514:8097 sizingH=FILL */
}

.member-login__form-intro {
  width: 100%;
  max-width: 480px;                     /* Figma 12514:8098 w=480 */
  margin: 0;
  font-size: 18px;                      /* Figma 12514:8100 FrutigerLTStd-Roman 18 */
  line-height: 1.5;                     /* Figma 12514:8100 LH 27 / 18 */
  text-align: center;                   /* Figma 12514:8100 align=CENTER */
  color: var(--text);                   /* Figma 12514:8100 #03060c */
}

.member-login__form {
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 12514:8101 gap=24 */
  width: 100%;
  max-width: 480px;                     /* Figma 12514:8101 w=480 */
}

.member-login__field {
  display: flex;
  flex-direction: column;
  gap: 8px;                             /* Figma 12515:8132 gap=8 */
  padding-bottom: 16px;                 /* Figma 12515:8131 pad B=16 */
}

.member-login__label {
  font-size: 16px;                      /* Figma 12515:8133 FrutigerLTStd-Roman 16 */
  line-height: 1.4;                     /* Figma 12515:8133 LH 22.4 / 16 */
  font-weight: var(--font-weight-normal); /* Figma 12515:8133 weight=400 */
  color: var(--text);                   /* Figma 12515:8133 #03060c */
}

.member-login__label-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;       /* Figma 12514:8106 primary=SPACE_BETWEEN */
  align-items: flex-start;              /* Figma 12514:8106 counter=MIN */
}

.member-login__label-row .member-login__label {
  line-height: 1.5;                     /* Figma 12514:8107 LH 24 / 16 */
}

.member-login__forgot {
  font-size: 16px;                      /* Figma 12514:8108 FrutigerLTStd-Roman 16 */
  line-height: 1.5;                     /* Figma 12514:8108 LH 24 / 16 */
  color: var(--text);                   /* Figma 12514:8108 #03060c */
  text-decoration: underline;           /* Figma 12514:8108 textDecoration=UNDERLINE (raw JSON) */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.member-login__forgot:hover {
  color: var(--color-tangerine);        /* no hover frame; matches the .btn--link hover */
}

.member-login__forgot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.member-login__submit {
  width: 100%;                          /* Figma 12515:8192 sizingH=FILL in Buttons 12514:8111 w=480 */
}

/* Failed login. No Figma node — derived from the form tokens: dark tangerine on its
   lightest tint, the pair the input error state uses (forms.css). */
.member-login__notice {
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--color-tangerine-lightest);
  border: 1px solid var(--color-tangerine-dark);
  border-radius: var(--radius-xs);
}

.member-login__notice p {
  margin: 0;
}

.member-login__notice a {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================================
   Responsive — no mobile frame; derived per roadmap/mobile-derivation-catalog.md
   ========================================================================== */

@media (max-width: 768px) {
  .member-login {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50 */
  }

  .member-login__inner {
    flex-direction: column;             /* derived: 2 columns -> stacked, form card below */
    gap: 36px;                          /* derived: 64 -> Padding large mobile 36 */
  }

  .member-login__intro {
    gap: 36px;                          /* derived: SPACE_BETWEEN has no height to spread once stacked */
  }

  .member-login__promo {
    width: 100%;                        /* derived: the 429 cap drops in a single column */
  }

  .member-login__promo-title {
    font-size: 18px;                    /* Figma Variables mobile: H6 20 -> 18 */
  }

  .member-login__card {
    padding: 24px;                      /* Padding medium 36 -> 24 */
  }

  .member-login__form-intro {
    font-size: 16px;                    /* Figma Variables mobile: Text Medium 18 -> 16 */
  }
}