/* ============================================================
   SIGN IN / MEMBERS PAGE
   ============================================================ */

/*
  Full-bleed split: white form column + navy panel to the right edge.
  Form content left edge matches .container (centered max-width + pad).
*/
.session-page {
  --session-form-w: 22.5rem;   /* room for the 340px form */
  --session-form-gap: 2.5rem;  /* space between form and navy */
  /* Same horizontal inset as centered .container (use vw so it inherits as an absolute length) */
  --session-inline-start: max(0px, calc((100vw - var(--container-max)) / 2));

  display: grid;
  grid-template-columns:
    calc(var(--session-inline-start) + var(--container-pad) + var(--session-form-w) + var(--session-form-gap))
    minmax(0, 1fr);
  width: 100%;
  min-height: calc(100dvh - var(--sticky-top, 4rem));
}

.session-page__form-col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3rem var(--session-form-gap) 3rem calc(var(--session-inline-start) + var(--container-pad));
  background: var(--white);
  border-right: 1px solid var(--border);
}

@media (min-width: 901px) {
  .session-page__form-col {
    position: sticky;
    top: var(--sticky-top, 4rem);
    align-self: start;
    min-height: calc(100dvh - var(--sticky-top, 4rem));
  }
}

.session-form {
  width: 100%;
  max-width: 340px;
}

.session-form__title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--navy-dark);
  margin-bottom: 0.4rem;
}

.session-form__sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.session-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.session-form__forgot {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.session-form__forgot a {
  color: var(--navy);
}

/* Subtle cross-link between the shared member password and per-account sign in.
   Temporary — goes away with MemberGate. */
.session-form__alt {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  text-align: center;
}

.session-form__alt a {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
}

.session-form__alt a:hover {
  color: var(--navy);
  text-decoration: underline;
}

.session-page__info-col {
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%);
  padding: 3.5rem clamp(1.75rem, 4vw, 4.5rem);
  display: flex;
  align-items: flex-start;
  /* Soft edge fade into the wider empty space on ultra-wide screens */
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06);
}

.session-membership {
  max-width: 36rem;
  width: 100%;
}

.session-membership__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.session-membership > p {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.session-membership__points {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.session-membership__point {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.session-membership__point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--gold-light);
}

.session-membership__point-icon .icon {
  color: inherit;
}

.session-membership__point strong {
  display: block;
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.session-membership__point p {
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
}

.session-membership__point a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.session-membership__point a:hover {
  color: var(--white);
}

.session-membership__cta {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.session-membership__cta h3 {
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.session-membership__cta p {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.session-membership__cta a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.session-membership__cta a:hover {
  color: var(--white);
}

.session-membership__cta ul {
  list-style: disc;
  margin-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.session-membership__cta ul li {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .session-page {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .session-page__form-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 2.5rem var(--container-pad);
    min-height: 0;
  }
  .session-page__info-col {
    padding: 2.5rem var(--container-pad);
  }
}