/* Brenz — site-wide mobile overrides.
   The site's layout is written with inline styles tuned for desktop.
   This sheet collapses multi-column grids and tightens padding on
   phones. Include on every page, after brenz.css:
     <link rel="stylesheet" href="assets/brenz-mobile.css">
   The !important flags are required to beat inline styles. */

img, video { max-width: 100%; }

@media (max-width: 880px) {
  /* `overflow-x:hidden` on an ancestor can disable position:sticky in
     mobile browsers. `clip` prevents horizontal spill without creating
     a scrolling container, so the navigation remains visible. */
  html, body { overflow-x: clip; }
  .brenz-nav { position: sticky !important; top: 0 !important; }

  /* Tighten the big desktop gutters (sections use padding: Xpx 40px inline) */
  section[style], footer[style] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Collapse every inline multi-column grid to a single column... */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ...except wide stat/link rows, which read better as two columns */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Keep compact 3-button selector rows (estimator appetite/service) on one line */
  [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 10px"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* The nav bar's own grid (hamburger | logo | Order Now) must NEVER
     collapse — stacking it vertically inside the 72px bar pushed the
     logo off-center and spilled the Order button over the hero.
     This comes after the generic collapse rule so it wins. */
  .brenz-nav-inner {
    grid-template-columns: 1fr auto 1fr !important;
  }

  /* Big padded cards (e.g. the feedback form) */
  [style*="padding: 64px"] { padding: 24px !important; }

  /* Oversized grid gaps */
  [style*="gap: 60px"] { gap: 32px !important; }
  [style*="gap: 48px"] { gap: 28px !important; }
}

@media (max-width: 640px) {
  /* Reward tier cards are too dense for two columns on phones */
  .r-grid-4 { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  section[style], footer[style] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* Footer links stay readable between tablet and phone widths. */
@media (max-width: 980px) {
  .brenz-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 40px 28px !important;
    margin-bottom: 56px !important;
  }
}
@media (max-width: 560px) {
  .brenz-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}