/* Responsive layout helpers for the UI kits.
   Inline styles can't express a breakpoint, so the two-column bands that must stack
   live here. Everything else (padding, card grids) is fluid via clamp()/auto-fit. */

/* Asymmetric two-column band: keeps its ratio while there's room, stacks when there isn't. */
.bnb-split{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
.bnb-split>*{min-width:0}
@media (min-width:900px){.bnb-split{grid-template-columns:var(--split, minmax(0,1fr) minmax(0,1fr))}}

/* Same, but aligned to the top — headings beside a list. */
.bnb-split-top{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
.bnb-split-top>*{min-width:0}
@media (min-width:900px){.bnb-split-top{grid-template-columns:var(--split, minmax(0,1fr) minmax(0,1fr))}}

/* Hide a purely decorative column on narrow screens rather than squashing it. */
@media (max-width:899px){.bnb-decor{display:none}}

/* Media inside a stacked column shouldn't keep a desktop-sized fixed height. */
@media (max-width:899px){.bnb-media{height:auto !important;aspect-ratio:4 / 3}}