/* FGS Advisory — responsive rules.
 * The site is authored with inline styles for a desktop-first layout; these are
 * the explicit mobile breakpoints. Attribute selectors target the inline
 * declarations directly, so every section is covered without duplicating markup.
 * NB: React serialises inline styles with a space after the colon
 * ("position: sticky"), so selectors match that form.
 * Breakpoints: 1024 (small laptop) / 860 (tablet) / 720 (large phone) / 520 (phone).
 */

/* --- universal overflow guards --- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, iframe, video { max-width: 100%; }
a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }

/* --- 1024px: four-up grids become two-up --- */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- 900px: release sticky columns.
   A sticky sibling in a wrapped flex row overlaps the content that wraps
   beneath it, so sticky is desktop-only. --- */
@media (max-width: 900px) {
  [style*="position: sticky"] { position: static !important; top: auto !important; }
}

/* --- 860px: three-up grids become two-up --- */
@media (max-width: 860px) {
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- 720px: single column everywhere --- */
@media (max-width: 720px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* wrapped flex rows stack: every block child takes the full width instead of
     shrinking into squashed side-by-side columns */
  [style*="flex-wrap: wrap"] > div { flex-basis: 100% !important; }
  [style*="min-width:"] { min-width: 0 !important; }

  /* long tracked-out eyebrows must be allowed to wrap rather than run off-screen
     (icon SVGs use the distinct `flex: none` and are deliberately untouched) */
  [style*="flex: 0 0 auto"] { flex-shrink: 1 !important; min-width: 0 !important; }

  /* one mobile gutter for every section, header and footer included.
     Matches any inline horizontal padding of 32px, whatever the vertical value. */
  [style*="px 32px"], [style*="padding: clamp"], [style*="0px 32px"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* stacked link lists reach the 44px minimum touch target */
  [style*="flex-direction: column"] > a { padding-top: 12px !important; padding-bottom: 12px !important; }
  [style*="gap: 64px"], [style*="gap: 56px"] { gap: 36px !important; }

  /* the About us portrait band: image sits behind text on desktop, stacks on mobile */
  [style*="min-height: 440px"] { min-height: 0 !important; flex-direction: column !important; }
  [style*="min-height: 440px"] > img { position: static !important; width: 100% !important; height: 260px !important; }
  [style*="min-height: 440px"] > div[style*="linear-gradient(90deg"] { display: none !important; }
}

/* --- 520px: phone --- */
@media (max-width: 520px) {
  [style*="border-radius: var(--radius-xl)"] { border-radius: var(--radius-lg) !important; }
  [style*="border-radius: var(--radius-pill)"] { justify-content: center !important; }
}