/* TwoColumnTemplate - SPACING CONTRACT: Side-by-side with gap control */
.two-column-layout {
  display: grid;
  margin: 0;
  height: 100%;
}

/* Column children fill available height */
.two-column-left,
.two-column-right {
  min-height: 0; /* Allow flex/grid children to shrink below content size */
}

.two-column-left > *,
.two-column-right > * {
  height: 100%;
}

/* Column ratios */
.two-column-layout.ratio-50-50 {
  grid-template-columns: 1fr 1fr;
}

.two-column-layout.ratio-40-60 {
  grid-template-columns: 40fr 60fr;
}

.two-column-layout.ratio-60-40 {
  grid-template-columns: 60fr 40fr;
}

.two-column-layout.ratio-30-70 {
  grid-template-columns: 30fr 70fr;
}

.two-column-layout.ratio-70-30 {
  grid-template-columns: 70fr 30fr;
}

/* Fixed left-column width (overrides ratio). Width is set via inline custom property. */
.two-column-layout.left-fixed {
  grid-template-columns: var(--two-column-left-width, 280px) 1fr;
}

/* Sticky left column. Top column aligns to start so the sticky element does not stretch. */
.two-column-layout.sticky-left {
  align-items: start;
}

.two-column-layout.sticky-left .two-column-left {
  position: sticky;
  top: var(--space-4);
}

.two-column-layout.sticky-left .two-column-left > * {
  height: auto;
}

/* Gap variants */
.two-column-layout.gap-sm {
  gap: var(--space-2);
}

.two-column-layout.gap-md {
  gap: var(--space-3);
}

.two-column-layout.gap-lg {
  gap: var(--space-5);
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .two-column-layout.stack-mobile {
    grid-template-columns: 1fr;
  }

  .two-column-layout.stack-mobile.left-fixed {
    grid-template-columns: 1fr;
  }

  .two-column-layout.sticky-left .two-column-left {
    position: static;
  }

  .two-column-layout.gap-md {
    gap: var(--space-3);
  }

  .two-column-layout.gap-lg {
    gap: var(--space-4);
  }
}