// Classy General Layout
// Standard spacing and layout rules

// ============================================
// Main Content Spacing
// ============================================
main {
  padding-top: 6rem;
  // padding-bottom: 2rem;

  @media (min-width: 992px) {
    padding-top: 3.5rem;
  }
}

// ============================================
// Section Spacing
// ============================================
main {
  > section {
    padding-top: 4rem;
    padding-bottom: 4rem;

    @media (min-width: 992px) {
      padding-top: 7rem;
      padding-bottom: 7rem;
    }
  }
}

// ============================================
// Section Breakout Utilities
// ============================================

// Horizontal breakout - full width (edge-to-edge)
.section-breakout-x {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

// Horizontal breakout - nearly full width (with padding on left/right)
.section-breakout-x-nearly {
  margin-left: calc(-50vw + 50% + 0.25rem);
  margin-right: calc(-50vw + 50% + 0.25rem);
  width: calc(100vw - 0.5rem);

  @media (min-width: 768px) {
    margin-left: calc(-50vw + 50% + 1rem);
    margin-right: calc(-50vw + 50% + 1rem);
    width: calc(100vw - 2rem);
  }

  @media (min-width: 1200px) {
    margin-left: calc(-50vw + 50% + 1.5rem);
    margin-right: calc(-50vw + 50% + 1.5rem);
    width: calc(100vw - 3rem);
  }
}

// Responsive breakout classes (Bootstrap-style breakpoints)
// Small and up (576px+)
@media (min-width: 576px) {
  .section-breakout-x-sm {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
  }
  .section-breakout-x-nearly-sm {
    margin-left: calc(-50vw + 50% + 0.25rem);
    margin-right: calc(-50vw + 50% + 0.25rem);
    width: calc(100vw - 0.5rem);
  }
}

// Medium and up (768px+)
@media (min-width: 768px) {
  .section-breakout-x-md {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
  }
  .section-breakout-x-nearly-md {
    margin-left: calc(-50vw + 50% + 1rem);
    margin-right: calc(-50vw + 50% + 1rem);
    width: calc(100vw - 2rem);
  }
}

// Large and up (992px+)
@media (min-width: 992px) {
  .section-breakout-x-lg {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
  }
  .section-breakout-x-nearly-lg {
    margin-left: calc(-50vw + 50% + 1rem);
    margin-right: calc(-50vw + 50% + 1rem);
    width: calc(100vw - 2rem);
  }
}

// Extra large and up (1200px+)
@media (min-width: 1200px) {
  .section-breakout-x-xl {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
  }
  .section-breakout-x-nearly-xl {
    margin-left: calc(-50vw + 50% + 1.5rem);
    margin-right: calc(-50vw + 50% + 1.5rem);
    width: calc(100vw - 3rem);
  }
}

// XXL and up (1400px+)
@media (min-width: 1400px) {
  .section-breakout-x-xxl {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
  }
  .section-breakout-x-nearly-xxl {
    margin-left: calc(-50vw + 50% + 1.5rem);
    margin-right: calc(-50vw + 50% + 1.5rem);
    width: calc(100vw - 3rem);
  }
}

// Vertical breakout - top (negative top margin to offset main padding of 6rem on mobile, 3.5rem on desktop)
.section-breakout-top {
  margin-top: -6rem;

  @media (min-width: 992px) {
    margin-top: -3.5rem;
  }
}