/* Sticky Sidecar Utility
   Pattern: On 2-column pages, the smaller/right column follows scroll.

   Usage:
   - Add `sticky-sidecar` to the element that should stick.
   - Optional: add `sticky-sidecar--viewport` when the sidecar should fill
     the viewport height (e.g., maps).
   - Configure offsets via CSS variables:
       --sticky-sidecar-top: 0px;
       --sticky-sidecar-bottom: 0px;
*/

.sticky-sidecar {
  position: sticky;
  top: var(--sticky-sidecar-top, 0px);
  /* Helps sticky behave consistently when the sidecar is a flex/grid item. */
  align-self: flex-start;
}

.sticky-sidecar--viewport {
  height: calc(100vh - var(--sticky-sidecar-top, 0px) - var(--sticky-sidecar-bottom, 0px));
}

/* Optional helper: apply to the sidecar's parent container so the sidecar can
   stop above the footer with a consistent bottom gap. */
.sticky-sidecar-parent {
  padding-bottom: var(--sticky-sidecar-bottom, 0px);
}

/* Sticky can break when `overflow-x: hidden` is applied on the root/body.
   Opt-in fix: only apply on pages that actually use `.sticky-sidecar`. */
@media (min-width: 744px) {
  :root:has(.sticky-sidecar) {
    overflow-x: clip;
  }

  body:has(.sticky-sidecar) {
    overflow-x: clip;
  }

  /* Fallback for browsers without `:has()` support:
     `public/js/sticky-sidecar.js` adds this class when a sticky sidecar exists. */
  :root.has-sticky-sidecar {
    overflow-x: clip;
  }

  body.has-sticky-sidecar {
    overflow-x: clip;
  }
}