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

// ============================================
// Section Spacing
// ============================================
// First section gets extra top padding to account for fixed navbar
// This keeps section backgrounds flush with navbar (no gap/line)
main {
  > section {
    padding-top: 4rem;
    padding-bottom: 4rem;

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

    // First section: add navbar height to top padding
    // Using :first-of-type so it works even if other elements (like banners) come before
    &:first-of-type {
      padding-top: 10rem; // 6rem navbar + 4rem section

      @media (min-width: 992px) {
        padding-top: 10.5rem; // 3.5rem navbar + 7rem section
      }
    }
  }
}

// ============================================
// 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 (pull section up behind navbar)
// Use this when you want the section to extend behind the transparent navbar
.section-breakout-top {
  margin-top: -6rem;
  padding-top: 10rem !important; // 6rem navbar + 4rem section

  @media (min-width: 992px) {
    margin-top: -3.5rem;
    padding-top: 10.5rem !important; // 3.5rem navbar + 7rem section
  }
}