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

/* Generic two-column layout (backwards compatible CSS classes) */
.pp-two-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  gap: var(--Space-L);
}

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

/* Panel backgrounds and default paddings */
.pp-two-panel__left--bg-white {
  background: var(--Color-Primary-White);
}

.pp-two-panel__left--bg-neutral-100 {
  background: var(--Color-Primary-Neutral-100);
}

.pp-two-panel__right--bg-white {
  background: var(--Color-Primary-White);
  padding: var(--Space-M) var(--Space-XL) 0;
}

.pp-two-panel__right--bg-neutral-100 {
  background: var(--Color-Primary-Neutral-100);
  padding: var(--Space-M) var(--Space-XL) 0;
}

@media (min-width: 600px) {
  /* Tablet: stretch to full width, no max-width constraint */
  .pp-two-panel {
    max-width: 100%;
    flex-direction: column;
    gap: var(--Space-XL);
    padding-top: var(--Space-L);
    padding-left: 40px;
  }

  /* Tablet: ensure left section has padding from screen edge */
  .pp-two-panel > section.pp-two-panel__left {
    padding-left: var(--Space-XL);
  }

  /* Tablet: add padding-top to left white background panel */
  .pp-two-panel__left--bg-white {
    padding-top: var(--Space-M);
  }

  /* Optional variant: force side-by-side from tablet breakpoint */
  .pp-two-panel.pp-two-panel--tablet-row {
    flex-direction: row;
  }

  .pp-two-panel.pp-two-panel--tablet-row > section {
    padding-inline: 0;
    width: 50%;
  }
}

@media (min-width: 1240px) {
  .pp-two-panel {
    flex-direction: row;
    gap: calc(var(--Space-XL) + 60px);
    padding-top: var(--Space-M);
    padding-left: var(--Space-L);
    padding-right: var(--Space-L);
    overflow: visible; /* Allow section backgrounds to extend beyond container */
  }

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

  /* Balanced variant: 50/50 split */
  .pp-two-panel > section {
    width: 50%;
  }

  /* Wide-left variant: 60/40 split */
  .pp-two-panel--wide-left > .pp-two-panel__left {
    width: 60%;
  }

  .pp-two-panel--wide-left > .pp-two-panel__right {
    width: 40%;
  }

  /* Wide-right variant: 40/60 split */
  .pp-two-panel--wide-right > .pp-two-panel__left {
    width: 40%;
  }

  .pp-two-panel--wide-right > .pp-two-panel__right {
    width: 60%;
  }

  /* Reverse columns on desktop */
  .pp-two-panel--reverse {
    flex-direction: row-reverse;
  }

  .pp-two-panel > section:last-child {
    padding-right: 0;
    margin-right: 0;
  }

  /* Extend right section background to match navbar right edge (navbar 1584px vs container 1484px = 50px more) */
  .pp-two-panel > section.pp-two-panel__right--bg-white,
  .pp-two-panel > section.pp-two-panel__right--bg-neutral-100 {
    position: relative;
    overflow: visible;
  }

  .pp-two-panel > section.pp-two-panel__right--bg-white::after,
  .pp-two-panel > section.pp-two-panel__right--bg-neutral-100::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: calc(var(--Space-L) + 50px);
    background: inherit;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
  }
  
  /* Ensure all parent containers allow overflow */
  body,
  .body,
  .page,
  main.pp-two-panel {
    overflow-x: visible !important;
  }
}

/* Narrow desktop: add a little extra left breathing room for first section */
@media (min-width: 1240px) and (max-width: 1583px) {
  .pp-two-panel > section:first-child {
    padding-left: var(--Space-XL);
  }
}