/* Membership auth pages — sign in, register, password reset.
   Two-column layout matching cp-catapult: form on left, full-height image on right.
   Image hidden under 768px and gracefully falls back to a green gradient. */

.c-auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  background: #ffffff;
}

@media (min-width: 768px) {
  .c-auth {
    grid-template-columns: 1fr 1fr;
  }
}

.c-auth__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
  .c-auth__content {
    padding: 4rem 3rem;
  }
}

@media (min-width: 1140px) {
  .c-auth__content {
    padding: 4rem 5rem;
  }
}

.c-auth__inner {
  width: 100%;
  max-width: 480px;
}

.c-auth__heading {
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1rem;
  color: #2e2d2b;
}

.c-auth__step {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #006a52;
  margin: 0 0 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c-auth__progress {
  background: #ededee;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 1.5rem;
}

.c-auth__progress > span {
  display: block;
  background: #006a52;
  height: 100%;
  border-radius: inherit;
}

.c-auth__cross {
  margin: 0 0 2rem;
  font-size: 0.9375rem;
  color: #6b7280;
}

.c-auth__cross a,
.c-auth__alt a {
  color: #006a52;
  text-decoration: none;
  font-weight: 600;
}

.c-auth__cross a:hover,
.c-auth__alt a:hover {
  text-decoration: underline;
}

.c-auth__intro {
  color: #6b7280;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.c-auth__alt {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: #6b7280;
}

/* Right column image — gradient fallback, replace with a real image URL when available. */
.c-auth__image {
  background-image: url(https://cp-catapult.s3.amazonaws.com/uploads/2024/10/vr.jpg);
  background-size: cover;
  background-position: 48% 12%;
  background-attachment: scroll;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .c-auth__image {
    display: block;
  }
}

/* HubSpot-rendered form internals */

.c-auth .hs-form-field {
  margin-bottom: 1.25rem;
}

.c-auth .hs-form-field > label,
.c-auth label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: #2e2d2b;
  font-size: 0.9375rem;
}

.c-auth .hs-form-field > label .hs-form-required {
  color: #6b7280;
  font-weight: 400;
  margin-left: 0.25rem;
}

.c-auth .hs-input,
.c-auth input[type="email"],
.c-auth input[type="text"],
.c-auth input[type="password"],
.c-auth input[type="tel"],
.c-auth select,
.c-auth textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #ffffff;
  color: #2e2d2b;
}

.c-auth .hs-input:focus,
.c-auth input:focus,
.c-auth select:focus,
.c-auth textarea:focus {
  outline: none;
  border-color: #006a52;
  box-shadow: 0 0 0 2px rgba(0, 106, 82, 0.2);
}

/* Pill button with arrow icon — ported from cp-catapult _register.scss */
.c-auth .hs-button,
.c-auth button[type="submit"],
.c-auth input[type="submit"],
.c-auth .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 180px;
  padding: 0.75rem 3rem 0.75rem 1.5rem !important;
  margin-top: 1rem;
  background-color: #006a52;
  color: #ffffff;
  border: none;
  border-radius: 33px;
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 7.49931C0 7.23409 0.105357 6.97974 0.292893 6.7922C0.48043 6.60467 0.734784 6.49931 1 6.49931H12.586L8.292 2.20731C8.10423 2.01954 7.99874 1.76486 7.99874 1.49931C7.99874 1.23376 8.10423 0.979084 8.292 0.79131C8.47977 0.603537 8.73445 0.498047 9 0.498047C9.26555 0.498047 9.52023 0.603537 9.708 0.79131L15.708 6.79131C15.8011 6.8842 15.875 6.99455 15.9254 7.11604C15.9758 7.23753 16.0018 7.36777 16.0018 7.49931C16.0018 7.63084 15.9758 7.76109 15.9254 7.88258C15.875 8.00407 15.8011 8.11442 15.708 8.20731L9.708 14.2073C9.52023 14.3951 9.26555 14.5006 9 14.5006C8.73445 14.5006 8.47977 14.3951 8.292 14.2073C8.10423 14.0195 7.99874 13.7649 7.99874 13.4993C7.99874 13.2338 8.10423 12.9791 8.292 12.7913L12.586 8.49931H1C0.734784 8.49931 0.48043 8.39395 0.292893 8.20642C0.105357 8.01888 0 7.76453 0 7.49931Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: center right 1rem;
}

.c-auth .hs-button:hover,
.c-auth button[type="submit"]:hover,
.c-auth input[type="submit"]:hover {
  opacity: 0.9;
}

.c-auth .hs-error-msgs {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  color: #cf2e2e;
  font-size: 0.8125rem;
}

.c-auth .hs-error-msgs li {
  margin: 0;
}

.c-auth .hs-form-booleancheckbox label,
.c-auth .legal-consent-container label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
}

.c-auth .hs-form-booleancheckbox input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

/* "Forgot password" link rendered inside member_login */
.c-auth .hs-form a,
.c-auth a.hs-button-link {
  color: #006a52;
  font-weight: 600;
  text-decoration: none;
}

.c-auth .hs-form a:hover {
  text-decoration: underline;
}

/* Setup-needed warning shown when register form GUID isn't set */
.c-auth__setup-warning {
  padding: 1.25rem 1.5rem;
  background: #fff8e1;
  border-radius: 6px;
  border: 1px solid #ffd54f;
  color: #6b5a18;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.c-auth__setup-warning code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.875em;
}

/* Dashboard-style layout for /my-catapult landing page (uses c-auth shell but
   in single-column mode without the right-column image). */
.c-auth--dashboard {
  display: block;
  min-height: 0;
  background: #f6f1ef;
  padding: 4rem 1.5rem;
}

.c-auth--dashboard .c-auth__content {
  padding: 0;
  display: block;
}

.c-auth--dashboard .c-auth__inner {
  margin: 0 auto;
  max-width: 720px;
  background: #ffffff;
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.c-auth__cards {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.75rem;
}

.c-auth__cards a {
  display: block;
  padding: 1rem;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  text-decoration: none;
  color: #2e2d2b;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.c-auth__cards a:hover {
  border-color: #006a52;
  box-shadow: 0 2px 8px rgba(0, 106, 82, 0.12);
}