/* Responsive overrides for the desktop-first mockup pages.
   All page styling is inline and the dc-runtime re-serializes style
   attributes in normalized form ("prop: value; " with spaces, 0px, rgb()),
   so the attribute selectors below match that normalized text and need
   !important to beat inline styles. */

img { max-width: 100%; }

/* --- Header: tighten at laptop widths, stack on small screens --- */
@media (max-width: 1100px) {
  .mam-navbar[style] { gap: 16px !important; padding: 14px 20px !important; }
  .mam-nav[style] { gap: 18px !important; }
}

@media (max-width: 860px) {
  .mam-topbar[style] {
    padding: 8px 16px !important;
    justify-content: center !important;
    text-align: center;
  }
  .mam-navbar[style] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }
  .mam-navbar img { height: 44px !important; }
  .mam-nav[style] { gap: 4px 16px !important; justify-content: center !important; }
  .mam-ctas[style] { justify-content: center !important; }
}

/* --- Page content: single column, smaller type and padding --- */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  /* Collapse layout grids. Asymmetric splits (1.05fr 1fr, 1fr 1.4fr, the
     footer's 1.4fr 1fr 1fr 1.2fr) are always layout; symmetric ones too,
     except the Give page's segmented toggle (gap: 4px) and amount picker
     (gap: 10px), which stay compact like the mobile mockups. */
  [style*="grid-template-columns: 1."],
  [style*="grid-template-columns: 1fr 1."],
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="gap: 4px"]),
  [style*="grid-template-columns: repeat(3"]:not([style*="gap: 10px"]) {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Home hero: stack image under text, drop the angled clip decoration */
  [style*="clip-path: polygon(0px 0px, 14% 0px, 0px 100%)"] { display: none !important; }
  img[style*="clip-path"] { clip-path: none !important; }
  [style*="min-height: 480px"] { min-height: 240px !important; }

  /* Section padding scale-down (desktop uses 48px gutters) */
  [style*="padding: 88px 48px"],
  [style*="padding: 80px 48px"],
  [style*="padding: 72px 48px"] { padding: 44px 20px !important; }
  [style*="padding: 64px 48px"],
  [style*="padding: 56px 48px"] { padding: 36px 20px !important; }
  [style*="padding: 44px 48px"],
  [style*="padding: 40px 48px"],
  [style*="padding: 40px 44px"] { padding: 28px 20px !important; }
  [style*="padding: 8px 48px 88px"] { padding: 8px 20px 48px !important; }
  [style*="padding: 0px 48px"] { padding: 0 20px !important; }
  [style*="padding: 18px 48px"] { padding: 16px 20px !important; }
  [style*="gap: 48px"] { gap: 28px !important; }

  /* Type scale for headings */
  [style*="font-size: 52px"] { font-size: 32px !important; }
  [style*="font-size: 46px"],
  [style*="font-size: 44px"] { font-size: 29px !important; }
  [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size: 36px"] { font-size: 26px !important; }
  [style*="font-size: 34px"],
  [style*="font-size: 32px"] { font-size: 24px !important; }

  /* Space-between rows (section headers with a side link, CTA bands)
     must be allowed to wrap */
  [style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
  }

  /* Services page: keep the sticky section-tab bar on one scrollable row */
  nav[style*="position: sticky"] > div[style*="gap: 32px"] {
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  nav[style*="position: sticky"] a {
    white-space: nowrap;
    padding: 13px 0 !important;
  }

  /* In-page sticky sidebars (e.g. the "Do I qualify?" heading) make no
     sense once columns stack */
  [style*="position: sticky"][style*="top: 90px"] { position: static !important; }
}