/* ========================================================================== BMA Layout Containers, full-bleed and the shared grid helpers. ========================================================================== */ /* --- Section + container ------------------------------------------------ */ .bma-section { padding: var(--bma-section) 24px; max-width: var(--bma-maxw); margin-inline: auto; } .bma-section--tight { padding-block: 40px; } .bma-section--flush { padding-block: 0; } .bma-container { max-width: var(--bma-maxw); margin-inline: auto; padding-inline: 24px; } /* --- Full bleed --------------------------------------------------------- Replaces the old `body.page-id-73 ...` block. That hardcoded one page ID, so it broke on every other page and could not be reused. This is opt-in by class, works anywhere, and does not need !important because the child theme stylesheet loads after Astra's. Uses 100cqw-free math that avoids the classic 100vw scrollbar overflow: we clamp with max-width instead of forcing width:100vw. ------------------------------------------------------------------------ */ .bma-bleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* --- Grids -------------------------------------------------------------- Spec: repeat(auto-fit, minmax(200px, 1fr)) and min-width:0 on every child. The min-width:0 is the fix for grid/flex children refusing to shrink, which is what caused the mobile table and .brand-cards overflow. ------------------------------------------------------------------------ */ .bma-grid { display: grid; gap: var(--bma-gap); grid-template-columns: repeat(auto-fit, minmax(var(--bma-col-min), 1fr)); } .bma-grid > * { min-width: 0; } /* Column-count variants still auto-fit down; they only raise the floor so a 3-up grid does not become 5-up on a very wide screen. */ .bma-grid--2 { --bma-col-min: 300px; } .bma-grid--3 { --bma-col-min: 260px; } .bma-grid--4 { --bma-col-min: 200px; } /* Any flex row that contains text needs this for the same reason. */ .bma-row { display: flex; flex-wrap: wrap; gap: var(--bma-gap); } .bma-row > * { min-width: 0; } /* --- Horizontal scroll containment -------------------------------------- Wide tables and comparison grids scroll inside their own box instead of pushing the page sideways. This is what the old `overflow-x:hidden` on was crudely papering over. ------------------------------------------------------------------------ */ .bma-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .bma-scroll-x > table { min-width: 560px; }