@import url("/css/design_v2/color.css");
@import url("/css/design_v2/standards.css");
@import url("/css/design_v2/breakpoints.css");

/* Page layout for signup v2 */
.pp-signup {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  gap: var(--Space-L);
  padding-top: var(--Space-L);
}

/* Mobile/Tablet: ensure equal horizontal padding for both sections */
.pp-signup > section {
  padding-inline: var(--Space-XL);
}

/* Child panels backgrounds */
.pp-signup > section:first-child {
  background: var(--Color-Primary-White);
  padding-top: var(--Space-M);
}

.pp-signup > section:last-child {
  background: var(--Color-Primary-Neutral-100);
  padding: var(--Space-M) var(--Space-XL) 0;
}

@media (min-width: 600px) {
  .pp-signup {
    max-width: var(--Container-Width-Tablet);
    flex-direction: column;
    gap: var(--Space-XL);
  }
}

@media (min-width: 1240px) {
  .pp-signup {
    max-width: var(--Container-Width-Desktop);
    flex-direction: row;
    gap: calc(var(--Space-XL) + 60px);
    padding-top: var(--Space-M);
  }

  /* Desktop: remove base horizontal padding to use column layout gutters */
  .pp-signup > section {
    padding-inline: 0;
  }

  .pp-signup > section {
    width: 50%;
  }

  .pp-signup > section:last-child {
    /* Desktop: extend background to match navbar max-width (1440px vs 1240px content) */
    /* Only extend the right side since this is the right column in the 2-column layout */
    padding-right: calc(var(--Space-XL) + 100px);
    margin-right: -100px;
  }
}