/* ---------- Split Layout Core ---------- */ :root { --split-handle-w: 14px; --map-w: 45%; --nav-h: 84px; } :root { --split-handle-bg: rgba(0,0,0,.04); --split-handle-bg-hover: rgba(0,0,0,.08); --split-handle-border: rgba(0,0,0,.18); --split-grip-bg: rgba(0,0,0,.45); --split-grip-shadow: rgba(0,0,0,.28); } /* Bootstrap 5 theme switcher typically sets this on */ :root[data-bs-theme="dark"] { --split-handle-bg: rgba(255,255,255,.08); --split-handle-bg-hover: rgba(255,255,255,.14); --split-handle-border: rgba(255,255,255,.22); --split-grip-bg: rgba(255,255,255,.60); --split-grip-shadow: rgba(255,255,255,.38); } /* Make sure grid is actually applied */ .split-layout { display: grid; grid-template-columns: var(--map-w) var(--split-handle-w) minmax(0, 1fr); width: 100%; /* IMPORTANT: allow page to scroll, don't trap it */ overflow: visible; } /* panes */ .map-pane, .listings-pane { min-width: 0; } /* Map stays sticky; page scrolls */ .map-pane { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow: hidden; } /* ONE SCROLLBAR: let the document scroll, not the pane */ .listings-pane { overflow: visible; /* <-- was auto */ padding: 0 1rem 1rem; } /* Leaflet fills its box */ #leafletMap { width: 100%; height: 100%; min-height: 300px; } .map-pane > * { width: 100%; height: 100%; } /* ---------- Handle (single definition) ---------- */ .split-handle { width: var(--split-handle-w); position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); align-self: start; z-index: 50; cursor: col-resize; display: flex; align-items: center; justify-content: center; user-select: none; touch-action: none; background: var(--split-handle-bg); border-left: 1px solid var(--split-handle-border); border-right: 1px solid var(--split-handle-border); } .split-handle:hover, .split-handle:focus-visible { background: var(--split-handle-bg-hover); outline: none; box-shadow: inset 0 0 0 1px var(--split-handle-border); } .split-grip { width: 4px; height: 46px; border-radius: 6px; background: var(--split-grip-bg); box-shadow: 0 -10px 0 var(--split-grip-shadow), 0 10px 0 var(--split-grip-shadow); } /* ---------- Listings columns logic ---------- */ .listings-pane.is-one-col #businessListContainer > * { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* Optional 3-col mode (only if you ever add it in JS) */ @media (min-width: 992px) { .listings-pane.is-three-col #businessListContainer > * { width: 33.3333% !important; flex: 0 0 33.3333% !important; max-width: 33.3333% !important; } } /* Sticky filters below navbar */ #stickyfilters.sticky-top { top: var(--nav-h) !important; z-index: 1020; background: var(--bs-body-bg); }