/* =====================================================
   Buzz Sticky Scroll — Reusable Layout Component
   =====================================================
   A two-column layout where the left column sticks
   while the right column scrolls freely.

   Usage:
     <div class="buzz-sticky-scroll">
       <aside class="buzz-sticky-scroll__aside">
         ...sticky content (heading, stats, CTA)...
       </aside>
       <div class="buzz-sticky-scroll__main">
         ...scrollable content (cards, list, grid)...
       </div>
     </div>

   Customise proportions via CSS custom properties
   on the wrapper element:
     --bss-aside   left column width  (default 30%)
     --bss-gap     column gap         (default 3rem)
     --bss-top     sticky offset      (default 90px)

   Example override:
     <div class="buzz-sticky-scroll" style="--bss-aside:35%; --bss-gap:4rem;">
   ===================================================== */

.buzz-sticky-scroll {
  --bss-aside: 30%;
  --bss-gap:   3rem;
  --bss-top:   90px;   /* adjust to sit below your navbar */

  display: grid;
  grid-template-columns: var(--bss-aside) 1fr;
  gap: var(--bss-gap);
  align-items: start;
}

/* ---------- Sticky aside ---------- */
.buzz-sticky-scroll__aside {
  position: sticky;
  top: var(--bss-top);
  align-self: start;
}

/* ---------- Scrollable main ---------- */
.buzz-sticky-scroll__main {
  min-width: 0;   /* prevent grid blowout */
}

/* ---------- Mobile: stack vertically ---------- */
@media (max-width: 991px) {
  .buzz-sticky-scroll {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .buzz-sticky-scroll__aside {
    position: relative;
    top: auto;
  }
}