/* MidPoint — responsive layer for the fixed-1440 page templates. SELECTOR RULE: React normalises inline styles before they reach the DOM attribute — `padding:120px 48px` is written out as `padding: 120px 48px`, and `0` becomes `0px`. Any `[style*="…"]` selector here MUST use that normalised spaced form or it silently matches nothing. Grid stacking does not use substring matching at all: site.js tags every inline grid with data-cols="N" and the rules below target that. Breakpoints: 1180 tablet · 1024 touch-nav · 767 phone. The 1024 value is duplicated as MQ in site.js — keep them in sync. */ html,body{max-width:100%} img,image-slot,video{max-width:100%} /* ---------------- TABLET (≤1180px) ---------------- */ @media (max-width:1180px){ body{overflow-x:hidden} /* A hardcoded px width from a direct edit must never out-size the viewport. */ section :not([data-fixed-width]),footer :not([data-fixed-width]){max-width:100%!important} /* Utility bar */ div[style*="padding: 12px 48px"]{flex-wrap:wrap!important;gap:6px 20px!important;padding:10px 20px!important;font-size:13px!important} /* Header shell + nav */ div[style*="padding: 0px 48px"]{padding:0 20px!important} div[style*="padding: 20px 32px"]{flex-wrap:wrap!important;gap:12px!important;padding:16px 20px!important;justify-content:center!important} nav{flex-wrap:wrap!important;justify-content:center!important;gap:2px!important} nav a{font-size:14px!important;padding:10px!important;min-height:44px!important;display:flex!important;align-items:center!important} /* Section gutters */ section,footer{padding-left:32px!important;padding-right:32px!important} /* Grid stacking by authored column count (data-cols from site.js) */ [data-cols="3"],[data-cols="4"],[data-cols="5"],[data-cols="6"]{grid-template-columns:repeat(2,minmax(0,1fr))!important} [data-cols="2"]{grid-template-columns:minmax(0,1fr)!important;gap:48px!important} h1{font-size:44px!important} h2{font-size:36px!important} /* Team bio modal: once the two-column layout stacks, the portrait column has no height cap and renders at its full intrinsic ratio, pushing the name and bio out of the modal's scroll viewport. Cap it so the text is visible on open. Matches both the compiled page (data-if) and the source template. */ [data-if="modalOpen"] img,[style*="max-width: 880px"] img{max-height:220px!important;object-fit:cover!important} [data-if="modalOpen"] [style*="min-height: 360px"],[style*="max-width: 880px"] [style*="min-height: 360px"]{min-height:0!important} } /* --------- TOUCH NAV (≤1024px: phones + every iPad size) --------- Above 767px the desktop nav still fits, but its Loan Programs dropdown is hover-driven and hover does not exist on a tablet — so the panel from site.js takes over for the whole touch range. */ @media (max-width:1024px){ nav:not(#mp-mnav-panel){display:none!important} #mp-mnav-panel a{min-height:52px} /* Reserve a gutter so the fixed 52px toggle cannot cover the utility bar. */ div[style*="padding: 12px 48px"]{padding-right:74px!important} } /* ---------------- MOBILE (≤767px) ---------------- */ @media (max-width:767px){ div[style*="padding: 12px 48px"]{justify-content:center!important;text-align:center!important;font-size:12px!important} div[style*="padding: 12px 48px"] > div{flex-wrap:wrap!important;justify-content:center!important;gap:4px 16px!important} /* Every tap target clears 44px */ /* a.mp-btn-card is here because the product cards' "Find Out More" controls were