/* =====================================================
   ORGANIZATION LOGIN PAGE
===================================================== */

.organization-login-page {
  position: relative;

  width: min(
    calc(100% - (var(--phil-content-padding) * 2)),
    var(--phil-container-width)
  );

  min-height: 72vh;

  margin: 0 auto;

  padding:
    clamp(4rem, 8vw, 7rem)
    0
    clamp(6rem, 10vw, 9rem);

  color: var(--phil-white);
}


/* =====================================================
   LOGIN SHELL
===================================================== */

.organization-login-shell {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(340px, 460px);

  align-items: center;

  gap: clamp(3rem, 7vw, 7rem);
}


/* =====================================================
   INTRODUCTION
===================================================== */

.organization-login-introduction {
  min-width: 0;
}


.organization-login-eyebrow {
  margin: 0 0 0.65rem;

  color: var(--phil-pink);

  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.organization-login-introduction h1 {
  margin: 0;

  color: var(--phil-white);

  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.92;
}


.organization-login-introduction > p {
  max-width: 600px;

  margin: 1.5rem 0 0;

  color: var(--phil-white);

  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.55;
}


/* =====================================================
   LOGIN NOTE
===================================================== */

.organization-login-note {
  max-width: 580px;

  margin-top: 2.5rem;
  padding: 1.4rem 1.5rem;

  background: var(--phil-white-06);
  border: 1px solid var(--phil-white-25);
  border-radius: var(--phil-radius-medium);
}


.organization-login-note strong {
  display: block;

  margin-bottom: 0.4rem;

  color: var(--phil-pink);

  font-size: 0.95rem;
}


.organization-login-note p {
  margin: 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 0.9rem;
  line-height: 1.5;
}


/* =====================================================
   LOGIN CARD
===================================================== */

.organization-login-card {
  padding: clamp(1.75rem, 4vw, 2.75rem);

  color: var(--phil-white);

  background: var(--phil-white-08);
  border: 1px solid var(--phil-white-25);
  border-radius: var(--phil-radius-large);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px rgba(14, 12, 51, 0.26);
}


.organization-login-card-heading {
  margin-bottom: 1.75rem;
}


.organization-login-card-heading h2 {
  margin: 0;

  color: var(--phil-white);

  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
}


.organization-login-card-heading p {
  margin: 0.5rem 0 0;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.9rem;
}


/* =====================================================
   MESSAGES
===================================================== */

.organization-login-error,
.organization-login-success {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;

  color: var(--phil-white);

  border-radius: var(--phil-radius-small);

  font-size: 0.88rem;
  line-height: 1.45;
}


.organization-login-error {
  background: rgba(242, 130, 170, 0.16);
  border: 1px solid rgba(242, 130, 170, 0.7);
}


.organization-login-success {
  background: var(--phil-white-08);
  border: 1px solid var(--phil-white-40);
}


/* =====================================================
   FORM
===================================================== */

.organization-login-form {
  display: flex;
  flex-direction: column;

  gap: 1.25rem;
}


.organization-login-field label {
  display: block;

  margin-bottom: 0.55rem;

  color: var(--phil-white);

  font-size: 0.88rem;
  font-weight: 700;
}


.organization-login-field input {
  width: 100%;
  min-height: 54px;

  padding: 0 1rem;

  color: var(--phil-navy);
  background: var(--phil-white);

  border: 2px solid transparent;
  border-radius: 12px;

  font: inherit;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}


.organization-login-field input:hover {
  border-color: rgba(242, 130, 170, 0.65);
}


.organization-login-field input:focus {
  border-color: var(--phil-pink);
  outline: none;

  box-shadow:
    0 0 0 4px rgba(242, 130, 170, 0.2);
}


/* =====================================================
   PASSWORD FIELD
===================================================== */

.organization-login-password-wrapper {
  position: relative;
}


.organization-login-password-wrapper input {
  padding-right: 5rem;
}


.organization-login-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.65rem;

  min-width: 62px;
  min-height: 38px;

  padding: 0 0.7rem;

  color: var(--phil-navy);
  background: transparent;

  border: 0;
  border-radius: 999px;

  font-size: 0.78rem;
  font-weight: 800;

  cursor: pointer;

  transform: translateY(-50%);
}


.organization-login-password-toggle:hover {
  background: rgba(57, 44, 117, 0.1);
}


.organization-login-password-toggle:focus-visible {
  outline: 3px solid var(--phil-pink);
  outline-offset: 1px;
}


/* =====================================================
   SUBMIT BUTTON
===================================================== */

.organization-login-submit {
  display: inline-flex;

  width: 100%;
  min-height: 52px;

  align-items: center;
  justify-content: center;

  margin-top: 0.25rem;
  padding: 0.8rem 1.5rem;

  color: var(--phil-navy);
  background: var(--phil-pink);

  border: 2px solid var(--phil-pink);
  border-radius: 999px;

  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}


.organization-login-submit:hover {
  transform: translateY(-2px);

  background: var(--phil-white);
  border-color: var(--phil-white);
}


.organization-login-submit:focus-visible {
  outline: 3px solid var(--phil-pink);
  outline-offset: 4px;
}


/* =====================================================
   SUPPORT
===================================================== */

.organization-login-support {
  margin-top: 1.75rem;
  padding-top: 1.4rem;

  border-top: 1px solid var(--phil-white-18);

  text-align: center;
}


.organization-login-support p {
  margin: 0;

  color: rgba(255, 255, 255, 0.65);

  font-size: 0.8rem;
}


.organization-login-support a {
  display: inline-block;

  margin-top: 0.35rem;

  color: var(--phil-pink);

  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}


.organization-login-support a:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}


/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 850px) {

  .organization-login-shell {
    grid-template-columns: 1fr;
    gap: 3rem;
  }


  .organization-login-card {
    width: min(100%, 560px);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 680px) {

  .organization-login-page {
    width: min(
      calc(100% - 2rem),
      var(--phil-container-width)
    );

    padding-top: 3rem;
  }


  .organization-login-introduction h1 {
    font-size: 3.25rem;
  }


  .organization-login-card {
    padding: 1.5rem 1.25rem;

    border-radius: var(--phil-radius-medium);
  }

}